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
190
開発生産性と品質の横断的な課題を解決する!エンジニアリング支援室の挑戦 -1Qで取り組んだことを添えて-
fukuiretu
2
7k
EMになって最初の失敗談 - コミュニケーション編 -
fukuiretu
2
6.5k
問い合わせ対応当番を自動化で業務効率化している話
fukuiretu
0
830
サーバーレスで始める ゆるふわデータ基盤 - noteの事例 -
fukuiretu
2
7.9k
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
530
Other Decks in Technology
See All in Technology
IIWレポートからみるID業界で話題のMCP
fujie
0
710
監視のこれまでとこれから/sakura monitoring seminar 2025
fujiwara3
10
2.9k
Agentic DevOps時代の生存戦略
kkamegawa
0
940
AI技術トレンド勉強会 #1MCPの基礎と実務での応用
nisei_k
1
240
A2Aのクライアントを自作する
rynsuke
1
150
LinkX_GitHubを基点にした_AI時代のプロジェクトマネジメント.pdf
iotcomjpadmin
0
160
白金鉱業Meetup_Vol.19_PoCはデモで語れ!顧客の本音とインサイトを引き出すソリューション構築
brainpadpr
2
470
変化する開発、進化する体系時代に適応するソフトウェアエンジニアの知識と考え方(JaSST'25 Kansai)
mizunori
0
130
2025/6/21 日本学術会議公開シンポジウム発表資料
keisuke198619
2
470
Snowflake Summit 2025全体振り返り / Snowflake Summit 2025 Overall Review
mtpooh
2
190
Definition of Done
kawaguti
PRO
6
460
Snowflake Summit 2025 データエンジニアリング関連新機能紹介 / Snowflake Summit 2025 What's New about Data Engineering
tiltmax3
0
220
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
134
9.3k
Statistics for Hackers
jakevdp
799
220k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
490
Practical Orchestrator
shlominoach
188
11k
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.4k
GraphQLとの向き合い方2022年版
quramy
46
14k
Product Roadmaps are Hard
iamctodd
PRO
53
11k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
16
940
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
4
200
Rebuilding a faster, lazier Slack
samanthasiow
81
9k
Site-Speed That Sticks
csswizardry
10
650
Unsuck your backbone
ammeep
671
58k
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!!