Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
フロントエンド
フレームワークの選び方
Shinichi Takahashi @ok-osaka #5
対象
● フレームワーク何にしようかなって悩んでいる人
● 思考停止で特定のフレームワークに固執している人
● カノジョができない人
前提知識その1 - イカれたメンバーを紹介
● チームリーダーをやっている@3人
○ ぼ  く : Frontend/(Web/SmartPhone) App
○ メンバー1: Frontend/Designer/Markup
○ メンバー2:...
前提知識その1 - イカれたメンバーを紹介
● チームリーダーをやっている@3人
○ ぼ  く : Frontend/(Web/SmartPhone) App
○ メンバー1: Frontend/Designer/Markup
○ メンバー2:...
前提知識その1 - イカれたメンバーを紹介
● チームリーダーをやっている@3人
○ ぼ  く : Frontend/(Web/SmartPhone) App
○ メンバー1: Frontend/Designer/Markup
○ メンバー2:...
前提知識その2 - 仕事の受け方
● 過去にぼくとメンバー1でVue.jsを社内標準化
○ それまで漢は黙ってた
● 案件単位の技術選択がかなり自由
● メンバーアサインが流動的
● トライアル系が多い
○ 保守とかあんまりしないでおk
前提知識その2 - 仕事の受け方
● 過去にぼくとメンバー1でVue.jsを社内標準化
○ それまで漢は黙ってた
● 案件単位の技術選択がかなり自由
● メンバーアサインが流動的
● トライアル系が多い
○ 保守とかあんまりしないでおk
前提知識その2 - 仕事の受け方
● 過去にぼくとメンバー1でVue.jsを社内標準化
○ それまで漢は黙ってた
● 案件単位の技術選択がかなり自由
● メンバーアサインが流動的
● トライアル系が多い
○ 保守とかあんまりしないでおk
つまり...
前提知識その2 - 仕事の受け方
● 過去にぼくとメンバー1でVue.jsを社内標準化
○ それまで漢は黙ってた
● 案件単位の技術選択がかなり自由
● メンバーアサインが流動的
● トライアル系が多い
○ 保守とかあんまりしないでおk
前提知識その2 - 仕事の受け方
● 過去にぼくとメンバー1でVue.jsを社内標準化
○ それまで漢は黙ってた
● 案件単位の技術選択がかなり自由
● メンバーアサインが流動的
● トライアル系が多い
○ 保守とかあんまりしないでおk
つまり...
ぼく < 案件きたよー
ガヤガヤ(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アプリをつくる
○ 面白くないからおすすめしない
● 興味のある分野(ゲームとか)のアプリをつくる
○ モチベが続くし応援もある。ぼくはこれ
● 案件でいきなり実践する
○ これもやる。死ぬ気でやってもそうそう死なない...
結論
興味をもったときに
興味をもったものに
触ればよくね?
● サービスで公開されているRESTfulなAPIを利用
● ライト(2,3ページ)
● コンペ都合で納品速度重視
いつも使い慣れたVue.jsに決定
実例1:Vue.js(担当:ぼく)
● 社内向けツールのフロント
○ もともとNode.js製CLI
● ライト(1ページ)
● 時間の余裕はめちゃくちゃある
時間あるしReactNativeやる話もあってReact
実例2:React(担当:メンバー2)
● 実例1(Vue.js)の改修案件
● レビュー出してる間にAngular触りたくなっちゃった
● 時間もたっぷりある
欲望のままAngular
実例3:Angular(担当:メンバー1)
結論
興味をもったときに
興味をもったものに
触っただけ
● 現時点でどれだけ知識・技術があるか見極め
● 要件を整理して、挑戦できるか判断
● チャレンジできるところは勇気をもって飛び込む!
● 危険察知したら”いつもの”を使うのも勇気
● 興味よりいい起爆剤はない!
まとめ
誰だおまえは
● cloudpack / グループリーダー
○ Reserch&Destroy / 戦略ビジネス
○ 言語:PHP / JS / Java / Python / Kotlin / Swift / C# ( / AWS)
○ デザ...
1ページだけ宣伝させて><
募集してます。
● 東京/名古屋/大阪オフィス
● 福利厚生がすごい
● KDDIのグループ会社
● 業種問わず!なんでも相談してください
● 随時個別相談やってます
Próxima SlideShare
Cargando en…5
×

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

3.941 visualizaciones

Publicado el

ng-kyoto #5

Publicado en: Tecnología
  • Sé el primero en comentar

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

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

×