Sukeke Labを支える技術スタック大公開！ (2025年版)

こんにちは、Sukekeです。私の個人技術ブログ「Sukeke Lab」へようこそ！

皆さんは、普段何気なく見ているWebサイトがどんな技術で動いているのか、気になったことはありませんか？ 実は、Chromeブラウザの拡張機能「Wappalyzer - Technology profiler」などを使うと、そのサイトで使われている技術を簡単に垣間見ることができたりします。

この記事では、この「Sukeke Lab」を支える技術スタック、つまりWebサイトを構成する様々な技術要素について、2025年現在の最新情報として詳しくご紹介したいと思います。

私がこのサイトを作る上で大切にしたのは、「モダンな技術を使いつつ、個人でも無理なく、そしてできるだけ低コストで開発・運用できること」でした。そんな想いから選んだ技術たちを、なぜそれを選んだのか、という理由とともにお話ししていきますね。これから自分のWebサイトを作ってみたい、あるいは技術選定に悩んでいる、という方の何かヒントになれば嬉しいです。

Sukeke Lab の現在の技術スタック

まずは、現在このサイトで使っている主な技術とツールを一覧でご紹介します。バージョンも記載しているので、参考にしてみてください。

• フロントエンドフレームワーク: Next.js (v15.3.3)
• UIライブラリ: React (v19.0.0)
• プログラミング言語: TypeScript (v5)
• CSSフレームワーク: Tailwind CSS (v4)
• Markdown処理:
  • メタデータ解析: gray-matter (^4.0.3)
  • Markdownコア: remark (^15.0.1)
  • GFM対応: remark-gfm (^4.0.1)
  • HTML変換: remark-rehype (^11.1.2)
  • HTMLタグ処理: rehype-raw (^7.0.0)
  • シンタックスハイライト: rehype-prism-plus (^2.0.1)
  • HTML出力: rehype-stringify (^10.0.1)
• ホスティングサービス: Cloudflare Pages
• バージョン管理: Git / GitHub
• (実行環境など): Node.js (v22.16.0)

これらの技術が、どのように連携してこのサイトを形作っているのか、そしてなぜこれらを選んだのか、次で詳しく見ていきましょう。

各技術の選定理由

数ある技術の中から、なぜこれらの組み合わせを選んだのか、それぞれの魅力と選定ポイントをお話しします。

Next.js (v15.3.3)

Next.jsは、ReactをベースにしたWebサイトを構築するためのフレームワークです。Webサイトを作るための便利な機能がたくさん詰まった「道具箱」のようなもの、とイメージしてもらうと分かりやすいかもしれません。

選定理由

1. Reactとの相性抜群: Reactの良さを最大限に活かしつつ、開発をスムーズに進められます。
2. 表示速度の最適化: SSG（静的サイトジェネレーション）という、あらかじめページのHTMLを作っておく仕組みに対応しており、サイトの表示速度を高速にできます。これは、ブログのようなコンテンツ中心のサイトには特に重要ですよね。
3. 開発体験の良さ: ファイルを特定のフォルダに置くだけでページのURLが決まるなど、直感的に開発できる仕組みが整っています。
4. 豊富な情報とコミュニティ: 世界中で多くの開発者に使われているため、学習資料や困ったときの解決策を見つけやすいのが心強いです。

React (v19.0.0)

Reactは、Webサイトの見た目（UI：ユーザーインターフェース）を作るためのJavaScriptライブラリです。UIを「コンポーネント」という小さな部品の集まりとして組み立てていく考え方が特徴です。

選定理由

1. Next.jsの基盤技術: Next.jsを使うなら、Reactの知識は欠かせません。
2. コンポーネントベース開発: UIの部品を再利用しやすく、効率的に開発を進められます。例えば、このサイトのヘッダーやフッターも、一つの部品として作られています。
3. 巨大なエコシステム: 世界中で使われているだけあって、便利な関連ツールやライブラリが非常に豊富です。

TypeScript (v5)

TypeScriptは、JavaScriptに「型」という概念を加えたプログラミング言語です。型があることで、プログラムが意図しない動きをするのを事前に防ぎやすくなります。

