Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
個人開発者は Jamstackでブログを書こう!〜WordPressもいいけどJamstackもね〜
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Shumpei O.
August 20, 2023
Programming
180
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
個人開発者は Jamstackでブログを書こう!〜WordPressもいいけどJamstackもね〜
LTイベント「ジャムスタックチョットデキル」にて登壇した資料です。
Shumpei O.
August 20, 2023
More Decks by Shumpei O.
See All by Shumpei O.
Next.js で始めるセキュリティ入門
shumpei0111
0
22
例外処理について考える
shumpei0111
0
250
Reactで汎用的なinputコンポーネントを考える
shumpei0111
0
200
複数人での 大規模サイト移植のテクニック
shumpei0111
1
1k
Other Decks in Programming
See All in Programming
Webの地図
yosuke_furukawa
PRO
6
5k
Augmenting AI with the Power of Jakarta EE
ivargrimstad
0
390
モジュールの視点からSwiftを読み解く #iosdc
s_shimotori
0
290
Heart of Swift Concurrency
koher
0
1.1k
動作中のプログラムの中身をリアルタイムに覗く / Realtime Debugger for CSharp with Roslyn
prota
1
1.7k
ハーネス設計入門 〜 基礎知識の整理から実務へのステップアップ 〜
kinopeee
19
20k
SREの越境 / SRE Collaboration
y0hgi
2
290
iOS 27でニュースアプリはどう変わる!? 〜日経電子版の新機能対応と、開発事例から〜
lynnswap
7
13k
速く作れる。その次は、速く確かめられる開発へ 〜AIネイティブ開発を支える、Shift Down〜 / Can build fast. Next, moving to development where we can verify fast.
rkaga
8
5.3k
Augmenting AI with the Power of Jakarta EE
ivargrimstad
0
460
そのリトライ、死んだコネクションを使い回していませんか ── GoのHTTPクライアントとHTTP/2を実プロダクト障害から学び直す
myus4a
0
350
20260914 AIエージェント時代のPlatform Engineering LLM基盤とプロダクトの責務境界線
kanfab1
7
2.3k
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
51
53k
sira's awesome portfolio website redesign presentation
elsirapls
0
430
Accessibility Awareness
sabderemane
1
230
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
livdayseo
0
200
The #1 spot is gone: here's how to win anyway
tamaranovitovic
4
1.2k
Test your architecture with Archunit
thirion
2
2.4k
The Illustrated Guide to Node.js - THAT Conference 2024
reverentgeek
1
550
Information Architects: The Missing Link in Design Systems
soysaucechin
1
1.2k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
4.2k
How Fast Is Fast Enough? [PerfNow 2025]
tammyeverts
3
910
エンジニアに許された特別な時間の終わり
watany
109
250k
Prompt Engineering for Job Search
mfonobong
0
470
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
まとめ 保険を用意するからダレにくい! 結果的にリリースできる! 運用してサイトを育てることができる! あとは煮るなり焼くなり、自分の実験場として使い倒せる