プログラミングを始めようと思っていろいろと調べていると、HTMLという言語を勧められることがあります。
しかし、HTMLはプログラミング言語ではないと言われていたり、初心者の方は混乱しますよね。
厳密にはHTMLはプログラミング言語ではなく、マークアップ言語という扱いです。
今回は、一般的なプログラミング言語とHTMLとの違い、それぞれのコードの書き方について紹介していきます。
HTMLとは？
HTMLとは、Hyper Text Markup Languageの略語で、ホームページ等で文字や画像をどのように表示するかを定義する言語です。
世界中のあらゆるWEBサイトがHTMLで構成されています。
Google ChromeやMozilla FirefoxといったブラウザがHTMLファイルを読み込むことで、WEBページが表示されるようになっています。
HTMLとプログラミング言語の違い
先ほど書いたとおり、HTMLはWEBページをどのように表示するかを定義したものです。
一方、プログラミングとは複雑なタスクや計算をコンピュータに命令することです。
違いがわかりにくいと思うので、例をあげて説明します。
HTMLの書き方
テキストエディタ（Windowsであればメモ帳）を開いて、以下のコードをコピペしてみてください。
<html>
<body>
<h1>こんにちは</h1>
</body>
</html>
コピペしたテキストファイルの名前は何でもいいので、拡張子（「.」以降）を「html」に変更し保存します。
保存したファイルをダブルクリックすると、ブラウザが開き下のようにページが表示されます。
もちろん、先ほどコピペしたコードの「こんにちは」の部分を他の言葉に変えても反映されます。
変更を反映させる際は、ファイルを上書き保存し再度ブラウザに読み込ませます。
続いて、コードの「h1」の部分を「p」に変えてみます。
<html>
<body>
<p>こんにちは</p>
</body>
</html>
文字が小さくなりましたね。
<>で囲まれたものはタグと呼ばれ、これを使ってWEBブラウザに何をどのように表示するか指示をします。
上の例だと、<h1>は見出しを、<p>は段落を表すタグです。
それぞれの終わりには</h1>や</p>のように閉じタグを書くように決まっています。
タグにはたくさんの種類があり、他にもリンクを表す<a>やリストを表す<li>などがあります。
このようにHTMLとは、WEBページをどのように表示するかを定義したものです。
私が実際に読んでおすすめしたいのがこの一冊です。「flexbox」や「レスポンシブデザイン」といったモダンな書き方が紹介されています。簡単なホームページも作れてしまいます。
プログラミング言語とは
プログラミングとは複雑なタスクや計算をコンピュータに命令することです。
プログラミング言語にはC、C++、Java、Python、PHP、Ruby、JavaScriptなど様々な種類があり、それぞれに得意な分野があります。
（ちなみに、JavaとJavaScriptは名前は似ているけど全く別のものなので注意してください。）
今回はHTMLの中にインストール無しで書けるJavaScriptを試してみます。
<html>
<body>
<script>
document.write(‘こんにちは’);
</script>
</body>
</html>
bodyタグの中にscriptタグを入れ、その中に「document.write()」というJavaScriptの命令文を書きました。保存して再表示すると
さっきと変わらないじゃん。と思ったかもしれませんが、この文字はHTMLではなくJavaScriptで書いているので、見た目は同じですがコンピュータ内部の動きは大きく違います。
document.write（～）は、()内の文字を画面に表示させる命令文です。
文字列は、’（クォーテーション）または、”（ダブルクォーテーション）で囲むように決められています。
続いて、HTMLの仕様にはない繰り返し処理（ループ処理）を書いてみます。
<html>
<body>
<script>
for(let i = 0; i < 3; i++) {
document.write(‘こんにちは’);
}
</script>
</body>
</html>
scriptタグの中身を上のように変えると
「こんにちは」が3回繰り返されました。
繰り返し処理をする際は、for文を使います。
これは、整数iを0、1、2と変化させながら、document.write(～)を実行したため、合計で3回「こんにちは」が表示されたということです。
整数を表すiは別の文字でもいいですが、慣習でiやjといった文字を使うことが多いです。（iはindexの頭文字）
プログラミング言語では繰り返し処理（for文）のほかに、条件分岐のif文や、変数への値の代入ができます。
この3つを組み合わせてコンピュータに指令をすることで、かなり複雑なことを実現できるようになります。
このような仕様はHTMLにはありません。
まとめ
今回はHTMLとプログラミング言語（JavaScript）の違いを見てみました。
JavaScriptはインストール不要でメモ帳だけで書けるので初心者におすすめです。
コメント