Upgrade to Pro — share decks privately, control downloads, hide ads and more …

20190523_nkowne63zf_1.pdf

Nkowne63
May 23, 2019
370

 20190523_nkowne63zf_1.pdf

Nkowne63

May 23, 2019
Tweet

Transcript

  1. 自己紹介 張 たいよ (GitHub: @neutron63zf) 東京大学理学部物理学科 4年 • ventus-inc ◦

    JavaScript ( Vue.js / Nuxt.js ) ◦ Golang / Firebase • (元)東京大学五月祭常任委員会 ◦ AWS / Nginx / Docker ◦ Node.js ( Express )
  2. 前提知識 • React ◦ 状態を更新することによって、描画が(ほぼ)自動で更新される。 ◦ コンポーネントを組み合わせることで、ウェブサイトを作れる。 ◦ (性質だけなら) Vueも近い。

    • Flux Architecture(ここではredux) ◦ (すごくざっくり言うと) Storeというものに状態をまとめ、それに対して操作をする。 ◦ 「一方向のデータフロー」を課すことで、挙動を予測しやすくする。 • TypeScript ◦ JavaScriptに型アノテーションをつけることができる。 ◦ 予測変換が強くなる。便利。 ◦ 型にまつわるエラーをある程度コンパイル時に検知できる。
  3. まとめ:良かった点 • 責務が分割されている ◦ つまり、「どこを変えればいいのか」がわかりやすく、また、煩雑にもなりづらい。 • ストアが軽くなりそう ◦ 今回は元からある storeを使ったが、storeの中身(reducerやactionsなど)もclean

    architectureのusecaseなどで 扱えそう • テストがしやすい ◦ インターフェースに依存しているだけなので、同じインターフェースさえ満たせば、テスト用のオブジェクトなどを 入れることで比較的簡単にテスト可能
  4. 参考資料・出典 • https://programmagick.com/blog?slug=react_typescript_redux_tutorial ◦ 「TypeScriptで Redux + React チュートリアル」 ◦

    react + redux + typescript のサンプルとして • https://nrslib.com/clean-architecture/ • https://nrslib.com/clean-flow-of-control/ ◦ 「実践クリーンアーキテクチャ」 ◦ 「クリーンアーキテクチャの右下の図」 ◦ 図の解説がより詳しく、加えてコード例も含めて載っている