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
開発生産性と品質の横断的な課題を解決する!エンジニアリング支援室の挑戦 -1Qで取り組んだことを添えて-
fukuiretu
2
4.7k
EMになって最初の失敗談 - コミュニケーション編 -
fukuiretu
2
4.6k
問い合わせ対応当番を自動化で業務効率化している話
fukuiretu
0
650
サーバーレスで始める ゆるふわデータ基盤 - noteの事例 -
fukuiretu
2
5.9k
191109_sacss.pdf
fukuiretu
1
2.2k
noteをNuxt.jsで再構築した話 -2nd-
fukuiretu
6
10k
CloudFront use cases - noteの事例 -
fukuiretu
0
8.5k
181117_wannatech.pdf
fukuiretu
1
480
noteをNuxt.jsで再構築した話
fukuiretu
22
54k
Other Decks in Technology
See All in Technology
DDDにおける認可の扱いとKotlinにおける実装パターン / authorization-for-ddd-and-kotlin-implement-pattern
urmot
4
390
RAGのサービスをリリースして1年3ヶ月が経ちました
segavvy
4
960
Github Actions 로 Android 팀의 효율성 극대화
hadonghyun
0
160
サーバーレスAPI(API Gateway+Lambda)とNext.jsで 個人ブログを作ろう!
shuntaka
PRO
0
560
フルリモートワークはエンジニアの夢を叶えたか? #cm_odyssey
mamohacy
2
600
技術負債による事業の失敗はなぜ起こるのか / Why do business failures due to technical debt occur?
i35_267
0
190
サービスの持続的な成長と技術負債について
siva_official
PRO
10
4.4k
dxd2024-生成AIに振り回された3か月間の成功と失敗/dxd2024-link-and-motivation
lmi
2
260
シフトレフトで挑む セキュリティの生産性向上
sekido
PRO
0
270
楽しくGoを学び合う、LayerXの勉強会文化 / LayerX's study culture of having fun and learning Go together
ar_tama
2
350
エンジニアリングマネージャーはどう学んでいくのか #devsumi / How Do Engineering Managers Continue to Learn and Grow?
expajp
4
1.3k
たくさん本を読んだけど 1年後には綺麗サッパリ!を乗り越えて 学習の鬼になるぞ👹
yum3
0
160
Featured
See All Featured
Designing on Purpose - Digital PM Summit 2013
jponch
113
6.6k
GraphQLの誤解/rethinking-graphql
sonatard
59
9.6k
[RailsConf 2023] Rails as a piece of cake
palkan
35
4.4k
Faster Mobile Websites
deanohume
303
30k
Practical Orchestrator
shlominoach
185
10k
KATA
mclloyd
20
13k
Web Components: a chance to create the future
zenorocha
307
41k
Build The Right Thing And Hit Your Dates
maggiecrowley
28
2.2k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
13
430
Side Projects
sachag
451
42k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
44
4.7k
Being A Developer After 40
akosma
72
580k
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!!