Skip to content

Instantly share code, notes, and snippets.

@Nkzn

Nkzn/ReactOverview2020.md Secret

Last active July 16, 2020 03:33
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Nkzn/5b2cdf07ebcc909dc6dd7795d64a4a4e to your computer and use it in GitHub Desktop.
Save Nkzn/5b2cdf07ebcc909dc6dd7795d64a4a4e to your computer and use it in GitHub Desktop.
Download ZIP
Reactセミナー＠MF京都での講義メモ
Raw
ReactOverview2020.md

React Overview 2020

2020.7.16 Nkzn

自己紹介 兼 アイスブレイク

  • 中川 幸哉 / Yukiya Nakagawa
  • Nkzn / なかざん

新潟の人です

  • 京都とあまり関わりがないように見えますが、天皇家・公家の流刑地として人気の佐渡島がある関係で、佐渡島には京都由来の文化やなまりが今でも残っています
  • ところで新潟県はラーメン激戦区です
    • 私もラーメンが好きです
    • 自宅の近所に第一旭の暖簾分けがあり、ラーメン好きとしては大変お世話になっております
    • 今回も本当は京都に行ってラーメンを食べたかった
    • 本当に食べたかった

私のスキルについて

  • 今日は個人事業主として来ましたが、普段はウォーターセル株式会社で農業支援システムのアグリノートというのを作ってます
    • 京都の九条ネギ農家さんにも熱心なユーザーさんがいたりします
  • Android担当をするために入社した創業メンバーです
  • サブシステムや派生システムでクライアントを全方位対応する内にJS方面のスキルが育った
  • Reactは2015年にCordovaでiOSアプリを作るときに採用したことをきっかけに、時代の荒波に揉まれながらやってきた
  • 最近だと技術書典WebサイトをReactの関数コンポーネント + React Hooksでリプレイスした

知ったかぶりくらいはできるスキル

  • AngularJS（Angular v1）は2015年ごろにPoCである程度触った
  • 技術書典WebサイトをAngular（v8？）からReactにリプレイスした経験のおかげで、Angularもそれとなく読める
  • 会社のReact導入前の2013〜2014年ごろがCoffeeScript + Backbone.Marionetteで、横目に見ていたので横目に見ていた程度の話しかできません
  • 会社でRuby on RailsをAPIサーバーとして使っており、開発で困ったときに実装を読みに行ったりするので、ほんの少しだけRailsの話題についていけます（ただしレールから外れている）

今日の流れ

  • 第一部：座学
    • 広く浅くやっていきます
    • 「こういう分野があるよ」「乱立しているように見えるけど歴史的経緯を踏まえるとこれが王者だよ」といった話を中心に行います
  • 第二部：ハンズオン
    • https://github.com/Nkzn/react-hands-on-mfk をクローン
    • npmとvscodeで進めていく想定で作りました
    • READMEに手順が書いてあるので進めていく
    • 途中状態のプロジェクトも用意してあるので、よくわからなくなったら次の手順のプロジェクトを眺めてください

JavaScript & React近代史

何故JavaScriptをビルドをする羽目になったのか

Babelの立ち位置

Virtual DOMの台頭

Flux戦国時代

  • Reduxが王者となるまで「俺が考えた最強のFlux」が乱立した
  • Redux = Flux + Reducer + Middleware
  • アプリの状態管理を安全に行うためのFluxとRedux：CodeZine（コードジン）
  • Single Source of Truthを「全部Storeに置け」と解釈してしまうアンチパターンがある
  • redux-sagaというGeneratorモリモリの異世界へ転生してしまった件について
  • なんだかんだで周辺ツールが一番充実しているのはReduxなので、何かFluxが欲しい場合はReduxを軽めに使うと良い

React Hooks時代

  • いまここ
  • React Hooksの使い方を学ぼう～関数コンポーネントの状態管理を行う：CodeZine（コードジン）
  • 小さな状態管理がやりやすくなった
  • 関数コンポーネントだけでもシステムが組める
  • クラスコンポーネントは継承や副作用という、現代のプログラミングパラダイムにおけるプログラマーの苦手ポイントを的確に濫用させる誘惑に満ちているため、鋼の心を持っている人以外は使わないほうがいい
    • ライフサイクル（ componentDidMount など）を細かく制御したい場合には今後も有用だが、ほとんどの場合上記デメリットのほうが勝るはず
    • JSXやVirtual DOMツリーから見れば、「名前」「props」というインターフェースさえあれば使えるので、クラスでしかできないことはライフサイクル制御くらいしかないかも

パフォーマンスチューニングの話

スタイリング

基本の話

  • DOMツリーにスタイルを適用してレイアウトや装飾を施していくという基本方針は従来と同じ
  • className というpropsがDOMの class 属性に翻訳されるため、CSSファイルからスタイルを当てることもできる
  • function Text(props) {
   const style = {
    color: 'red',
  };
   return (
     <div style={{ height: '16pt' }}>
       <span style={style}>{props.label}</span>
       <div className="my-label success">{props.message}</div>
     </div>
   );
 }
  • CSS-in-JS
    • オブジェクト形式でスタイルを記述して、オブジェクトのまま style 属性に突っ込む
    • 条件分岐で装飾を切り替えるのが非常に簡単
    • DOMに落とし込まれた時点では style 属性にベタ書きされる

ライブラリ

周辺ツール

Linter

  • ESLintが無双の王者になったので何も気にせずにESLintを使いましょう
    • JSLint, JSHint, TSLintなどなどは皆死にました
    • TypeScriptもESLintでチェックする方向で概ね勝負がついた
  • recommended系を入れておけば標準的なやつがだいたい入るので便利
  • TypeScript向けにはparserの設定があるため少しだけ煩雑
  • Lintルールはベストプラクティスとアンチパターンの宝庫
    • なぜ存在するのか調べると歴史的経緯を学べてお得

Formatter

テスティングフレームワーク

  • テストランナー
    • describe, itなどを書くためのやつ
    • 所定の記法でテストコードを書いておくと順次実行してくれる
    • mochaとか
  • アサーションライブラリ
    • assertとかを書くためのやつ
    • テスト結果のエラー表示をわかりやすくしてくれたりする
    • chaiとか
  • Reactに限っていえば、全部入りテスティングフレームワークのJest一択
    • https://jestjs.io/ja/
    • Facebook製なので……
    • 好みのライブラリを組み合わせるのも良いですが、やっぱり全部入りは楽です
    • Reactコンポーネントが生成したVirtual DOMのダンプ（JSON形式）をテスト対象にするための機能（snapshot）もあるけど、限られた状況でのUIテストとして有効なだけなので、あまりオススメできない
  • テストの方針としては「リファクタリングして頑張ってReact依存を切り離したモジュールを作ってテストする」という、ありふれた話になりそう

Storybook

  • 動くドキュメント
  • 特定のpropsを与えたときの見た目をWebページ化できる
  • ロジックを実装するよりも画面部品を作っていくほうが得意な人の主戦場になったりする
  • 新規サービスの実装中に存在してくれるとそれなりに便利
  • アンチパターンとして、運用フェーズに入った瞬間に見る目が減るのでメンテナンス対象から外れて陳腐化する
  • Visual Regression Test（CIでスクショの差分チェックをするテスト手法）の分野で価値が再評価されている
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment