Frontend Academy · レッスン

メンタリングと技術ドキュメント

ペアプログラミングと適切なタイミングでのフィードバックを通じて若手メンバーを成長させ、アーキテクチャ上の決定をADRに記録し、他の人が信頼できる生きたドキュメントを維持します。

「メンタリングと技術ドキュメント」はCoddyKit上の無料Frontend Academyレッスンです。これはレッスン3/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

シニアの役割は他者の力を増幅すること

シニアの仕事は、最も多くのコードを書くことではありません。チームをより良くすることです。ジュニアをメンタリングし、知識を広げられるドキュメントを書き、教えるコードレビューを行い、他のメンバーが安全かつ迅速に進められるようアーキテクチャを設計します。

ペアプログラミングでメンタリングする

ペアプログラミングは、ジュニアを成長させる最も速い方法です。一緒に作業するか画面共有を行い、相手に操作を任せ、自分はナビゲートします。自分で作業を引き取るのは我慢してください。考えていることを説明し、ソクラテス式の質問を投げかけます。

適切な難易度の課題

ジュニアには、現在の能力を少し上回る課題を与えます。簡単すぎると成長できません。難しすぎると、圧倒されて挫折してしまいます。「少し助けがあればできると思います。行き詰まったら喜んでペアで取り組みます」と伝えて、難易度を調整します。

教えるためのコードレビュー

ジュニアのPRでは、重要なコメントごとに、その理由を説明します。関連するドキュメント、過去のPR、記事にリンクします。悪いレビューは「use useCallback」です。良いレビューは「この関数はレンダーのたびに再作成されます。memo化された子コンポーネントに渡すと、不要な再レンダーが発生します。useCallbackを使うと関数をメモ化できます。実際にこの方法を使ったPRの例はこちらです：#1234」です。

アーキテクチャ決定記録（ADR）

ADRは、重要なアーキテクチャ上の選択を記録するものです。何を決めたのか、なぜ決めたのか、検討した代替案、受け入れたトレードオフを記録します。将来の自分は、今の自分に感謝するでしょう。

# ADR-0007: Use TanStack Query for server state

Date: 2026-05-01
Status: Accepted

## Context
We currently scatter useEffect+fetch+useState patterns across the app.
Cache invalidation is inconsistent, race conditions cause stale data.

## Decision
Adopt TanStack Query (@tanstack/react-query v5) for all server state.

## Consequences
+ Built-in caching, deduplication, optimistic updates.
+ Standard pattern across team.
- Adds ~13KB gzipped.
- Team needs to learn query keys conventions.

## Alternatives Considered
- SWR: smaller, but fewer features (no mutations).
- Apollo Client: overkill (we don't use GraphQL).
- Custom hook: doesn't solve cache invalidation.

## References
- React Query docs: ...

ADRの保管場所

ADRはリポジトリ内のdocs/adr/に連番で保存します。説明対象のコードと一緒に管理します。ツールには、ブラウザで閲覧できるWeb UIを提供するadr-toolsやlog4brainsがあります。

READMEの品質

すべてのパッケージ、ライブラリ、主要機能にREADMEが必要です。何をするものか、インストール方法、使い方（コード例を含む）、コントリビュート方法、テストの実行方法、デバッグ方法を記載します。README駆動開発では、まずREADMEを書き、その仕様に沿って実装します。

インラインコードコメントを使うタイミング

コメントではなぜそうするのかを説明し、何をしているのかは説明しません。何をしているかはコードが示します。コメントでは、ビジネスルール、わかりにくいトレードオフ、チケットやバグへのリンク、注意すべき落とし穴を説明します。

// BAD: comment restates the code
// Increment counter by 1
counter++;

// GOOD: comment explains business context
// Stripe webhook can arrive twice — increment only if signature is fresh.
// See: https://stripe.com/docs/webhooks/best-practices#idempotency
if (!seen.has(event.id)) counter++;

運用作業のためのRunbook

繰り返し行う運用作業や、リスクの高い運用作業の手順を記録します。「Stripe APIキーをローテーションする方法」「デプロイに失敗した場合の復旧方法」「APIレスポンスが遅いときのデバッグ方法」などです。新しいメンバーが、あなたを呼び出さずに手順を実行できます。

常に更新されるドキュメント

古いドキュメントは、ないよりも悪いものです。日付を記載し、四半期ごとに見直します。誰も更新しないドキュメントは削除します。より良い方法は、コードからドキュメントを生成することです（コンポーネントにはStorybook、APIにはTypeDoc、エンドポイントにはOpenAPIを使います）。

テックトークとブラウンバッグ

学んだことについて、チームに20〜30分の発表をします。新しいライブラリ、デバッグの経験、役立つと感じたパターンなどを題材にします。自分の考えを整理するきっかけになり、他のメンバーにも教えられます。

心理的安全性を築く

質問することを恐れるジュニアは成長できません。「わかりません」と言うことを当たり前にします。失敗しても安全な環境を作ります。責任を追及するのではなく、ポストモーテムを行うことを大切にします。シニアの反応が、チームの雰囲気を決めます。

英雄的なコーディングの罠

すべての本番障害を一人で解決する人にならないでください。修正内容を記録し、次回はチームメイトとペアで対応し、原因の診断を自動化します。あなたの英雄的な活躍を必要とするチームは脆弱です。

確認問題

アーキテクチャ決定記録（ADR）の主な目的は何ですか？

まとめ：メンタリングとドキュメント

シニアとは、最も多くのコードを書く人ではなく、他者の力を増幅する人です。ペアプログラミングを行い、コードレビューを通して教え、適切な難易度の課題を与えます。ADRをdocs/adr/に保存し、決定に至った理由を記録します。すべてのパッケージにREADMEを用意します。コメントでは何をではなく、なぜかを説明します。運用作業にはRunbookを用意します。常に更新されるドキュメント（Storybook、TypeDoc、OpenAPI）は、静的なMarkdownより優れています。心理的安全性を築きます。英雄的なコーディングは避けます。

よくある質問

「メンタリングと技術ドキュメント」レッスンは無料ですか？

はい。「メンタリングと技術ドキュメント」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。

「メンタリングと技術ドキュメント」で何を学びますか？

ペアプログラミングと適切なタイミングでのフィードバックを通じて若手メンバーを成長させ、アーキテクチャ上の決定をADRに記録し、他の人が信頼できる生きたドキュメントを維持します。ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Frontend Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン3/4です。

「メンタリングと技術ドキュメント」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFrontend Academyレッスンでコードを書いて実行できますか？

はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Frontend Academyに戻る