Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Technical Selection for Surviving the Front End...

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for gutchom gutchom
September 16, 2017
Technology
220
1

Technical Selection for Surviving the Front End Sengoku Period

フロントエンド戦国時代を生き延びるための技術選定
@Webフレーム品評会

Avatar for gutchom

gutchom

September 16, 2017

Other Decks in Technology

See All in Technology
2026TECHFRESH畢業分享會 - Lightning Talk - 資料也要 CI/CD? 用 Airbyte 自動化資料同步
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
700
就職⽀援サービスにおけるキャリアアドバイザーのシフトスケジューリング
Avatar for Recruit recruitengineers
PRO
1
130
中期計画、2回作ってみた　～業務委託と正社員、両方の視点から～
Avatar for 株式会社出前館 demaecan
1
650
2026TECHFRESH畢業分享會 - AI 時代的人生存檔點
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
710
白金鉱業Meetup_Vol.24_「AIエージェントは分けるほど良い」は本当か？ / Is it true that “the more you divide AI agents, the better”?
Avatar for BrainPad brainpadpr
1
260
AI Engineering Summit Tokyo 2026 AIの前に、やることがある 〜医療データ企業の4フェーズ〜
Avatar for Daisuke Taniwaki dtaniwaki
0
2.5k
2026.06.13_AI時代に事業会社が「SIer出身エンジニア」を求める理由 / Why Businesses Seek Engineers with a System Integrator Background in the AI ​​Era
Avatar for jumpei_ikegami jumtech
0
1k
Microsoft Build Keynoteふりかえり
Avatar for tomokusaba tomokusaba
0
120
実装は速くなった、レビューはどうする？ ― 自身のレビューをAIで再現させるサーヴァントエンジニアリングのすゝめ / Implementation got faster. So what about reviews? — An invitation to Servant Engineering: Recreating your own code reviews with AI
Avatar for nrs nrslib
8
4.6k
AI-DLCを活用した高品質・安全なAI駆動開発実践 / AI Driven Development with AI-DLC
Avatar for 吉田真吾 yoshidashingo
0
170
Socrates × Looker　〜セマンティックレイヤーで進化するデータ分析エージェント〜
Avatar for Uchide Hiroki(ucchi-) hanon52_
3
2.1k
【Cyber-sec+】経営層を"動かす"ための考え方
Avatar for Hisashi Hibino hssh2_bin
0
110

Featured

See All Featured
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
Avatar for Akihiro Kokubo akihiro_kokubo
PRO
71
40k
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
2
690
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon Słowik szymonslowik
1
1.1k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1033
470k
Sam Torres - BigQuery for SEOs
Avatar for Tech SEO Connect techseoconnect
PRO
0
280
Information Architects: The Missing Link in Design Systems
Avatar for Michelle Chin soysaucechin
0
970
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.5k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.3k
Claude Code どこまでも/ Claude Code Everywhere
Avatar for nwiizo nwiizo
65
56k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
210k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
378
71k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
55
8.2k

