市ヶ谷Geek★Night #18行ってきた

市ヶ谷Geek★Nightとは

株式会社オプトが主催するエンジニアのためのイベントで、1〜3ヶ月に1回くらい開催しています。
「面白くてタメになる」をモットーに、関数型言語、フロントエンド、クラウドサービスなどなど...様々なテーマに対して社内外から登壇者をお招きし、様々な技術の探求や、エンジニア同士の交流を行っています。

概要

市ヶ谷Geek★Night #18 フロントエンド、マジ卍
開催日：2018/06/26  19:30~22:30
場所：株式会社オプト
フロントエンドの以下のライブラリ/フレームワークについての勉強会
　・React
　・Vue.js
　・Angular
　・ClojureScript
　・Elm

センション一覧

React
　・React×TypeScriptの魅力
　・メルカリのReact技術選定
Vue.js
　・Vue.jsプロジェクトの爆発のさせかた
　・Webサイト制作におけるVue.js
Angular
　・Angularと私
　・大規模Angular in 現場
ClojureScript
　・ClojureScript: The Good Parts
　・Reagent&re-frameのすすめ
Elm
　・Elmはアットホームな雰囲気な言語です
　・Elmの魅力について

React×TypeScriptの魅力

講演者：@4245Ryomt
所属：Fringe81株式会社

TypeScript化した恩恵
　IDEのサポート
　　- propsの候補が出てくる
　　- コンパイルする前に、おかしいところが見える
　コードレビューの効率化
　　Componentのprops&stateからコードレビューを始めることができる
　安定感
　　- コンパイルが通れば、書いた通りに基本的には動く
　　- JSの時より、バグなど疑う場所がわかりやすい
　　- リファクタリングが用意　　　

メルカリのReact技術選定

講演者：@_hitima
所属：株式会社メルカリ

Reactを選んだ理由
　・エンジニアの成長機会の損失
　・単方向データフロー
　・コンポーネント単位で再利用したい
　・内製のOSSのメンテナーが不在
　・テストが無いなどレガシーである
嬉しいこと
　・エンジニアのモチベーション向上
　・参考情報が多い
　・テストしやすい
　・Immutableに書くことを意識すればとても良い
思ってたより辛いこと
　・選択肢が多いため、意思決定する回数が多い
　・ガベージコレクションが変でクラッシュする
　・フォーム系がだるい

Vue.jsプロジェクトの爆発のさせかた

講演者：@potato4d
所属：フリーランス（ElevenBack）

Vue.jsは本当に小規模向けなのか？
小規模向けというわけでは無いが、PHPと似ており、ちゃんと開発するにはコツが必要である。Vue.jsは自由であるため、雑に組むことが快適にでき、雑に組むと簡単にプロジェクトを爆発することができる。爆発しないプロジェクトにしようとすると極端に難しくなり、油断するとすぐに爆発してしまう。なのに、PHPほど困った話がネットにない。
Vuexがあってもなくてもいいのは本当？
80%嘘である。2016年ぐらいのプロジェクトで、Vuexを使わずにPure Objectを利用していたが、Objectを読み取れなくなったり、使われていない検証ができなかったため、結果的にVuexに移行することになってしまった。爆発させないためには、Vuexを利用しSingle source of truthにこだわらず、ローカルステートをうまく組み合わせよう。
デザイナと一緒に仕事できるって本当？
これは本当であるが、Node環境が構築できなかったり、Storybookのstoriesができなかったり、テストコードができなかったりするため、ここら辺を援助してあげれば大丈夫。

Webサイト制作におけるVue.js

講演者：@ktsn
所属：株式会社オロ

Vue.jsを選んだ理由
複雑なアニメーションをしなければならないが、複雑なアニメーションはDOMを触ってしまうのだが、破綻しないようにしなければならない。Vue.jsはcss-transitionをちょっと触るだけで、いい感じのアニメーションができるため。
Vue.jsの良かったこと
HTMLでかけることは重要で、カスタムタグ的なのを作っておけば、マークアップエンジニアとも協業することができる。jQueryかけない人でもなんとかなったり、Pugなどのプリプロセッサがすぐに使えることも利点である。闇の要件（HTMLは自社で更新します〜、xx社の組み込みHTMLを〜）はHTMLを前提にしているため、HTMLでかけるのはとても良い。
Vue.jsの悪かったこと
どこをVueでマウントしたかわからなくなったり、ゆるふわに書いているところが混ざったりと気を抜くと秩序が崩壊しがちである。Vue.js自体は型をつけることに前向きであるが、Vuex+TypeScriptで苦しんでる人しか見かけない。XSSにも気をつけるように。

Angularと私

講演者：伊藤 康太
所属：ヤフー株式会社

Angularを選んだ理由
チームにJavaScriptが得意な人が少なく、デザイナーも一緒に触るため、Reactだと今後のアップデートに対応できるか微妙だったため。加えて、社内でAngularの事例が少ないため、レアキャラになれると思った。
Angularの良かったこと
関連パッケージもバージョンアップと同じタイミングでされ、v2からv5まで一度も転けずにアップデートすることができた。しかも、AngularはTypeScriptのためIntelliJやVSCodeですぐに始めることができ、開発環境構築が容易なためJavaエンジニアも参加しやすい。フロントに興味のない人は、本当に興味がないため、チーム開発が容易になる。
Angular開発のコツ
Angular-cli、RxJS、Reduxを使うこと。@input@outputだけでもできるが、リファクタリングが大変になる。

