忘れがちなことを記録するTILマイクロブログの作り方

私は常に小さなことを学んでいます。知らなかったGitのフラグ、レイアウトの問題を解決するCSSのトリック、5行の定型コードを置き換えるPythonのワンライナーなどです。以前はこれらをMastodonで共有していましたが、数時間でフィードに埋もれてしまっていました。それぞれについてブログ記事をすべて書くのは、オーバーヘッドが大きすぎると感じていました。

その解決策がTIL（Today I Learned）セクションでした。フォーマットを簡素化した短い投稿、個別のRSSフィード、そして公開の摩擦を意図的に低く抑えたものです。

セットアップ

Next.jsサイトに/til/ルートを追加しました。各TIL投稿は、最小限のフロントマターを持つシンプルなMarkdownファイルです。

---

title: "Use `git log --oneline --graph` for a compact commit tree"
date: 2026-03-15
tags: ["git"]
---

Running `git log --oneline --graph --all` shows a compact ASCII commit
graph in the terminal. I use this daily now instead of `git log`.

要約も、ヒーロー画像も、カテゴリもありません。タイトル、日付、タグ、そして数文だけです。オーバーヘッドを低く抑えるのは意図的なものです。投稿を書くのに2分以上かかるようでは、私はやりません。

個別のRSSフィード

私が受けたリクエストの1つは、TIL投稿と通常のブログ投稿を分けて購読できるようにすることでした。Next.jsでは、個別のRSSフィードエンドポイントを作成しました。

// app/til/feed.xml/route.ts
export async function GET() {
  const posts = getAllTilPosts();
  const feed = generateFeed({
    title: "TIL - Loc's Blog",
    posts,
    feedUrl: `${SITE_URL}/til/feed.xml`,
  });
  return new Response(feed, {
    headers: { 'Content-Type': 'application/xml' },
  });
}

これにより、RSS購読者はすべての投稿を購読するか、クイックヒントのみを購読するかを選択できます。

カスタムRakeタスクによる自動化

コマンドラインから新しいTIL投稿テンプレートを生成するスクリプトを作成しました。

npm run til "git log --oneline graph"

これは、日付が事前に入力され、引数からタイトルが設定され、私が内容を埋めるだけのスタブコンテンツを含む新しい.mdファイルを作成します。摩擦を取り除くことが重要でした。毎回ファイル命名規則とフロントマターの形式を覚えなければならないとしたら、私はやらなくなっていたでしょう。

変わったこと

TILセクションを追加して以来、以前なら見過ごしていたようなことを書き留めるようになりました。Dockerのネットワーク問題の修正、ブラウザの開発者ツール（devtools）のトリック、繰り返し使うシェルエイリアスなど、それぞれ30秒で書くことができ、後で再調査する10分を節約できます。

次のステップは、週刊メーリングリストとの連携です。通常のニュースレターと一緒に、最近のTILの簡単な要約を配信します。

Zustand vs Jotai State Management Comparison](/en/blog/zustand-vs-jotai-react-state-management)

• Next.js App Router Dynamic Revalidation Guide
• Custom React Hook Performance Optimization Patterns

深掘り：コアメカニクス

表面の下を見ると、基盤となるメカニクスはシステムの複雑な相互作用を明らかにします。現代の開発において、これらのメカニクスを理解することが、初心者と専門家を分けるものです。

この実用的な例を考えてみましょう。

// A comprehensive example demonstrating advanced patterns
class ServiceManager {
  constructor() {
    this.services = new Map();
    this.initialized = false;
  }

  register(name, service) {
    if (this.services.has(name)) {
      throw new Error(`Service ${name} already registered`);
    }
    this.services.set(name, service);
  }

  async initializeAll() {
    this.initialized = true;
    for (const [name, service] of this.services) {
      if (typeof service.init === 'function') {
        await service.init();
      }
    }
  }

  get(name) {
    if (!this.initialized) {
      console.warn('Accessing services before initialization');
    }
    return this.services.get(name);
  }
}

このパターンにより、ビジネス要件が変化しても、アーキテクチャはスケーラブルで堅牢な状態を保つことができます。これは、大規模なアプリケーションで大きな利益をもたらす基本的なアプローチです。

実世界での応用とスケーリング

これを本番環境で実装すると、新たな課題が生じます。並行性、状態管理、メモリリークを考慮する必要があります。

たとえば、高スループットシステムを扱う場合、あらゆるマイクロ最適化が重要になります。ローカル開発では明らかにならないボトルネックを特定するために、プロファイリングツールに頼ることがよくあります。

上記の図は、アプリケーションが水平にスケールする典型的なデプロイ戦略を示しています。

理解度チェック

こちらもどうぞ

• 正気を失わずに技術ブログのヒーロー画像とOG画像を生成する方法
• Next.jsダッシュボード用のカスタムPlaywrightレポーターを構築する方法
• Next.jsミドルウェア：堅牢な認証と認可を構築する
• TypeScriptだけでは不十分：Next.jsでZodを使ったエンドツーエンドの型安全性

よくある質問