【前編】Webフロントエンド開発を学び始めて3ヶ月弱で0からブログを作成した話の続編です。

前編で言った通り、「適当にやる」を意識して勉強してきても、ある程度の技術は習得できたと思います。

そこで、今度は実際にブログを開発した経験を紹介します。

開発手順

1. 設計
2. 設計したものに近いオープンソースのブログを見つける
3. 開発
4. デプロイ（公開）

ざっとこんな感じの流れです。

設計

技術スタック

• React
• TypeScript
• TailwindCSS
• Next.js（App Router）

僕の場合は、勉強してきた内容から考えて上記の技術・言語を使用することにしました。

画面遷移図

※見えにくいかもしれないので、画像を別タブで開いたりして見てください🙏

システムアーキテクチャ

設計したものに近いオープンソースのブログを見つける

ここが一番重要です。

プログラミング初心者がいきなり学習した技術ですらすらとブログを作成できないと思います。

僕も動画で学んでいたとはいえ、実際の実装となると迷う場面が多々ありました。

ですから、開発前や開発中に「どのような仕組みやコードによってブログが作成されているのか」を知って、自分のブログに落とし込むことが重要です。

僕がブログを作る際に参考にしたサイトとソースコード

サイト

ソースコード

https://github.com/microcmsio/nextjs-simple-blog-template

使用技術：Next.js（App Router） + microCMS

microCMSが出してるテンプレートの１つで、日本企業が作ったテンプレートなので読みやすいですし、とても参考になります。

開発

ここからは、今までの学習を活かしてひたすら開発するだけです。

microCMSの公式記事にそって「microCMS + Next.jsでJamstackブログを作ってみよう」に書いてあるようプロジェクトを立ち上げ、microCMSのデータを取得したページを作成してみて下さい。

※App Routerではないので、そこの部分だけ他のドキュメントを参考に実装してください。

そこから設計に基づいて開発していきます。

もちろん先ほど見つけたソースコードを参考にしながら。

デプロイ

最後は、世界中にあなたの作成したブログを公開します（公開をデプロイといいます）。

僕はデプロイはCloudflareを使用しましたが、特別な理由がない限り最初のデプロイはVercelがいいと思います。

（僕は、のちにGoogle広告を入れたりしたかったので、商用利用可能なCloudflareを選択しました）

Vercelは、Next.jsととても相性が良く、ボタンをポチポチするだけでめちゃめちゃ楽です。

具体的なデプロイの方法は「microCMS + Next.jsでJamstackブログを作ってみよう」の後半に書いてあります。

参考にしてみてください。

最後に

みなさんお疲れ様でした。

理想のブログは構築できましたか？

できていたら幸いです。

これで、エンジニアへの一歩を踏み出せたと思います。

こっからは、どんどん開発して、技術的に足りない部分はその都度学習して成長していきましょう！

（僕も頑張ります！）