1年半React.jsのプロジェクトに関わってみて.

Transcript

1. 1年半 React.js のプロジェクトに 関わってみて Tsuyoshi Numano from:Lancers　2017/03/07 【React / Digdag / Terraform勉強会】- 続々と新規事業を創出する、ランサーズの開発チーム -
2. 自己紹介
3. 沼野剛志 1990年生まれ 出身高専　 ：神戸高専専攻科（~2012）：ロボット制御 出身大学院 ：JAIST（~2014）：VRの研究、出会いの研究で修論 株式会社リッチメディア（~2015）：メディアの運営・開発 現在はランサーズ株式会社でフロントエンドエンジニアとして 働いています。主に React.js を利用。 自己紹介
4. 「1年半React.jsのプロジェクトに関わってみて」と言うテーマで、導入の経緯や、その結 果をまとめました - React.js とは - ランサーズで React.js が利用されている箇所 - React.js 導入の経緯 - なぜ React.js (と Redux) を採用したか？ - React.js を導入してどうなったか？ - 現在の開発フロー全体 - 1年半 React.js のプロジェクトに関わってみて - どうやって学習するか？ 今日お話しする内容
5. React.js とは
6. Facebook が開発しているUIライブラリ https://facebook.github.io/react/
7. Facebook が開発しているUIライブラリ 利用している企業 よく一緒に聞く言葉 UI を構築するライブラリ Flux などと一緒に使って、フロントエンドの秩序を保つ
8. ランサーズで React.js が利用されている箇所
9. React.js のプロダクト：メッセージ（チャット）画面
10. React.js のプロダクト：プロジェクト管理画面
11. 新規事業(現在開発中: Cordova でスマホアプリ開発)
12. ランサーズで React.js が利用されている箇所 UIの操作や構成が複雑な部分 - メッセージ（チャット）画面 - プロジェクト管理画面 複雑でない部分は以前のまま。
13. ランサーズのフロント周りで利用している技術 ランサーズ流 React.js/redux アプリ開発入門@mori-dev エンジニアブログでリポジトリ公開してます！
14. React.js 導入の経緯
15. 2015年の7月 チャットシステムを刷新して、ユーザー体験を向上するプロジェクトが始動 背景
16. 背景 2015年の7月 チャットシステムを刷新して、ユーザー体験を向上するプロジェクトが始動 - ランサーズは 2008年 12月リリース（2017年で約 9年目のプロダクト） - フレームワークは CakePHP - ビューファイルが、だいたいページごとに管理されている - API は導入されていない
17. 背景 2015年の7月 チャットシステムを刷新して、ユーザー体験を向上するプロジェクトが始動 - ランサーズは 2008年 12月リリース（2017年で約 9年目のプロダクト） - フレームワークは CakePHP - ビューファイルが、だいたいページごとに管理されている - API は導入されていない - クライアントサイドのJSがメンテしにくい状況
18. クライアントサイド JS を改善したい - どのページで何が発火しているかわからないのでそれを追いたい - 1ページに複数のjs ファイルが呼び出されている - 1ファイルに結構な行数のコードが書かれている - フロントエンドに処理フローの哲学を取り入れたい - Flux などのアーキテクチャが何もない - データとビューが密結合になっている - UI をコンポーネント単位で管理したい - 同じような UI でもページ単位で管理されていたり、バラバラ - スタイルガイド的なものがない
19. クライアントサイド JS を改善したい ユーザー体験を向上するためには... メンテナンスしにくい状態を改善したい - どのページで何が発火しているかわからないのでそれを追いたい - 1ページに複数のjs ファイルが呼び出されている - 1ファイルに結構な行数のコードが書かれている - フロントエンドに処理フローの哲学を取り入れたい - Flux などのアーキテクチャが何もない - データとビューが密結合になっている - UI をコンポーネント単位で管理したい - 同じような UI でもページ単位で管理されていたり、バラバラ - スタイルガイド的なものがない
20. React.js なら望みが叶いそう - どのページで何が発火しているかわからないのでそれを追いたい - どのページでどのJSを呼ぶか、管理するクラスを作る（ React.js 関係ない） - ビルドシステムを入れてファイルを分割し JSの管理をする(React.js 関係ない) - フロントエンドに処理フローの哲学を取り入れたい - React.js なら、Flux のフレームワークがいくつか存在 - データとビューを分離して疎結合な作りに - UI をコンポーネント単位で管理したい - React.js 自身が UI を コンポーネントごとに構築するためのライブラリ
21. なぜ React.js (と Redux) を採用したか？
22. React.js を選んだ理由(2015年7月当時) - 当時はAngularJS も v1 で、 React が押してきている感じだった - Vue.js もそこまで盛り上がっていなかった http://www.npmtrends.com/react-vs-angular-vs-vue 2
23. フロントに処理フローの哲学を入れたい - Flux を導入したい。 Facebook が提唱したアーキテクチャ - React.js は UI (view) でしかない。MVCでいう V のみ - データの動きが一方向でパターン化されているので動きが追いやすい - スタンダードに乗っかっておけば、メンテできる人が増える React.js 導入の経緯 https://github.com/facebook/flux
24. - fluxxorや、reflux、flummox など、いろいろ選択肢はあった - Redux に決めたのは flummox の作者が、Redux の方がイケてるから そっち使ってというようなコメントを github に残していたり、スター数も急激 に伸びていた - 2015年７月当時、次の標準になりそうなフレームワークだった Flux のフレームワークはどれにするか？ Reduxを導入 React.js 導入の経緯
25. 前述のような経緯で、 動作を追えるようにし、 コンポーネント単位でUIを管理し、 メンテできるようにする ために、React.js と Redux を採用を チャレンジ することに React.js を採用 React.js 導入の経緯
26. React.js を導入してどうなったか？ 残り: - 現在の開発フロー全体 - 1年半 React.js のプロジェクトに関わってみて - どうやって学習するか？
27. React.js を導入してどうなったか？ 結論から言うと - Redux(Flux) が導入され、動作が追えるようになった - UIもコンポーネント単位で管理できるようになった スタンダードを採用することで、メンテできるメンバーが増えた！ - バックエンドをAPI化することで仕事のフローが変わった - エコシステムに乗ることで、より改善に注力できるようになった 課題感については、最後にまとめます
28. Redux が導入され、動作が追えるようになった http://slides.com/jenyaterpil/redux-from-twitter-hype-to-production#/27
29. コンポーネント単位で管理できる - 以前は CakePHP の ctp ファイルにダーッと書いていた - ページ単位 → UI コンポーネント単位で意識せざるをえない - コンポーネントごとにファイルを分割し、組み合わせて使う
30. コンポーネント単位で管理できる - 以前は CakePHP の ctp ファイルにダーッと書いていた - ページ単位 → UI コンポーネント単位で意識せざるをえない - コンポーネントごとにファイルを分割し、組み合わせて使う ステートを受け取るコンポーネント (Container Component) ステートを持たない、受け取ったデータを表示するだけのコンポーネント ( Stateless Functional Component )
31. バックエンドをAPI化することで仕事のフローが変わった API サーバー フロントエンド バックエンド API仕様書 - 以前は CakePHPのMVC でエンジニアが一気通貫で作成 - API仕様書を作成して、その仕様を元に、並行した開発が可能に - バックエンドが完成するまでは 仕様書からapi-mock を使ってmock サーバーを起動 このAPI仕様書の JSON返してください API仕様書どおり のJSON返します 運用方法に関してはブログにまとめました。 API仕様書をMarkDownで書き、GitHubをつかって運用する方法
32. エコシステムに乗ることで、より改善に注力できるようになった - 難易度や管理が難しい実装なども React のコミュニティライブラリで解決 - Google で利用したい機能を検索するとライブラリ化されていたりする 例) 検索ワード：「redux persist 」 state をローカルストレージなどに保存して永続化したい https://github.com/rt2zz/redux-persist
33. React.js を導入してどうなったか？
34. 現在の開発フロー全体
35. フロントエンドで利用している主なライブラリや技術 - yarn - webpack - es6 - babel - eslint - flow type - material-ui - css modules - enzyme
36. 開発のフロー全体 コードを書く テストを書く 構文チェック、型チェック 最新に合わせる トランスパイル、ビルド 実機確認 hoge huga bar
37. デプロイ 開発のフロー全体（レビューとCI、デプロイ） コードを書く テストを書く 構文チェック、型チェック 最新に合わせる トランスパイル、ビルド 実機確認 CIでgithubにあげた ファイルをチェック コードレビュー オープンソースのフローベースの開発 - commit は anguralr のルールをベース - ドキュメントは厚めに書く hoge huga bar
38. エンジニアブログでリポジトリ公開しています - ランサーズ流 React.js/redux アプリ開発入門@mori-dev
39. 1年半 React.js のプロジェクトに関わってみて
40. ブラッシュアップ(UI、機能) 1年半の年表 2015 2016 7月 プロジェクト始動 12月 3月 技術キャッチアップ チャットリリース 開発 開発 開発 輪読会 本 ニュース 約半年
41. 開発 開発 開発 1年半の年表 2015 2016 2017 7月 プロジェクト始動 12月 3月 7月 12月 3月 技術キャッチアップ チャットリリース ブラッシュアップ(UI、機能) プロジェクト管理リリース 新規プロジェクト始動 輪読会 本 ニュース githubリポジトリ、github issue 環境構築 プロト作成 約半年 定期的なライブラリバージョンアップ API仕様作成 開発 開発 開発
42. プロダクトで利用している技術やコードの変化（１年半経って） - コンポーネント間の共通処理: mixin → HOC - Reduxの非同期処理: redux-thunk → redux-saga - Redux のロジック部分: action,reducer → middleware に集約 - ビルド関連: gulp + browserify → webpack - CSS関連: sass → CSS Modules - ステートを持たないコンポーネント: SFC - JSに型をもたせたい: FlowTypeの導入
43. プロダクトで利用している技術やコードの変化（１年半経って） - コンポーネント間の共通処理: mixin → HOC - Reduxの非同期処理: redux-thunk → redux-saga - Redux のロジック部分: action,reducer → middleware に集約 - ビルド関連: gulp + browserify → webpack - CSS関連: sass → CSS Modules - ステートを持たないコンポーネント: SFC - JSに型をもたせたい: FlowTypeの導入 トレンドの変化が多くチャレンジングな環境
44. React.js を入れたからといって、全てがうまくいくわけではない - React、 Redux の学習コストが高く、人をすぐ入れにくい - デザイナーがjsxを書くのに敷居が高く、HTML直書きより協業しにくい - Component の粒度が人によって違って、認識を合わせにくい - コミュニティライブラリに依存しすぎると思わぬところでハマる - データのモデリングや、ビジネスロジックの置き場に悩む - FlowType入れたけど、型を使いこなせているか不安 - gulp で管理しているプロジェクトがあり、webpackに移行できていない - トレンドを追いかけつつ、プロダクトの製作は結構忙しい React.js のプロダクトを開発、運用してみた現状の課題感
45. どうやって学習するか？
46. React.js 採用したものの、どうやって学習する？ 2015年7月時の自分のスペック - jQuery はわかる - 特にJSフレームワークを使った実務経験なし - 新卒２年目、エンジニアとしてもこれから - 当時は React や Redux の日本語の情報が少なかった - プロジェクトメンバーも3人で全員 React は初めて そもそも導入の時の技術選定に、自分は参加できていなかった。 （当時のリードエンジニアと現在のシニアエンジニアの方が素晴らしい方だったおかげで 今の自分があります。）
47. 輪読会が一番効果があった チームメンバー３人で輪読会 - 毎日３０分 - １５分精読、１５分読んだ内容を発表 - 約２ヶ月くらい続けた チームメンバーで共通意識が持てた。 カレンダーで時間を取っており、勉強する時間が取れた。
48. まとめ
49. まとめ React.js や Redux を導入したことによって - 処理が追えて、UIコンポーネントごとに管理できるようになった - ユーザーに価値提供するための、継続的な改善開発基盤ができた React.js のプロジェクトに関わってみて - 初期の導入はハードルが高い - 日々トレンドが変わったり活発なコミュニティは案外楽しい - 慣れると、以前のような開発には戻れない(戻りたくない) そもそも素人な自分にチャレンジさせてくれる会社に感謝。
50. https://www.wantedly.com/projects/74679
51. Thank you !