Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
1年半React.jsのプロジェクトに関わってみて.
Search
numanomanu
March 07, 2017
Technology
0
1.9k
1年半React.jsのプロジェクトに関わってみて.
numanomanu
March 07, 2017
Tweet
Share
More Decks by numanomanu
See All by numanomanu
誰も教えてくれない。エンジニアのためのブログライティング入門〜書けば書くほどキャリアアップした話〜/ how_to_write_engineering_blog
numanomanu
7
6.9k
新規事業開発におけるエンジニアの心得
numanomanu
6
5.5k
React 周辺のエコシステムで体験する再利用プログラミング(MANABIYA プログラミングセッション)
numanomanu
0
780
React Redux を用いた SPA 新規サービスを運用して得た知見と実装例
numanomanu
4
6.8k
ReactのHigher-order Componentsの利用方法
numanomanu
0
99
Other Decks in Technology
See All in Technology
顧客が本当に必要だったもの - パフォーマンス改善編 / Make what is needed
soudai
24
6.8k
APIテスト自動化の勘所
yokawasa
7
4.2k
CyberAgent 生成AI Deep Dive with Amazon Web Services / genai-aws
cyberagentdevelopers
PRO
1
480
君は隠しイベントを見つけれるか?
mujyun
0
290
Amazon_CloudWatch_ログ異常検出_導入ガイド
tsujiba
4
1.6k
Gradle: The Build System That Loves To Hate You
aurimas
2
150
グローバル展開を見据えたサービスにおける機械翻訳プラクティス / dp-ai-translating
cyberagentdevelopers
PRO
1
150
GitHub Universe: Evaluating RAG apps in GitHub Actions
pamelafox
0
180
WINTICKETアプリで実現した高可用性と高速リリースを支えるエコシステム / winticket-eco-system
cyberagentdevelopers
PRO
1
190
使えそうで使われないCloudHSM
maikamibayashi
0
170
AWS CDKでデータリストアの運用、どのように設計する?~Aurora・EFSの実践事例を紹介~/aws-cdk-data-restore-aurora-efs
mhrtech
4
650
omakaseしないための.rubocop.yml のつくりかた / How to Build Your .rubocop.yml to Avoid Omakase #kaigionrails
linkers_tech
3
740
Featured
See All Featured
How GitHub (no longer) Works
holman
311
140k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.7k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
How to train your dragon (web standard)
notwaldorf
88
5.7k
4 Signs Your Business is Dying
shpigford
180
21k
Happy Clients
brianwarren
97
6.7k
Rails Girls Zürich Keynote
gr2m
93
13k
[RailsConf 2023] Rails as a piece of cake
palkan
51
4.9k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Adopting Sorbet at Scale
ufuk
73
9k
A designer walks into a library…
pauljervisheath
202
24k
Gamification - CAS2011
davidbonilla
80
5k
Transcript
1年半 React.js のプロジェクトに 関わってみて Tsuyoshi Numano from:Lancers 2017/03/07 【React / Digdag
/ Terraform勉強会】- 続々と新規事業を創出する、ランサーズの開発チーム -
自己紹介
沼野剛志 1990年生まれ 出身高専 :神戸高専専攻科(~2012):ロボット制御 出身大学院 :JAIST(~2014):VRの研究、出会いの研究で修論 株式会社リッチメディア(~2015):メディアの運営・開発 現在はランサーズ株式会社でフロントエンドエンジニアとして 働いています。主に React.js
を利用。 自己紹介
「1年半React.jsのプロジェクトに関わってみて」と言うテーマで、導入の経緯や、その結 果をまとめました - React.js とは - ランサーズで React.js が利用されている箇所 -
React.js 導入の経緯 - なぜ React.js (と Redux) を採用したか? - React.js を導入してどうなったか? - 現在の開発フロー全体 - 1年半 React.js のプロジェクトに関わってみて - どうやって学習するか? 今日お話しする内容
React.js とは
Facebook が開発しているUIライブラリ https://facebook.github.io/react/
Facebook が開発しているUIライブラリ 利用している企業 よく一緒に聞く言葉 UI を構築するライブラリ Flux などと一緒に使って、フロントエンドの秩序を保つ
ランサーズで React.js が利用されている箇所
React.js のプロダクト:メッセージ(チャット)画面
React.js のプロダクト:プロジェクト管理画面
新規事業(現在開発中: Cordova でスマホアプリ開発)
ランサーズで React.js が利用されている箇所 UIの操作や構成が複雑な部分 - メッセージ(チャット)画面 - プロジェクト管理画面 複雑でない部分は以前のまま。
ランサーズのフロント周りで利用している技術 ランサーズ流 React.js/redux アプリ開発入門@mori-dev エンジニアブログでリポジトリ公開してます!
React.js 導入の経緯
2015年の7月 チャットシステムを刷新して、ユーザー体験を向上するプロジェクトが始動 背景
背景 2015年の7月 チャットシステムを刷新して、ユーザー体験を向上するプロジェクトが始動 - ランサーズは 2008年 12月リリース(2017年で約 9年目のプロダクト) - フレームワークは
CakePHP - ビューファイルが、だいたいページごとに管理されている - API は導入されていない
背景 2015年の7月 チャットシステムを刷新して、ユーザー体験を向上するプロジェクトが始動 - ランサーズは 2008年 12月リリース(2017年で約 9年目のプロダクト) - フレームワークは
CakePHP - ビューファイルが、だいたいページごとに管理されている - API は導入されていない - クライアントサイドのJSがメンテしにくい状況
クライアントサイド JS を改善したい - どのページで何が発火しているかわからないのでそれを追いたい - 1ページに複数のjs ファイルが呼び出されている - 1ファイルに結構な行数のコードが書かれている
- フロントエンドに処理フローの哲学を取り入れたい - Flux などのアーキテクチャが何もない - データとビューが密結合になっている - UI をコンポーネント単位で管理したい - 同じような UI でもページ単位で管理されていたり、バラバラ - スタイルガイド的なものがない
クライアントサイド JS を改善したい ユーザー体験を向上するためには... メンテナンスしにくい状態を改善したい - どのページで何が発火しているかわからないのでそれを追いたい - 1ページに複数のjs ファイルが呼び出されている
- 1ファイルに結構な行数のコードが書かれている - フロントエンドに処理フローの哲学を取り入れたい - Flux などのアーキテクチャが何もない - データとビューが密結合になっている - UI をコンポーネント単位で管理したい - 同じような UI でもページ単位で管理されていたり、バラバラ - スタイルガイド的なものがない
React.js なら望みが叶いそう - どのページで何が発火しているかわからないのでそれを追いたい - どのページでどのJSを呼ぶか、管理するクラスを作る( React.js 関係ない) - ビルドシステムを入れてファイルを分割し
JSの管理をする(React.js 関係ない) - フロントエンドに処理フローの哲学を取り入れたい - React.js なら、Flux のフレームワークがいくつか存在 - データとビューを分離して疎結合な作りに - UI をコンポーネント単位で管理したい - React.js 自身が UI を コンポーネントごとに構築するためのライブラリ
なぜ React.js (と Redux) を採用したか?
React.js を選んだ理由(2015年7月当時) - 当時はAngularJS も v1 で、 React が押してきている感じだった -
Vue.js もそこまで盛り上がっていなかった http://www.npmtrends.com/react-vs-angular-vs-vue 2
フロントに処理フローの哲学を入れたい - Flux を導入したい。 Facebook が提唱したアーキテクチャ - React.js は UI
(view) でしかない。MVCでいう V のみ - データの動きが一方向でパターン化されているので動きが追いやすい - スタンダードに乗っかっておけば、メンテできる人が増える React.js 導入の経緯 https://github.com/facebook/flux
- fluxxorや、reflux、flummox など、いろいろ選択肢はあった - Redux に決めたのは flummox の作者が、Redux の方がイケてるから そっち使ってというようなコメントを
github に残していたり、スター数も急激 に伸びていた - 2015年7月当時、次の標準になりそうなフレームワークだった Flux のフレームワークはどれにするか? Reduxを導入 React.js 導入の経緯
前述のような経緯で、 動作を追えるようにし、 コンポーネント単位でUIを管理し、 メンテできるようにする ために、React.js と Redux を採用を チャレンジ することに
React.js を採用 React.js 導入の経緯
React.js を導入してどうなったか? 残り: - 現在の開発フロー全体 - 1年半 React.js のプロジェクトに関わってみて -
どうやって学習するか?
React.js を導入してどうなったか? 結論から言うと - Redux(Flux) が導入され、動作が追えるようになった - UIもコンポーネント単位で管理できるようになった スタンダードを採用することで、メンテできるメンバーが増えた! -
バックエンドをAPI化することで仕事のフローが変わった - エコシステムに乗ることで、より改善に注力できるようになった 課題感については、最後にまとめます
Redux が導入され、動作が追えるようになった http://slides.com/jenyaterpil/redux-from-twitter-hype-to-production#/27
コンポーネント単位で管理できる - 以前は CakePHP の ctp ファイルにダーッと書いていた - ページ単位 →
UI コンポーネント単位で意識せざるをえない - コンポーネントごとにファイルを分割し、組み合わせて使う
コンポーネント単位で管理できる - 以前は CakePHP の ctp ファイルにダーッと書いていた - ページ単位 →
UI コンポーネント単位で意識せざるをえない - コンポーネントごとにファイルを分割し、組み合わせて使う ステートを受け取るコンポーネント (Container Component) ステートを持たない、受け取ったデータを表示するだけのコンポーネント ( Stateless Functional Component )
バックエンドをAPI化することで仕事のフローが変わった API サーバー フロントエンド バックエンド API仕様書 - 以前は CakePHPのMVC でエンジニアが一気通貫で作成
- API仕様書を作成して、その仕様を元に、並行した開発が可能に - バックエンドが完成するまでは 仕様書からapi-mock を使ってmock サーバーを起動 このAPI仕様書の JSON返してください API仕様書どおり のJSON返します 運用方法に関してはブログにまとめました。 API仕様書をMarkDownで書き、GitHubをつかって運用する方法
エコシステムに乗ることで、より改善に注力できるようになった - 難易度や管理が難しい実装なども React のコミュニティライブラリで解決 - Google で利用したい機能を検索するとライブラリ化されていたりする 例) 検索ワード:「redux
persist 」 state をローカルストレージなどに保存して永続化したい https://github.com/rt2zz/redux-persist
React.js を導入してどうなったか?
現在の開発フロー全体
フロントエンドで利用している主なライブラリや技術 - yarn - webpack - es6 - babel -
eslint - flow type - material-ui - css modules - enzyme
開発のフロー全体 コードを書く テストを書く 構文チェック、型チェック 最新に合わせる トランスパイル、ビルド 実機確認 hoge huga bar
デプロイ 開発のフロー全体(レビューとCI、デプロイ) コードを書く テストを書く 構文チェック、型チェック 最新に合わせる トランスパイル、ビルド 実機確認 CIでgithubにあげた ファイルをチェック
コードレビュー オープンソースのフローベースの開発 - commit は anguralr のルールをベース - ドキュメントは厚めに書く hoge huga bar
エンジニアブログでリポジトリ公開しています - ランサーズ流 React.js/redux アプリ開発入門@mori-dev
1年半 React.js のプロジェクトに関わってみて
ブラッシュアップ(UI、機能) 1年半の年表 2015 2016 7月 プロジェクト始動 12月 3月 技術キャッチアップ チャットリリース
開発 開発 開発 輪読会 本 ニュース 約半年
開発 開発 開発 1年半の年表 2015 2016 2017 7月 プロジェクト始動 12月
3月 7月 12月 3月 技術キャッチアップ チャットリリース ブラッシュアップ(UI、機能) プロジェクト管理リリース 新規プロジェクト始動 輪読会 本 ニュース githubリポジトリ、github issue 環境構築 プロト作成 約半年 定期的なライブラリバージョンアップ API仕様作成 開発 開発 開発
プロダクトで利用している技術やコードの変化(1年半経って) - コンポーネント間の共通処理: mixin → HOC - Reduxの非同期処理: redux-thunk →
redux-saga - Redux のロジック部分: action,reducer → middleware に集約 - ビルド関連: gulp + browserify → webpack - CSS関連: sass → CSS Modules - ステートを持たないコンポーネント: SFC - JSに型をもたせたい: FlowTypeの導入
プロダクトで利用している技術やコードの変化(1年半経って) - コンポーネント間の共通処理: mixin → HOC - Reduxの非同期処理: redux-thunk →
redux-saga - Redux のロジック部分: action,reducer → middleware に集約 - ビルド関連: gulp + browserify → webpack - CSS関連: sass → CSS Modules - ステートを持たないコンポーネント: SFC - JSに型をもたせたい: FlowTypeの導入 トレンドの変化が多くチャレンジングな環境
React.js を入れたからといって、全てがうまくいくわけではない - React、 Redux の学習コストが高く、人をすぐ入れにくい - デザイナーがjsxを書くのに敷居が高く、HTML直書きより協業しにくい - Component
の粒度が人によって違って、認識を合わせにくい - コミュニティライブラリに依存しすぎると思わぬところでハマる - データのモデリングや、ビジネスロジックの置き場に悩む - FlowType入れたけど、型を使いこなせているか不安 - gulp で管理しているプロジェクトがあり、webpackに移行できていない - トレンドを追いかけつつ、プロダクトの製作は結構忙しい React.js のプロダクトを開発、運用してみた現状の課題感
どうやって学習するか?
React.js 採用したものの、どうやって学習する? 2015年7月時の自分のスペック - jQuery はわかる - 特にJSフレームワークを使った実務経験なし - 新卒2年目、エンジニアとしてもこれから
- 当時は React や Redux の日本語の情報が少なかった - プロジェクトメンバーも3人で全員 React は初めて そもそも導入の時の技術選定に、自分は参加できていなかった。 (当時のリードエンジニアと現在のシニアエンジニアの方が素晴らしい方だったおかげで 今の自分があります。)
輪読会が一番効果があった チームメンバー3人で輪読会 - 毎日30分 - 15分精読、15分読んだ内容を発表 - 約2ヶ月くらい続けた チームメンバーで共通意識が持てた。 カレンダーで時間を取っており、勉強する時間が取れた。
まとめ
まとめ React.js や Redux を導入したことによって - 処理が追えて、UIコンポーネントごとに管理できるようになった - ユーザーに価値提供するための、継続的な改善開発基盤ができた React.js
のプロジェクトに関わってみて - 初期の導入はハードルが高い - 日々トレンドが変わったり活発なコミュニティは案外楽しい - 慣れると、以前のような開発には戻れない(戻りたくない) そもそも素人な自分にチャレンジさせてくれる会社に感謝。
https://www.wantedly.com/projects/74679
Thank you !