フロントエンドフレームワークの選び方 - 20170320

フロントエンド フレームワークの選び方 Shinichi Takahashi @ok-osaka #5

対象 ● フレームワーク何にしようかなって悩んでいる人 ● 思考停止で特定のフレームワークに固執している人 ● カノジョができない人

前提知識その１ - イカれたメンバーを紹介 ● チームリーダーをやっている＠３人 ○ ぼ く ： Frontend/(Web/SmartPhone) App ○ メンバー1： Frontend/Designer/Markup ○ メンバー2： Frontend/Infrastructure

前提知識その１ - イカれたメンバーを紹介 ● チームリーダーをやっている＠３人 ○ ぼ く ： Frontend/(Web/SmartPhone) App ○ メンバー1： Frontend/Designer/Markup ○ メンバー2： Frontend/Infrastructure

前提知識その１ - イカれたメンバーを紹介 ● チームリーダーをやっている＠３人 ○ ぼ く ： Frontend/(Web/SmartPhone) App ○ メンバー1： Frontend/Designer/Markup ○ メンバー2： Frontend/Infrastructure つまり、カジュアルに宗教戦争が起こる

前提知識その２ - 仕事の受け方 ● 過去にぼくとメンバー1でVue.jsを社内標準化 ○ それまで漢は黙ってた ● 案件単位の技術選択がかなり自由 ● メンバーアサインが流動的 ● トライアル系が多い ○ 保守とかあんまりしないでおｋ

前提知識その２ - 仕事の受け方 ● 過去にぼくとメンバー1でVue.jsを社内標準化 ○ それまで漢は黙ってた ● 案件単位の技術選択がかなり自由 ● メンバーアサインが流動的 ● トライアル系が多い ○ 保守とかあんまりしないでおｋ

前提知識その２ - 仕事の受け方 ● 過去にぼくとメンバー1でVue.jsを社内標準化 ○ それまで漢は黙ってた ● 案件単位の技術選択がかなり自由 ● メンバーアサインが流動的 ● トライアル系が多い ○ 保守とかあんまりしないでおｋ つまり、共有・理解できる知識幅が必要

前提知識その２ - 仕事の受け方 ● 過去にぼくとメンバー1でVue.jsを社内標準化 ○ それまで漢は黙ってた ● 案件単位の技術選択がかなり自由 ● メンバーアサインが流動的 ● トライアル系が多い ○ 保守とかあんまりしないでおｋ

前提知識その２ - 仕事の受け方 ● 過去にぼくとメンバー1でVue.jsを社内標準化 ○ それまで漢は黙ってた ● 案件単位の技術選択がかなり自由 ● メンバーアサインが流動的 ● トライアル系が多い ○ 保守とかあんまりしないでおｋ つまり、自由度が高い

いつもの流れ ぼく < 案件きたよー ｶﾞﾔｶﾞﾔ（Vue.js?Angular?React??） ｶﾞﾔｶﾞﾔ（SPA?Router?） ｶﾞﾔｶﾞﾔ（Dart?Rust?Flux?Redux?） ｶﾞﾔｶﾞﾔ（axios?superagent）

いつもの流れ ぼく < 案件きたよー ｶﾞﾔｶﾞﾔ（Vue.js?Angular?React??） ｶﾞﾔｶﾞﾔ（SPA?Router?） ｶﾞﾔｶﾞﾔ（Dart?Rust?Flux?Redux?） ｶﾞﾔｶﾞﾔ（axios?superagent） これらを 紐解いていく

要件を整理する ● API通信はするのか ● SPAとして実装する必要があるのか ● 今ある知識で納期に間に合うか ● パフォーマンスは十分か ● 動作環境に適しているか ● フロントの責務はどこまでか ...etc

マトリクスを書いてみる Data Bind ◯ ◯ ◯ API ◯ ✕ ✕ SPA ◯ ◯ △ Build △ ✕ ◯ Learning Cost △ ✕ ◯

案件の要件と当てはめてみる Data Bind ◯ ◯ ◯ API ✕ ✕ SPA ◯ フルスタックな フレームワークが 必要だなぁ... ◯ ◯ △ Build △ ✕ ◯ Learning Cost △ ✕ ◯

案件の要件と当てはめてみる Data Bind ◯ ◯ API ◯ SPA ◯ Build △ ✕ ◯ Learning Cost △ ✕ ◯ 今回は納期に ✕ 余裕があるから 新しいの ◯ やってみようかな ◯ ✕ △

案件の要件と当てはめてみる Data Bind ◯ ◯ ◯ API ◯ ✕ SPA ◯ ◯ Build △ ✕ ◯ Learning Cost △ ✕ ◯ ✕ 新しいバージョン でたらしいから 触ってみようかな △

勉強のしかた ● TODOアプリをつくる ○ い ● 興味のある分野（ゲームとか）のアプリをつくる ○ 。 ● 案件でいきなり実践する ○ 。 せいぜい案件が燃えるくらい。

勉強のしかた ● TODOアプリをつくる ○ 面白くないからおすすめしない ● 興味のある分野（ゲームとか）のアプリをつくる ○ モチベが続くし応援もある。ぼくはこれ ● 案件でいきなり実践する ○ これもやる。死ぬ気でやってもそうそう死なない。 せいぜい案件が燃えるくらい。

結論 興味をもったときに 興味をもったものに 触ればよくね？

実例１：Vue.js（担当：ぼく） ● サービスで公開されているRESTfulなAPIを利用 ● ライト(2,3ページ) ● コンペ都合で納品速度重視 いつも使い慣れたVue.jsに決定

実例２：React（担当：メンバー2） ● 社内向けツールのフロント ○ もともとNode.js製CLI ● ライト（1ページ） ● 時間の余裕はめちゃくちゃある 時間あるしReactNativeやる話もあってReact

実例３：Angular（担当：メンバー1） ● 実例１（Vue.js）の改修案件 ● レビュー出してる間にAngular触りたくなっちゃった ● 時間もたっぷりある 欲望のままAngular

結論 興味をもったときに 興味をもったものに 触っただけ

まとめ ● 現時点でどれだけ知識・技術があるか見極め ● 要件を整理して、挑戦できるか判断 ● チャレンジできるところは勇気をもって飛び込む！ ● 危険察知したら”いつもの”を使うのも勇気 ● 興味よりいい起爆剤はない！

誰だおまえは ● cloudpack / グループリーダー ○ Reserch&Destroy / 戦略ビジネス ○ 言語：PHP / JS / Java / Python / Kotlin / Swift / C# ( / AWS） ○ デザイナ - インフラまで混ざったチーム ● 仕事中、たまに自分の足の匂いで息が苦しくなる ● カノジョができないどころかJapanese Goaisatsu済ませた

１ページだけ宣伝させて＞＜ 募集してます。 ● 東京/名古屋/大阪オフィス ● 福利厚生がすごい ● KDDIのグループ会社 ● 業種問わず！なんでも相談してください ● 随時個別相談やってます