Transcript

  1. ϑϩϯτΤϯυઓࠃ࣌୅Λ ੜ͖ԆͼΔͨΊͷ ٕज़બఆ @gutchom 2017೥9݄16೔ WebϑϨʔϜϫʔΫ඼ධձ

  2. ࣗݾ঺հ @gutchom (͙ͬͪΐΉ) ϑϩϯτΤϯυΤϯδχΞ TypeScript / JavaScript React.js / Vue.js

  3. ࣗݾ঺հ झຯ͸։ൃ ࢓ࣄ͸ແ৬

  4. ࣗݾ঺հ ͍·࡞ͬͯΔ΋ͷ: ݕࡧΫΤϦϏϧμʔ

  5. None

  6. ຊ೔͓࿩͢͠ΔτϐοΫ̐఺

  7. ͦͷϑϩϯτΤϯυɺ ϞμϯͰ͋Δඞཁ͕͋Γ·͔͢ʁ

  8. React.jsͱVue.js

  9. ϞμϯϑϩϯτΤϯυ ؀ڥߏஙͷপ

  10. ൒೥ޙʹࢮͳͳ͍ͨΊͷ ϑϩϯτΤϯυ؀ڥ

  11. ͦͷϑϩϯτΤϯυɺ ϞμϯͰ͋Δඞཁ͕͋Γ·͔͢ʁ

  12. ͦͷϑϩϯτΤϯυɺ ϞμϯͰ͋Δඞཁ͕͋Γ·͔͢ʁ

  13. ⚠͜ͷ߲໨͸ࢲ͙ͬͪΐΉͷಠࣗݟղͰ͢⚠ ͦͷϑϩϯτΤϯυɺ ϞμϯͰ͋Δඞཁ͕͋Γ·͔͢ʁ

  14. • jQueryແࡑ ͦͷϑϩϯτΤϯυɺ ϞμϯͰ͋Δඞཁ͕͋Γ·͔͢ʁ

  15. • jQuery(͸DOMͷૢ࡞ʹݶΓ)ແࡑ ͦͷϑϩϯτΤϯυɺ ϞμϯͰ͋Δඞཁ͕͋Γ·͔͢ʁ

  16. • jQuery(͸DOMͷૢ࡞ʹݶΓ)ແࡑ • ΩʔϙΠϯτ͸View͕StateΛ͔࣋ͭ൱͔ ͦͷϑϩϯτΤϯυɺ ϞμϯͰ͋Δඞཁ͕͋Γ·͔͢ʁ

  17. • jQuery(͸DOMͷૢ࡞ʹݶΓ)ແࡑ • ΩʔϙΠϯτ͸View͕StateΛ͔࣋ͭ൱͔ • ϞμϯϑϩϯτΤϯυ͸όζϫʔυ
 ͦͷϑϩϯτΤϯυɺ ϞμϯͰ͋Δඞཁ͕͋Γ·͔͢ʁ

  18. • jQuery(͸DOMͷૢ࡞ʹݶΓ)ແࡑ • ΩʔϙΠϯτ͸View͕StateΛ͔࣋ͭ൱͔ • ϞμϯϑϩϯτΤϯυ͸όζϫʔυ
 ΫϥΠΞϯταΠυΞϓϦέʔγϣϯ։ൃ
 ͦͷϑϩϯτΤϯυɺ ϞμϯͰ͋Δඞཁ͕͋Γ·͔͢ʁ

  19. ॏཁͳͷ͸ɺ

  20. GUIΞϓϦέʔγϣϯ։ൃͷ ֮ޛ

  21. GUIΞϓϦέʔγϣϯ։ൃͷ ֮ޛ

  22. GUIΞϓϦέʔγϣϯ։ൃͷ ֮ޛ

  23. GUIΞϓϦέʔγϣϯ։ൃͷ ֮ޛ

  24. React.jsͱVue.js

  25. React.jsͱVue.js ؆қൺֱର৅ද

  26. React.jsͱVue.js React.js Vue.js (v2.x) VirtualDOM YES YES Componentࢦ޲ YES YES

    JSX Must Not have to Ϗϧυπʔϧ Must Not have to σʔλόΠϯσΟϯά NO YES TypeScript Good Hmm… ؆қൺֱର৅ද

  27. React.jsͱVue.js ͦΕͧΕΛ༻͍࣮ͨࡍͷίʔυ

  28. React.jsͰͷίʔυ

  29. React.jsͰͷίʔυ ϥΠϑαΠΫϧϝιουɾΠϕϯτϋϯυϥ

  30. React.jsͰͷίʔυ Ϩϯμʔؔ਺ (ϚʔΫΞοϓ)

  31. React.jsͰͷίʔυ Stateless Functional Component (ঢ়ଶͱϥΠϑαΠΫϧΛ࣋ͨͳ͍ίϯϙʔωϯτ)

  32. Vue.jsͰͷίʔυ

  33. None

  34. ESΫϥεߏจ͡Όͳ͍…

  35. ESΫϥεߏจ͡Όͳ͍… ͳͷͰ ΦϒδΣΫτʹهड़ͨ͠ ίϯϙʔωϯτఆٛΛ ίϯετϥΫλ΁

  36. ESΫϥεߏจ͡Όͳ͍… ͳͷͰ ΦϒδΣΫτʹهड़ͨ͠ ίϯϙʔωϯτఆٛΛ ίϯετϥΫλ΁ ੜͷJavaScriptͰهड़Մೳʂ

  37. VueΠϯελϯεͷ࣋ͭػೳ

  38. VueΠϯελϯεͷ࣋ͭػೳ • JSͰͷ஋มߋΛViewʹࣗಈ൓ө • Viewͷೖྗ͕JSͷ஋Λࣗಈมߋ • ஋มߋ࣌ͷΠϕϯτൃՐ • getter/setter ม਺ͷ૒ํ޲όΠϯσΟϯά

  39. ͱ͜ΖͰ

  40. Vueίϯϙʔωϯτ΋ Ϟμϯʹॻ͖͍ͨ

  41. (ຐվ଄)Vue.jsͰͷίʔυ Vueίϯϙʔωϯτఆٛ VueςϯϓϨʔτఆٛ (Pug/Jade)

  42. (ຐվ଄)Vue.jsͰͷίʔυ VueςϯϓϨʔτఆٛ (Pug/Jade) VueςϯϓϨʔτఆٛ (Pug/Jade)

  43. ϞμϯϑϩϯτΤϯυ ؀ڥߏஙͷপ

  44. • ։ൃ؀ڥ͕୲͏λεΫ ϞμϯϑϩϯτΤϯυ ؀ڥߏஙͷপ

  45. • ։ൃ؀ڥ͕୲͏λεΫ • ϒϥ΢βͰಈ࡞͢ΔJS࣮ߦίʔυͷϏϧυ ϞμϯϑϩϯτΤϯυ ؀ڥߏஙͷপ

  46. • ։ൃ؀ڥ͕୲͏λεΫ • ϒϥ΢βͰಈ࡞͢ΔJS࣮ߦίʔυͷϏϧυ
 (ECMAScript 6+, JSX, TypeScript…) ϞμϯϑϩϯτΤϯυ ؀ڥߏஙͷপ

  47. • ։ൃ؀ڥ͕୲͏λεΫ • ϒϥ΢βͰಈ࡞͢ΔJS࣮ߦίʔυͷϏϧυ
 (ECMAScript 6+, JSX, TypeScript…) • ϝλݴޠ͔ΒCSS΁ͷίϯόʔτ

    ϞμϯϑϩϯτΤϯυ ؀ڥߏஙͷপ

  48. • ։ൃ؀ڥ͕୲͏λεΫ • ϒϥ΢βͰಈ࡞͢ΔJS࣮ߦίʔυͷϏϧυ
 (ECMAScript 6+, JSX, TypeScript…) • ϝλݴޠ͔ΒCSS΁ͷίϯόʔτ


    (CSSnext, Sass, Less, Stylus…) ϞμϯϑϩϯτΤϯυ ؀ڥߏஙͷপ

  49. • ։ൃ؀ڥ͕୲͏λεΫ • ϒϥ΢βͰಈ࡞͢ΔJS࣮ߦίʔυͷϏϧυ
 (ECMAScript 6+, JSX, TypeScript…) • ϝλݴޠ͔ΒCSS΁ͷίϯόʔτ


    (CSSnext, Sass, Less, Stylus…) • ϞοΫαʔόʔͷىಈ ϞμϯϑϩϯτΤϯυ ؀ڥߏஙͷপ

  50. • ։ൃ؀ڥ͕୲͏λεΫ • ϒϥ΢βͰಈ࡞͢ΔJS࣮ߦίʔυͷϏϧυ
 (ECMAScript 6+, JSX, TypeScript…) • ϝλݴޠ͔ΒCSS΁ͷίϯόʔτ


    (CSSnext, Sass, Less, Stylus…) • ϞοΫαʔόʔͷىಈ • ࣗಈςετͷ࣮ߦ ϞμϯϑϩϯτΤϯυ ؀ڥߏஙͷপ

  51. • ։ൃ؀ڥ͕୲͏λεΫ • ϒϥ΢βͰಈ࡞͢ΔJS࣮ߦίʔυͷϏϧυ
 (ECMAScript 6+, JSX, TypeScript…) • ϝλݴޠ͔ΒCSS΁ͷίϯόʔτ


    (CSSnext, Sass, Less, Stylus…) • ϞοΫαʔόʔͷىಈ • ࣗಈςετͷ࣮ߦ • etc… ϞμϯϑϩϯτΤϯυ ؀ڥߏஙͷপ

  52. • ओཁπʔϧ • Node.js: ։ൃϚγϯ্ͰJavaScriptιϑτ΢ΣΞΛ࣮ߦ • npm: ύοέʔδϚωʔδϟʔ • babel:

    JSͷίϯόʔλʔ • webpack / browserify: ϥΠϒϥϦґଘؔ܎ղܾπʔϧ • Ճ͑ͯ
 ֤छTesting framework, ߏจνΣοΧʔ, ϞμϯϑϩϯτΤϯυ ؀ڥߏஙͷপ

  53. • ओཁπʔϧ • Node.js: ։ൃϚγϯ্ͰJavaScriptιϑτ΢ΣΞΛ࣮ߦ • npm: ύοέʔδϚωʔδϟʔ • babel:

    JSͷίϯόʔλʔ • webpack / browserify: ϥΠϒϥϦґଘؔ܎ղܾπʔϧ • Ճ͑ͯ
 ֤छTesting framework, ߏจνΣοΧʔ, ϞμϯϑϩϯτΤϯυ ؀ڥߏஙͷপ

  54. • ओཁπʔϧ • Node.js: ։ൃϚγϯ্ͰJavaScriptιϑτ΢ΣΞΛ࣮ߦ • npm: ύοέʔδϚωʔδϟʔ • babel:

    JSͷίϯόʔλʔ • webpack / browserify: ϥΠϒϥϦґଘؔ܎ղܾπʔϧ • Ճ͑ͯ
 ֤छTesting framework, ߏจνΣοΧʔ, ϞμϯϑϩϯτΤϯυ ؀ڥߏஙͷপ

  55. • ओཁπʔϧ • Node.js: ։ൃϚγϯ্ͰJavaScriptιϑτ΢ΣΞΛ࣮ߦ • npm: ύοέʔδϚωʔδϟʔ • babel:

    τϥϯεύΠϥ (ίϯόʔλʔ) • webpack / browserify: ϥΠϒϥϦґଘؔ܎ղܾπʔϧ • Ճ͑ͯ
 ֤छTesting framework, ߏจνΣοΧʔ, ϞμϯϑϩϯτΤϯυ ؀ڥߏஙͷপ

  56. • ओཁπʔϧ • Node.js: ։ൃϚγϯ্ͰJavaScriptιϑτ΢ΣΞΛ࣮ߦ • npm: ύοέʔδϚωʔδϟʔ • babel:

    τϥϯεύΠϥ (ίϯόʔλʔ) • webpack / browserify: ϥΠϒϥϦґଘؔ܎ղܾπʔϧ • Ճ͑ͯ
 ֤छTesting framework, ߏจνΣοΧʔ, ϞμϯϑϩϯτΤϯυ ؀ڥߏஙͷপ

  57. • ओཁπʔϧ • Node.js: ։ൃϚγϯ্ͰJavaScriptιϑτ΢ΣΞΛ࣮ߦ • npm: ύοέʔδϚωʔδϟʔ • babel:

    τϥϯεύΠϥ (ίϯόʔλʔ) • webpack / browserify: ϥΠϒϥϦґଘؔ܎ղܾπʔϧ • Ճ͑ͯ
 ֤छTesting framework, ߏจνΣοΧʔ, ϞμϯϑϩϯτΤϯυ ؀ڥߏஙͷপ

  58. ൒೥ޙʹࢮͳͳ͍ͨΊͷ ϑϩϯτΤϯυ؀ڥ

  59. ൒೥ޙʹࢮͳͳ͍ͨΊͷ ϑϩϯτΤϯυ؀ڥ • ϥΠϒϥϦͱϏδωεϩδοΫ͸ૄ݁߹ʹ

  60. ൒೥ޙʹࢮͳͳ͍ͨΊͷ ϑϩϯτΤϯυ؀ڥ • ϥΠϒϥϦͱϏδωεϩδοΫ͸ૄ݁߹ʹ • ݸʑͷπʔϧ΋ৗʹೖΕସ͑Մೳʹ

  61. ൒೥ޙʹࢮͳͳ͍ͨΊͷ ϑϩϯτΤϯυ؀ڥ • ϥΠϒϥϦͱϏδωεϩδοΫ͸ૄ݁߹ʹ • ݸʑͷπʔϧ΋ৗʹೖΕସ͑Մೳʹ • ؀ڥߏஙͷ࣌఺Ͱઃܭࢦ਑Λ໌֬ʹ࣋ͭ

  62. ͦΕͰ͸Έͳ͞Μ ઃܭ͠·͠ΐ͏ɺ

  63. ࠷ߴͷ ϢʔβʔମݧΛʂ

  64. ͝੩ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ @gutchomͰͨ͠