Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
フロントエンド
フレームワークの選び方
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のグループ会社
● 業種問わず!なんでも相談してください
● 随時個別相談やってます
Upcoming SlideShare
Loading in …5
×

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

4,409 views

Published on

ng-kyoto #5

Published in: Technology
  • Hi there! I just wanted to share a list of sites that helped me a lot during my studies: .................................................................................................................................... www.EssayWrite.best - Write an essay .................................................................................................................................... www.LitReview.xyz - Summary of books .................................................................................................................................... www.Coursework.best - Online coursework .................................................................................................................................... www.Dissertations.me - proquest dissertations .................................................................................................................................... www.ReMovie.club - Movies reviews .................................................................................................................................... www.WebSlides.vip - Best powerpoint presentations .................................................................................................................................... www.WritePaper.info - Write a research paper .................................................................................................................................... www.EddyHelp.com - Homework help online .................................................................................................................................... www.MyResumeHelp.net - Professional resume writing service .................................................................................................................................. www.HelpWriting.net - Help with writing any papers ......................................................................................................................................... Save so as not to lose
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Follow the link, new dating source: ❶❶❶ http://bit.ly/2Qu6Caa ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating for everyone is here: ❶❶❶ http://bit.ly/2Qu6Caa ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

フロントエンドフレームワークの選び方 - 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のグループ会社 ● 業種問わず!なんでも相談してください ● 随時個別相談やってます

×