てっしーの雑記

主に技術系のネタを

市ヶ谷Geek★Night #18 フロントエンド、マジ卍(#ichigayageek)に参加してきました

平日火曜日というにも関わらず長野から東京のフロントエンド系の勉強会に参加してきました(日帰りでの強行)

ichigayageek.connpass.com

参加した理由が自分が完全にフロント系に遅れているので情報のキャッチアップを目的にしたのと、取引先のエンジニアさんが「Clojureいいらしいですよー」「Elmいいよー」って言っていたのが気になったためです

簡単ではありますが、メモを掲載したいと思います
間違いがありましたらご指摘いただけると幸いです<( )>

前説

イベント名になっている「マジ卍」について説明 「フロントエンド、俺達はみんな友達」 → 「フロントエンド、ぁたしたちズッ友だょ」 → 「フロントエンド、マジ卍」 今回のイベント用に作られたステッカー 余ってしまうと破棄になってしまうとのことでせっかくなので3枚ほどいただきました f:id:chichi1091:20180627070639j:plain

さらに無料なのにお酒に食事までご用意いただきありがとうございます! お腹いっぱい頂いてしました💦 f:id:chichi1091:20180627070739j:plain

長野からの参加も紹介していただいちゃいました

React @4245Ryomt (Fringe81株式会社)

(スライドはまだ公開されていない様子)

「React×TypeScriptの魅力」

  • 自社サービスを生JavaScriptからTypeScriptに変えたお話
  • viewには型がないつらみ
  • 型のある世界とない世界
    • バージョンアップしていくと型のない世界が増えていく
    • Viewにも型がほしい→全世界をTypeScript化 
    • TypeScriptの恩恵
      • IDEのサポート
      • コードレビューのやりやすさ
      • 安定感→コンパイルが通れば基本動く
        • 仮に動かなくても怪しい箇所はすぐ見つかる
        • リファクタリングがいっぱいできる
        • 型のあるAltJSとReactで快適な気持ちのいいフロントエンドな開発

Vue.js @potato4d (フリーランス(ElevenBack))

speakerdeck.com

  • Vue.jsを進める情報はたくさんあるので罠だったことを話す
  • 明日は役に立たないけどいつかは役に立つ話
    • Vuew.jsは小規模向け?
      • そうでもないがちゃんと開発しようとするとコツが必要
      • PHPとよく似ている
      • 作っているときは快適にできるが雑にかけてしまう(爆発元)
  • 困った話
    • Vuesは不要?
      • 80%ぐらいは必要
      • 大きくなるアプリケーションにはVuexを入れておくことをおすすめする
      • SPAでもVuex、JS Obujectやストアパターンは必要
      • デザイナと一緒に仕事ができる
        • テンプレートエンジンにはなれているからやりやすい
        • テストを壊されるのでちゃんと治す
    • Webアプリに差し込みやすい
      • デリミタが簡単に変えられる
      • 状態管理がしやすい  
    • Vuew.jsを新規に選択する
      • SPA編
        • 読み書きする場合はVuexは入れておく
        • オレオレレイヤーになりそうなところはよその実装にする
    • SPAじゃない編
    • 素朴なストアパターンで実装
    • どっちみちJQueryが使いたくなる 
  • Vuew.jsは可燃性があるから注意してね

Angular 伊藤 康太 (ヤフー株式会社)

speakerdeck.com

  • エバンジェリストだけど会社名を出すとめんどくさい
  • なぜいまAngular
    • チームにJSが得な人がいなかった
    • デザイナも一緒に開発
    • Reactだとモジュールがたくさん増えてしまう
    • テンプレートがそのまま
    • 社内事例が少なかった
    • 社内のレアキャラになれる!
  • ここが良かった
    • アップデートが簡単
    • エディタフレンドリー(Javaユーザに優しい)
      • TypeScriptによる保管
      • Java勢が書ける
      • チーム開発の容易さ
      • フロントに興味ない人も書いてもらえる
  • ここがコツだよ

ClojureScript カマイルカ(@lagenorhynque) (株式会社オプト)

