忘れがちなことを記録する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

こちらもどうぞ

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

こちらもおすすめ

• 技術ブログのヒーロー画像とOG画像を正気を保ちつつ生成する方法
• 2026年における自動ビジュアルリグレッションテストサービス
• 実際のブラウザでVueコンポーネントをテストする：アーキテクチャ、リアクティビティ、QUnit
• JestからVitestへの移行：実践的なガイド

よくある質問