こんにちは、デザイナーの梅林です！

7月7日（金）に、ビズリーチのフロントエンドエンジニアによる「Front-end Beer Bash」を開催しました。
内容は、Angular、React、Vue.jsをテーマとしたLT（ライトニングトーク）やパネルディスカッションで、今回はそのイベントの様子をお届けしようと思います！

イベントレポート

当日は参加者の方も、運営側も缶ビールを片手に大変盛り上がりました！
タイムラインは下記となっております。

各サービスの最前線で戦っている下記の5名が登壇、パネラーを勤めさせて頂きました。

小枝（写真中央）：2014年にフロントエンドエンジニアとして入社。前職では大手広告代理店の業務を主とし、数千ページの実装を行ってきた経験を活かしてビズリーチのフロントエンドエンジニアリングを牽引。今回のFront-end Beer Bashの企画者。

西名（写真右端）：キャリトレ事業部エンジニア。iOS/Androidアプリ開発、フロントエンド開発、サーバサイド開発の経験を活かし、現在はキャリトレ開発チームの新規技術導入を主に担当。

浅井（写真左端）：大手のWeb企画・制作企業にて、ナショナルクライアントの大規模なWeb制作を行う。自社のサービス開発でのやりがいを求め2015年にビズリーチに参画。HRMOS事業部のフロントエンド開発を牽引している。

遠藤（写真左から2番目）：前職ではSPAフレームワークやGit-flowの導入を推進。2016年にビズリーチ参画し、ビズリーチプロダクトのフロントエンド開発を牽引

松岡（写真右から2番目）：2015年に株式会社ビズリーチに入社。現在は社内システムの新規開発プロジェクトにてアーキテクト兼スクラムマスターを担当。基本はサーバーサイドエンジニアだが、Vueを用いたSPAアーキテクチャを構築、開発中。

LT①：Vue.js（小枝）

LTの内容は、“いかにVue.jsが最高か”というVue.js愛！

今関わっているのは、コンサルタントチームの生産性を上げるためのプロダクトで、複雑ながらもスピードが求められるプロジェクトを支えてくれているのがVue.jsとのこと。

「TypeScriptの学習がほぼ必須なAngularと違って学習コストが高くなく、公式のCLIによるスターターキットが優秀で、昨今のトレンドであるコンポーネント指向で実装ができて、Redux、Fluxに負けないstate管理ができて、Vue.jsまじ最高！」（会場笑い）

デリバリーファーストでやりたいチームには向いているといった、実際に現場で使ってみての感想も交えた内容でした。

%3Cscript%20defer%3D%22%22%20class%3D%22speakerdeck-embed%22%20data-id%3D%2225bb883616a14fa9bf2b294f9ee75532%22%20data-ratio%3D%221.33333333333333%22%20src%3D%22%2F%2Fspeakerdeck.com%2Fassets%2Fembed.js%22%20s%3D%22%22%20tyle%3D%22width%3A%20560px%3B%20height%3A%20560px%22%3E%3C%2Fscript%3E

パネルディスカッション：各フレームワークの比較（全員）

テーマは「各フレームワークの比較」。

ーーどんなプロダクト規模にマッチしそう？
ーーフレームワークの仕様を比較したときに、どこが強み？
ーー型安全であるかどうかについては？
ーーどういうところが好き？

などなど、各フレームワークを比較した場合にどういった違いがあるとか、ここがいい！といった内容で、参加者の方も頷き笑いながらのセッションでした。

LT②：React（西名）

LTの内容は、“UIコンポーネントをどうやって抽象化するか”をReactのコンセプトも交えたものでした。

技術選定する際に導入障壁が比較的低いとされるVue.jsと迷ったそうなのですが、今の規模のフロントエンドを長期的にメンテナンスするならReactの方が良いと感じてReactを選択したそうです。

導入してみた結果、
・メンバーがコンポーネント指向で作れるようになった
・バックエンドとフロントエンドの責任範囲が明確になった
・CSSの影響範囲を絞れるようになったので、BEMやSMACSSをそこまで意識しなくてよくなった

などのメリットや、つまずきどころなど実践に基づくものでした。

%3Cscript%20defer%3D%22%22%20class%3D%22speakerdeck-embed%22%20data-id%3D%229352f3ed224c4794925a0a50699c723b%22%20data-ratio%3D%221.33333333333333%22%20src%3D%22%2F%2Fspeakerdeck.com%2Fassets%2Fembed.js%22%3E%3C%2Fscript%3E

パネルディスカッション：導入で難しかったこと&ビルドツール（全員）

テーマは「導入して難しかったこと＆ビルドツール」。

ーービルドツールは何を使ってる？npm? Gulp? webpack？
ーーカスタマイズをしようとして困ったことは？
ーーアセット（画像）とかどうしてる？
ーー結局公式のCLIが一番いいよね？

などなど、導入時につまづいた点や迷った点、「こんな使い方をしているよ」といった、主に開発者目線の内容でした。参加者に質問するなど、パネラーも楽しませて頂きました！

LT③：Angular（浅井）

LTの内容は、“Angularのいいところ”について。

・Web アプリケーションの開発に必要なパッケージが 「モジュール」という単位で標準で用意されているAll-in-oneであること
・Webブラウザのみならずサーバーサイドやモバイルネイティブアプリも構築できること
・公式サイトのドキュメントが丁寧であること

など、実際に使ってみて感じたメリットが中心の話となりました。

