技術ブログ始めました - Next.js × Tailwind CSS で構築 | プランタン東京

「技術ブログ、やらなきゃな...」

そう思い続けて、何年経っただろう。

Qiitaに下書きが溜まり、Zennのアカウントは作ったまま放置。「そのうちやろう」が口癖になってました。

でも、もう待てない。

インプットばかりでアウトプットしないのは、水を飲むだけで息を吐かないようなもの。

というわけで、ついに技術ブログを立ち上げました。

なぜブログを始めたのか

1. アウトプットしないと忘れる

新しい技術を学んでも、使わないと忘れる。これ、エンジニアあるあるですよね。

「あれ、去年やったあの技術、なんだっけ...？」

記憶だけに頼るのは限界がある。書いて残すことで、未来の自分を助けたい。

2. 学んだことを整理したい

技術を「分かったつもり」になるのは簡単。でも、それを言語化するのは難しい。

ブログ記事として書くことで、自分の理解を整理できる。説明できない部分は、実はちゃんと理解できてない部分。

アウトプットは、最高のインプットでもあります。

3. 誰かの役に立ちたい

自分がググって救われた記事、無数にあります。

「このエラー、どうやって解決するんだ...」 → ググる → 誰かのブログ記事が見つかる → 「これだ！」 → 解決

この恩返しをしたい。自分が苦労したことは、きっと誰かも苦労している。

4. 記録を残したい

エンジニアとしての成長記録を残したい。

1年後、3年後に、この時期の自分がどんなことを考えていたか振り返りたい。

「あの頃はこんなことに悩んでたんだな」って、笑えるようになりたい。

なぜ自前でブログを構築したのか

「ZennやQiitaがあるのに、なんでわざわざ自分で作るの？」

正直、そう思ったこともあります。でも、自前で作ることにしました。

理由は3つ。

1. 完全なコントロール

プラットフォームに依存すると、そのプラットフォームのルールに縛られます。

デザインの自由度が低い
機能の追加ができない
プラットフォームがなくなったら終わり

自分で作れば、すべて自由。やりたいことを、やりたいように実装できる。

2. 技術の実践の場

「ブログを作る」こと自体が、技術の勉強になります。

Next.js App Routerの実践
Tailwind CSSのカスタマイズ
Markdownの扱い
デプロイの経験

このブログ自体が、学習プロジェクトです。

3. 自分のドメインで

blog.printemps.tokyoという、自分のドメインで発信したかった。

URLは、インターネット上の住所。自分の住所を持ちたかったんです。

技術スタックへのこだわり

このブログは、こだわって技術を選定しました。

const techStack = {
  framework: 'Next.js 15',
  router: 'App Router',
  styling: 'Tailwind CSS v4',
  content: 'Contentlayer',
  testing: ['Vitest', 'Playwright'],
};

1つずつ、なぜこの技術を選んだのか説明します。

Next.js 15 (App Router)

なぜ Next.js？

サーバーサイドレンダリング（SEO最適）
ファイルベースルーティング（分かりやすい）
画像最適化（自動で良い感じに）
活発なコミュニティ（困ったときに助けてもらえる）

特に、App Routerを選んだのがポイント。

Server Componentsで、ページが爆速。記事の読み込みが瞬時に終わります。

（Pages Routerからの移行で苦労したのは内緒...いや、それも記事にします）

Tailwind CSS v4

なぜ Tailwind？

最初は、「ユーティリティクラスばっかりで読みにくくない？」と思ってました。

<div class="max-w-4xl mx-auto px-4 py-8">

でも、使ってみたら考えが変わりました。

CSSファイルを行き来しなくて良い
クラス名を考えなくて良い
デザインの一貫性が保たれる
レスポンシブが簡単（md:プレフィックス）

しかも、v4からはさらに速くなって、設定もシンプルに。

一度慣れたら、もう素のCSSには戻れません。

Contentlayer

なぜ Contentlayer？

記事をMarkdownで書きたかった。シンプルに。

ContentlayerはMarkdownをTypeScriptの型として扱えるので、型安全に記事を管理できます。

import { allPosts } from 'contentlayer/generated';

// postsはちゃんと型がついてる
allPosts.forEach(post => {
  console.log(post.title); // ✓ 型安全
  console.log(post.typo);  // ✗ エラーになる
});

エディタの補完も効くし、typo（タイポ）も防げる。最高です。

Vitest + Playwright

なぜテスト？

「ブログにテストなんて要る？」と思うかもしれません。

でも、必要なんです。

記事一覧が正しく表示されるか
リンクが切れてないか
レスポンシブデザインが崩れてないか

自動テストがあれば、安心して変更できます。

Vitestでユニットテスト、PlaywrightでE2Eテスト。これで完璧。

このブログの特徴

Markdownベース

記事は全部Markdown。

# 見出し

こんな感じで書けば、
**太字**や*斜体*も簡単。

コードブロックも：
\`\`\`typescript
const hello = "world";
\`\`\`

エンジニアに馴染みのある形式。エディタで書けるのが最高。

レスポンシブデザイン

スマホでも、タブレットでも、PCでも、快適に読めるようにしました。

Tailwind CSSのおかげで、レスポンシブ対応が簡単でした。

ダークモード対応（予定）

目に優しいダークモード、実装したい。

夜中にコード書きながら読む人（自分）のために。

高速表示

App Routerのおかげで、ページ遷移が爆速。

もう「ローディング...」を見る必要はありません。

今後の予定

このブログで書いていきたいこと：

技術記事

Next.js: App Routerの使い方、ハマりポイント
React: Server Componentsの実践
TypeScript: 型定義のコツ
Python: データ分析、自動化
Vim/Neovim: エディタ設定
インフラ: サーバー管理、デプロイ

開発日記

このブログの開発記録
新しいプロジェクトの進捗
試したツールのレビュー

学習記録

読んだ技術書の感想
オンライン講座のメモ
学んだことの整理

ハマったポイント

エラーの解決方法
ドキュメントに書いてない情報
「こうすればよかった」という反省

自分が苦労したことは、誰かも苦労するはず。そんな記事を書きたい。

読んでほしい人

このブログは、こんな人に読んでほしいです：

同じ技術を使っている人: 一緒に学びましょう
初心者エンジニア: 一緒に成長しましょう
ベテランエンジニア: 間違いがあったら教えてください
未来の自分: ちゃんと記録残すから、後で読んでね

間違ったことを書いてしまうかもしれません。そのときは、ぜひ指摘してください。

コメントやSNSでのフィードバック、大歓迎です。