Next.jsでブログ作るよ

はじめに

私は趣味でハード系のものづくりをやっているのですが、このところフロントエンド開発にドハマり中です。

HTML+CSS → jQuery → Javascript → React → Redux → Next.js と独学を進めてきて、ようやくモダンなフロントエンドの環境に手が届きつつあります。特に React、Next.js が非常に面白いと感じています。jsx の記法って変態チックで好きです。

これまでの学習の実力を発揮する場に加え、今後のさらなる趣味領域の発展（＋副業にも繋がればいいな）を目指して個人サイトを開発することにしました。

駆け出しながら、開発日記や苦労した点などを記事にして自身のサイトに投稿していきたいと思います。

基本仕様

個人サイトの基本的な仕様を決めました。

• 公開するコンテンツ
  • ブログ
  • 自己紹介ページ
  • ポートフォリオ置き場
  • コンタクトページ
• ブログ記事は Markdown で記述して投稿できること
• レスポンシブデザインであること
• 原則無料でサイトを運用できること
• 主要なモダンブラウザから閲覧できること

主な技術とその理由

選定した主なフレームワークやライブラリと、その理由ついて紹介します。

Next.js

Next.js の以下の機能だけでも非常に助かるなぁと感じています。
実現したい機能の実装に注力できるため、積極的に導入します。

• ファイルベースの自動ルーティング
• 静的サイトジェネレータ、自動ページ最適化
• webpack、tsconfig、gitignore、css とか各種コンフィグが基本変更不要

Typescript

Javascript を勉強していた時、型定義とかクラス設計をコードとして記述しないので、補足をコメントで書きなぐったり、規模が大きいものは excel で管理したり、変数やオブジェクトを console.log で出力した結果を見てコードを書いてたりとか、行き当たりばったり感がすごかったんですよね。

私は本業で C#などの.NET Framework 周りのソフトウェア開発に携わっており、
Typescript を初めて触った時、Typescript って C#言語とめっちゃ似てるじゃん！？と思いました。調べるとどちらも Microsoft が開発していましたね。Microsoft 万歳。

モダンなフロントエンド開発では Typescript を導入する事例が増えているとの記事もよく見かけます 。Typescript を導入することで勉強にもなりますし、個人的にも安心して開発できそうなので取り入れます。

tsconfig の"strict": trueとして、型定義も可能な限り any は使わないように配慮しながら実装を進めたいと思います。

Tailwindcss

Material-UI や Bootstrap などの CSS フレームワークは触れてきました。簡単でいい感じの UI を実現でき全く問題はないのですが、今回は勉強も兼ねて流行りの Tailwindcss を導入することとしました。

Tailwind の各クラスの定義は、見てすぐ理解できるレベルのショートな CSS で記述されており、CSS そのものに対する理解が深まると思ったのが一番の決め手です。
今後どのような CSS フレームワークを使うにしても、根幹となる CSS の知識は絶対に必要と思います。フレームワークを超えたカスタマイズをしたい場面も今後出てくるでしょう。

CMS (Contents Management System)

CMS を何で実現するかはまだはっきりと決めていません。
AWS や Firebase は趣味でちょろっと使ったことがあるので、クラウド上に自前で CMS を実現するイメージはついています。Strapi などのヘッドレス CMS を使ってみるものも面白そうですね。

しばらくの間は、ローカルでビルドしたものを Vercel のサーバーでデプロイして、サイトを運営しようと考えています。Next.js と親和性が高く簡単です。

（2022/8/15追記)
ヘッドレスCMSのmicroCMSを採用し、JAMstack構成のブログサイトとすることにしました。

意気込み

本業の合間を縫ってコツコツと楽しみながら進めていきたいと思います。
まずは、メインコンテンツであるブログ公開に関わる機能から実装を進めています。
開発中の画面 ↓↓

将来構想

まずは上記の基本仕様に基づき実装を進めていきますが、将来的に実装したい機能のアイデアもまとめておきます。

• ブログ記事の Markdwon は標準記法に加えて、Zenn や Qiita のような独自記法も記述可能とする。
• ブログ記事にはタグを付与して、タグによる記事検索機能を追加する。
• ブログ記事に目次の自動生成機能を追加する(Markdown を解析して自動生成)
• ブログ記事や画像ファイル等のコンテンツ管理は ヘッドレス CMS やクラウドサーバー（AWS や Firebase 等）に載せ、ローカル管理要素を無くす。
• 趣味の DIY・ものづくりで制作した商品を販売できるショッピングページを作りたい。Strape 等の決済代行サービスを利用して、自サイト内でショッピングを完結できる。
• 買ってみて本当によかった物とか紹介してみたい、ついでに広告？とか入れてみたい（小並感）