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
180
開発生産性と品質の横断的な課題を解決する!エンジニアリング支援室の挑戦 -1Qで取り組んだことを添えて-
fukuiretu
2
6.8k
EMになって最初の失敗談 - コミュニケーション編 -
fukuiretu
2
6.4k
問い合わせ対応当番を自動化で業務効率化している話
fukuiretu
0
790
サーバーレスで始める ゆるふわデータ基盤 - 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
520
Other Decks in Technology
See All in Technology
“パスワードレス認証への道" ユーザー認証の変遷とパスキーの関係
ritou
1
590
フロントエンドも盛り上げたい!フロントエンドCBとAmplifyの軌跡
mkdev10
2
280
【Λ(らむだ)】最近のアプデ情報 / RPALT20250422
lambda
0
110
サーバレス、コンテナ、データベース特化型機能をご紹介。CloudWatch をもっと使いこなそう!
o11yfes2023
0
170
CBになったのでEKSのこともっと知ってもらいたい!
daitak
1
160
Стильный код: натуральный поиск редких атрибутов по картинке. Юлия Антохина, Data Scientist, Lamoda Tech
lamodatech
0
720
Linuxのパッケージ管理とアップデート基礎知識
go_nishimoto
0
270
CodePipelineのアクション統合から学ぶAWS CDKの抽象化技術 / codepipeline-actions-cdk-abstraction
gotok365
5
180
いつも初心者向けの記事に助けられているので得意分野では初心者向けの記事を書きます
toru_kubota
2
320
The Tale of Leo: Brave Lion and Curious Little Bug
canalun
1
120
Cursor AgentによるパーソナルAIアシスタント育成入門―業務のプロンプト化・MCPの活用
os1ma
14
4.7k
Making a MIDI controller device with PicoRuby/R2P2 (RubyKaigi 2025 LT)
risgk
1
110
Featured
See All Featured
It's Worth the Effort
3n
184
28k
Fireside Chat
paigeccino
37
3.4k
GraphQLとの向き合い方2022年版
quramy
46
14k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.4k
Practical Orchestrator
shlominoach
186
11k
For a Future-Friendly Web
brad_frost
176
9.7k
The World Runs on Bad Software
bkeepers
PRO
67
11k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
119
51k
Building a Modern Day E-commerce SEO Strategy
aleyda
40
7.2k
What's in a price? How to price your products and services
michaelherold
245
12k
The Language of Interfaces
destraynor
157
25k
The Cost Of JavaScript in 2023
addyosmani
49
7.7k
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!!