Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Technical Selection for Surviving the Front End...

Avatar for gutchom gutchom
September 16, 2017
Technology
230
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
Podは生きているのにGoだけが落ちる：GOGCとGOMEMLIMITで追うInvisible OOM Killの謎
Avatar for Watanabe Takeshi(Buzz) tkc66buzz
1
500
Tab5をRubyで動くパソコンにする
Avatar for Katsuhiko Kageyama kishima
2
280
Sigmaユーザーのための有用リソース一挙公開 & Sigmaで使えるMCP #sigma_ucj /useful-resources-for-sigma-computing-users-and-mcps-with-sigma
Avatar for shinyaa31 shinyaa31
0
180
AI 駆動 Terraform 開発/SRE_BizReach_MIXI_2
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
3
2k
アプリログインとWeb認証基盤をつなぐ ASWebAuthenticationSession 作法
Avatar for Go Takagi shimastripe
1
160
From Vanilla Kubernetes to a Batteries-Included Platform: Developer Experience at 1,300+ Clusters
Avatar for yosshi_ yosshi_
0
680
Deploying a Full-Stack Bun-Native Framework on Cloudflare Workers
Avatar for daiki7nohe 7nohe
0
130
GoCon2026 - Open Source, Open World
Avatar for sanposhiho sanposhiho
2
2.2k
こんなアーキテクチャ図は嫌だ BEYOND THE TIME: 半年後の自分へ贈る15のメッセージ / 15 of Anti-pattern in AWS Architecture Diagrams
Avatar for Naomi Yamasaki naospon
3
300
WAF 運用改善の承認サイクル/SRE_BizReach_MIXI_1
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
2
410
【視聴者参加型！】AWSセキュリティアンチパターンクイズ
Avatar for Shun Yoshie syoshie
1
490
コーディングエージェントでM5Stack系の開発を少し試した時の話 / M5 Japan Tour 2026 Autumn 東京
Avatar for you（@youtoy） you
PRO
0
110

Featured

See All Featured
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4.6k
Getting science done with accelerated Python computing platforms
Avatar for Jacob Tomlinson jacobtomlinson
2
470
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
331
25k
Design in an AI World
Avatar for tapps tapps
1
310
Exploring the relationship between traditional SERPs and Gen AI search
Avatar for Ray Grieselhuber raygrieselhuber
PRO
2
4.3k
Navigating Team Friction
Avatar for Lara Hogan lara
192
16k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
287
14k
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
870
Tell your own story through comics
Avatar for letsgokoyo letsgokoyo
1
1.1k
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
Avatar for r-kagaya rkaga
63
45k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
57
14k
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
1
380

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Ͱͨ͠