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
フロントエンド初学者のためのNuxt.jsの歩き方
Search
Retu Fukui
August 27, 2018
Technology
3
6.2k
フロントエンド初学者のためのNuxt.jsの歩き方
フロントエンド初学者のためのNuxt.jsの歩き方というタイトルで2018/8/24に開催された名無し勉強会にて発表しました
Retu Fukui
August 27, 2018
Tweet
Share
More Decks by Retu Fukui
See All by Retu Fukui
Amplifyを使ったWebサイト構築 〜 Nstockの事例を添えて 〜
fukuiretu
0
160
開発生産性と品質の横断的な課題を解決する!エンジニアリング支援室の挑戦 -1Qで取り組んだことを添えて-
fukuiretu
2
6.7k
EMになって最初の失敗談 - コミュニケーション編 -
fukuiretu
2
6.4k
問い合わせ対応当番を自動化で業務効率化している話
fukuiretu
0
780
サーバーレスで始める ゆるふわデータ基盤 - noteの事例 -
fukuiretu
2
7.8k
191109_sacss.pdf
fukuiretu
1
2.3k
noteをNuxt.jsで再構築した話 -2nd-
fukuiretu
6
13k
CloudFront use cases - noteの事例 -
fukuiretu
0
8.6k
181117_wannatech.pdf
fukuiretu
1
510
Other Decks in Technology
See All in Technology
職種に名前が付く、ということ/The fact that a job title has a name
bitkey
1
250
スケールアップ企業のQA組織のバリューを最大限に引き出すための取り組み
tarappo
4
960
Dapr For Java Developers SouJava 25
salaboy
1
130
AIエージェント完全に理解した
segavvy
4
270
ペアプログラミングにQAが加わった!職能を超えたモブプログラミングの事例と学び
tonionagauzzi
1
150
どっちの API SHOW?SharePoint 開発における SharePoint REST API Microsoft Graph API の違い / Which API show? Differences between Microsoft Graph API and SharePoint REST API
karamem0
0
110
20250328_RubyKaigiで出会い鯛_____RubyKaigiから始まったはじめてのOSSコントリビュート.pdf
mterada1228
0
130
Tirez profit de Messenger pour améliorer votre architecture
tucksaun
1
150
大規模アジャイル開発のリアル!コミュニケーション×進捗管理×高品質
findy_eventslides
0
560
Engineering Managementのグローバルトレンド #emoasis / Engineering Management Global Trend
kyonmm
PRO
6
990
Javaの新しめの機能を知ったかぶれるようになる話 #kanjava
irof
3
4.9k
[CATS]Amazon Bedrock GenUハンズオン座学資料 #2 GenU環境でRAGを体験してみよう
tsukuboshi
0
150
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Docker and Python
trallard
44
3.3k
Bash Introduction
62gerente
611
210k
The Cost Of JavaScript in 2023
addyosmani
48
7.6k
The Pragmatic Product Professional
lauravandoore
33
6.5k
Optimizing for Happiness
mojombo
377
70k
A Philosophy of Restraint
colly
203
16k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
30k
Transcript
ϑϩϯτΤϯυॳֶऀͷͨΊͷ Nuxt.jsͷา͖ํ QFBDFPGDBLF JODҪ ໊ແ͠ษڧձ
ϓϩϑΟʔϧ • @fukuiretu / Ҫ • ੨ݝ߂લࢢࡏॅ •ʢגʣϐʔεΦϒέΠΫ •
ΞΠγϯάΫοΩʔઐళ en Web/ܦཧ/ϝʔϧ୲ https://twitter.com/fukuiretu https://www.facebook.com/fukuiretu https://github.com/fukuiretu
Nuxt.jsͬͯ ฉ͍ͨ͜ͱ͋Γ·͔͢??
IUUQTOPUFNVLPOQZVOOCCG
࠾༻αʔϏε(اۀ)ଓʑ…
IUUQTOPUFNVSOOFGDF
ࠓͷ͓ Nuxt.jsͷັྗΛ͓͑ͭͭ͠ɺ ݸਓతʹ ޮతͩͱ͓͏ ษڧͷਐΊํ Λ͓͠·͢
Nuxt.jsͱ IUUQTKBOVYUKTPSHHVJEF
w ϑϩϯτΤϯυͷϕετϓϥΫςΟεΛΑ͠ͳʹ w ϧʔϧ(ن)͕༧Ί༻ҙ͞Ε͍ͯΔ w ϓϥΨϒϧʹ֦ு͕Մೳ -> PWAͷରԠͳͲ༰қʹ w Vue.jsͷΤίγεςϜΛ౷߹
-> ϥΠϒϥϦͷબఆίετ͕͔͔Βͳ͍ Nuxt.jsͷԸܙ
Vue.jsͱ ࢧ࣋͞ΕΔҰ൪ͷཧ༝ ͩͱࢥͬͯ·͢
IUUQTRJJUBDPNNJPJPJUFNTFCECFFG ΈΜͳ͕Αͬͯ͘ΔjQueryͱͷҧ͍
K2VFSZ w ηϨΫλ͔ΒཁૉΛ୳ͯ͠ૢ࡞ w HTMLͷߏ͕มΘΔͱཁૉͷऔಘํ๏มΘΔՄ ೳੑ͕͋Δ -> JavaScriptͷίʔυཁมߋ -> HTMLͷߏ͕ෳࡶʹͳΕͳΔ΄Ͳਏ͍…
ΈΜͳ͕Αͬͯ͘ΔjQueryͱͷҧ͍ IUUQTRJJUBDPNNJPJPJUFNTFCECFFG
7VF w JavaScriptͷσʔλͱHTMLͷཁૉΛඥ͚ͯɺ σʔλ͕มΘΕࣗಈతʹө w HTMLͷߏ͕มΘΖ͏͕ಛʹӨڹड͚ͳ͍ -> JavaScriptͷίʔυͷมߋෆཁ ΈΜͳ͕Αͬͯ͘ΔjQueryͱͷҧ͍ IUUQTRJJUBDPNNJPJPJUFNTFCECFFG
ΈΜͳ͕Αͬͯ͘ΔjQueryͱͷҧ͍ K2VFSZ 7VFKT IUUQTRJJUBDPNNJPJPJUFNTFCECFFG
Nuxt.jsͷԸܙ w ϑϩϯτΤϯυͷϕετϓϥΫςΟεΛΑ͠ͳʹ w ϧʔϧ(ن)͕༧Ί༻ҙ͞Ε͍ͯΔ w ϓϥΨϒϧʹ֦ு͕Մೳ -> PWAͷରԠͳͲ༰қʹ w
Vue.jsͷΤίγεςϜΛ౷߹ -> ϥΠϒϥϦͷબఆίετ͕͔͔Βͳ͍
w webpackΛแ w js, css, htmlͷѹॖ w cssͷΠϯϥΠϯల։ w auto
prefixer w CFCFMΛแ w ES6ΛτϥϯεύΠϧ w SSR (Server Side Rendering) w preload(ࣄલಡΈࠐΈ) etc….. ϑϩϯτΤϯυͷϕετϓϥΫςΟεΛΑ͠ͳʹ
Nuxt.jsͷԸܙ w ϑϩϯτΤϯυͷϕετϓϥΫςΟεΛΑ͠ͳʹ w ϧʔϧ(ن)͕༧Ί༻ҙ͞Ε͍ͯΔ w ϓϥΨϒϧʹ֦ு͕Մೳ -> PWAͷରԠͳͲ༰қʹ w
Vue.jsͷΤίγεςϜΛ౷߹ -> ϥΠϒϥϦͷબఆίετ͕͔͔Βͳ͍
ϧʔϧ(ن)͕༧Ί༻ҙ͞Ε͍ͯΔ ࠷ݶ͜Ε͚֮ͩ͑Ε·ͣಈ͔ͤΔ ઃఆϑΝΠϧ ϖʔδͷ෦
Nuxt.jsͷԸܙ ຊ࣭తͳ։ൃʹूதͰ͖Δ w ϑϩϯτΤϯυͷϕετϓϥΫςΟεΛΑ͠ͳʹ w ϧʔϧ(ن)͕༧Ί༻ҙ͞Ε͍ͯΔ w ϓϥΨϒϧʹ֦ு͕Մೳ -> PWAͷରԠͳͲ༰қʹ
w Vue.jsͷΤίγεςϜΛ౷߹ -> ϥΠϒϥϦͷબఆίετ͕͔͔Βͳ͍
Ͳ͏ษڧ͢Εޮత͔
None
js(ES6)ͷษڧ ProgateͷJavaScriptίʔεΛडߨ͠·͠ΐ͏ IUUQTQSPHDPNMBOHVBHFTFT
1. ΘΒ͔Vue.jsΛͬ͟ͱಡΜͰ֓ཁΛ௫Ή 2. جૅ͔ΒֶͿVue.jsΛಡΉ 3. LearnCode.academyΛݟͯࣸܦ͢Δ ※ެࣜυΩϡϝϯτඞͣΛ௨͠·͠ΐ͏ Vue.jsͷษڧ
ΘΒ͔7VFKT IUUQTTDSBQCPYJPWVFZBXBSBLB
جૅ͔ΒֶͿ7VFKT IUUQTXXXBNB[PODPKQEQ#%#:).;
-FBSO$PEFBDBEFNZ IUUQTXXXZPVUVCFDPNQMBZMJTU MJTU1-P:$H/0*Z("%;VW,+XFVU;%007*:J+
ະൃചͰ͕͢ඞಡͰ͢ͷͰਖ਼࠲Ͱػ͠·͠ΐ͏ IUUQTXXXBNB[PODPKQEQ 7VFKTೖجૅ͔Β࣮ફΞϓϦέʔγϣϯ։ൃ·Ͱ
1. Nuxt tech bookΛಡΉ 2. NuxtެࣜͰ༻ҙ͞Ε͍ͯΔαϯϓϧޙड़ͷॻ ੶هࡌͷίʔυΛࣸܦ͢Δ • https://github.com/nuxt/todomvc •
https://github.com/nuxt/hackernews ※ެࣜυΩϡϝϯτඞͣΛ௨͠·͠ΐ͏ Nuxt.jsͷษڧ
/VYUUFDICPPL IUUQTCPPUIQNKBJUFNT
"VUIͰͭ͘Δʂೝূ͖41" IUUQTCPPUIQNKBJUFNT
Nuxt.jsͷษڧ 7VFKTͱ'JSFCBTFͰͭ͘Δϛχ8FCαʔϏε IUUQTXXXBNB[PODPKQEQ#'-,74
Let’s Enjoy Nuxt.js!!