Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
2018年秋 JavaScriptエンジニアの技術投資状況 #jserinfo
Potato4d(Hanatani Takuma)
September 22, 2018
Programming
14
3.2k
2018年秋 JavaScriptエンジニアの技術投資状況 #jserinfo
2018/09/22 に JSer.info 400回記念イベントにて発表したプレゼンテーションスライドです。
Potato4d(Hanatani Takuma)
September 22, 2018
Tweet
Share
More Decks by Potato4d(Hanatani Takuma)
See All by Potato4d(Hanatani Takuma)
TSX First な Zero-Runtime SSG potato4d/dodai とその仕組み / owned static site generator #kyotojs
potato4d
0
340
Vue.js with TSX - From Vue 2.x to Vue 3 #v_tokyo11
potato4d
9
4.2k
終わりゆく Vue 2.x 時代の状態設計のアンサー - Vue 3 の Provider への期待 / The Last Architecture of the Vue 2.x
potato4d
25
6k
Web Worker を使ってブラウザ上でポケモンの画像を解析したい! / Pokemon recognition from screenshots in browser using web worker
potato4d
0
700
Firebase & Google Cloud によるサーバーレス帳票管理 #FJUG / Serverless Architecture in Candy
potato4d
8
2.8k
NestJS meetup Tokyo Opening Talk / What is NestJS? #nestjs_meetup
potato4d
10
3.1k
私たちはなぜ SPA で開発するのか / Why you choose SPA
potato4d
39
22k
Amplify Console 誕生以来本番運用しつづけてわかったこと #awswakaran_tokyo
potato4d
6
2.8k
気軽な Node.js バックエンド開発には TypeORM がちょうどいい #kng7 / introduce-typeorm
potato4d
9
3.8k
Other Decks in Programming
See All in Programming
What's new in Shopware 6.5
shyim
0
110
(新米)エンジニアリングマネージャーのしごと #RSGT2023
murabayashi
9
5.8k
まだ日本国内で利用できないAppActionsにトライしてみた / MoT TechTalk #15
mot_techtalk
0
120
T3 Stack and TypeScript ecosystem
quramy
3
770
Hono v3 - Do Everything, Run Anywhere, But Small, And Faster
yusukebe
4
130
Functional Data Engineering - A Blueprint for adopting functional principles in data pipeline
vananth22
0
190
[2023년 1월 세미나] 데이터 분석가 되면 어떤 일을 하나요?
datarian
0
600
ECS Service Connectでマイクロサービスを繋いでみた
xblood
0
620
Swift Observation
shiz
4
290
Ruby Pattern Matching
bkuhlmann
0
610
Use KMM to call the API of the National Tax Agency
akkeylab
0
300
Unity+C#で学ぶ! メモリレイアウトとvtableのすゝめ 〜動的ポリモーフィズムを実現する仕組み〜
rossam
1
240
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
87
12k
A Modern Web Designer's Workflow
chriscoyier
689
180k
Practical Orchestrator
shlominoach
178
8.9k
No one is an island. Learnings from fostering a developers community.
thoeni
12
1.5k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
24
4.6k
Six Lessons from altMBA
skipperchong
15
2.3k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
120
29k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
152
13k
jQuery: Nuts, Bolts and Bling
dougneiner
57
6.6k
Learning to Love Humans: Emotional Interface Design
aarron
263
38k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
22
1.7k
Fantastic passwords and where to find them - at NoRuKo
philnash
32
1.9k
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าઌҙ֎ͱ༗ޮ • าઌͰྑ͍ͷͰɺΞτϓοτΛదʹߦ͏ͱॾʑޙͰ ͍ͭͯ͘Δ ͳΜ͔Μݴͬͯେମ͖Ͱ͍ͬͯΔͱ͜Ζ͕େ͖͍ͷͰ ઓུʹݻٕࣥͯ͠ज़͕ݏ͍ʹͳͬͨΒҙຯͳ͍
͓खָ͔ܰͭ͘͠ੜ͖Α͏