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
個人開発者は Jamstackでブログを書こう!〜WordPressもいいけどJamstackもね〜
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
Shumpei O.
August 20, 2023
Programming
0
150
個人開発者は Jamstackでブログを書こう!〜WordPressもいいけどJamstackもね〜
LTイベント「ジャムスタックチョットデキル」にて登壇した資料です。
Shumpei O.
August 20, 2023
Tweet
Share
More Decks by Shumpei O.
See All by Shumpei O.
Next.js で始めるセキュリティ入門
shumpei0111
0
7
例外処理について考える
shumpei0111
0
210
Reactで汎用的なinputコンポーネントを考える
shumpei0111
0
140
複数人での 大規模サイト移植のテクニック
shumpei0111
1
950
Other Decks in Programming
See All in Programming
CSC307 Lecture 10
javiergs
PRO
1
660
Automatic Grammar Agreementと Markdown Extended Attributes について
kishikawakatsumi
0
200
CSC307 Lecture 05
javiergs
PRO
0
500
開発者から情シスまで - 多様なユーザー層に届けるAPI提供戦略 / Postman API Night Okinawa 2026 Winter
tasshi
0
210
AIエージェント、”どう作るか”で差は出るか? / AI Agents: Does the "How" Make a Difference?
rkaga
4
2k
CSC307 Lecture 09
javiergs
PRO
1
840
AI巻き込み型コードレビューのススメ
nealle
2
1.3k
AWS re:Invent 2025参加 直前 Seattle-Tacoma Airport(SEA)におけるハードウェア紛失インシデントLT
tetutetu214
2
120
Oxlint JS plugins
kazupon
1
1k
Package Management Learnings from Homebrew
mikemcquaid
0
230
インターン生でもAuth0で認証基盤刷新が出来るのか
taku271
0
190
Vibe Coding - AI 驅動的軟體開發
mickyp100
0
180
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
307
120k
How to build a perfect <img>
jonoalderson
1
4.9k
How to Think Like a Performance Engineer
csswizardry
28
2.5k
The browser strikes back
jonoalderson
0
400
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
signer
PRO
0
3.2k
Accessibility Awareness
sabderemane
0
56
Why Our Code Smells
bkeepers
PRO
340
58k
The Illustrated Guide to Node.js - THAT Conference 2024
reverentgeek
0
260
What Being in a Rock Band Can Teach Us About Real World SEO
427marketing
0
170
How STYLIGHT went responsive
nonsquared
100
6k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
The Impact of AI in SEO - AI Overviews June 2024 Edition
aleyda
5
740
Transcript
個人開発者は Jamstackでブログ を書こう! WordPressもいいけどJamstackもね
Shunpei ちょっと株式会社 フロントエンドエンジニア 個人でブログや好きな漫画のファンサイトを作ったりし ています。 過去、hexo / Nuxt.js / Next.js
で Jamstack サイトを 構築して運用していました。 先日入社エントリーを書きました! https://note.com/chot_inc/n/nb7b386a5d1b1 自己紹介
今回の話の対象者 • Jamstackが気になり始めた方 • 駆け出しフロントエンド方 • Reactで何かつくりたいけど思いつかない方
言いたいこと モダンフロントエンドを始めるなら Next.jsでブログ(CMS)を作ろう! そしてそれを使って外部発信しよう!
理由 • Next.jsはバージョンが13になり、日本語の記事も増えた • 書籍も何冊か出てきたので勉強を始めやすい モダンフロントエンド FW、とりあえずReact(Next.js)かVue(Nuxt.js)で 素振りとしてTODOアプリを作ってもいいけど、 「もう少しボリュームがあるものを」となったときに Jamstackでのブログ(CMS)開発がおすすめ
メリット • モダンフロントエンド FWでの基本的なサイトの作り方がわかる • ブログを更新することで名刺がわりになる (実際転職活動時は話がスムーズに進んだ体験がある) とりあえずやってみる。という気持ちが大事。 Next.jsやNuxt.jsはサイト制作・アプリ開発どちらも選択できる FWなので、これを機に始めてみよう!
メリット • モダンフロントエンド FWでの基本的なサイトの作り方がわかる • ブログを更新することで名刺がわりになる (実際転職活動時は話がスムーズに進んだ体験がある) とりあえずやってみる。という気持ちが大事。 Next.jsやNuxt.jsはサイト制作・アプリ開発どちらも選択できる FWなので、これを機に始めてみよう!
ただ、次のような落とし穴もあります ...
エンジニア、 何でも自分で作りたい問題
何でも自分で作りたい問題 そして、だいたい途中で頓挫しがち。
何でも自分で作りたい問題 • 自分でCMSを組みたい! そして、だいたい途中で頓挫しがち。
何でも自分で作りたい問題 • 自分でCMSを組みたい! • 組んだCMSでブログを書きたい! そして、だいたい途中で頓挫しがち。
何でも自分で作りたい問題 • 自分でCMSを組みたい! • 組んだCMSでブログを書きたい! そして、だいたい途中で頓挫しがち。 どっちもやりたい!
何でも自分で作りたい問題 • 自分でCMSを組みたい! • 組んだCMSでブログを書きたい! そして、だいたい途中で頓挫しがち。 一気に作りきれればよいが、開発期間が伸びると頓挫の確率があがる。 確率が高まりきった状態で、なにかの理由で詰まった瞬間、 このプロジェクトが終了する。ターンエンド。 どっちもやりたい!
そんなときの保険 あります。 Next.jsにはソースコード込みで、 たくさんのサンプル(ボイラープレート)が存在します。 なので、そのサンプルを横においておくなり、 改造するなりして自分で組み上げてみると ブレも少なくゴールしやすいです。 Vercel https://vercel.com/templates
まとめ 保険を用意するからダレにくい! 結果的にリリースできる! 運用してサイトを育てることができる! あとは煮るなり焼くなり、自分の実験場として使い倒せる