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
230
開発生産性と品質の横断的な課題を解決する!エンジニアリング支援室の挑戦 -1Qで取り組んだことを添えて-
fukuiretu
2
7.2k
EMになって最初の失敗談 - コミュニケーション編 -
fukuiretu
2
6.6k
問い合わせ対応当番を自動化で業務効率化している話
fukuiretu
0
870
サーバーレスで始める ゆるふわデータ基盤 - noteの事例 -
fukuiretu
2
8k
191109_sacss.pdf
fukuiretu
1
2.4k
noteをNuxt.jsで再構築した話 -2nd-
fukuiretu
6
13k
CloudFront use cases - noteの事例 -
fukuiretu
0
8.7k
181117_wannatech.pdf
fukuiretu
1
540
Other Decks in Technology
See All in Technology
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
20k
LLMアプリケーション開発におけるセキュリティリスクと対策 / LLM Application Security
flatt_security
7
1.8k
ACA でMAGI システムを社内で展開しようとした話
mappie_kochi
0
240
SoccerNet GSRの紹介と技術応用:選手視点映像を提供するサッカー作戦盤ツール
mixi_engineers
PRO
1
160
動画データのポテンシャルを引き出す! Databricks と AI活用への奮闘記(現在進行形)
databricksjapan
0
140
Pure Goで体験するWasmの未来
askua
1
170
職種別ミートアップで社内から盛り上げる アウトプット文化の醸成と関係強化/ #DevRelKaigi
nishiuma
2
130
PythonとLLMで挑む、 4コマ漫画の構造化データ化
esuji5
1
130
FastAPIの魔法をgRPC/Connect RPCへ
monotaro
PRO
1
710
それでも私はContextに値を詰めたい | Go Conference 2025 / go conference 2025 fill context
budougumi0617
4
1.2k
コンテキストエンジニアリングとは? 考え方と応用方法
findy_eventslides
4
880
組織観点からIAM Identity CenterとIAMの設計を考える
nrinetcom
PRO
1
160
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Optimizing for Happiness
mojombo
379
70k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Side Projects
sachag
455
43k
A better future with KSS
kneath
239
17k
The Invisible Side of Design
smashingmag
301
51k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Code Review Best Practice
trishagee
72
19k
Context Engineering - Making Every Token Count
addyosmani
5
180
Raft: Consensus for Rubyists
vanstee
139
7.1k
Being A Developer After 40
akosma
91
590k
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!!