HTMLに1行だけコメントアウトする方法を現役デザイナーが解説【初心者向け】
初心者向けにHTMLに1行だけコメントアウトする方法について解説しています。最初にコメントアウトとは何か、その役割について学びます。次に、1行だけコメントアウトする場合と複数行コメントアウトする場合の書き方についてそれぞれ見ていきましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
ファイルの作成をしていると、一度注視して、別日に改めて作業をした時に、どこから再開すれば良いか分からなくなることがありますよね。
他にも、人に作業を依頼する際、口頭ではなくメモ書きなどがあれば助かることがあります。
そのようなときに使用するのがコメントアウトです。
コメントアウトとは、プログラムなどのソースコード上で実行に影響を与えない部分のことです。
HTMLに1行だけコメントアウトする方法について解説します。
目次
今回は、HTMLに関する内容だね！
どういう内容でしょうか？
1行だけコメントアウトする方法について詳しく説明していくね！
お願いします！
コメントアウトとは
コメントアウトとは、プログラムのソースコード実行後でブラウザの表示画面に「読み込まれない部分」を指します。
ソースコード上にメモとして記載しておきたい内容がプログラム実行後のブラウザ画面に表示されるのは困ります。
備忘録のメモを記述してから、画面の表示として影響のない記述がコメントアウトです。
どのプログラム言語でも、コメントアウトの文法に則り、コメントアウトが可能になっています。
HTMLのコメントアウトも同様です。
コメントアウトのメリット
コメントアウトのメリットを5つ紹介します。
- チーム開発をスムーズに行える
- 保守性を高められる
- 定期的な更新を行える
- 覚書に利用できる
- 特定のブロックを非表示にできる
それぞれ解説していきます。
チーム開発をスムーズに行える
複数人で開発を行う場合、どのコードがどのような意図で実装されたかを記載しておくとよいです。
メソッド名や変数名などは、その名前を見ただけで何をしているかわかる名前の付け方で実装しましょう。
保守性を高められる
プログラムは一度開発した後も定期的に保守をする必要があります。
保守とは、プログラムの動作に不具合がないか確認する作業です。
定期的な更新を行える
プログラムが完成した後も追加機能を実装することがあります。
そのときにコメントを参考に追加実装すると便利です。
その理由は、アプリリリース後などで追加機能を実装する際、コメントアウトを使用していると、追加実装箇所の特定あるいはコード共有が行いやすく、開発の効率を高められるからです。
覚書に利用できる
プログラムが膨大な量になってくると、そもそもプログラムが何のために実装されているのかが不明確になりがちです。
覚書として、機能におけるプログラムの説明をコメントに記載しておくと便利です。
特定のブロックを非表示にできる
プログラムのコードで、不要なコードを削除することがあります。
しかし、果たして削除してよいのかと迷うこともあります。
そのようなときは特定のコードブロックをコメントにして非表示にすることができます。
特定のコードブロックをコメントアウトし非表示にすることで、再利用する際は瞬時にコメントアウトを外せるためです。
コメントアウトのデメリット
コメントアウトを利用する注意点として、デメリットが存在します。
コメントアウトを利用する際のデメリットを理解し、使い分けましょう。
不要なコメントでコードが読みづらくなる。
コメントのメリットで例示した内容をすべて利用するとコードの大部分がコメントになってしまいます。
結果的にコードが読みづらくなります。
不要なコメントが多い場合は、IDEで用意されているコードを折りたたむ機能を利用すると良いです。
VSCodeの例を確認してみましょう。
コメントを表示している状態
画像では見えませんが17行目にマウスカーソルをあわせると🔽が表示されるのでクリックしてみてください
コメントを折りたたんだ状態
スッキリして見えます。
>をクリックすると再度コメント部分が表示されます。
実は私も！？独学で損する人の特徴
「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ
独学には向き不向きがあり、実はスクールが向いている人も大勢います。
そんな方のために参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
- ・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
- ・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った
少しでも当てはまる部分があれば、
スクールが向いているかもしれません。
お試しのつもりで、まずは一度
無料相談
に参加してみませんか？
現役エンジニア・デザイナーに何でも気軽に相談できる30分
を
すべて無料で
できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
1行だけコメントアウトするには
[html]
<!-- コメントアウトを記述します。（1行のコメントアウトの例） -->
<!––で始まって、備忘録の内容を記述してから、––>で閉じます。
複数行まとめてコメントアウトするには
<!--
コメントアウトの1行目を記述します。
コメントアウトの2行目を記述します。
コメントアウトの3行目を記述します。
--><!––[改行]から始めまして、複数行の備忘録の内容を記述してから、[改行]––>にて閉じます。
コメントアウトの注意点
コメントアウトを使用する際の注意点を3点紹介します。
- コメントの中にコメントを入れない
- コメントに「-」を利用しない
- WordPressでの注意点と対策
それぞれ詳しく見ていきましょう。
コメントの中にコメントを入れない
コメントの中にコメントを実装してしまうと、コメントの表示が崩れてしまい、結果的にコメントが表示されてしまいます。
コメントに「-」を利用しない
コメントに「-」を利用するのも、意図した内容が正しく認識されない可能性があります。
コメントの中に「-」を利用すると実行環境によっては、ハイフンの連続をコメントが終了した意味ととらえてしまい、結果的にコメントが表示されてしまうため、コメントの中に「-」を利用しないよう心がけましょう。
利用したい場合は「=」などの別の記号を利用しましょう。
WordPressでの注意点と対策
WordPressで「-」を利用すると、テーマによっては「-」表示が崩れることがあります。
また、WordPressの標準機能が「-」を「–」へ自動変換する環境もあります。
対策としては、WordPressのfunction.phpに次のようなコードを用意します。
function techacademy_shortcode( $atts, $content = null ) {
return null;
}
add_shortcode('techacademy', 'techacademy_shortcode');この状態で、WordPressの記事内でコメントアウトするときに、次のようにtechacademyで囲むことでショートコードのtechacademy_shortcodeが有効になり、非表示にすることができます。
[techacademy]非表示にしたい文字列[/techacademy]この記事を監修してくれた方
| 中本賢吾（なかもとけんご） アジマッチ有限会社 代表取締役社長開発実績：PHPフレームワークによるフランチャイズ企業向け会員制SNS。Shopifyによる海外進出用大規模ネットショップ構築。Vue.jsによる金融機関向け内部アプリ。AWSやLinuxハウジングサーバーでの環境構築。人工知能を利用した画像判別システム。小売チェーン店舗用スマホアプリ。Wordpressによる不動産チェーン店向け賃貸・売買仲介システム。基幹システム移管用データコンバートシステム。ボランティア活動：小学生がオリジナルAndroidアプリをGooglePlayでリリース、NHK Whyプログラミング入賞、全国Programing Festival入賞、中学生がSNS型PWAアプリリリースする市クラブ講座活動を行っている。 |
大石ゆかり
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
HTMLを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
HTMLを学習していて、このように思ったことはありませんか？
テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を完全オンラインでしっかり習得できます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
プログラミングを独学していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
厳しい試験を通過した講師
があなたの相談に真摯に向き合います。
「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」
こんな気持ちでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
