カテゴリ: JavaScript 更新日: 2025/12/25

JavaScriptのコメント活用術!TODO・FIXME・ドキュメンテーションコメントの書き方

JavaScriptのコメント活用術!TODO・FIXME・ドキュメンテーションコメントの書き方
JavaScriptのコメント活用術!TODO・FIXME・ドキュメンテーションコメントの書き方

先生と生徒の会話形式で理解しよう

生徒

「JavaScriptのコメントって、ただの説明だけじゃなくて他にも使い方があるんですか?」

先生

「その通りです。コメントには、あとでやることを書いたり、注意点を残したり、関数の使い方を説明したりと、いろんな使い方があります。」

生徒

「なんだか便利そうですね!どうやって書けばいいのか教えてください!」

先生

「それでは、TODOコメント、FIXMEコメント、ドキュメンテーションコメントの使い方を見ていきましょう!」

1. コメントを活用すると何が良いのか?

1. コメントを活用すると何が良いのか?
1. コメントを活用すると何が良いのか?

コメントはJavaScriptのコードに説明を書いたり、やるべきことを残しておくために使います。特に「チームで開発するとき」や「自分で後から見直すとき」にとても役立ちます。

コメントをうまく使えば、プログラムの理解がしやすくなり、ミスを防ぐことにもつながります。

2. TODOコメントの書き方と使い方

2. TODOコメントの書き方と使い方
2. TODOコメントの書き方と使い方

TODO(トゥードゥー)コメントは、「あとでやるべきこと」を残しておくためのコメントです。将来追加する処理や、保留中の作業を忘れないようにメモするために使います。


// TODO: 入力チェックを追加すること
function submitForm() {
  // 今はまだバリデーションが未実装
}

TODO:と書いておけば、検索で簡単に見つけられるので、あとで見直しやすくなります。

3. FIXMEコメントの意味と注意点

3. FIXMEコメントの意味と注意点
3. FIXMEコメントの意味と注意点

FIXME(フィックスミー)コメントは、「ここに不具合や問題があるので、修正が必要」と知らせるためのコメントです。

バグ(間違い)や一時的な対応を書いている場所にFIXME:をつけておくと、あとでちゃんと直すべき部分がわかりやすくなります。


// FIXME: 日付が正しくない場合にエラーになる可能性あり
let today = new Date("2025-13-01"); // 存在しない月

プログラムが「なんとか動いてはいるけど完璧じゃない」ときに、FIXME:で警告を残しておくと良いでしょう。

4. ドキュメンテーションコメントとは?

4. ドキュメンテーションコメントとは?
4. ドキュメンテーションコメントとは?

ドキュメンテーションコメントとは、関数やプログラムの使い方を丁寧に説明するためのコメントです。JavaScriptでは、/**で始まり、*/で終わる形式で書きます。

関数の説明、引数、戻り値などを記述することで、他の人や自分が後から理解しやすくなります。


/**
 * ユーザーの名前を表示する関数
 * @param {string} name - ユーザーの名前
 * @returns {void}
 */
function greet(name) {
  console.log("こんにちは、" + name + "さん!");
}

このように書いておくと、IDE(プログラムを書くツール)でも関数の情報が自動で表示されることがあります。

5. コメントの書き方ルールを決めると便利

5. コメントの書き方ルールを決めると便利
5. コメントの書き方ルールを決めると便利

コメントの書き方をチームで統一しておくと、コードが読みやすくなり、コミュニケーションもスムーズになります。

  • // TODO:でやることを明確に
  • // FIXME:で修正ポイントを見える化
  • /** */で関数の意味や使い方を明記

たとえば、次のように統一して使うと見やすくなります。


// TODO: 金額の単位を円にそろえる
// FIXME: 割引の計算がおかしいかも

/**
 * 合計金額を計算する
 * @param {number} price - 商品の価格
 * @param {number} tax - 税率
 * @returns {number}
 */
function calculateTotal(price, tax) {
  return price + price * tax;
}

6. コメントを「未来の自分」や「他の人」への手紙にしよう

6. コメントを「未来の自分」や「他の人」への手紙にしよう
6. コメントを「未来の自分」や「他の人」への手紙にしよう

コメントは、今の自分だけでなく「未来の自分」や「これを読む他の人」のために書くものです。

プログラムを書くときに、「これはどういう意味だったかな?」と迷わないように、TODOやFIXMEでタスクを残したり、ドキュメンテーションで関数の使い方を記録したりして、丁寧なコードを心がけましょう。

まとめ

まとめ
まとめ

コメントは「読めるコード」を作るための大切な道具

