JavaScriptでコメントを書く方法
序章
プログラミングでは、通常、最初に考慮すべきことはマシンです。つまり、コンピューターが作成したコードをどのように読み取って解釈するかです。 ただし、コードを読んで作業する人を考慮することも同様に重要です。 チームで作業している場合でも、自分で作業している場合でも、人間の読者のためにコードを適切にコメントして構造化する方法を学ぶ必要があります。
コメントは、インタプリタによって無視されるプログラムのソースコード内の注釈であるため、コードの実際の出力には影響しません。 コメントは、コードが何をしているのか、または何をすべきなのかを説明するのに非常に役立ちます。
開発者として、適切にコメントされていない他の誰かによって書かれたコードを掘り下げることはイライラする可能性があり、プログラムのコンテキストに没頭しなくなったときに自分のコードが何を意味するかを忘れがちです。 早い段階でコードにコメントを付けると、後でこれらの問題を回避するために、キャリア全体で優れたプログラミング習慣が強化されます。
コメント構文
2つの異なるタイプのJavaScriptコメント構文を簡単に見てみましょう。
1行のコメントは、2つのスラッシュ(//
)で記述されます。
// This is a comment
//
構文の直後から行末までのすべての文字は、JavaScriptによって無視されます。
Block コメントは、 mutli-line コメントと呼ばれることもあり、開始タグ(/*
)と終了タグ(*/
)で記述されます。 CSSを知っているなら、あなたはすでにブロックレベルのコメントに精通しています。
/* This is a comment */
上記のコードブロックの開始タグと終了タグの間はすべて無視されます。
この「Hello、World!」に示されているように、1行と複数行の両方のコメントは、説明するように指定されたコードの上に書き込まれます。 例:
hello.js
// Print "Hello, World!" to the console console.log("Hello, World!");
コメントを書くときは、そのすぐ下のコードと同じレベルでインデントします。
ocean.js
// 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行で終了する方法はないため、次の例に示すように、//
構文の後にコードを配置しないようにしてください。
broken.js
for (let i = 0; i === 10; i++) // for loop that runs ten times { // Running this code results in a syntax error }
インラインコメントは便利ですが、慎重に使用する必要があります。大量のインラインコメントで覆われているコードはすぐに乱雑になり、読みにくくなります。
コメントをブロックする
ブロックレベルのコメント、または複数行のコメントは、コードのセクションを紹介および説明するために使用される長い形式の注釈です。 多くの場合、これらのタイプのコメントは、ファイルの先頭、または特に複雑なコードブロックの前に配置されます。
greet.js
/* 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();
また、/**
で始まり、コメントブロックの左側にアスタリスクが含まれている、ブロックコメント構文のわずかに変更されたバージョンが表示される場合もあります。
sea.js
/** * 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に答えようとします。
テスト用のコードのコメントアウト
コメントを使用して、テストおよびデバッグの目的でコードの実行をすばやく簡単に防ぐこともできます。 これは「コードのコメントアウト」と呼ばれます。
作成したコードにエラーがある場合、セクションをコメントアウトすると、セクションが実行されなくなり、問題の原因を特定するのに役立ちます。 また、これを使用してコードを切り替え、さまざまな結果をテストすることもできます。
math.js
// 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コードはコンピューターによって解釈されますが、将来の自分自身を含め、他のプログラマーによって常に読み取られます。 コードの複雑なセクションに適切な注釈を残す時間をとることは、将来的に利益をもたらし、あなたと共同作業者があなたが書いたコードの意図を理解しやすくします。