JavaScriptでコメントを書く方法
序章
プログラミングでは、通常、最初に考慮すべきことはマシンです。つまり、コンピューターが作成したコードをどのように読み取って解釈するかです。 ただし、コードを読んで作業する人を考慮することも同様に重要です。 チームで作業している場合でも、自分で作業している場合でも、人間の読者のためにコードを適切にコメントして構造化する方法を学ぶ必要があります。
コメントは、インタプリタによって無視されるプログラムのソースコード内の注釈であるため、コードの実際の出力には影響しません。 コメントは、コードが何をしているのか、または何をすべきなのかを説明するのに非常に役立ちます。
開発者として、適切にコメントされていない他の誰かによって書かれたコードを掘り下げることはイライラする可能性があり、プログラムのコンテキストに没頭しなくなったときに自分のコードが何を意味するかを忘れがちです。 早い段階でコードにコメントを付けると、後でこれらの問題を回避するために、キャリア全体で優れたプログラミング習慣が強化されます。
コメント構文
2つの異なるタイプのJavaScriptコメント構文を簡単に見てみましょう。
1行コメントは、2つのスラッシュ(//
):
// This is a comment
直後のすべての文字 //
行末までの構文はJavaScriptによって無視されます。
Block コメントは、 mutli-line コメントと呼ばれることもあり、開始タグ(/*
)および終了タグ(*/
). CSSを知っているなら、あなたはすでにブロックレベルのコメントに精通しています。
/* This is
a comment */
上記のコードブロックの開始タグと終了タグの間はすべて無視されます。
この「Hello、World!」に示されているように、1行と複数行の両方のコメントは、説明するように指定されたコードの上に書き込まれます。 例:
// Print "Hello, World!" to the console
console.log("Hello, World!");
コメントを書くときは、そのすぐ下のコードと同じレベルでインデントします。
// Initialize a function
function alphabetizeOceans() {
// Define oceans variable as a list of strings
const oceans = ["Pacific", "Atlantic", "Indian", "Antarctic", "Arctic"];
// Print alphabetized array to the console
console.log(oceans.sort());
}
コメントは、プログラム自体と同じくらいコードの一部であることに注意してください。 古くなったコメントは、コメントがまったくないというよりも不利益になる可能性があるため、コメントを他のすべてのものと一緒に定期的に維持および更新することを忘れないでください。
インラインコメント
1行のコメントは、コード行の最後に表示される場合、インラインコメントと呼ばれます。
let x = 99; // assign numerical value to x
let y = x + 2; // assign the sum of x + 2 to y
インラインコメントは、コンテンツの小さな特定のスニペットにすばやく注釈を付けるために使用できます。 コメントは、それが書かれている正確な行にのみ関連している必要があるため、最も明白なタイプのコメントです。
1行に1行のコメントを終了する方法はないため、コードの後にコードを配置しないように注意してください。 //
以下の例に示すように、構文。
for (let i = 0; i === 10; i++) // for loop that runs ten times {
// Running this code results in a syntax error
}
インラインコメントは便利ですが、慎重に使用する必要があります。大量のインラインコメントで覆われているコードはすぐに乱雑になり、読みにくくなります。
コメントをブロックする
ブロックレベルのコメント、または複数行のコメントは、コードのセクションを紹介および説明するために使用される長い形式の注釈です。 多くの場合、これらのタイプのコメントは、ファイルの先頭、または特に複雑なコードブロックの前に配置されます。
/* Initialize and invoke a the greetUser function
to assign user's name to a constant and print out
a greeting. */
function greetUser() {
const name = prompt("What is your name?");
console.log("Hello ," + name + "! How are you?");
}
greetUser();
また、ブロックコメント構文のわずかに変更されたバージョンが表示される場合もあります。 /**
コメントブロックの左側全体にアスタリスクが含まれています。
/**
* Initialize constant with an array of strings.
* Loop through each item in the array and print
* it to the console.
*/
const seaCreatures = ["Shark", "Fish", "Octopus"];
for (const seaCreature of seaCreatures) {
console.log(seaCreature);
}
このタイプのコメントには、スクリプトの名前、バージョン、作成者など、プログラミングファイルに関する詳細も含まれる場合があります。
JavaScriptの初心者であれば、自分が書いたコードを学び、理解するために必要なだけ書くことができます。 JavaScript開発者として進歩するにつれて、howまたはwhatではなく、意図、またはコードの背後にあるwhyに答えようとします。
テスト用のコードのコメントアウト
コメントを使用して、テストおよびデバッグの目的でコードの実行をすばやく簡単に防ぐこともできます。 これは「コードのコメントアウト」と呼ばれます。
作成したコードにエラーがある場合、セクションをコメントアウトすると、セクションが実行されなくなり、問題の原因を特定するのに役立ちます。 また、これを使用してコードを切り替え、さまざまな結果をテストすることもできます。
// Function to add two numbers
function addTwoNumbers(x, y) {
let sum = x + y;
return sum;
}
// Function to multiply two numbers
function multiplyTwoNumbers(x, y) {
let product = x * y;
return product;
}
/* In this example, we're commenting out the addTwoNumbers
function, therefore preventing it from executing. Only the
multiplyTwoNumbers function will run */
// addTwoNumbers(3, 5);
multiplyTwoNumbers(5, 9);
切り替えられるセクションのサイズに応じて、単一行コメントとブロックコメントの両方を使用してコードをコメントアウトできます。
注:コードのコメントアウトは、テスト目的でのみ実行する必要があります。 コメントアウトされたコードのスニペットを最終的なスクリプトに残さないでください。
プログラムのロジックを作成するときは、バグがどこにあるかを判断したり、最も有用性の高いコード行を評価したりするときに、コードをコメントアウトすることが役立つ場合があります。
結論
JavaScriptコードはコンピューターによって解釈されますが、将来の自分自身を含め、他のプログラマーによって常に読み取られます。 コードの複雑なセクションに適切な注釈を残す時間をとることは、将来的に利益をもたらし、あなたと共同作業者があなたが書いたコードの意図を理解しやすくします。