選定理由

1. 品質向上と開発効率アップ: プログラムを書いている段階で間違いに気づきやすくなり、結果としてバグの少ない、より堅牢なコードを書く助けになります。
2. コードの可読性向上: 型情報があることで、他の人が書いたコードや、少し時間が経ってから自分が見返すコードも理解しやすくなります。

Tailwind CSS (v4)

Tailwind CSSは、「ユーティリティファースト」という考え方で作られたCSSフレームワークです。あらかじめ用意された小さなCSSの部品（ユーティリティクラス）をHTMLに直接書き込むことで、デザインを組み立てていきます。

選定理由

1. 直感的でスピーディーなUI構築: CSSファイルを別途編集することなく、HTML上で見た目をどんどん作っていけるので、開発のスピードが上がります。
2. 高いカスタマイズ性: 既存のCSSのルールに縛られず、自由なデザインを実現しやすいです。このサイトのニューモーフィズムデザインも、Tailwind CSSの柔軟性があったからこそ実現できました。
3. CSSファイルの肥大化防止: 最終的に使われているユーティリティクラスだけがCSSファイルに含まれるため、無駄なCSSが少なく、サイトのパフォーマンス向上にも繋がります。

Remark と関連ツール群によるMarkdown処理

RemarkはMarkdownという文章記述方法で書かれたテキストを、プログラムで扱える形式に変換するツールです。remark-gfmは、テーブル、取り消し線、タスクリストなど、GitHub Flavored Markdown特有の便利な記法を使えるようにするためのプラグインです。その他の細かい修正はglobal.cssで変更します。

このMarkdownからHTMLへの変換プロセスでは、実際には以下のようなツール群が連携して動作しています（バージョンは2025年6月15日時点のpackage.jsonより）。

• gray-matter (^4.0.3): Markdownファイルの先頭に記述されたメタデータ（タイトル、日付、タグなど）を解析します。
• remark (^15.0.1): Markdownの本文を解析し、プログラムが扱いやすい形式に変換するコアライブラリです。
  • remark-parse: MarkdownをAST（構文木）にパースするプラグイン（remarkのコア機能）。
  • remark-slug: Markdownの見出しに自動でIDを付与し、目次リンクを可能にします。
  • unist-util-visit: Markdownの構文木（AST）を走査し、見出しノードを抽出するためのユーティリティ。
  • mdast: Markdown ASTの型定義（TypeScript用）。
  • remark-gfm (^4.0.1): remarkのプラグインで、テーブルや取り消し線など、GitHub Flavored Markdown特有の記法をサポートします。
  • remark-rehype (^11.1.2): remarkで解析されたMarkdownの構造を、HTMLの構造に変換します。
• rehype-raw (^7.0.0): Markdown内に記述されたHTMLタグを安全に処理します。
• rehype-prism-plus (^2.0.1): コードブロックのシンタックスハイライト（プログラミング言語に応じた色付け）を行います。
• rehype-stringify (^10.0.1): 最終的に、処理された内容をHTML文字列として出力します。

これらのツールが連携することで、Markdownで書かれた内容がウェブページとして表示されています。

選定理由

1. ブログ記事の効率的な管理: このサイトのブログ記事はMarkdownで書いています。Markdownは手軽に文章構造を表現できるので、記事執筆に集中できます。
2. Next.jsとの連携: Next.jsでMarkdownベースのブログを作る際の定番ツールの一つで、導入事例も多く、スムーズに連携できました。

Cloudflare Pages

Cloudflare Pagesは、静的なWebサイト（ユーザーの操作によって内容が頻繁に変わらないサイト）を公開するためのホスティングサービスです。

選定理由

1. 無料枠の充実: 個人ブログ程度の規模であれば、無料でサイトを公開・運用できます。カスタムドメイン（自分だけのURL）の設定も無料なのは嬉しいポイントです。
2. GitHubとの簡単連携: GitHubにサイトのコードを置いているのですが、そのコードを更新（プッシュ）するだけで、Cloudflare Pagesが自動で最新版のサイトをビルド（構築）し、公開してくれます。この自動化は本当に便利です。
3. 高速配信: Cloudflareが持つ世界中のサーバー（CDN：コンテンツデリバリーネットワーク）からサイトが配信されるため、どこからアクセスしても比較的高速に表示されます。

