Download - フロントエンドフレームワークの選び方 - 20170320
![Page 1: フロントエンドフレームワークの選び方 - 20170320](https://reader030.vdocuments.pub/reader030/viewer/2022021503/58e4ab0a1a28abbb038b55c7/html5/thumbnails/1.jpg)
フロントエンドフレームワークの選び方
Shinichi Takahashi @ok-osaka #5
![Page 2: フロントエンドフレームワークの選び方 - 20170320](https://reader030.vdocuments.pub/reader030/viewer/2022021503/58e4ab0a1a28abbb038b55c7/html5/thumbnails/2.jpg)
対象
● フレームワーク何にしようかなって悩んでいる人
● 思考停止で特定のフレームワークに固執している人
● カノジョができない人
![Page 3: フロントエンドフレームワークの選び方 - 20170320](https://reader030.vdocuments.pub/reader030/viewer/2022021503/58e4ab0a1a28abbb038b55c7/html5/thumbnails/3.jpg)
前提知識その1 - イカれたメンバーを紹介
● チームリーダーをやっている@3人
○ ぼ く : Frontend/(Web/SmartPhone) App
○ メンバー1: Frontend/Designer/Markup
○ メンバー2: Frontend/Infrastructure
![Page 4: フロントエンドフレームワークの選び方 - 20170320](https://reader030.vdocuments.pub/reader030/viewer/2022021503/58e4ab0a1a28abbb038b55c7/html5/thumbnails/4.jpg)
前提知識その1 - イカれたメンバーを紹介
● チームリーダーをやっている@3人
○ ぼ く : Frontend/(Web/SmartPhone) App
○ メンバー1: Frontend/Designer/Markup
○ メンバー2: Frontend/Infrastructure
![Page 5: フロントエンドフレームワークの選び方 - 20170320](https://reader030.vdocuments.pub/reader030/viewer/2022021503/58e4ab0a1a28abbb038b55c7/html5/thumbnails/5.jpg)
前提知識その1 - イカれたメンバーを紹介
● チームリーダーをやっている@3人
○ ぼ く : Frontend/(Web/SmartPhone) App
○ メンバー1: Frontend/Designer/Markup
○ メンバー2: Frontend/Infrastructure
つまり、カジュアルに宗教戦争が起こる
![Page 6: フロントエンドフレームワークの選び方 - 20170320](https://reader030.vdocuments.pub/reader030/viewer/2022021503/58e4ab0a1a28abbb038b55c7/html5/thumbnails/6.jpg)
前提知識その2 - 仕事の受け方
● 過去にぼくとメンバー1でVue.jsを社内標準化
○ それまで漢は黙ってた
● 案件単位の技術選択がかなり自由
● メンバーアサインが流動的
● トライアル系が多い
○ 保守とかあんまりしないでおk
![Page 7: フロントエンドフレームワークの選び方 - 20170320](https://reader030.vdocuments.pub/reader030/viewer/2022021503/58e4ab0a1a28abbb038b55c7/html5/thumbnails/7.jpg)
前提知識その2 - 仕事の受け方
● 過去にぼくとメンバー1でVue.jsを社内標準化
○ それまで漢は黙ってた
● 案件単位の技術選択がかなり自由
● メンバーアサインが流動的
● トライアル系が多い
○ 保守とかあんまりしないでおk
![Page 8: フロントエンドフレームワークの選び方 - 20170320](https://reader030.vdocuments.pub/reader030/viewer/2022021503/58e4ab0a1a28abbb038b55c7/html5/thumbnails/8.jpg)
前提知識その2 - 仕事の受け方
● 過去にぼくとメンバー1でVue.jsを社内標準化
○ それまで漢は黙ってた
● 案件単位の技術選択がかなり自由
● メンバーアサインが流動的
● トライアル系が多い
○ 保守とかあんまりしないでおk
つまり、共有・理解できる知識幅が必要
![Page 9: フロントエンドフレームワークの選び方 - 20170320](https://reader030.vdocuments.pub/reader030/viewer/2022021503/58e4ab0a1a28abbb038b55c7/html5/thumbnails/9.jpg)
前提知識その2 - 仕事の受け方
● 過去にぼくとメンバー1でVue.jsを社内標準化
○ それまで漢は黙ってた
● 案件単位の技術選択がかなり自由
● メンバーアサインが流動的
● トライアル系が多い
○ 保守とかあんまりしないでおk
![Page 10: フロントエンドフレームワークの選び方 - 20170320](https://reader030.vdocuments.pub/reader030/viewer/2022021503/58e4ab0a1a28abbb038b55c7/html5/thumbnails/10.jpg)
前提知識その2 - 仕事の受け方
● 過去にぼくとメンバー1でVue.jsを社内標準化
○ それまで漢は黙ってた
● 案件単位の技術選択がかなり自由
● メンバーアサインが流動的
● トライアル系が多い
○ 保守とかあんまりしないでおk
つまり、自由度が高い
![Page 11: フロントエンドフレームワークの選び方 - 20170320](https://reader030.vdocuments.pub/reader030/viewer/2022021503/58e4ab0a1a28abbb038b55c7/html5/thumbnails/11.jpg)
ぼく < 案件きたよー
ガヤガヤ(Vue.js?Angular?React??)
ガヤガヤ(SPA?Router?)
ガヤガヤ(Dart?Rust?Flux?Redux?)
ガヤガヤ(axios?superagent)
いつもの流れ
![Page 12: フロントエンドフレームワークの選び方 - 20170320](https://reader030.vdocuments.pub/reader030/viewer/2022021503/58e4ab0a1a28abbb038b55c7/html5/thumbnails/12.jpg)
ぼく < 案件きたよー
ガヤガヤ(Vue.js?Angular?React??)
ガヤガヤ(SPA?Router?)
ガヤガヤ(Dart?Rust?Flux?Redux?)
ガヤガヤ(axios?superagent)
いつもの流れ
これらを紐解いていく
![Page 13: フロントエンドフレームワークの選び方 - 20170320](https://reader030.vdocuments.pub/reader030/viewer/2022021503/58e4ab0a1a28abbb038b55c7/html5/thumbnails/13.jpg)
● API通信はするのか
● SPAとして実装する必要があるのか
● 今ある知識で納期に間に合うか
● パフォーマンスは十分か
● 動作環境に適しているか
● フロントの責務はどこまでか
...etc
要件を整理する
![Page 14: フロントエンドフレームワークの選び方 - 20170320](https://reader030.vdocuments.pub/reader030/viewer/2022021503/58e4ab0a1a28abbb038b55c7/html5/thumbnails/14.jpg)
マトリクスを書いてみる
Data Bind ◯ ◯ ◯
API ◯ ✕ ✕
SPA ◯ ◯ △
Build △ ✕ ◯
LearningCost
△ ✕ ◯
![Page 15: フロントエンドフレームワークの選び方 - 20170320](https://reader030.vdocuments.pub/reader030/viewer/2022021503/58e4ab0a1a28abbb038b55c7/html5/thumbnails/15.jpg)
案件の要件と当てはめてみる
Data Bind ◯ ◯ ◯
API ◯ ✕ ✕
SPA ◯ ◯ △
Build △ ✕ ◯
LearningCost
△ ✕ ◯
フルスタックなフレームワークが必要だなぁ...
![Page 16: フロントエンドフレームワークの選び方 - 20170320](https://reader030.vdocuments.pub/reader030/viewer/2022021503/58e4ab0a1a28abbb038b55c7/html5/thumbnails/16.jpg)
案件の要件と当てはめてみる
Data Bind ◯ ◯ ◯
API ◯ ✕ ✕
SPA ◯ ◯ △
Build △ ✕ ◯
LearningCost
△ ✕ ◯
今回は納期に余裕があるから
新しいのやってみようかな
![Page 17: フロントエンドフレームワークの選び方 - 20170320](https://reader030.vdocuments.pub/reader030/viewer/2022021503/58e4ab0a1a28abbb038b55c7/html5/thumbnails/17.jpg)
案件の要件と当てはめてみる
Data Bind ◯ ◯ ◯
API ◯ ✕ ✕
SPA ◯ ◯ △
Build △ ✕ ◯
LearningCost
△ ✕ ◯
新しいバージョンでたらしいから触ってみようかな
![Page 18: フロントエンドフレームワークの選び方 - 20170320](https://reader030.vdocuments.pub/reader030/viewer/2022021503/58e4ab0a1a28abbb038b55c7/html5/thumbnails/18.jpg)
勉強のしかた
● TODOアプリをつくる
○ い
● 興味のある分野(ゲームとか)のアプリをつくる
○ 。
● 案件でいきなり実践する
○ 。
せいぜい案件が燃えるくらい。
![Page 19: フロントエンドフレームワークの選び方 - 20170320](https://reader030.vdocuments.pub/reader030/viewer/2022021503/58e4ab0a1a28abbb038b55c7/html5/thumbnails/19.jpg)
勉強のしかた
● TODOアプリをつくる
○ 面白くないからおすすめしない
● 興味のある分野(ゲームとか)のアプリをつくる
○ モチベが続くし応援もある。ぼくはこれ
● 案件でいきなり実践する
○ これもやる。死ぬ気でやってもそうそう死なない。
せいぜい案件が燃えるくらい。
![Page 20: フロントエンドフレームワークの選び方 - 20170320](https://reader030.vdocuments.pub/reader030/viewer/2022021503/58e4ab0a1a28abbb038b55c7/html5/thumbnails/20.jpg)
結論
興味をもったときに
興味をもったものに
触ればよくね?
![Page 21: フロントエンドフレームワークの選び方 - 20170320](https://reader030.vdocuments.pub/reader030/viewer/2022021503/58e4ab0a1a28abbb038b55c7/html5/thumbnails/21.jpg)
● サービスで公開されているRESTfulなAPIを利用
● ライト(2,3ページ)
● コンペ都合で納品速度重視
いつも使い慣れたVue.jsに決定
実例1:Vue.js(担当:ぼく)
![Page 22: フロントエンドフレームワークの選び方 - 20170320](https://reader030.vdocuments.pub/reader030/viewer/2022021503/58e4ab0a1a28abbb038b55c7/html5/thumbnails/22.jpg)
● 社内向けツールのフロント
○ もともとNode.js製CLI
● ライト(1ページ)
● 時間の余裕はめちゃくちゃある
時間あるしReactNativeやる話もあってReact
実例2:React(担当:メンバー2)
![Page 23: フロントエンドフレームワークの選び方 - 20170320](https://reader030.vdocuments.pub/reader030/viewer/2022021503/58e4ab0a1a28abbb038b55c7/html5/thumbnails/23.jpg)
● 実例1(Vue.js)の改修案件
● レビュー出してる間にAngular触りたくなっちゃった
● 時間もたっぷりある
欲望のままAngular
実例3:Angular(担当:メンバー1)
![Page 24: フロントエンドフレームワークの選び方 - 20170320](https://reader030.vdocuments.pub/reader030/viewer/2022021503/58e4ab0a1a28abbb038b55c7/html5/thumbnails/24.jpg)
結論
興味をもったときに
興味をもったものに
触っただけ
![Page 25: フロントエンドフレームワークの選び方 - 20170320](https://reader030.vdocuments.pub/reader030/viewer/2022021503/58e4ab0a1a28abbb038b55c7/html5/thumbnails/25.jpg)
● 現時点でどれだけ知識・技術があるか見極め
● 要件を整理して、挑戦できるか判断
● チャレンジできるところは勇気をもって飛び込む!
● 危険察知したら”いつもの”を使うのも勇気
● 興味よりいい起爆剤はない!
まとめ
![Page 26: フロントエンドフレームワークの選び方 - 20170320](https://reader030.vdocuments.pub/reader030/viewer/2022021503/58e4ab0a1a28abbb038b55c7/html5/thumbnails/26.jpg)
誰だおまえは
● cloudpack / グループリーダー
○ Reserch&Destroy / 戦略ビジネス
○ 言語:PHP / JS / Java / Python / Kotlin / Swift / C# ( / AWS)
○ デザイナ - インフラまで混ざったチーム
● 仕事中、たまに自分の足の匂いで息が苦しくなる
● カノジョができないどころかJapanese Goaisatsu済ませた
![Page 27: フロントエンドフレームワークの選び方 - 20170320](https://reader030.vdocuments.pub/reader030/viewer/2022021503/58e4ab0a1a28abbb038b55c7/html5/thumbnails/27.jpg)
1ページだけ宣伝させて><
募集してます。
● 東京/名古屋/大阪オフィス
● 福利厚生がすごい
● KDDIのグループ会社
● 業種問わず!なんでも相談してください
● 随時個別相談やってます