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
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
Shumpei O.
August 20, 2023
Programming
170
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
18
例外処理について考える
shumpei0111
0
240
Reactで汎用的なinputコンポーネントを考える
shumpei0111
0
190
複数人での 大規模サイト移植のテクニック
shumpei0111
1
1k
Other Decks in Programming
See All in Programming
言葉の格闘技のススメ~紙とペンと言葉から始める、キャリアの描き方~
progresscicada
2
140
PostgreSQL 18で考えるUUID主キー
kazuhiro1982
0
470
OpenSpecのproposalにbrainstormingを持たせてみた
tigertora7571
1
220
自動化したのに回らない テスト運用の壁―AI時代の品質責任と生産性
mfunaki
0
150
PHP初心者セッション2026 〜生成AIでは見えない裏側を知る:今だからLAMPを通して仕組みを学ぶ〜
kashioka
0
900
freee が目指す データ マネジメント戦略 AI-Ready 時代を支える 攻めのガバナンスとは
freee
PRO
0
350
5分で問診!Composer セキュリティ健康診断
codmoninc
0
960
ここ半年くらいでAIに作らせたR用ツール
eitsupi
0
370
Claude Code全社展開のためにやったことn選~プラグイン302個・コミッター271人を支えるために~
kenchan
5
1.5k
AWS DevOps AgentのAzure接続機能を検証して見えた活用法/Use Cases Verified for the AWS DevOps Agent's Azure Connectivity Feature
masakiokuda
1
230
Built Our Own Background Agent at LayerX
layerx
PRO
10
5.3k
Laravelで学ぶ Webアプリケーションチューニング入門/web_application_tuning_101
hanhan1978
4
1.7k
Featured
See All Featured
Kristin Tynski - Automating Marketing Tasks With AI
techseoconnect
PRO
0
440
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
inesmontani
PRO
3
3.7k
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
akademiya2063
PRO
1
210
Product Roadmaps are Hard
iamctodd
55
12k
WENDY [Excerpt]
tessaabrams
11
39k
Primal Persuasion: How to Engage the Brain for Learning That Lasts
tmiket
0
400
Navigating Algorithm Shifts & AI Overviews - #SMXNext
aleyda
1
1.5k
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
aleyda
2
11k
Accessibility Awareness
sabderemane
1
170
Practical Orchestrator
shlominoach
191
12k
Public Speaking Without Barfing On Your Shoes - THAT 2023
reverentgeek
1
520
The Illustrated Children's Guide to Kubernetes
chrisshort
51
53k
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
まとめ 保険を用意するからダレにくい! 結果的にリリースできる! 運用してサイトを育てることができる! あとは煮るなり焼くなり、自分の実験場として使い倒せる