プログラミング中に無視するとヤバい警告とは 〜Reference, MDN, Linter, Formatter〜
プログラム自学案内の5回目です。前回の記事ではHTMLファイルをスマホから確認する方法、inputタグ、buttonタグを紹介しました。今回の記事はその他の主なHTMLタグとともに、リファレンスやVSCodeの活用方法を紹介します。
HTML卒業試験 このタグを知らなきゃモグリ
まずはHTMLの卒業試験です。HTMLはあんまり時間かけて勉強するものでもないと思いますので、今回で終わりにしてしまいます。
卒業試験の課題です。
html head title body
h1 h2 h3 p br hr
a
img
ul li ol
table tr th td
input button
これらのタグが全て使われたHTMLファイルを作ってみてください。
ここにあげたものは、「知らなきゃ、モグリ」と言えるものばかりです。それぞれのタグの意味を調べ、使い方を理解し、使ってみて、意図した見栄えがブラウザで実現できれば、それで卒業試験は合格です。ボタンについては、見えさえすれば、動作させなくてもOK。
このタグで、どんなページをつくりましょうか？ それは、お任せします。みなさんの創造性を発揮してみてください。
ひとつ但し書きをさせてください。本当は「知らなきゃ、モグリ」の重要なタグとして、ほかに「formタグ」というのがあります。ですがこれ、理解するためには、周辺知識（HTTP通信）が必要になるので、ちょっと難しい。したがって今回の卒業試験では免除することにします。
Reference：体系的・網羅的な説明書
ところで、上に取り上げられたもの以外には、どんなHTMLタグがあるのでしょうか。使うことのできる全ての機能が、体系的に分類されたうえで一覧化され、網羅的に解説されている説明書があったりするといいですよね。
一般に、そのような説明書は リファレンス(Reference) と呼ばれます。どんな技術にも、かならずリファレンスがあります。本職のITエンジニアになると、google先生にいちいち尋ねずとも、公式のリファレンスから必要な機能を探せるようになります（もちろんgoogle先生に助けてもらうこともありますが）。
それでは、HTMLの公式リファレンスはどこにあるのでしょうか。
MDN : ウェブ技術の文書が置いてあるところ
公式にHTMLを定めている組織はどこでしょう。W3C、とされています。しかし、ややこしい経緯があり、HTMLやその周辺技術についての文書は、MDNというサイトを参照すべき、ということになっている。ややこしいですね。
次のリンクに示す場所がMDNです。うれしいことに、日本語版があります！
https://developer.mozilla.org/ja/docs/Web
HTML 要素リファレンス
https://developer.mozilla.org/ja/docs/Web/HTML/Element
使えるタグとその解説が書いてありますね。ここにある全部のタグが、タダで使えます。課金してガチャ回さなくても、すぐに使えるのです。
ツールチップヒントを読む
ここからは、VSCodeを使ったコーディングの便利機能を3つ紹介します。
1つめです。気づかれている方も多いとおもいますが、VSCodeのコードにマウスをかざすと、ヒントが出てくることがあります。たとえばaタグのaの部分にマウスをかざしてみてください。
なんとa要素の説明が出てくるじゃないですか（英語ですが）。こいつはいい！ しかもMDN Referenceへのリンクもある。クリックすると、MDN Referenceの該当ページに飛びます。超便利！
警告に耳を傾ける
2つめです。上の画像の状態で、たとえばaタグの冒頭、<a href=... の頭のaをbに変えてみてください。タグの最後の</a>はそのままの状態で。
</a>に黄色い波線が表示されたはずです。この黄色は、黄色信号やイエローカードの黄色と同じ意味、すなわち警告です。黄色い波線にマウスをかざすと、警告の内容が読めます。こんな感じの警告がでたはず。
Tag must be paired, no start tag: [ </a> ]
英語が読めなければ機械翻訳してください。</a>の対になる開始タグ（<a>）が無いよ！と言っていますね。
これは前々回インストールしたHtmlHintというLinterから警告です。Linterというのは、コードをいい感じでチェックしてくれるツールです。
黄色い波線による「警告」、また、赤い波線による「エラー」は、全て真摯に耳を傾けるべき内容で、無視するとヤバいです。極力これらの警告やエラーはその内容を理解したうえで、消していきましょう。警告はVSCodeのProblems Viewで一覧表示することができます。
Formatter を活用する
3つめです。
Formatterというものがあります。これは、コードのインデントやスペース、改行などを自動整形する機能です。
HTMLはタグを開いたり閉じたり、入れ子になってややこしい。対応関係が分かりやすく把握できるように、インデントで整えたくなったりするもの。Formatterはそれを自動でやってくれます。
VSCodeのコマンドパレットからは、「Format Document」でこの機能を呼び出すことが出来ます。ショートカットキーを使って呼び出すこともできます。また、上書き保存のたびに自動整形させるような設定をすることだって、できるのです。
まとめと次回予告
今回は「これを知らなきゃモグリ」のタグを紹介するとともに、リファレンスやVSCodeの活用方法を紹介しました。
次回はCSS、すなわち、HTMLファイルで作った画面の見栄えを、よりキレイに、オシャレにするための技術を学びます。
この記事が気に入ったらサポートをしてみませんか？