市ヶ谷Geek★Night #18 フロントエンド、マジ卍(#ichigayageek)に参加してきました
平日火曜日というにも関わらず長野から東京のフロントエンド系の勉強会に参加してきました（日帰りでの強行）
参加した理由が自分が完全にフロント系に遅れているので情報のキャッチアップを目的にしたのと、取引先のエンジニアさんが「Clojureいいらしいですよー」「Elmいいよー」って言っていたのが気になったためです
簡単ではありますが、メモを掲載したいと思います
間違いがありましたらご指摘いただけると幸いです<( )>
前説
イベント名になっている「マジ卍」について説明
「フロントエンド、俺達はみんな友達」 → 「フロントエンド、ぁたしたちズッ友だょ」 → 「フロントエンド、マジ卍」
今回のイベント用に作られたステッカー
余ってしまうと破棄になってしまうとのことでせっかくなので3枚ほどいただきました
さらに無料なのにお酒に食事までご用意いただきありがとうございます！
お腹いっぱい頂いてしました💦
長野からの参加も紹介していただいちゃいました
長野から…！！
— オプトテクノロジーズ (@OptTechnologies) 2018年6月26日
ありがとうございます！！#ichigayageek https://t.co/sRJwHx8kzp
React @4245Ryomt (Fringe81株式会社)
（スライドはまだ公開されていない様子）
「React×TypeScriptの魅力」
- 自社サービスを生JavaScriptからTypeScriptに変えたお話
- viewには型がないつらみ
- 型のある世界とない世界
Vue.js @potato4d (フリーランス(ElevenBack))
- Vue.jsを進める情報はたくさんあるので罠だったことを話す
- 明日は役に立たないけどいつかは役に立つ話
- Vuew.jsは小規模向け？
- そうでもないがちゃんと開発しようとするとコツが必要
- PHPとよく似ている
- 作っているときは快適にできるが雑にかけてしまう（爆発元）
- Vuew.jsは小規模向け？
- 困った話
- Vuesは不要？
- 80％ぐらいは必要
- 大きくなるアプリケーションにはVuexを入れておくことをおすすめする
- SPAでもVuex、JS Obujectやストアパターンは必要
- デザイナと一緒に仕事ができる
- テンプレートエンジンにはなれているからやりやすい
- テストを壊されるのでちゃんと治す
- Webアプリに差し込みやすい
- デリミタが簡単に変えられる
- 状態管理がしやすい
- Vuew.jsを新規に選択する
- SPA編
- 読み書きする場合はVuexは入れておく
- オレオレレイヤーになりそうなところはよその実装にする
- SPA編
- SPAじゃない編
- 素朴なストアパターンで実装
- どっちみちJQueryが使いたくなる
- Vuesは不要？
- Vuew.jsは可燃性があるから注意してね
Angular 伊藤 康太 (ヤフー株式会社)
- エバンジェリストだけど会社名を出すとめんどくさい
- なぜいまAngular
- チームにJSが得な人がいなかった
- デザイナも一緒に開発
- Reactだとモジュールがたくさん増えてしまう
- テンプレートがそのまま
- 社内事例が少なかった
- 社内のレアキャラになれる！
- ここが良かった
- ここがコツだよ
ClojureScript カマイルカ(@lagenorhynque) (株式会社オプト)
www.slideshare.net
- clojurespec
- Lisp×JavaScript
- JavaScriptよりLispの話がメイン
- CloujerCLRというのもある
- SPA系で使われる
- JSで動く世界なら基本動く
- GoodParts
- Lispは何よりもシンプル
- 関数型プログラミング
Elm @ababupdownba (株式会社ビズリーチ)
- Elmはアットホームな雰囲気な言語
- 再代入(再定義)は厳禁！
- elseは必須
- Union型
- Elmアーキテクチャは簡単
- model,update,view
- 値はなんでも比較できる
- 関数も必ず値を返すからテストしやすい
- イミュータブルはテストしやすい
- プロティベーストテスティングができる（モテる）
- JSの関数を呼ぶにはPortsで行ける
- 正規表現は使わずにパーサコンビネーター
React @_hitima (仮)(株式会社メルカリ)
（スライドはまだ公開されていない様子）
- なぜReactを選んだか
- メルカリWebなそ7サービスで利用
- 選定理由
*レガシーコードを払拭のため
- コンポーネント単位で再利用
- 古いJSでテストコードがない、事故が怖い
- 導入してよかったこと
- エンジニアのモチベ向上
- イミュータブルにで予測しやすい
- 辛かったこと
- React詳しい人がいなかったから手探り
- 次は何を使いたいか
- React＋Resux＋TSがメジャー
- 必ずしもReactではなく気になるものをどんどん取り込んでいく
- メルペイはVue.js
Vue.js @ktsn (株式会社オロ)
- 複雑なアニメーションをするためにはDOMを触る必要がある
- Vue.jsだと破綻せずにやれた
- 高さがスッとなるのがツライ
- マークアップエンジニアとの協業
- HTMLに書けることが重要
- 闇に対する防衛術
- HTMLを渡せるのよい
- サーバは別会社など
- ツライ点 気を抜くと秩序が崩壊 どこをVueでマウントしたかわからない *XSSには気をつけろ
- 気軽にJSXで書ける
Angular @okunokentaro (株式会社ピクセルグリッド)
- なぜAngular？
- AngulerJSのリプレイスだったから
- なぜ小規模にしなかったのか
- 設計、コードレビューなしでそれぞれ作った
- 大規模開発の良かった点 *統一化設計を入念に行った
- デメリット
- ビルドが遅い、テストが遅い、CIが遅い
- ビルドの速度で分割を検討
ClojureScript BOXP(@If_I_were_boxp) (株式会社エウレカ)
www.slideshare.net
Elm @as_masa (Fringe81株式会社)
（スライドはまだ公開されていない様子）
- Elmの魅力について
- Elmとは
- Webアプリをいい感じで作れるアットホームな言語(2回目)
- Elmの魅力
- Webフロントを安全に作れる
- 学習コストが低い
- 安全に作るための武器
- 学習コストが低い
- Elmアーキテクチャ
- ElmでできないことはJSで行う
- Elmでは直接JSを扱えない（安全のため）
- Elmの弱いところ
- 導入事例が少ない
まとめ
メモ書きが中途半端ですみません。。
ClojureScriptとElmに興味があったのですが、「ClojureScript難しそう、Elm採用しやすそう」という印象を受けました
とはいえ、やってみないとわからないことが多いはずなのでまずは試していこうと思います
フロント系知識が乏しい自分には知らないことが多く、勉強不足を実感しました
いづれは登壇できるように頑張ろうと思う勉強会でした
スタッフの皆さま・スポンサーの皆さま、素晴らしいイベントお疲れ様でした
ありがとうございました
※カマイルカさんのスライドが誤っていたので修正しました
