こんにちは。エンジニアの雅です。
JavaScriptでコードを書いている時に
とコードの内容を忘れてしまう時ってありませんか？
開発をしていてたくさんの関数が登場する場面など、どの関数が何の処理をする関数で引数に何を入れるのか分からなくなる時がありますよね。
そこで便利なのがコメントアウトという機能です。
というわけで今回はJavaScriptでコメントアウトする方法とその用途を細かく解説していきます！！
JavaScript初心者の方は学習として、経験者の方も復習として閲覧いただける内容になっております。
JavaScriptが学べるおすすめの入門サイトを紹介！
目次
コメントアウトとは
プログラムに反映されないメモのようなもの
コメントアウトとは、簡単にいうと
を表します。
プログラムを書いていて、「この変数って何だっけ？」「この関数に入る引数って何だっけ？」というような混乱を避けるためなどに使われます。
いわばメモ書きです。
このコメントアウトはプログラムに反映されないため、Webブラウザ上では動作に影響を及ぼしません。
また、ブラウザにも表示されない仕組みになっています。
Chromeなどの検証ツールを使うとソースコード上には表示されますが、何ら影響はしません。
JavaScriptでコメントアウトする方法
JavaScriptでコメントアウトをする方法は主に2通りあります。
どれも頻繁に使用するものなので全て覚えましょう！
|
1 |
// コメントアウトする内容 |
まずは「//」とスラッシュを2本引いてコメントアウトする記法です。
このようにすると、スラッシュ後の行に記載した内容は全てコメントアウトしたことになります。
例えば下のような使い方をします。
|
1 2 3 4 5 6 |
// 金額を表す変数 var cost = 100; // 税率を表す変数 var tax = 1.08; // コンソールに税率を掛けた合計金額を出力 console.log(cost * tax); |
これで各変数やプログラムの内容が明示的になり非常に分かりやすくなりましたね！
|
1 2 3 4 5 |
/* コメントアウトする内容 コメントアウトする内容 コメントアウトする内容 */ |
続いてスラッシュとアスタリスクで囲んでコメントアウトする記法です。
こちらは先ほどのスラッシュでコメントアウトする方法とは違い、複数行コメントアウトすることができます。
1行ではなく長い複数行にわたってコメントアウトする場合に使用します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
// 金額を表す変数 var cost = 100; // 税率を表す変数 var tax = 1.08; /* 金額に税率を掛けた金額を出力する関数 第一引数：金額 第二引数：税率 戻り値：金額 × 税率 */ function total_cost (cost, tax){ console.log(cost*tax); } // 関数の実行 total_cost(cost, tax); |
この「/* */」で囲まれている内容はユーザー定義関数のtotal_cost関数の詳細説明になります。
引数が複数になり、どの引数がどの値に対応するのかという混乱を避けるため、コメントアウトとして各引数の説明と関数の戻り値を記述しています。
これで関数の使い方が誰がみてもわかるものとなりました。
このように、時と場合によって1行だけのコメントアウトや複数行のコメントアウトを使い分けます。
プログラムの途中に書いても問題ない
コメントアウトはプログラム間に記述しても影響を及ぼしません。
|
1 2 3 4 5 6 |
function total_cost (cost, tax){ // costに税率を掛けた値を格納するためのローカル変数 var total= cost * tax; // 合計金額を出力する console.log(total); } |
先ほどのtotal_cost関数の内部にコメントアウトをしています。
ですが実際に関数を実行する際には、これらコメントアウトの箇所は飛ばして実行されるため、何の影響もなくプログラムは動作します。
どうしてコメントアウトをする必要があるのか？
では、どうしてコメントアウトは行う必要があるのでしょうか？
単に読みやすくなるから？
それでも間違ってはいません。
ここではこの「読みやすくなる」を深堀りしていきます。
コメントアウトをする理由は大きく分けて以下のような理由があります。
・客観性(他のエンジニアなど)の向上
・メンテナンス性の向上
可読性の向上
まずは単純にプログラムを書いた本人に対する可読性です。
コメントアウトがない時よりも自分でプログラムを書いていて非常に読みやすくなりますよね。
もしコメントアウトが無かった場合はいちいち何の処理なのか思い出さなければなりません。
もしJavaScriptコードが数百行〜数千行にわたってかかれるような長いプログラム群であれば開発の効率がガクッと下がってしまいます。
客観性の向上
続いて客観性の向上を目的としています。こちらも可読性と類似している部分があるのですが、客観性は第三者からでも読みやすくさせるということを意味します。
個人で開発していると特にこれを気にする必要はないのですが、実際の現場での開発では規模にもよりますが、複数のエンジニアで開発を行うことが一般的です。
自分ではプログラムの内容を理解できていても、他のエンジニアからしたら初見のコードは解読するのに時間がかかりますし、ましてやコメントアウトもない処理は読みたくもありません。
また新人エンジニアさんの場合は先輩エンジニアにコーディングのフィードバックをもらうことが頻繁にあります。
先輩がみてもすぐに理解しやすいよう、有益な指摘をもらうにはこれらコメントアウトを使用した読みやすいプログラムを書く必要があります。
メンテナンス性の向上
続いてメンテナンス性の向上です。
と思うかもしれませんが、受注開発の場合はメンテナンスやデバッグの依頼は突然起こります。
それがリリース後数日とかであればいいのですが、数ヶ月や1年以上先かもしれません。
そうなった場合、1年も前に書いたプログラムの内容をすぐに理解できるでしょうか？
時間をかければできますが、それだけでもタイムロスになります。
そこでコメントアウトで処理内容などを残しておけば、こうしたスパンが空いてもコードが読みやすく、メンテナンスもしやすくなります。
他のプログラミング言語でもコメントアウトはある？
実はコメントアウトという仕組みはJavaScriptだけのものではありません！！
HTMLやCSSのようなマークアップ言語やPythonやPHP、C言語など、ほとんどのプログラミング言語で存在します。
|
1 |
<!-- HTMLでのコメントアウト --> |
|
1 |
/* CSSのコメントアウト */ |
|
1 |
# Pythonでのコメントアウト |
このように、記法は異なりますが、コメントアウトはプログラミングの世界では割と当たり前の仕様となります。
JavaScript以外のプログラミング言語を扱ってコメントアウトをする場合は一度そのプログラミング言語の仕様を確認しておきましょう！！
CSSでコメントアウトをしたい！初心者が押さえておきたい使い方4つ
PHPでコメントアウトする方法！プログラミング初心者にもわかりやすく解説
まとめ
いかがでしたか？
今回はJavaScript初心者向けにJavaScriptのコメントアウトの記法とその用途、必要性を徹底解説していきました。
コメントアウトの重要性は理解できましたか？
みなさんもコードの可読性を向上させるために今日からコメントアウトを実践してみましょう！！