ホスティングサービスの比較について

いろいろな選択肢を比較検討しました。 参考までに、Cloudflare Pagesや関連サービスについて詳しく解説されている素晴らしい記事をいくつかご紹介しますね。

参考①：商用利用も無料！Cloudflare Pages 無料枠でHPコストゼロ運用

参考②：Cloudflare Workers と Pages の違いを徹底比較（2025 年版）

技術選定で私が重視したこと

今回の技術選定では、特に以下の点を重視しました。

1. 維持費ができる限りかからないこと（安心して放置できる）
   個人開発なので、初期費用や運用費用はできるだけ抑えたいところです。Cloudflare Pagesのように、高品質なサービスを無料で利用できるのは本当にありがたいです。なんと、本Webサイトで使用している技術は全て無料で商用利用可能です！

2. サイバー攻撃によるサービス終了や高額請求が発生しないこと（超大事）
   予期せぬ攻撃によるサービスの停止や、従量課金制サービスでの高額請求リスクは絶対に避けたいポイントでした。セキュリティが高く、コスト管理がしやすい構成を選んでいます。

3. 今後もサービス終了の可能性が低いこと(安心して放置できる)
   選んだ技術やサービスが、将来的に安定して提供され続けることは非常に重要です。企業の信頼性やコミュニティの活発さなどを考慮し、長く使えるものを選びました。

4. 応用できる範囲が広いこと（なんでもつくれる）
   一度習得した技術が、他のプロジェクトや新しいアイデアにも活かせると学習効率が良いですよね。汎用性が高く、様々なタイプのWebサイトやアプリケーション開発に応用できる技術を選んでいます。

5. シェアが高い技術であること（情報が豊富で生成AIが助けてくれやすい）
   多くの人に使われている技術は、学習資料やトラブルシューティングの情報が豊富です。また、GitHub Copilotのような生成AIも、メジャーな技術であればあるほど的確なサポートをしてくれやすいため、開発効率の向上に繋がります。

6. 学習コストと開発効率
   私のような個人開発者にとって、時間は非常に貴重です。できるだけ学習しやすく、かつ効率的に開発を進められる技術であることは重要なポイントでした。Next.jsやTailwind CSSは、この点で非常に優れていると感じています。

7. コミュニティと情報の豊富さ
   開発中に問題に直面したとき、あるいは新しいことを学びたいとき、情報が豊富で活発なコミュニティがある技術は大きな助けになります。今回選んだ技術は、いずれもこの条件を満たしています。

8. 将来性とエコシステムの成熟度
   一度作ったサイトは、できるだけ長く快適に運用したいですよね。そのため、将来性があり、今後も継続的に発展していくと期待できる技術を選ぶようにしました。また、便利なツールやライブラリがたくさんある「エコシステム」が成熟していることも、開発の助けになります。

これらの要素を総合的に考えた結果が、現在の「Sukeke Lab」の技術スタックとなっています。もちろん、これが唯一の正解というわけではありません。プロジェクトの目的や規模、開発者のスキルセットによって最適な技術構成は変わってきます。

まとめ

今回は、「Sukeke Lab」を支える技術スタックと、それぞれの選定理由についてお話ししました。

• Next.js と React でモダンなフロントエンドを構築し、
• TypeScript でコードの品質を高め、
• Tailwind CSS で効率的にデザインを行い、
• Remark でMarkdown記事を管理し、
• そして Cloudflare Pages で低コストかつ高速にサイトを公開する。

これが、現在の私の最適解です。

この記事が、これからWebサイトを作ろうとしている方や、新しい技術の導入を検討している方の、何かしらの参考になれば幸いです。技術の世界は日進月歩で、常に新しいものが登場します。私もこのサイトを通じて、新しい技術に触れ、学んだことを皆さんと共有していけたらと思っています。

最後までお読みいただき、ありがとうございました。