www.slideshare.net

Elm @ababupdownba (株式会社ビズリーチ)

speakerdeck.com

  • Elmはアットホームな雰囲気な言語
  • 再代入(再定義)は厳禁!
  • elseは必須
  • Union型 
  • Elmアーキテクチャは簡単
    • model,update,view
  • 値はなんでも比較できる
  • 関数も必ず値を返すからテストしやすい
  • イミュータブルはテストしやすい
  • プロティベーストテスティングができる(モテる)
  • JSの関数を呼ぶにはPortsで行ける
  • 正規表現は使わずにパーサコンビネータ

React @_hitima (仮)(株式会社メルカリ)

(スライドはまだ公開されていない様子)

  • なぜReactを選んだか
    • メルカリWebなそ7サービスで利用
  • 選定理由 *レガシーコードを払拭のため
  • 導入してよかったこと
    • エンジニアのモチベ向上
    • イミュータブルにで予測しやすい
  • 辛かったこと
    • React詳しい人がいなかったから手探り
  • 次は何を使いたいか
    • React+Resux+TSがメジャー
    • 必ずしもReactではなく気になるものをどんどん取り込んでいく
    • メルペイはVue.js

Vue.js @ktsn (株式会社オロ)

slides.com

  • 複雑なアニメーションをするためにはDOMを触る必要がある
    • Vue.jsだと破綻せずにやれた
    • 高さがスッとなるのがツライ
  • マークアップエンジニアとの協業
    • HTMLに書けることが重要
  • 闇に対する防衛術
    • HTMLを渡せるのよい
    • サーバは別会社など
  • ツライ点 気を抜くと秩序が崩壊 どこをVueでマウントしたかわからない *XSSには気をつけろ
  • 気軽にJSXで書ける

Angular @okunokentaro (株式会社ピクセルグリッド)

speakerdeck.com

  • なぜAngular?
    • AngulerJSのリプレイスだったから
  • なぜ小規模にしなかったのか
    • 設計、コードレビューなしでそれぞれ作った
  • 大規模開発の良かった点 *統一化設計を入念に行った
  • デメリット
    • ビルドが遅い、テストが遅い、CIが遅い
    • ビルドの速度で分割を検討

ClojureScript BOXP(@If_I_were_boxp) (株式会社エウレカ)

www.slideshare.net

  • 社内イベント管理で利用しているお話
  • Reagentとは
  • クロージャーはS式に発揮する

Elm @as_masa (Fringe81株式会社)

(スライドはまだ公開されていない様子)

  • Elmの魅力について
  • Elmとは
    • Webアプリをいい感じで作れるアットホームな言語(2回目)
  • Elmの魅力
    • Webフロントを安全に作れる
    • 学習コストが低い
  • 安全に作るための武器
    • コンパイラ
    • null/undefindがない
      • 実行例外になりやすいものがElmだとそもそもない イミュータブルにしかかけない 直接変えるのではなく変わった結果が帰ってくる
  • 学習コストが低い
  • Elmアーキテクチャ
    • Elmアプリケーションに沿って作る
    • 他のFWは存在しない→習得するとずっと使える
    • 覚える量がすくない
      • for,whileがない。繰り返しは再帰
      • Haskellに似てる?
      • 1,2日もあれば文法は一通り試せる
  • ElmでできないことはJSで行う
  • Elmでは直接JSを扱えない(安全のため) 
  • Elmの弱いところ
    • 導入事例が少ない

まとめ

メモ書きが中途半端ですみません。。
ClojureScriptとElmに興味があったのですが、「ClojureScript難しそう、Elm採用しやすそう」という印象を受けました
とはいえ、やってみないとわからないことが多いはずなのでまずは試していこうと思います
フロント系知識が乏しい自分には知らないことが多く、勉強不足を実感しました
いづれは登壇できるように頑張ろうと思う勉強会でした

スタッフの皆さま・スポンサーの皆さま、素晴らしいイベントお疲れ様でした
ありがとうございました

カマイルカさんのスライドが誤っていたので修正しました