Morising Tech Blog
JAEN

このブログの技術スタックについて

公開日:

Tech Blog 開発記録：技術スタックと設計思想

こんにちは。Morising Tech Blog の記念すべき第1投稿です。
本記事では、このブログの技術スタックや設計方針、各技術を選んだ理由についてまとめます。

このブログの趣旨は、私が仕事や日頃の技術の勉強の中で学んだことやつまづいたポイントなどが少しでも世の中の人のためになるように残しておくこと、です。そこでブログの要素として

  • 読みやすいコードブロック
  • 検索でヒットしやすくするためのSEO
  • 日本語・英語の切り替え対応
  • シンプルなUI

を優先におきました。また、日常の少ない時間の中でこのブログの開発工数を最小限にするため

  • 完璧より完成
  • シンプルな構成
  • 学習コストの低さ

のあたりも技術選定で考慮しています。

今回採用した技術スタック

  • フロントエンド: Next.js (App Router)
  • ホスティング: Vercel
  • Database: Supabase
  • Auth(Adminページ): Supabase Auth
  • 記事のフォーマット: マークダウン

採用理由

1. Next.js (App Router)

  • 理由:
    • 静的生成（SSG）・サーバーサイドレンダリング（SSR）・クライアントサイドレンダリング（CSR）を柔軟に使い分けられる。SSG・SSRによってGoogleの検索エンジンクローラーに素早くページをロードさせることができ、結果的にSEOにも効いてくる。
    • App Routerにより、レイアウトやルーティングの管理が直感的で、国際化（i18n）や管理画面の分離も容易。
    • SSRができるWebフロントエンドのフロントエンドではデファクトスタンダード

2. Vercel

  • 理由:
    • Next.jsを使ったホスティングが爆速。
    • ドメインもVercelで取得可能。
    • 無料枠でも個人開発レベルならある程度使えそう。

3. Supabase

  • 理由:
    • オープンソースでFirebaseライクなBaaS。ブログというコンテンツなのでできればRDBを使いたく、Supabaseが良さそうだった。PostgreSQLベースなので後々DBを変えたくなった際のデータ移行も容易。
    • 認証・ストレージ・自動API生成など、個人開発や小規模プロダクトに最適。
    • 認証まで含めてセットアップがとても簡単なので学習コストはとても低い。

4. マークダウン

  • 理由:
    • 技術ブログらしく、Markdownで記事を書き、リアルタイムプレビューやコードブロックのハイライトも実装。
    • react-markdown + react-syntax-highlighter の組み合わせで、表やコードブロックも綺麗に表示できる。

今後の展望

  • 画像のアップロード・表示機能
  • タグ・カテゴリ機能の追加
  • 記事の検索・フィルタ機能

Morising Tech Blogは、「自分が本当に使いたい技術ブログ」を目指して、
今後も最新の技術スタックを使って機能・デザインともに進化させていきます。

引き続き、開発記録や技術ノウハウも発信していきますのでどうぞよろしくお願いします。

ホームに戻る