大規模Angular in 現場

講演者：@okunokentaro
所属：株式会社ピクセルグリッド

Angularを選んだ理由
AngularJSアプリケーションのリプレースであり、そのアプリケーションを作成したスタッフがそのまま開発に参加することもあり、Angular v2を選んだ。AngularJS版の時点で50画面以上で、1画面内の機能も多く、設計やコードレビューという概念はなく、担当者が自分が思うように作成していたため、分解は難しく、超巨大なSPAを作るという方針にした。
大規模にして良かった点
大規模開発がすでに予測できていたため、均一に実装できるように設計を入念に行ったことにより、設計による大きな利点を得ることができた。
大規模にして後悔した点
ビルド、テスト、CIが遅くなってしまった。特にビルドの遅さは全スタッフの開発効率を著しく下げてしまう。
アドバイス
一度大規模に作ってしまうと後から分割するのは厳しく、大規模になるとわかっているなら大規模にならない対策をするべきであり、ビルドの速度は指標になる。例え、Angularは大規模が得意という意見があったとしても、大規模にすべきとは異なる。

ClojureScript: The Good Parts

講演者：カマイルカ（@lagenorhyngue)
所属：株式会社オプト

ClojureScriptとは
ClojureのコードをJavaScriptに吐き出すコンパイラであり、吐き出されたコードは、JavaScriptが動く世界なら、どこでも動かすことができる。

Reagent&re-frameのすすめ

講演者：BOXP（@If_I_were_boxp）
所属：株式会社エウレカ

Reagentとは
2013年に登場したClojureScript向けのReact.jsのラッパーでClojureのS式でレイアウトする。全てがClojureであるため最高である。
re-frameとは
2014年に登場したReagentの補助的なフレームワーク。アーキテクチャやデータフロー、ボイラーテンプレートを提供する。画面の描画など全てをリスト処理にすることができるため最高である。
全てがS式で書ける＝最強

Elmはアットホームな雰囲気な言語です

講演者：@ababupdownba
所属：株式会社ビズリーチ

Elmのアットホームなところ
変数に再代入することはできず、else式がナイトシンタックスエラーになり、Union Types網羅をしないとダメで、危険演算する場合はMaybeしないといけず、存在しない場合の場合分けを書かないといけない。
Elmの優しいところ
Elmアーキテクチャはバカでもわかりやすく、配列のオブジェクトがネストしてても比較することができ、関数も値を必ず返すため、テストがとてもしやすい。Property based Testingすることができ、文字列の場合、空など色々な文字列をたくさん生成してくれたりしてくれる。
JavaScriptの関数を呼び出せる
Elmの世界とJavaScriptの世界でやり取りすることができる。しかし、Elmは自分の世界を安全にするために、JavaScriptから不正な型がきたらスルーするようになっている。

Elmの魅力について

講演者：@as_masa
所属：Fringe81株式会社

Webフロントエンドを安全に作れる
Elmのコンパイラが型、文法、名前、重複をチェックし、JavaScriptに変換してくれるため、コンパイルができればアプリケーションが正しく動作し、実行時例外は発生しない。しかも、null/undefinedがなくimmutableにしか書けない。他にもTypeScriptに比べてコンパイラのエラーメッセージがわかりやすい。
学習コストが低い
Elmが提供するアプリケーションのシンプルなフローがあり、最適なFWとしてElmに組み込まれているため、一度習得するとずっと使える道具になる。加えて、for, Whileはなく表現力を限定しているため覚える文法の量が少ない。
Elmの弱いところ
求めすぎなければ完璧な言語であるが、強いていうなら導入事例が少ないことである。

所感

React、Angularに関しては、TypeScriptの良さについてのお話が多かった印象です。Vue.jsはHTMLを記述できる良さについて、ClojureScriptは関数型の良さ、ElmはElm自体が素晴らしいという話の印象です。

僕はVue.jsに興味があったこと、このイベントの時期に同期からElmをおすすめされ触ってみて興味が出ていたため、参加しました。このイベントを通して、TypeScript・Elmの良さがとても伝わりました。Elmの2人スピーカーは、とてもスライドの内容も面白く、Elmの良さも伝わりました。やはりその技術自体の価値も重要ですが、入りたいと思えるコミュニティも重要だと、僕は思うのでElmは時間ができたらもっと触りたいと思います！

会場については、株式会社オプトさんだったのですが、ヘルニアの僕でも座り心地は悪くなく、スライドも見やすかったです。会場の雰囲気も悪くなく、僕が一番嬉しかったのは、食事が最初から出てたことです。基本勉強会には、仕事帰りなどに行くのでお腹が空いていたり、次の日のことを考えると懇談会に参加できないこともあるので、最初に食事が出てくれるのはとても嬉しかったです。懇談会には参加しなかったのですが、最初に自分のconnpassアカウントの名刺を配ってくださり、そこに自分が使っているFWのシールを貼るなどもあったため、懇談会でもお話はしやすい雰囲気だったのではないかと思います。

宣伝

ITエンジニア向けの勉強会での記事を投稿しています。
興味がある方はフォローして頂けると嬉しいです。
Twitterもよろしくお願いします。@TTrpbm