jpskill.com
✍️ ライティング コミュニティ

typescript-jsdoc

TypeScriptコードに効果的なJSDocコメントを記述するためのSkillで、ドキュメントの形式や配置場所、ベストプラクティスを指南し、コードの自己文書化との使い分けを支援することで、コードの可読性とIDEサポートを向上させるSkill。

📜 元の英語説明(参考)

Write effective JSDoc comments for TypeScript code. Provides guidance on documentation format, strategic placement, best practices, and when to document versus when to keep code self-documenting. Helps maintain code clarity and IDE support.

🇯🇵 日本人クリエイター向け解説

一言でいうと

TypeScriptコードに効果的なJSDocコメントを記述するためのSkillで、ドキュメントの形式や配置場所、ベストプラクティスを指南し、コードの自己文書化との使い分けを支援することで、コードの可読性とIDEサポートを向上させるSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o typescript-jsdoc.zip https://jpskill.com/download/17004.zip && unzip -o typescript-jsdoc.zip && rm typescript-jsdoc.zip
🪟 Windows (PowerShell)
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/17004.zip -OutFile "$d\typescript-jsdoc.zip"; Expand-Archive "$d\typescript-jsdoc.zip" -DestinationPath $d -Force; ri "$d\typescript-jsdoc.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して typescript-jsdoc.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → typescript-jsdoc フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-18
取得日時
2026-05-18
同梱ファイル
1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

TypeScript JSDoc ドキュメント

コードの保守性を高め、開発者や IDE に貴重なコンテキストを提供する効果的な JSDoc コメントを記述します。

コアフォーマット

JSDoc コメントは /** で始まり */ で終わります。内部の行は通常アスタリスクで始まります。タグは @ にキーワードを続けた形式で始まります。必須のタグには、@param@returns@throws@example、および @deprecated があります。

TypeScript コードにはすでに型情報が含まれているため、JSDoc は型を繰り返すのではなく、「なぜ」と「どのように」に焦点を当てる必要があります。

/**
 * 税込みの合計金額を計算します
 * @param basePrice - 税抜き価格
 * @param taxRate - 税率(10進数表記、8%の場合は0.08)
 * @returns 税金を適用した後の合計金額
 */
function calculateTotal(basePrice: number, taxRate: number): number {
    return basePrice * (1 + taxRate);
}

戦略的なドキュメントレベル

JSDoc の使用法を、それぞれ異なる目的を果たす 3 つの異なるレベルとして扱います。

必須ドキュメント は、すべてのパブリック API、エクスポートされた関数、クラス、およびインターフェースに表示されます。これは、ライブラリコードまたは共有モジュールの場合には交渉の余地がありません。エンティティが何をするのか、重要な動作、潜在的なエラーを文書化し、インターフェースがすぐに明白でない場合は使用例を提供します。

明確化ドキュメント は、コードに明白でない動作がある場合、複雑なアルゴリズムを実装する場合、または重要な副作用がある場合に価値を発揮します。シグネチャから明らかでない重要な動作を説明し、通常とは異なるパフォーマンス特性について警告するか、再試行ロジック、キャッシュ動作、または状態管理を文書化します。このドキュメントは、型システムを超えた真の価値を追加します。

最小限のドキュメント は、内部ヘルパー関数、プライベートメソッド、およびコードが真に自己文書化されている単純なユーティリティ関数に適用されます。ここでも、意図を説明する簡単な一行の説明は、将来の開発者が目的をすばやく理解するのに役立ちます。関数名と実装がすぐに理解できる場合にのみ、ドキュメントを省略してください。

複雑な API のドキュメント構造

クラスとサービスの場合、クラスを高いレベルで文書化し、次にパブリックメソッドの詳細なドキュメントを提供します。

/**
 * ユーザー認証とセッション処理を管理します。
 *
 * このサービスは、ログイン、ログアウト、トークン更新を含むすべての
 * 認証フローを処理するシングルトンインスタンスを維持します。
 * トークンの有効期限と更新を自動的に管理します。
 */
