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.4k
React 周辺のエコシステムで体験する再利用プログラミング(MANABIYA プログラミングセッション)
numanomanu
0
770
React Redux を用いた SPA 新規サービスを運用して得た知見と実装例
numanomanu
4
6.8k
ReactのHigher-order Componentsの利用方法
numanomanu
0
98
Other Decks in Technology
See All in Technology
Classmethod AI Talks(CATs) #1 司会進行スライド(2024.09.19) / classmethod-ai-talks-aka-cats_moderator-slides_vol1_2024-09-19
shinyaa31
0
110
サーバレスでモバイルアプリ開発! NTTコム「ビジネスdアプリ」のアーキテクチャ / The architecture of business d app
nttcom
12
240
Segment Anything Model 2
tenten0727
3
700
Privacy Sandbox on Android / DroidKaigi 2024
7pairs
1
270
PDF Viewer作成の今までとこれから
hunachi
0
470
社内の学びの場・コミュニティ形成とエンジニア同士のリレーションシップ構築/devreljapan2024
nishiuma
3
290
App Router を実プロダクトで採用して見えてきた勘所をちょっとだけ紹介
marokanatani
1
930
可視化により内部品質をあげるAIドキュメントリバース/20240910 Hiromitsu Akiba
shift_evolve
0
220
技術的負債解消の取り組みと専門チームのお話
bengo4com
0
330
サプライチェーン攻撃に備える
ryunen344
0
290
Developer Experienceを向上させる基盤づくりの取り組み事例集
coconala_engineer
0
150
20240912 JJUGナイトセミナー
mii1004
0
140
Featured
See All Featured
RailsConf 2023
tenderlove
28
810
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.3k
Art, The Web, and Tiny UX
lynnandtonic
294
20k
Making the Leap to Tech Lead
cromwellryan
128
8.8k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
8.9k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2k
Designing on Purpose - Digital PM Summit 2013
jponch
114
6.8k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Fontdeck: Realign not Redesign
paulrobertlloyd
80
5.1k
What the flash - Photography Introduction
edds
67
11k
Code Review Best Practice
trishagee
62
16k
A Philosophy of Restraint
colly
202
16k
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 !