UIT Meetup vol.11「フロントエンド紅白LT合戦」を開催しました

12月18日に、フロントエンドコミュニティ UIT の 11 回目となるミートアップ「フロントエンド紅白LT合戦」を開催しました。

今回の UIT meetup では、紅組としてUITのメンバー3名と、白組としてゲストスピーカー3名をお招きして、3つのテーマについて10分間ずつのLTを行っていただきました。

その後、視聴いただいた皆様に、2021年で使ってみたい技術は紅組白組どっち?という投票を行っていただくインタラクティブな会となりました。

UITとは?

UIT は、 LINE のメンバーが中心となって発足した、「User Interface × Technology」を掲げるコミュニティです。 ユーザーの目に見える部分を技術で解決する開発者のための、実践的なコミュニティとして活動。現在は UIT meetup の開催以外にも、Engineering Blog での記事の公開や、Podcast「UIT INSIDE」を配信しています。

過去にはVue.jsの最新情報をキャッチアップする「Vue三昧」、昨今のワークスタイルの変化とエンジニアとの関係について考える「The new normal for frontend」など、最新技術の情報から、技術以外のテーマまで幅広く取り扱っています。

LINE の東京オフィスのメンバーからはじまったコミュニティですが、外部コミュニティの方々との Podcast での交流、福岡でのミートアップ開催や、その他のフロントエンドイベントとの共催など、LINE に限らない枠組みでフロントエンドコミュニティの活発化を目的として活動しています。ぜひ、次回や過去イベントについてもこちらから確認してみてください。

https://uit.connpass.com

当日の様子

一回戦 「CSS in JS」

spring_raining 「Chakra UI」

UITのトップバッターとして、spring_rainingが Chakra UIについてLTさせていただきました。
昨今流行しているTailwind css の紹介と、Tailwind CSSに似た設計思想を持つCSSフレームワークとして、Chakra UI の紹介と比較を行いました。

takanoripさん 「Headless Components Design」

対する白組のトップバッターとして、takanoripさんに、Headless Components についてのLTをしていただきました。
スタイルがついていない、機能だけ持ったコンポーネントを作り、スタイルはTailwind cssのクラスを渡す、Headless UI を紹介いただきました。

https://docs.google.com/presentation/d/1L9HHn9_afWS7tWzWo57f0nznv-l1blNP6TeliHeXphg/edit#slide=id.gb1aacbe399_0_5

二回戦 「Static Site Generator」

isoken26 「選ばれたのは Next.jsでした – Next.jsによるServer Side OGP ⽣成」

紅組からは、isoken26 がLINE DEVELOPER DAY 2020のOGP生成にNext.jsを利用した事例を紹介させていただきました。
300パターンを超えるOPGをNext.jsのSSR機能を使うことで、期待通りに出し分けができた事例を披露させていただきました。

Junさん 「Build you a static site generator」

白組からは、Jun さんに Static Site Generatorを自作する事例を紹介していただきました。
一例として、ブログページを生成するコードを細かく解説していただきました。

三回戦 「Router Library」

uhyo_ 「Roconで実現する超型安全なルーティング」

紅組からは、uhyo_ が自作ライブラリであるRoconを使った型安全なルーティングについて紹介させていただきました。
既存のルーターを使った際の危険な箇所や、Stateの持ち方等問題点をどのように解決したかを詳しく説明させていただきました。

Hanaklaさん 「Reactルーター選定術 2020年のファイナルアンサー」

白組からは、 HanaklaさんにReactルーターの選定術について紹介していただきました。
SSRの必要の有無や、新規プロジェクトかどうか、等の条件からおすすめのルーティングライブラリのアドバイス、更には自作ライブラリを使ったルーティングの紹介をしていただきました。

イベントの様子

終わりに

多くの発表者の方が魅力的な発表をされていて、私自身今年トライしたい技術が多く、刺激的なイベントでした。最終的にどちらのチームが勝ったのかは、是非アーカイブでご確認ください。
発表いただいた皆様、またご視聴いただいた皆様ありがとうございました!

発表いただいた皆様からのメッセージも預かっておりますので、こちらに記載させていただきます。

spring_raining

勝ててよかったと思いつつ、takanoripさんが紹介したHeadless Componentのコンセプトもめちゃくちゃ良さそうで詳しく知りたくなりました。
UITは次の挑戦者を待っています!

isoken26

初めてのLT登壇でしかも対決形式でとても緊張しましたが、登壇する側としてもとても楽しいイベントでした!
他の方の発表もとてもおもしろかったです。
今回は負けてしまいましたが、次の機会があればパワーアップして帰ってきます!!

uhyo_

まさかの自作ライブラリ同士の対決となり驚きました。
考え方が違うところも同じところもあることが分かり、視聴者のみなさまはもちろん自分にとっても楽しめる対決でした。

takanoripさん

負けてしまったのは悔しいですが、皆さんに興味を持っていただけたようでとても嬉しいです。詳しい話をブログに書こうと思いつつまだできてないので来年がんばります!
どちらもtailwind css文脈の話題だったのが少し意外でしたが、Chakra UIはかなり便利な機能がたくさんあってエンジニア・デザイナーどちらの視点からもとても使いやすそうなライブラリだなと言う印象をうけました。
次にやるプロジェクトで使ってみたいなと思います! 対戦ありがとうございました!

Junさん

自作ネタが多くて見ていて楽しかったです。
自作は何かを理解する1番いい方法だと思いますので、皆さんも試して見てください

Hanaklaさん

「uhyoさんとルーターの話しませんか?」と呼び出された時は「寝かせてたルーターに”ケジメ”つけるとエモいな」と思い、腹をくくって””仕上げ””ました。
RoconについてAPIドキュメント以上の情報を初めて聞いたのですが、ウチとはまた違う地獄から生まれた経緯があり参考になりました。(froute@0.2.0に色々反映されるでしょう)
脳死ビリティは便利な言葉ですが、使いすぎると詰み選定を行ってしまうので脳死し過ぎないように気をつけて2021年をしのいでいきましょう。

PR

1/29(金)まで、「【LINE×Front-end】カジュアル面談イベント for フロントエンド開発センター」を開催しています。

https://line.connpass.com/event/199250/

LINE が提供するサービスのフロントエンド開発に興味がある方、フロントエンド開発センターならびに UIT コミュニティの業務に携わることに関心がある方はチェックしてみてください!