export class AuthenticationService {
    /**
     * 提供された認証情報でユーザーを認証しようとします
     * @param credentials - ユーザーログイン情報
     * @throws {AuthenticationError} 認証情報が無効な場合
     * @throws {NetworkError} 認証サーバーに到達できない場合
     * @example
     * ```typescript
     * const auth = new AuthenticationService();
     * try {
     *   const session = await auth.login({
     *     username: 'user@example.com',
     *     password: 'securepass'
     *   });
     * } catch (error) {
     *   console.error('ログインに失敗しました:', error.message);
     * }
     * ```
     */
    async login(credentials: LoginCredentials): Promise<Session> {
        // 実装の詳細
    }
}

高度なパターン

ジェネリック関数 の場合、JSDoc は型シグネチャだけでは伝達できないコンテキストを提供するのに役立ちます。@template タグを使用して、型パラメータを説明し、それらがどのように相互作用するかを文書化します。

/**
 * メモ化を使用してマッピング関数でアイテムの配列を変換します。
 *
 * この関数は、アイテムの同一性に基づいて結果をキャッシュするため、
 * 同じデータの繰り返し変換に効率的です。キャッシュは、
 * 配列参照が変更されるとクリアされます。
 *
 * @template T - 入力配列内のアイテムの型
 * @template R - 出力配列内のアイテムの型
 * @param items - 変換するソース配列
 * @param mapper - 各アイテムを変換する関数
 * @param keyExtractor - キャッシュキーを生成するオプションの関数
 * @returns キャッシュから提供される可能性のある結果で変換された配列
 */
function memoizedMap<T, R>(
    items: T[],
    mapper: (item: T) => R,
    keyExtractor?: (item: T) => string
): R[] {
    // キャッシュロジックによる実装
}

複雑なオブジェクトパラメータ の場合、ネストされたパラメータドキュメントを使用して、組織を明確に保ちます。

/**
 * アプリケーションデータベース接続を構成します
 * @param config - データベース構成オプション
 * @param config.host - データベースサーバーのホスト名
 * @param config.port - ポート番号(デフォルトは5432)
 * @param config.ssl - SSL接続設定
 * @param config.ssl.required - SSLが必須かどうか
 * @param config.ssl.certificatePath - SSL証明書ファイルへのパス
 * @param config.poolSize - 最大接続プールサイズ(1〜100)
 */
function configureDatabase(config: DatabaseConfig): void {
    // 構成ロジック
}

ドキュメントが冗長になる場合

JSDoc が冗長になる場合を理解することも同様に重要です。TypeScript の型システムがすでに完全なストーリーを伝えており、関数名が真に自己説明的な場合は、ドキュメント化を避けてください。function isEven(n: number): boolean のようなユーティリティは、予期しないエッジケースがない限り、おそらく JSDoc を必要としません。

同様に、変更される可能性のある実装の詳細を文書化することは避けてください。契約、つまり関数が何をすることを約束するか、現在どのように実行するかではなく、契約に焦点を当てます。これにより、実装が進化してもドキュメントは安定した状態を維持できます。

黄金律

開発者がコードを正しく使用または保守するのに役立つ意味のある情報を追加する場合は、JSDoc を記述します。優れたドキュメントは、意図を説明し、落とし穴について警告し、決定のコンテキストを提供し、使用パターンを示します。型シグネチャにすでに表示されているものの冗長なトランスクリプトを読むのではなく、経験豊富な同僚がコードの重要な部分を説明しているように感じるはずです。

一般的なパターンの詳細な例については、references/patterns.md を参照してください。

📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

TypeScript JSDoc Documentation

Write effective JSDoc comments that enhance code maintainability and provide valuable context to developers and IDEs.

Core Format

JSDoc comments begin with /** and end with */, with lines inside typically starting with an asterisk. Tags start with @ followed by a keyword. Essential tags include @param, @returns, @throws, @example, and @deprecated.

Since TypeScript code already contains type information, JSDoc should focus on the "why" and "how" rather than repeating types:

/**
 * Calculates the total price including tax
 * @param basePrice - The price before tax
 * @param taxRate - The tax rate as a decimal (0.08 for 8%)
 * @returns The total price after applying tax
 */
