UIT meetup vol.7 「集まれ!(タブン)実務では使わないフロントエンド芸発表会」を開催しました

7 月 24 日、 LINE株式会社ミライナオフィスにて、フロントエンドのコミュニティ「UIT」のミートアップ第 7 弾である、「UIT meetup vol.7 集まれ!(タブン)実務では使わないフロントエンド芸発表会」を開催しました。

UIT とは?

UIT は、 LINE のメンバーが中心となって発足した、「User Interface × Technology」を掲げるコミュニティです。
ユーザーの目に見える部分を技術で解決する開発者のための、実践的なコミュニティとして活動。JavaScript だけでなく、また、ユーザーインターフェースだけでもなく、多面的なテーマ設定が特徴となっています。
過去には BFF(Backend for Frontend) のような技術にフォーカスした勉強会や、「わたしたちにとってのVue.js」と題した様々な現場での Vue.js の事例など、トレンドを追いながらも地に足の着いた話が多い点も魅力の一つです。

当日の様子のご紹介

まずは乾杯からスタート。UIT meetup では、平日夜業務後らしく、お酒を飲みながらセッションを聞いていきます。
今回はフロントエンド芸発表回ということで、いつものセッションに加えて、フロントエンド芸の発表回も開催いたしました。
それぞれのコンテンツについて、当日の反響とスライドを添えてご紹介します。

UIT meetup 恒例オープニングクイズ

前回からスタートしたオープニングクイズ企画。前回に引き続き弊社川崎より出題、司会から引き継いで問題を解説します。

今回は「1 つの div と CSS 要素だけでどんな図形が作れるか?」という問題を出題しました。
フロントエンドエンジニアであれば CSS で丸や三角を作る機会は頻繁にありますが、ハートや星を作る機会はあまりないのではないでしょうか。
実は今回のクイズで登場したお題は全て CSS で作ることができるため、みなさんもぜひ挑戦してみてください。

セッションの様子

オープニングのあとはセッションです。

SVGでワードアート by hashrock さん

トップバッターは hashrock さん。

SVG 芸人として活動、 Vue Fes Japan 2019 のトップページの SVG アニメーション作成も手がける hashrock さんが、ワードアートを SVG で再現。Web 技術ならではの利点を活かし、動き、選択でき、回転し、編集できるワードアートの作り方を披露いただきました。
SVG 芸のはじめ方からベジェ曲線の仕組みの解説まで、キャッチーなテーマながらも奥深い内容が好評でした。

React.js と動くもの、鳴るもの by Leonardo

二つ目のセッションは弊社 より Leonardo が登壇。

今年 1 月に公開した React / Redux に Web GL と Web Audio を組み合わせた「Sound Walker」というアプリケーションの仕組みを解説するセッションです。
React / Redux 構成にどのように Web GL や Web Audio といった Web 標準の技術を組み合わせるかに主眼が置かれており、 React を利用しながら requestAnimationFrame を併用するコーディングテクニックや、 Web Audio における audioNode をいかに管理するなど、ハイパフォーマンスなビジュアル表現のためのコツが詰まったセッションとなりました。

本気でCSS芸やりたい人のためのbox-shadow講座 by ダーシノさん

最後のセッションは CSS フレームワーク NES.css の作者でもあるダーシノさんに、 box-shadow 講座を開講いただきました。


CSS でドット絵のフレームワークを開発するなかで必須となった box-shadow の高度な利用方法について解説。CSS 芸を行う際にネックとなるファイルサイズの肥大化やメンテナビリティの低下について、 CSS や SCSS の機能を存分に活かして解決する方法をご紹介いただきました。

フロントエンド芸発表会を開催!

セッションのあとは懇親回を兼ねつつフロントエンド芸の発表会を開催しました。

connpass で参加登録していただいたゲスト発表者 7 人加え、特別ゲストとして CSS PANIC で有名な GeckoTang さんにお越しいただき、 CSS PANIC の内部についての徹底解説をいただきました。

同時に UIT 運営スタッフで開発したフロントエンド芸のための Web アプリを配布しました。
来場者さんが「いいね!」と思ったフロントエンド芸の様子がリアルタイムで反映されるシステムによって、笑いあり学びありの LT 大会が開催されました

来場者の様子

おわりに

今回も盛況の中無事終えることができた UIT meetup ですが、既に次回のイベントを準備しております。

次回は UIT 単独 meetup を一度お休みし、 FRONTEND de KANPAI! とのコラボイベント「FROKAN × UIT #1」を9月27日に開催いたします。
UIT 初のコラボイベント、会場は DeNA 様のオフィスで開催いたします。

今回のミートアップで UIT を好きになってくださったかたも、この記事をみて興味をもってくださったかたも、是非お越しください。

https://frokan.connpass.com/event/137261/