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
350
TSX First な Zero-Runtime SSG potato4d/dodai とその仕組み / owned static site generator #kyotojs
potato4d
1
2.2k
Vue.js with TSX - From Vue 2.x to Vue 3 #v_tokyo11
potato4d
9
4.8k
終わりゆく 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.2k
Firebase & Google Cloud によるサーバーレス帳票管理 #FJUG / Serverless Architecture in Candy
potato4d
8
3.6k
NestJS meetup Tokyo Opening Talk / What is NestJS? #nestjs_meetup
potato4d
11
4k
私たちはなぜ SPA で開発するのか / Why you choose SPA
potato4d
39
26k
Amplify Console 誕生以来本番運用しつづけてわかったこと #awswakaran_tokyo
potato4d
6
3.4k
Other Decks in Programming
See All in Programming
『テスト書いた方が開発が早いじゃん』を解き明かす #phpcon_nagoya
o0h
PRO
6
2.1k
pylint custom ruleで始めるレビュー自動化
shogoujiie
0
140
Multi Step Form, Decentralized Autonomous Organization
pumpkiinbell
1
830
楽しく向き合う例外対応
okutsu
0
570
Jakarta EE meets AI
ivargrimstad
0
150
Honoとフロントエンドの 型安全性について
yodaka
7
1.4k
CSS Linter による Baseline サポートの仕組み
ryo_manba
1
140
GoとPHPのインターフェイスの違い
shimabox
2
200
法律の脱レガシーに学ぶフロントエンド刷新
oguemon
5
740
コミュニティ駆動 AWS CDK ライブラリ「Open Constructs Library」 / community-cdk-library
gotok365
2
180
Visual StudioのGitHub Copilotでいろいろやってみる
tomokusaba
1
190
AIの力でお手軽Chrome拡張機能作り
taiseiue
0
190
Featured
See All Featured
How to Ace a Technical Interview
jacobian
276
23k
Agile that works and the tools we love
rasmusluckow
328
21k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
Building a Scalable Design System with Sketch
lauravandoore
461
33k
Code Review Best Practice
trishagee
67
18k
The Cult of Friendly URLs
andyhume
78
6.2k
Visualization
eitanlees
146
15k
How STYLIGHT went responsive
nonsquared
98
5.4k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
The Pragmatic Product Professional
lauravandoore
32
6.4k
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าઌҙ֎ͱ༗ޮ • าઌͰྑ͍ͷͰɺΞτϓοτΛదʹߦ͏ͱॾʑޙͰ ͍ͭͯ͘Δ ͳΜ͔Μݴͬͯେମ͖Ͱ͍ͬͯΔͱ͜Ζ͕େ͖͍ͷͰ ઓུʹݻٕࣥͯ͠ज़͕ݏ͍ʹͳͬͨΒҙຯͳ͍
͓खָ͔ܰͭ͘͠ੜ͖Α͏