Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
2018年秋 JavaScriptエンジニアの技術投資状況 #jserinfo
Search
potato4d(Takuma HANATANI)
September 22, 2018
Programming
14
3.6k
2018年秋 JavaScriptエンジニアの技術投資状況 #jserinfo
2018/09/22 に JSer.info 400回記念イベントにて発表したプレゼンテーションスライドです。
potato4d(Takuma HANATANI)
September 22, 2018
Tweet
Share
More Decks by potato4d(Takuma HANATANI)
See All by potato4d(Takuma HANATANI)
どうせキレイに書けない処理は逆にAIに書いてもらうほうが良い説 / #kyotojs 22
potato4d
3
400
TSX First な Zero-Runtime SSG potato4d/dodai とその仕組み / owned static site generator #kyotojs
potato4d
1
2.3k
Vue.js with TSX - From Vue 2.x to Vue 3 #v_tokyo11
potato4d
9
4.9k
終わりゆく Vue 2.x 時代の状態設計のアンサー - Vue 3 の Provider への期待 / The Last Architecture of the Vue 2.x
potato4d
25
6.9k
Web Worker を使ってブラウザ上でポケモンの画像を解析したい! / Pokemon recognition from screenshots in browser using web worker
potato4d
0
1.3k
Firebase & Google Cloud によるサーバーレス帳票管理 #FJUG / Serverless Architecture in Candy
potato4d
8
3.7k
NestJS meetup Tokyo Opening Talk / What is NestJS? #nestjs_meetup
potato4d
11
4.1k
私たちはなぜ SPA で開発するのか / Why you choose SPA
potato4d
39
27k
Amplify Console 誕生以来本番運用しつづけてわかったこと #awswakaran_tokyo
potato4d
6
3.5k
Other Decks in Programming
See All in Programming
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
400
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
16
5.7k
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
1
310
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
140
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
630
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
2
1k
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
280
PHPUnitの限界をPlaywrightで補完するテストアプローチ
yuzneri
0
200
GPUを計算資源として使おう!
primenumber
1
270
Yes, You Can Work on Rails & any other Gem
kaspth
0
110
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
7.4k
20250708_JAWS_opscdk
takuyay0ne
2
130
Featured
See All Featured
Building Adaptive Systems
keathley
43
2.7k
Building an army of robots
kneath
306
45k
Writing Fast Ruby
sferik
628
62k
Into the Great Unknown - MozCon
thekraken
40
1.9k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
We Have a Design System, Now What?
morganepeng
53
7.7k
GitHub's CSS Performance
jonrohan
1031
460k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Transcript
2018ळ JavaScriptΤϯδχΞͷٕज़ࢿঢ়گ HANATANI Takuma(@potato4d) 2018.09.22 #jserinfo
Agenda • ࣗݾհ • ݸਓతͳ 2018 ळݱࡏͷٕज़ࢿঢ়گ • Nuxt.jsʹ͍ͭͯͷϦβϧτ •
αʔόʔϨεʹ͍ͭͯͷϦβϧτ • BET͢Δٕज़ͷͪΐͬͱมΘͬͨج४ • ͳΜͷͨΊʹٕज़ʹBET͢Δͷ͔ • ʮ1.5าઌʯͰੜ׆͠ଓ͚Δ͜ͱ
Profile
About • Ֆ୩ຏ(@potato4d) • ϑϦʔϥϯεΤϯδχΞ(߸: ElevenBack)͕ຊۀ • ϑϩϯτΤϯυ(React, Vue&Nuxt), όοΫΤϯυ(PHP,
Node) • ΠϯϑϥΫϥυ(AWS)ݶఆͰαʔόʔϨεपΓ • ৬ྖҬ • ෛ։ൃɾ४ҕ։ൃ • ܦݧऀ͚ITڭҭɾٕज़ϥΠλʔɾࣥචۀɾߨԋͳͲ • ۀҕୗઌ → Increments, ALIS ͳͲ
About • Ֆ୩ຏ(@potato4d) • ՝֎׆ಈ • Vue.js ຊޠυΩϡϝϯτ ίΞϝϯςφ •
Vue.js / Nuxt.js ຊޠυΩϡϝϯτ ίΞϝϯςφ ʔ ʔ ʔ ʔ
About Ϋϥυ αʔόʔαΠυ ϑϩϯτΤϯυ 0UIFST 4FSWJDF8PSLFS
"OHVMBS 3FBDUKT 7VFKT/VYUKT 0UIFST 3VCZ 1)1 αʔόʔϨε
About https://www.amazon.co.jp/dp/4863542569/
About ͳਓͷ 2018
ݸਓతͳ 2018 ळݱࡏͷٕज़ࢿঢ়گ
2018ͷ Nuxt.js • ࡢՆʹݱͷॳೖʹޭ • 20Ҏ্ͷϓϩδΣΫτͰ࣮ફ • ίΞʹগ͚ͩ͠ߩݙɺυΩϡϝϯτϝϯςφ • WebͰͷใൃ৴
• HTMLExperts.jpدߘ, Qiitaهࣄߘ • ࢴഔମ • ಉਓɾۀͰҰ
2018ͷ Nuxt.js • Qiita Vue/Nuxt λάຊҰ • ͞Βʹ͜͜ҰͰߘೋഒʹ • Ҋ͕݅΄΅શͯ
Vue.js → Nuxt.js • ഒύϑΥʔϚϯε͕ग़ΔͷͰফԽޮ૿ • ઐ༻ͷ୯ஶग़൛ • OSSతߩݙྔ૿Ճ • ઐͱͯ͠ͷ࿐ग़ػձͷ૿Ճ
2018ͷ Nuxt.js
2018ͷαʔόʔϨε • ͪ͜ΒݱͰͷೖࡢՆʙ • Web αʔϏεόοΫΤϯυɺιγϟήΩϟ ϯϖʔϯαΠτ API ͳͲ •
ٕज़ • AWS / GCP&Firebase functions Λར༻ • ۀҕୗઌͷͻͱͭʮALISʯ Nuxt.js on Lambda & Serverless Python
2018ͷαʔόʔϨε • ҎԼͷจ຺Ͱׂͱ͕ • Nuxt + Firebase • Serverless Universal
Application • ϕʔγοΫͳαʔόʔϨεී௨ʹࢀೖ͕ ͔ͬͨ • ͦͷ৽نͷͭ·Έ৯͍࠷༏ઌ
Γ3ϲ݄झຯʹׂ͖͍ͨ • ʮͰ͖Δ͜ͱ͕͕Βͳ͍ͷΒͳ͍ʯΛج४ͰਐΊΔ • Firebase FireStore Tokyo ͕དྷΔͱ for
Web ͕όέͦ͏ • ͬͱ͓͖͍ͬͯͨ • ࠷ۙ୯७ʹڵຯຊҐͰ Dart/Flutter Λ৮͍ͬͯΔ • ͬͪ݁͜ߏલ͔Β͋Δ͚ͲͦΖͦΖsuffixͱΕΔ͠ຊޠ ใগͳ͍͠Ͱ৭ʑ༡ͦ͏
About օ͞ΜͲΜͳײ͡Ͱ͔͢
BET͢Δٕज़ͷͪΐͬͱมΘͬͨج४
৽͍ٕ͠ज़ΛΩϟονΞοϓ͢Δ͖͔͚ͬ • ٕज़తڵຯͷΈ • ͬͨΒྑ͍ • ࠓͷࣄͰඞཁ • ͜ΕͬͨΒྑ͍
৽͍ٕ͠ज़ΛΩϟονΞοϓ͢Δ͖͔͚ͬ • ٕज़తڵຯͷΈ • ͬͨΒྑ͍ • ࠓͷࣄͰඞཁ • ͜ΕͬͨΒྑ͍ ඞવੑͷ͋Δͷʹ͍ͭͯΔ͚ͩ
৽͍ٕ͠ज़ΛΩϟονΞοϓ͢Δ͖͔͚ͬ • ٕज़తڵຯͷΈ • ͬͨΒྑ͍ • ࠓͷࣄͰඞཁ • ͜ΕͬͨΒྑ͍ •
ʮ͜Ε͔Βདྷͦ͏ָͩͦ͠͠͏ʯ
৽͍ٕ͠ज़ΛΩϟονΞοϓ͢Δ͖͔͚ͬ • ٕज़తڵຯͷΈ • ͬͨΒྑ͍ • ࠓͷࣄͰඞཁ • ͜ΕͬͨΒྑ͍ •
ʮ͜Ε͔Βདྷͦ͏(ଧࢉ)ָͩͦ͠͠͏(ڵຯ)ʯ
৽͍ٕ͠ज़ΛΩϟονΞοϓ͢Δ͖͔͚ͬ • ٕज़తڵຯͷΈ • ͬͨΒྑ͍ • ࠓͷࣄͰඞཁ • ͜ΕͬͨΒྑ͍ •
ʮ͜Ε͔Βདྷͦ͏(ଧࢉ)ָͩͦ͠͠͏(ڵຯ)ʯ ͕͜͜ՁʹͳΓ͍͢
৽͍ٕ͠ज़ΛΩϟονΞοϓ͢Δ͖͔͚ͬ • ٕज़తڵຯͷΈ • ͬͨΒྑ͍ • ࠓͷࣄͰඞཁ • ͜ΕͬͨΒྑ͍ •
ʮ͜Ε͔Βདྷͦ͏(ଧࢉ)ָͩͦ͠͠͏(ڵຯ)ʯ • ػతٕज़બఆͷج४ˠʁʁʁ
৽͍ٕ͠ज़ΛΩϟονΞοϓ͢Δ͖͔͚ͬ • ٕज़తڵຯͷΈ • ͬͨΒྑ͍ • ࠓͷࣄͰඞཁ • ͜ΕͬͨΒྑ͍ •
ʮ͜Ε͔Βདྷͦ͏(ଧࢉ)ָͩͦ͠͠͏(ڵຯ)ʯ • ػతٕज़બఆͷج४ˠ
ʮ1.5าઌʯ
ʮ1.5าઌʯͰੜ׆͠ଓ͚Δ͜ͱ
1.5าઌͰੜ׆͠ଓ͚Δ͜ͱ ਓʑͷʮ͜Εདྷͦ͏ʯͷΈ
ʮ͜Εདྷͦ͏ʯͷΈ • ࠓͷ··ࣄΛ͍ͯͯ͠૬ରతʹՁԼ͕Δ • ৗʹগͣͭ͠Ͱྑ͍͔ΒલʹਐΈ͍ͨ • ͱ͍͑େʹΛΓ͕͍͗ͯ࣌ͭͯ͢͜ͳ͍ • ݟ݂ͱͳΓͱͳΔ͕ɺཧෆਚͳఔͷതଧ •
ࠓͷࣄͪΖΜָ͍ͨ͠
ʮ͜Εདྷͦ͏ʯͷΈ • ࠓͷ··ࣄΛ͍ͯͯ͠૬ରతʹՁԼ͕Δ • ৗʹগͣͭ͠Ͱྑ͍͔ΒલʹਐΈ͍ͨ • ͱ͍͑େʹΛΓ͕͍͗ͯ࣌ͭͯ͢͜ͳ͍ • ݟ݂ͱͳΓͱͳΔ͕ɺཧෆਚͳఔͷതଧ •
ࠓͷࣄͪΖΜָ͍ͨ͠ ࠓ͋Δཁૉ (+ͦͷ࠷લઢ) + ͍ۙະདྷͷ՝ কདྷBETͨ͘͠ͳΔ =
ʮ͜Εདྷͦ͏ʯͷΈ ࠓ͋Δཁૉ (+ͦͷ࠷લઢ) + ͍ۙະདྷͷ՝ BETͨ͘͠ͳΔ =
ʮ͜Εདྷͦ͏ʯͷΈ ࠓ͋Δཁૉ (+ͦͷ࠷લઢ) + ͍ۙະདྷͷ՝ BETͨ͘͠ͳΔ = 0 (+0.5) +
1.0 1.5 =
1.5าʮΘ͔Γ͍͢ʯ
1.5าʮΘ͔Γ͍͢ʯ https://slides.com/potato4d/vuejs_meetup7
1.5าʮΘ͔Γ͍͢ʯ Vue.js + εέʔϧ͢Δ։ൃ
1.5าʮΘ͔Γ͍͢ʯ Vue.js + εέʔϧ͢Δ։ൃ ։ൃޮடং
1.5าʮΘ͔Γ͍͢ʯ Vue.js + εέʔϧ͢Δ։ൃ ৳ͼ͍ͯΔ ͜Ε͔Β͋Γͦ͏
1.5าʮΘ͔Γ͍͢ʯ Vue.js + εέʔϧ͢Δ։ൃ ։ൃޮடং 0 0.5 1.0
1.5าʮϓϨθϯεΛΕΒΕΔʯ
1.5าʮϓϨθϯεΛΕΒΕΔʯ • 1.5าʹҐஔ͍ͯ͠Δͱࣗಈతʹ͍ͭͯ͘Δ • ߩݙ͢Δҙࢤ͕͋ΕઌߦऀརӹͦΕͳΓʹ͍ͭͯ͘Δ • ٯʹݴ͏ͱߩݙ͢Δҙࢤ͕ͳ͍ͱࢫຯ͕ͳ͍ • Ξτϓοτ͕ۤͰͳ͍ਓɺ୯ʹ͕ࣗͬͨใϝ ϞΛɺܗͯ͠୶ʑͱύϒϦοΫʹग़͚ͩ͢
• ͜ͷลΓาઌఔͰڞ௨(͕ͩઌͷ΄͏͕ޮՌߴ͍)
าઌ͔ΒͰ༗ޮͳΞτϓοτ
าઌ͔ΒͰ༗ޮͳΞτϓοτ ಛʹଉ͕ͦ͏ͳؾ͠ͳ͍͚ͲVueͰElement͕ಠͳͷͰࢼݧར༻
าઌ͔ΒͰ༗ޮͳΞτϓοτ
าઌ͔ΒͰ༗ޮͳΞτϓοτ
าઌ͔ΒͰ༗ޮͳΞτϓοτ
าઌ͔ΒͰ༗ޮͳΞτϓοτ
ΤϯδχΞΒ͍͠ΞτϓοτΛ ৺͕͚Δ าઌ͔ΒͰ༗ޮͳΞτϓοτ
ͨΓલͷ͜ͱͰॻ͕͘ɺἤΒͳ͍ าઌ͔ΒͰ༗ޮͳΞτϓοτ
৭Μͳͷޙ͔Β͍ͭͯ͘Δ าઌ͔ΒͰ༗ޮͳΞτϓοτ
૯ׅ
૯ׅ • ݸਓతࢿঢ়گ • Nuxt.js ͱαʔόʔϨεΛத৺ʹਾ͑ͯ׆ಈΛਐΊ͍ͯͨ • Ռྑ͘ɺશମతͳମݧ(Developer ExperienceؚΉ) •
ࠓͷΓ3ϲ݄ʹ͍ͭͯ • Ҿ͖ଓ͖ Nuxt.js ͱαʔόʔϨεͷ༷ࢠݟɻαʔόʔϨε ৽نϓϨΠϠʔͷࢀೖʹ
૯ׅ • ٕज़ࢿج४ • Βͳ͍ͱ͍͚ͳ͍͜ͱɺ७ਮʹΓ͍ͨ͜ͱʹ͍ͭͯ Ε͍͍ • ͦΕҎ֎ʹ͍ͭͯશମͷۭؾײΛݟ͍ͯ͘ͱྑ͍ • ͦͷࡍɺϚδϣϦςΟ͔Βݟͯʮ͠Έ͍͢ʯͱʮະདྷ
ײʯΛཱ͍྆ͯ͠Δ͔Λҙࣝ͢Δͱԁ
૯ׅ • 1.5าઌͷࢿʹ͍ͭͯ • Ұาઌ͍͔ͭΕΔ͕ɺ1.5าઌҙ֎ͱ༗ޮ • าઌͰྑ͍ͷͰɺΞτϓοτΛదʹߦ͏ͱॾʑޙͰ ͍ͭͯ͘Δ ͳΜ͔Μݴͬͯେମ͖Ͱ͍ͬͯΔͱ͜Ζ͕େ͖͍ͷͰ ઓུʹݻٕࣥͯ͠ज़͕ݏ͍ʹͳͬͨΒҙຯͳ͍
͓खָ͔ܰͭ͘͠ੜ͖Α͏