この記事では、JavaScriptにおけるコメントの役割や具体的な使い方について、TODOコメント、FIXMEコメント、ドキュメンテーションコメントを中心に解説してきました。コメントは単なる補足説明ではなく、プログラムを安全に保ち、理解しやすくし、長く使い続けるために欠かせない存在です。

特にJavaScriptは動きが柔軟な言語である分、コードの意図が分かりにくくなりやすい特徴があります。そこでコメントを適切に使うことで、「なぜこの処理を書いたのか」「あとで何を直す予定なのか」「この関数はどのように使うのか」といった情報を、コードのすぐそばに残すことができます。

TODO・FIXMEコメントで作業を見える化する

TODOコメントは、未対応の処理や今後やるべき作業を明確にするためのメモです。実装途中のコードや、後回しにした機能を忘れないために非常に役立ちます。一方、FIXMEコメントは「現時点で問題がある」「暫定対応である」ことを示す警告の役割を持っています。

これらのコメントを使うことで、コードを読み返したときに「どこが未完成なのか」「どこに注意が必要なのか」が一目で分かるようになります。個人開発でもチーム開発でも、作業の抜け漏れや修正忘れを防ぐための重要な手がかりになります。

ドキュメンテーションコメントで理解しやすさを高める

ドキュメンテーションコメントは、関数や処理の使い方を体系的に説明するためのコメントです。引数の意味や戻り値の内容を明確に書いておくことで、他の人はもちろん、時間が経った後の自分自身も迷わずにコードを理解できます。

また、ドキュメンテーションコメントはエディタや開発環境によっては自動的に表示されるため、コード補完の場面でも大きな助けになります。結果として、バグの発生を抑え、保守性の高いJavaScriptコードを書くことにつながります。

コメントを意識したシンプルなサンプル


// TODO: ユーザー入力のチェックを追加する
// FIXME: 年齢が負の数でも通ってしまう

/**
 * ユーザー情報を表示する関数
 * @param {string} name - ユーザー名
 * @param {number} age - 年齢
 */
function showUser(name, age) {
    console.log("名前:" + name);
    console.log("年齢:" + age);
}

このようにコメントを整理して書くことで、プログラムの状態や意図が明確になります。コードの量が少なくても、コメントがあるだけで理解しやすさは大きく変わります。

先生と生徒の振り返り会話

生徒

「コメントって、ただ説明を書くものだと思っていましたが、TODOやFIXMEで作業の管理もできるんですね。」

先生

「そうですね。コメントはコードを書く人の考えを残すための大事な手段です。特にJavaScriptでは、コメントがあるだけで理解のしやすさが大きく変わります。」

生徒

「ドキュメンテーションコメントも、関数の使い方がすぐ分かって便利だと感じました。」

先生

「その通りです。未来の自分や他の人が読んだときに困らないようにするのが、良いコメントを書く一番の目的ですね。」

生徒

「これからは、とりあえず動けばいいではなくて、コメントも意識してコードを書いてみます!」

先生

「それができるようになると、読みやすくて信頼されるコードが書けるようになりますよ。」

関連記事:
カテゴリの一覧へ
新着記事
New1
TypeScript
TypeScriptでパスエイリアスを設定する方法!baseUrlとpathsでコードをスッキリ整理
New2
JavaScript
JavaScriptのfor文の書き方を初心者向けにやさしく解説
New3
JavaScript
JavaScriptの関数でよくあるエラーとその解決法まとめ
New4
JavaScript
JavaScriptのイベント処理でよくあるエラーとその対処法
人気記事
No.1
Java&Spring記事人気No1
JavaScript
JavaScriptのインストール方法まとめ!Windows・Mac・Linux別にステップ解説
No.2
Java&Spring記事人気No2
JavaScript
JavaScriptのマウスイベントの使い方(click, mouseoverなど)
No.3
Java&Spring記事人気No3
JavaScript
JavaScriptのtoStringとString関数の違いを初心者向けに解説
No.4
Java&Spring記事人気No4
JavaScript
JavaScriptの純粋関数(pure function)と副作用の違いを理解しよう
No.5
Java&Spring記事人気No5
JavaScript
JavaScriptプログラムの実行方法まとめ!ブラウザ・Node.js・コンソールの使い方
No.6
Java&Spring記事人気No6
JavaScript
JavaScriptで文字列をforループで1文字ずつ処理する方法!初心者向け解説
No.7
Java&Spring記事人気No7
TypeScript
TypeScript学習におすすめの無料教材・リファレンスサイト【初心者向け】
No.8
Java&Spring記事人気No8
JavaScript
JavaScriptのDOMContentLoadedとloadイベントの違いを理解しよう