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.6k
React 周辺のエコシステムで体験する再利用プログラミング(MANABIYA プログラミングセッション)
numanomanu
0
830
React Redux を用いた SPA 新規サービスを運用して得た知見と実装例
numanomanu
4
6.9k
ReactのHigher-order Componentsの利用方法
numanomanu
0
120
Other Decks in Technology
See All in Technology
AWSでRAGを実現する上で感じた3つの大事なこと
ymae
3
1k
急成長する企業で作った、エンジニアが輝ける制度/ 20250214 Rinto Ikenoue
shift_evolve
2
880
技術的負債解消の取り組みと専門チームのお話 #技術的負債_Findy
bengo4com
1
1.2k
データ基盤の成長を加速させる:アイスタイルにおける挑戦と教訓
tsuda7
3
650
Fintech SREの挑戦 PCI DSS対応をスマートにこなすインフラ戦略/Fintech SRE’s Challenge: Smart Infrastructure Strategies for PCI DSS Compliance
maaaato
0
450
ビジネスと現場活動をつなぐソフトウェアエンジニアリング~とあるスタートアッププロダクトの成長記録より~
mizunori
0
210
事業継続を支える自動テストの考え方
tsuemura
0
300
これからSREになる人と、これからもSREをやっていく人へ
masayoshi
6
4.1k
Tech Blogを書きやすい環境づくり
lycorptech_jp
PRO
0
120
5分で紹介する生成AIエージェントとAmazon Bedrock Agents / 5-minutes introduction to generative AI agents and Amazon Bedrock Agents
hideakiaoyagi
0
220
WAF に頼りすぎない AWS WAF 運用術 meguro sec #1
izzii
0
460
2.5Dモデルのすべて
yu4u
2
610
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Practical Orchestrator
shlominoach
186
10k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Fireside Chat
paigeccino
34
3.2k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Being A Developer After 40
akosma
89
590k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Automating Front-end Workflow
addyosmani
1367
200k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
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 !