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
380
書く・即・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
3
300
Webデザイナーが押さえておきたいエンジニアとの連携ポイント
448jp
0
3.8k
合意形成のためのFigma活用術
448jp
0
130
神速でワイヤーフレームを作るためのライブラリ
448jp
1
860
Figmaで神速ドキュメント作成術
448jp
3
2.5k
今から始めるFigma超入門
448jp
0
1.6k
零細Web制作会社のリモートワーク事情
448jp
0
430
エンジニアに120%意図を伝えるためのAdobe XDデザインテクニック
448jp
2
760
コーディングを神速化するJetBrains IDEのご紹介~基本機能からHTML/CSSまで~
448jp
0
340
Other Decks in Programming
See All in Programming
Claude Code派?Gemini CLI派? みんなで比較LT会!_20250716
junholee
1
800
実践 Dev Containers × Claude Code
touyu
1
120
副作用と戦う PHP リファクタリング ─ ドメインイベントでビジネスロジックを解きほぐす
kajitack
3
520
202507_ADKで始めるエージェント開発の基本 〜デモを通じて紹介〜(奥田りさ)The Basics of Agent Development with ADK — A Demo-Focused Introduction
risatube
PRO
6
1.4k
MySQL9でベクトルカラム登場!PHP×AWSでのAI/類似検索はこう変わる
suguruooki
1
280
Terraform やるなら公式スタイルガイドを読もう 〜重要項目 10選〜
hiyanger
11
2.8k
AIコーディングエージェント全社導入とセキュリティ対策
hikaruegashira
15
9.3k
「次に何を学べばいいか分からない」あなたへ──若手エンジニアのための学習地図
panda_program
3
710
Advanced Micro Frontends: Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
140
Amazon Q CLI開発で学んだAIコーディングツールの使い方
licux
3
170
DynamoDBは怖くない!〜テーブル設計の勘所とテスト戦略〜
hyamazaki
0
180
バイブスあるコーディングで ~PHP~ 便利ツールをつくるプラクティス
uzulla
1
320
Featured
See All Featured
Building Adaptive Systems
keathley
43
2.7k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.5k
Six Lessons from altMBA
skipperchong
28
3.9k
Become a Pro
speakerdeck
PRO
29
5.5k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.4k
Facilitating Awesome Meetings
lara
54
6.5k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
540
A designer walks into a library…
pauljervisheath
207
24k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
182
54k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
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