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

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 △ ✕ ◯

LearningCost

△ ✕ ◯

案件の要件と当てはめてみる

Data Bind ◯ ◯ ◯

API ◯ ✕ ✕

SPA ◯ ◯ △

Build △ ✕ ◯

LearningCost

△ ✕ ◯

フルスタックなフレームワークが必要だなぁ...

案件の要件と当てはめてみる

Data Bind ◯ ◯ ◯

API ◯ ✕ ✕

SPA ◯ ◯ △

Build △ ✕ ◯

LearningCost

△ ✕ ◯

今回は納期に余裕があるから

新しいのやってみようかな

案件の要件と当てはめてみる

Data Bind ◯ ◯ ◯

API ◯ ✕ ✕

SPA ◯ ◯ △

Build △ ✕ ◯

LearningCost

△ ✕ ◯

新しいバージョンでたらしいから触ってみようかな

勉強のしかた

● TODOアプリをつくる

○ い

● 興味のある分野（ゲームとか）のアプリをつくる

○ 。

● 案件でいきなり実践する

○ 。

せいぜい案件が燃えるくらい。

勉強のしかた

● TODOアプリをつくる

○ 面白くないからおすすめしない

● 興味のある分野（ゲームとか）のアプリをつくる

○ モチベが続くし応援もある。ぼくはこれ

● 案件でいきなり実践する

○ これもやる。死ぬ気でやってもそうそう死なない。

せいぜい案件が燃えるくらい。

結論

興味をもったときに

興味をもったものに

触ればよくね？

● サービスで公開されているRESTfulなAPIを利用

● ライト(2,3ページ)

● コンペ都合で納品速度重視

いつも使い慣れたVue.jsに決定

実例１：Vue.js（担当：ぼく）

● 社内向けツールのフロント

○ もともとNode.js製CLI

● ライト（1ページ）

● 時間の余裕はめちゃくちゃある

時間あるしReactNativeやる話もあってReact

実例２：React（担当：メンバー2）

● 実例１（Vue.js）の改修案件

● レビュー出してる間にAngular触りたくなっちゃった

● 時間もたっぷりある

欲望のままAngular

実例３：Angular（担当：メンバー1）

結論

興味をもったときに

興味をもったものに

触っただけ

● 現時点でどれだけ知識・技術があるか見極め

● 要件を整理して、挑戦できるか判断

● チャレンジできるところは勇気をもって飛び込む！

● 危険察知したら”いつもの”を使うのも勇気

● 興味よりいい起爆剤はない！

まとめ

誰だおまえは

● cloudpack / グループリーダー

○ Reserch&Destroy / 戦略ビジネス

○ 言語：PHP / JS / Java / Python / Kotlin / Swift / C# ( / AWS）

○ デザイナ - インフラまで混ざったチーム

● 仕事中、たまに自分の足の匂いで息が苦しくなる

● カノジョができないどころかJapanese Goaisatsu済ませた

１ページだけ宣伝させて＞＜

募集してます。

● 東京/名古屋/大阪オフィス

● 福利厚生がすごい

● KDDIのグループ会社

● 業種問わず！なんでも相談してください

● 随時個別相談やってます