Web制作、Web開発の歩き方

分かりやすいコードの書き方

第4話:読みやすいコメントの書き方

(最終更新日:2025.4.8)


分かりやすいコード

この記事は5分で読めます!
(絵が小さい場合はスマホを横に)

良いコメントとは?

「コメントを書きましょう」とは言われるが、コメントが多ければ良いわけではない。 重要なのは「読む人にとって価値のある情報が書かれているか?」だ。 今回は、そんなコメントの基本的な考え方、 良い・悪いコメントの違い、タグの使い方、そして自動化可能なドキュメントコメントまで解説する。



1.コメントはコードの補足

大前提として、コメントはコードそのものでは表せない情報を補足するものである。つまり、以下のことを説明する。

  • 「なぜ」その処理をしているのか?
  • 「どうして」この方法を選んだのか?
  • この処理には「どんな」注意点があるのか?

こういった 背景や意図 を説明するのが、読み手にとって価値あるコメントになる。 なので、基本的には特別な意図や背景が少なく、コードだけで意味が読み取れればそれに越したことはない。

2.不要なコメントと必要なコメント

不要なコメントとはどういうものだろうか。 下記の例で説明する。下記のコメントはコードを読めば誰でも分かる内容である。 これはただのノイズになり、返って別の開発者の読む時間を増やしてしまう。

不要なコメント

次は読み手に配慮した必要なコメントになる。 バージョン1.2以前の状況を知らない人には、なぜこの処理が必要なのか分からない。 このような過去の背景、または通常ではしない処理、書き方をした時、どうしても分かりにくくなってしまったときなどが、コメントのしどころだ。

必要なコメント(背景)

  1. 「なぜ」このコードが必要なのかを書く(背景、制約、選択の理由)
  2. 実装の意図や例外的な対応を補足する
  3. 迷いやすい箇所に読者への案内を書く
3.コメントタグ

特にチーム開発では、以下のような「目印になるコメントタグ」が非常に役立つ。 タグをつけることで、コメントの分類ができ、パッと見の分かりやすさが増す。 チームでルールを決め、分かりやすいタグを作ろう。

タグとその意味

タグ 意味・用途
TODO: 今後対応すべきこと
FIXME: 現在のコードに問題があることを示す
HACK: 一時的な回避策(仮対応)であることを明示
NOTE: 特筆すべき補足情報や意図の説明

下記はタグの例になる。FIXMEは問題があることが一目瞭然だ。 TODOも今後対応すべきことが明記されていて分かりやすい。

タグの例

4.ドキュメントコメントの活用

ライブラリやAPIを提供する場合は、ツールで読み取れる形式のコメントを使うと便利だ。 下記がその例になる。C++などで使えるDoxygen形式のコメントだ。 このような書き方をすると、IDEでコードヒントを表示してくれる。 briefは関数、paramは引数、returnは戻り値の説明になる。

C++(Doxygen)の例

JavaScriptで使える形式もある。JSDocsという。内容はDoxygenと同じだ。 こちらも、自動ドキュメントツールで読み取れる。 JavaScriptのような動的型付言語でも型の違いを指摘することもできる。number型ではない場合、指摘する。

JavaScript(JSDoc)の例

5.まとめ

今回はコメントの書き方ついて解説した。 コメントはコードの補足であり、意図や背景を書くのが主目的だ。 つまり「読む人の疑問を1秒でも減らす」ことが良いコメントになる。 その工夫として、TODO, FIXME などのタグを使って、改善・注意点を共有することも大事だ。 自動ドキュメント用のコメント(Doxygen/JSDoc)は特にAPI設計で有効になる。 今回学んだことを活かして、ぜひ読み手にとって有用なコメントを残そう。

▼参考図書、サイト

 「リーダブルコード」 Dustin Boswell、Trevor Foucher 著、角 征典 訳 オライリー

How to Write Easy-to-Understand Code Episode 4: How to Write Readable Comments (Last updated: April 8, 2025) Understandable Code This article takes only 5 minutes to read! (Rotate your phone if the image looks small) What makes a good comment? We're often told to "write comments," but having more comments doesn't automatically make the code better. What's important is whether the comment provides valuable information to the reader. This article explains the fundamental ideas behind comments, the difference between good and bad comments, how to use tags, and how to write documentation comments that can be automated. [Table of Contents] Comments Supplement Code Unnecessary vs. Necessary Comments Comment Tags Documentation Comments Summary 1. Comments Supplement Code First and foremost, comments are meant to explain information that can't be conveyed by code alone. For example: Why is this process necessary? Why was this approach chosen? What should be noted or cautioned? Providing this kind of context and intent makes comments truly valuable. Ideally, if the code is clear enough on its own, fewer comments are needed. 2. Unnecessary vs. Necessary Comments So what are unnecessary comments? The example below shows comments that simply state what the code already clearly does. These comments become noise and waste the reader’s time. Unnecessary Comment On the other hand, the next example shows a necessary comment. Without knowledge of the situation before version 1.2, it’s unclear why this process exists. Comments are essential when there’s hidden context, non-standard practices, or potential confusion. Necessary Comment (Context) Explain *why* the code is needed (background, constraints, reasoning). Add intentions or exceptions for implementation. Guide readers through potentially confusing parts. 3. Comment Tags In team development, using comment tags like the ones below is very helpful. Tags make it easier to classify and understand comments at a glance. Decide on consistent rules and meaningful tags with your team. Tags and Their Usage Tag Meaning / Purpose TODO: Things to be done in the future FIXME: Indicates there is a problem with the current code HACK: A temporary workaround or hack NOTE: Additional information or reasoning worth noting Below is an example of such tags. It's clear at a glance that FIXME indicates a problem and TODO highlights tasks to be addressed. Tag Examples 4. Documentation Comments When creating libraries or APIs, it’s useful to write comments in a format that tools can parse. The example below uses Doxygen, which works with C++ and similar languages. Writing comments this way allows IDEs to show helpful code hints. `brief` describes the function, `param` describes parameters, and `return` explains the return value. Example in C++ (Doxygen) JavaScript has a similar format called JSDoc. Like Doxygen, it can be parsed by documentation tools. Even though JavaScript is dynamically typed, JSDoc can point out type mismatches, such as when a non-number is used where a number is expected. Example in JavaScript (JSDoc) 5. Summary This article covered how to write effective comments. Comments are meant to supplement the code by explaining intent and background. In short, good comments are those that reduce readers' confusion even by a second. Using tags like TODO or FIXME helps share improvements and warnings with the team. Documentation comments (like Doxygen/JSDoc) are especially useful when designing APIs. Apply what you've learned here to write more helpful comments for others. ▼ References  "*The Art of Readable Code*" by Dustin Boswell & Trevor Foucher, translated by Masanori Kadoi, O’Reilly Japan