function calculateTotal(basePrice: number, taxRate: number): number {
    return basePrice * (1 + taxRate);
}

Strategic Documentation Levels

Treat JSDoc usage as having three distinct levels, each serving different purposes:

Essential Documentation appears on all public APIs, exported functions, classes, and interfaces. This is non-negotiable for library code or shared modules. Document what the entity does, important behaviors, potential errors, and provide a usage example when the interface isn't immediately obvious.

Clarifying Documentation becomes valuable when code has non-obvious behavior, implements complex algorithms, or has important side effects. Explain critical behaviors that aren't apparent from the signature, warn about unusual performance characteristics, or document retry logic, caching behavior, or state management. This documentation adds genuine value beyond the type system.

Minimal Documentation applies to internal helper functions, private methods, and straightforward utility functions where the code is genuinely self-documenting. Even here, a brief one-liner explaining intent helps future developers quickly understand purpose. Skip documentation only when the function name and implementation are immediately transparent.

Documentation Structure for Complex APIs

For classes and services, document the class at a high level, then provide detailed documentation on public methods:

/**
 * Manages user authentication and session handling.
 * 
 * This service maintains a singleton instance that handles all
 * authentication flows including login, logout, and token refresh.
 * It automatically manages token expiration and renewal.
 */
export class AuthenticationService {
    /**
     * Attempts to authenticate a user with provided credentials
     * @param credentials - User login information
     * @throws {AuthenticationError} When credentials are invalid
     * @throws {NetworkError} When the authentication server is unreachable
     * @example
     * ```typescript
     * const auth = new AuthenticationService();
     * try {
     *   const session = await auth.login({ 
     *     username: 'user@example.com',
     *     password: 'securepass' 
     *   });
     * } catch (error) {
     *   console.error('Login failed:', error.message);
     * }
     * ```
     */
    async login(credentials: LoginCredentials): Promise<Session> {
        // Implementation details
    }
}

Advanced Patterns

For generic functions, JSDoc shines in providing context that type signatures alone cannot convey. Use @template tags to explain type parameters and document how they interact:

/**
 * Transforms an array of items using a mapping function with memoization.
 * 
 * This function caches results based on item identity, making it efficient
 * for repeated transformations of the same data. The cache is cleared
 * when the array reference changes.
 * 
 * @template T - The type of items in the input array
 * @template R - The type of items in the output array
 * @param items - Source array to transform
 * @param mapper - Function to transform each item
 * @param keyExtractor - Optional function to generate cache keys
 * @returns Transformed array with results potentially served from cache
 */
function memoizedMap<T, R>(
    items: T[],
    mapper: (item: T) => R,
    keyExtractor?: (item: T) => string
): R[] {
    // Implementation with caching logic
}

For complex object parameters, use nested parameter documentation to keep organization clear:

/**
 * Configures the application database connection
 * @param config - Database configuration options
 * @param config.host - Database server hostname
 * @param config.port - Port number (defaults to 5432)
 * @param config.ssl - SSL connection settings
 * @param config.ssl.required - Whether SSL is mandatory
 * @param config.ssl.certificatePath - Path to SSL certificate file
 * @param config.poolSize - Maximum connection pool size (1-100)
 */
function configureDatabase(config: DatabaseConfig): void {
    // Configuration logic
}

When Documentation Becomes Redundant

Understanding when JSDoc becomes redundant is equally important. Avoid documenting when TypeScript's type system already tells the complete story and the function name is genuinely self-explanatory. A utility like function isEven(n: number): boolean probably doesn't need JSDoc unless it has unexpected edge cases.

Similarly, avoid documenting implementation details that might change. Focus on the contract—what the function promises to do, not how it currently does it. This keeps documentation stable even as implementation evolves.

The Golden Rule

Write JSDoc when it adds meaningful information that helps developers use or maintain your code correctly. Good documentation explains intentions, warns about gotchas, provides context for decisions, and illustrates usage patterns. It should feel like having an experienced colleague explaining the important parts of the code, not like reading a redundant transcript of what's already visible in the type signatures.

See references/patterns.md for detailed examples of common patterns and anti-patterns.