現在業務では、AngularJS（バージョン1）からAngular（バージョン4）へのバージョンアップを行っているところで、コンポーネント指向であることを踏まえ、Atomic Components という概念を用いて移行に挑戦しているとのこと。

%3Cscript%20defer%3D%22%22%20class%3D%22speakerdeck-embed%22%20data-id%3D%22b720805c537941d88a744987ed33641d%22%20data-ratio%3D%221.77777777777778%22%20src%3D%22%2F%2Fspeakerdeck.com%2Fassets%2Fembed.js%22%3E%3C%2Fscript%3E

参加者の声

参加者の方にお話伺ったのですが、「フロントエンドエンジニアが職場に1人しかおらず、他の人がどんなフレームワークを選んで、どんな使い方してるのかを知りたくて参加しました」という方がいらっしゃいました。
イベントの感想を伺ったところ、「フロントエンドは本当に変化が激しく、1人のインプット量には限界があるので、新しい技術の動向についての情報交換をしていかないとついていけなくなりますね。今日は自分が触っていないフレームワークの話が聞けて参考になりました」と仰っていました。

アンケートでは、

「ちょうど社内で3つのフレームワークについて比較、検討していたので、とても参考になりました」
「肩肘張らずに参加できる雰囲気でとても楽しめました！今後も同様に開かれるのであれば、また来たいと思えました」
「これからフロントエンドについて学ぶところなのですが、とても勉強になりました。スタッフの方の気配りが素敵でした」
「和やかな雰囲気で色々な話を聞けて、有意義な時間が過ごせました」
「Angular、React、Vue.jsのメリット、デメリットが知りたかったので非常に勉強になりました。参加者の方とも有益な情報交換ができて最高でした！」

など、様々なお声を頂くと同時に、主催者側もたくさんの方とお話ができた有意義な場となりました。

Front-end Beer Bashを開催したワケ

なぜこのイベントを開催しようと思ったのか、企画したフロントエンドエンジニアの小枝に話を聞いてみました。

ーーなぜこのイベントを開催しようと思ったのですか？

最初は個人で社内のAngular勉強会やHTML勉強会を行っていたのですが、社内ではデザイナー、エンジニア関係なくフロントエンドに興味のある方が多くて、『ここまで興味が持たれるのであれば、いっそのこと自社外に発信した方が良いのでは？』と考えたのがきっかけです。

特に昨今のフロントエンド界隈はかなり流動的で、ビズリーチではAngular、React、Vue.jsを積極的に使っているので、そのナレッジを発信してフロントエンド業界に貢献したいと思っていました。

あとは単純に、お酒を飲みながらみんなでわいわいフロントエンドの話がしたかったんです（笑）

ーー技術系イベントではあまりみないコンテンツですね！

技術系のイベントでも、なるべく発信者がただ喋るだけではなく、ご来場いただいたお客様に楽しんでいただきたい、という思いが強かったです。

自分自身、勉強会に参加する度に「楽しかった！」「ちょっと微妙だった…」といったムラを強く感じていて、それを払拭できる方法はないかと考えました。

その結果、Angular、React、Vue.jsでそれぞれLTを1本ずつ、パネルディスカッションが2セクション、そして各プログラムの間に入るフリータイムが2回という構成になりました。

フリータイムを設けた理由はただお喋りしたいという目的もあったのですが、多くの勉強会ではLTの後の質問コーナーは積極的な質問者様がごく少数質問をする、といった構図になることが多いので、「ちょっと質問したかったけどあまりみんなの前で聞くようなことでもないな……」みたいに遠慮してしまうお客様の助けになりたかった、という思いもあります。

どんなレイヤーの方が参加しても楽しんでいただけるイベントを、とにかく目指しました。

ーー他にこだわったポイントはありますか？

たくさんの方に「ビズリーチが本気でフロントエンドのイベントをやっている」と知ってもらいたかったので、LPもこだわりました。

キャリトレ事業のデザイナーに依頼して、全面的にデザインもコーディングもお任せしたのですが、かっこいいものが出来上がって大満足です！

ビズリーチには多様な才能、能力を持ったデザイナーが多く在籍しているので、社内イベントのプロモーションにも、いつも力を入れているんです。

ーーイベントを終えてみていかがですか？

3つのフレームワークを題材にすると話題が分散してしまい、満足度を下げる要因にならないか少し不安ではありましたし、そういったご意見もいくつかいただきました。
しかし、終えてみると満足度が高いと多くの方にフィードバックをいただきましたので、ホッとしています。

今回の題材は企業によって導入障壁の高いものではありましたが、意外と簡単であることが伝わり、少しでもビズリーチのフロントエンドエンジニアがフロントエンド界を盛り上げられたことも、大変嬉しく思います。

イベント形式はお客様と登壇者の距離に主眼を置いていたため、その点をご評価いただき、今後更にコミュニケーションを主軸としたイベントを開催するモチベーションとなりました。
本当にありがたく、感無量です！

ーーお疲れ様でした！

さいごに

第一回となる「Front-end Beer Bash」のレポートをお伝えしました。
当日は金曜日で七夕でお酒もあって、とても盛り上がったイベントになりました！

今後も定期的に開催して参りますので、
お酒を飲みながらフロントエンドの話がしたい、他社はどんなフレームワーク使っているのか？今のトレンドは？など、
フロントエンドエンジニアの情報交換や交流の場となっていければと思います。
みなさまのご参加をお待ちしております！