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
書く・即・DONEな仕組みをNuxtで作る
Search
448jp | OKI Yoshiya
July 27, 2023
Programming
0
270
書く・即・DONEな仕組みをNuxtで作る
2023/7/27 「Vue.jsの勉強会はなんぼあってもいいですからね」
448jp | OKI Yoshiya
July 27, 2023
Tweet
Share
More Decks by 448jp | OKI Yoshiya
See All by 448jp | OKI Yoshiya
神速でワイヤーフレームを作るためのライブラリ
448jp
1
750
Figmaで神速ドキュメント作成術
448jp
3
1.9k
今から始めるFigma超入門
448jp
0
1.4k
零細Web制作会社のリモートワーク事情
448jp
0
320
エンジニアに120%意図を伝えるためのAdobe XDデザインテクニック
448jp
2
660
コーディングを神速化するJetBrains IDEのご紹介~基本機能からHTML/CSSまで~
448jp
0
230
Lottieで始めるWebアニメーション入門
448jp
1
530
Figmaが支えるVue Fes Japanのデザイン
448jp
3
5.1k
Vue Fes Japan 2018のデザインを支えたAdobe XD
448jp
2
1.8k
Other Decks in Programming
See All in Programming
Scala におけるコンパイラエラーとの付き合い方
chencmd
2
430
Increased Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
450
大公開!iOS開発の悩みトップ5 〜iOSDC Japan 2024〜
ryunakayama
0
190
Hermes: Better Performance with Bytecode Translation (React Universe 2024)
tmikov2023
0
110
オートマトン学習しろ / Do automata learning
makenowjust
3
130
マルチモジュールにおけるテスト最適化
fxwx23
0
210
From Idea to IDE: Developing Plugins for Android Studio
thisaay
1
230
unique パッケージから学ぶ interning と weak reference @ Asakusa.go#3
karamaru
2
820
Data Contracts In Practice With Debezium and Apache Flink
gunnarmorling
0
120
Pythonで改めて考える「クラス(class)」の使いどころ
os1ma
7
1.9k
Modernisation Progressive d’Applications PHP
hhamon
0
120
watsonx.ai Dojo #2 生成AIを使ったアプリ開発入門編
oniak3ibm
PRO
0
240
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.1k
How To Stay Up To Date on Web Technology
chriscoyier
786
250k
KATA
mclloyd
27
13k
It's Worth the Effort
3n
182
27k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
363
22k
Clear Off the Table
cherdarchuk
91
320k
A Tale of Four Properties
chriscoyier
155
22k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
BBQ
matthewcrist
83
9.2k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
278
13k
What's in a price? How to price your products and services
michaelherold
242
11k
A designer walks into a library…
pauljervisheath
201
24k
Transcript
Vue.jsの勉強会はなんぼあってもいいですからね 書く・即・DONEな仕組みを で作る Nuxt 合同会社世路庵 沖 良矢 | 2023.7.27 THU
おき 沖 よ し や 良矢 @448jp ⚫ 合同会社世路庵 代表
⚫ デザイナー/エンジニア ⚫ 受託制作一筋20年
None
Adobe MAX Japan 長岡造形大学 LinkedInラーニング Web Designing MdN × Bau-ya
DIST
相原 典佳、沖 良矢、倉又 美樹、岡部 千幸(著) ⚫ 2023.5.26発売 ⚫ 272ページ 2,860円
⚫ エムディエヌコーポレーション刊 初心者からちゃんとしたプロになる Figma基礎入門
ブログ構築における の選択肢 2023年
代表的なブログ構築手法 ⚫ スクラッチで開発 (Nuxt、Next.js、Astro...) ⚫ SSGで開発 (VitePress、Gatsby...) ⚫ ブログソフト (WordPress、Movable
Type...) ⚫ SaaS (note、Zenn、Qiita...) ⚫ ノーコード (STUDIO、Wix...)
ブログ構築手法の星取表 開発コスト ランニングコスト メンテナンスコスト カスタマイズの自由度 コンテンツの管理しやすさ ウェブサイトとの連携 スクラッチ ✕ ◯
✕ ◎ ◎ ◎ SSG △ ◯ ◯ △ ◯ ◯ ブログソフト ✕ ◯ ✕ ◎ ✕ ◎ SaaS ◎ △ ◎ ✕ △ ✕ ノーコード ◯ ✕ ◯ △ △ △
構築手法の選定は現在も一長一短
ブログ構築手法の星取表 開発コスト ランニングコスト メンテナンスコスト カスタマイズの自由度 コンテンツの管理しやすさ ウェブサイトとの連携 スクラッチ ✕ ◯
✕ ◎ ◎ ◎ SSG △ ◯ ◯ △ ◯ ◯ ブログソフト ✕ ◯ ✕ ◎ ✕ ◎ SaaS ◎ △ ◎ ✕ △ ✕ ノーコード ◯ ✕ ◯ △ △ △
スクラッチ開発の手段 JavaScriptフレームワーク ⚫ Nuxt, Vue ⚫ Next.js, React ⚫ Astro
/ Svelte ⚫ jQuery...? コンテンツ管理 ⚫ ヘッドレスCMS ⚫ 静的アセット ⚫ 自前DB ⚫ WordPress REST API
スクラッチ開発の手段 レンダリング ⚫ ISR ⚫ SSG ⚫ SSR ⚫ SPA
ホスティング ⚫ CDN ⚫ 自社サーバー ⚫ レンタルサーバー
構築手法の選定は現在も一長一短 一方、スクラッチ開発の手法はラーメン化
醤油ラーメンと豚骨ラーメンに勝ち負けがないように、 VueとReact、ヘッドレスCMSとWordPress REST APIなどの手法は 好みやこだわりとしての違いしかなくなってきている
今回の技術選定 ⚫ JavaScriptフレームワーク:Nuxt 3(理由:好きだから) ⚫ コンテンツ管理:microCMS(理由:好きだから) ⚫ レンダリング:SSG(理由:速いから) ⚫ ホスティング:Cloudflare
Pages(理由:好きだから) ⚫ UIコンポーネント:NuxtLabs UI(理由:使ってみたいから)
デモ
Nuxt 3+Cloudflare Pagesの注意点1 Nuxt 3のSSGをCloudflare Pagesにデプロイするとき、「ビルドの設定」でNuxtのプリセットがありますが、これはNuxt 2用です。Nuxt 3では動きま せん。ビルドコマンド「npm run
generate」、ビルド出力ディレクトリ「.output/public」と設定しましょう。
Nuxt 3+Cloudflare Pagesの注意点2 そのままではビルドでコケるため、2つの環境変数を設定します。NITRO_PRESETはNuxtビルド時の設定、NODE_VERSIONはCloudflare上で利用 されるNode.jsのバージョン指定です。
まとめ Conclusion
好きなラーメンを食べるように、 を選んで、 楽しいものを作りましょう! 好きな技術
None
None
ありがとうございました 合同会社世路庵 沖 良矢 @448jp