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

Technical Selection for Surviving the Front End...

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
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
The Making of AI Chips
Avatar for Preferred Networks pfn
PRO
0
760
ビジュアルプログラミングIoTLT vol.23
Avatar for 1ft-seabass 1ftseabass
PRO
0
110
Amazon Bedrock 経由の Claude Cowork を試してみよう・MCP にも繋いでみよう
Avatar for Kazuya Sugimoto sugimomoto
0
150
キャリア25年目にしてTypeScript に出会うまで - 「型」を通じて振り返るプログラミング言語遍歴 / Meeting TypeScript After 25 Years in Tech - Looking Back at My Programming Language Journey Through "Types"
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
2
270
その英語学習、AWSで代替できませんか？
Avatar for Tatsuya suzutatsu
1
240
ソフトウェアサプライチェーン攻撃対策として今からサクッとできること
Avatar for GMO Flatt Security flatt_security
2
130
TypeScriptはどのようにどこまで推論できるのか ─ とにかく as は禁止で
Avatar for ypresto ypresto
3
420
Agentic AI時代における メルカリのAIガバナンスとガードレール実装
Avatar for ichihara naoichihara
15
14k
20260528_生成AIを専属DSに_Howの次にすべきことを考える
Avatar for NobuakiOshiro doradora09
PRO
0
190
[みん強]AIの価値を最大化するデータ基盤戦略：Self-Service型Data Meshへの転換とAgentic AI Meshに向けた取り組み with Snowflake他
Avatar for Matsubara y_matsubara
1
180
FinJAWS_ECSｰRDSProxy
Avatar for Hidehiko ASAHI asahihidehiko
0
110
脅威をエンジニアリングの糧にして：恐怖を乗り越えた先にあったもの / Turn threats into fuel for engineering: what lay beyond overcoming fear
Avatar for nrs nrslib
1
230

Featured

See All Featured
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2.2k
The Limits of Empathy - UXLibs8
Avatar for Cassini Nazir cassininazir
1
340
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.7k
Prompt Engineering for Job Search
Avatar for Mfonobong Umondia mfonobong
0
320
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
Leveraging Curiosity to Care for An Aging Population
Avatar for Cassini Nazir cassininazir
1
240
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
28
3.5k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
16k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
163
24k
AI in Enterprises - Java and Open Source to the Rescue
Avatar for ivargrimstad ivargrimstad
0
1.3k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
672
58k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4.3k

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