ヌギー(nugey)Ask Nugey

「Ask Nuegy（ヌギーに聞いて！）」ブログの技術選定

# 技術スタック

目次

ブログを開発した理由

  • 勉強・調べたことをまとめたい
    • せっかくならそれを同僚、勉強友達、SNSなどで共有したかった
  • 勉強のために何か開発したかった
    • このサイトを土台に何か機能を付け足して、さらに勉強できる環境として使用したかった
  • あわよくば、、、
    • ブログを書くことでSNSでフォロワーが増えるかも
    • ブログのビュー数がもしも増えたら、何か個人開発したときの宣伝に使えるかも
    • ブログのビュー数がもしも増えたら、収益化できるかも

当ブログの技術スタック

  • Next.js 14
    • みんな大好きNext.js
    • app routerを使用しています
  • Biome（リンター&フォーマッター）
  • panda css
    • ハイブリッドCSS in JS
    • サイボウズのmugiさんの 記事 がめっちゃわかりやすい
  • Ant Design 5（UIライブラリ）
    • 中国産のUIライブラリ
    • UIの種類 & ドキュメントが豊富
  • contentlayer
  • mdx
  • Vercel
  • Cloudflare
    • CDNとドメイン

TODO: 技術ごとの詳しい解説

技術スタックの選定理由

  • フロントエンドのフレームワーク
    • Next.js 14（React）
    • 他の候補
      • Vue
      • Astro
      • Gatsby ...etc
    • 理由：
      • 一番の理由は、社内で使用されているから使用したかった
      • また、VueやSveltを覚え直すほどのメリットも見つけられなかった
        • 基本的にはデファクトスタンダード（標準的）なものを選定を基準としている
      • さらに、ブログ以外にも技術を試す場としても活用したかったため、AstroやGatsbyといった静的ジェネレーターは選ばなかった
        • ただのブログとして運用するなら、Next.jsはオーバースペックだと思う
  • リンター&フォーマッター
    • Biome
    • TODO: 他の候補、理由などを記載
  • UIライブラリー
    • Ant Design
    • 他の候補
      • MUI
      • Cakra UI
    • 理由：
      • Next.js 14のapp routerにも対応できるか
        • MUIでは一部で問題があると社内で聞いて見送る
      • UIの種類が豊富
        • Cakra UIも良さそうだったが、少しUIの種類が少なかった
      • ドキュメントが非常に詳しい・丁寧
        • 正直ここが一番でかい
        • 使い始めるときに何も困らなかった
        • アップデートする際も移行手順も詳しく記述があり、安心できる
  • 記事執筆の技術スタック
    • contentlayer & mdx
    • 他の候補
      • WordPress
      • microCMS
    • 理由：
      • TODO: 理由を記載
  • デプロイ
    • Vervel
    • 他の候補
      • 無（他には探していない）
    • 理由：
      • Next.jsを使用しているとデプロイが鬼楽
      • また、商用利用でない場合は無料
      • デプロイするための準備は特段ないので、他のデプロイ環境に移行するのも苦労がない