はじめに
技術の学びと発信の場を作りたい」という思いから、このブログサイトを構築しました。
本記事では、ブログ作成の経緯や使用した技術スタック、そして開発を通じて感じたことを簡単に共有します。
ブログ制作の経緯
記事を書くのは大の苦手ですが、以下の理由からブログを作ることに挑戦してみることにしました。
- 日々の業務で得た知識や知見を共有する場がほしい
- ReactやNext.jsを実際に触れて学習してみたかった
「手を動かす方が頭に入りやすい」と思い、ゼロからブログを構築する道を選びました。
ただし、先にお伝えしておくと、当ブログの完成度はまだ20%程度。
完成を待っていたらいつ公開できるかわからないので、とりあえずこの状態で公開しました。
使用した技術スタック
今回使用した技術スタックはこちらです。
- React（Next.js）
- TypeScript
- Cloudflare Pages（ホスティング）
- Newt（ヘッドレスCMS）
- GitHub
Reactだけチュートリアルを少しやったことがありましたが、何も覚えておらず...。
これらすべてにおいてほぼ未経験といっていいレベルでした。
（チュートリアルを少しやっては忘れるの繰り返しってあるあるですよね...？orz）
特別なこだわりがあったわけではなく、調べながら成り行きでこの構成に落ち着いた形です。
最初はワクワクして制作をスタートしましたが、React、Next.js、TypeScriptの知識が乏しく、学習コストの高さに挫折しそうになりました。（泣）
参考書籍
さすがに検索だけでは埒が明かないと思い、以下の書籍を購入して参考にしました。
モダン開発初心者の私でも、このブログを構築するレベルに達することができたので、とてもおすすめの一冊です。
ヘッドレスCMSの選定
ヘッドレスCMSについては、当初紹介したmicroCMSではなく、最終的にNewtを採用しました。
基本的な実装方法は以下の公式のチュートリアルを参考にしました。
チュートリアル：NewtとNext.js (App Router) を利用してブログを作成する
microとNewtの両方を使ってみましたが、開発体験はほぼ同じです。そのため、どちらか一方を学べば学習コストは大きく変わらないと感じました。
とはいえ、microCMSは参考記事が多く、情報量が豊富です。さらに、先ほど紹介した書籍もmicroCMSに対応しているので、学習コストの面ではmicroCMSが有利だと思います。
Cloudflare Pagesへのデプロイ
最初はNext.jsの標準的なホスティング先であるVercelを使っていました。 しかし、Vercelの無料プランでは商用利用ができないという制約があるため、商用利用が可能なCloudflare Pagesに移行しました。
VercelもCloudflareも初めて触れましたが、どちらもGitHubにプッシュするだけで本番環境に反映される便利さに驚きました。
さらに、テスト環境もテスト用のブランチを作るだけで簡単に作成できるので、開発効率が格段に上がりました。
最初は「GitHubにプッシュするだけでデプロイ完了ってどういうこと？」と思っていましたが、今ではFTPサーバーにファイルをアップロードする作業が面倒に感じるほどです。
これから
冒頭でもお伝えしたように、当ブログサイトの完成度はまだ20%程度で、引き続き開発途中です。
何とか公開までたどり着きましたが、ReactやNext.jsの理解度はまだ初心者レベル。
追加したい機能や、作りたいコンテンツもたくさんありますので、これから少しずつアップデートしていきます。温かい目で見守っていただけると嬉しいです。
今回はざっくりとした内容の記事となりましたが、今後はブログ開発で得た知識や日々の業務で得た知見を記事にしていく予定です。
- Newtでカテゴリ一覧ページを実装する方法（仮）
- Newtで取得した日付のフォーマットを変換する方法（仮）
などなど！
気になる方はぜひブックマークしてもらえたら嬉しいです。
記事を公開した際にはSNSでも発信しますので、よかったら下のプロフィールからフォローもお願いします！m(_ _)m
