「よし、プログラミングを勉強するぞ！」
「どの言語を勉強してやろうか！」
「全部の言語を使えるようになりたいな！」
と、プログラミングを始める上で、なぜか興奮するのが言語を選ぶ作業。
C、C#、PHP、HTML、Ruby、CSS、Swift、Javascript,,,
ちょっとGoogleで検索するだけで、たくさんのプログラミング言語が出てきます。
Cだとか、PHPだとか、言ってるだけでなぜか気持ちいいんですよね〜。
この特集では、上記のアルファベットの単語の羅列を見て、
「この記事の筆者、バカじゃないの？HTMLとCSSをプログラミング言語だと思ってるの？」
と僕のことをディスらなかった人向けに、
・プログラミング言語とは何なのか
を整理していこうと思います。
分かりにくかったかもしれないので、ちょっと説明しますと、上記の単語の中で、HTMLとCSSだけはプログラミング言語ではないんですね。
けど、Webアプリを開発しようとするとHTMLとCSSが必ず出てきます。
僕ははじめ、HTMLとCSSとプログラミング言語の役割が明確に分からなかたので、混乱していました。
なので、まずはそれぞれの違いについて触れていこうと思います。
Webアプリの構成要素
HTMLやCSSの話をする前に、Webアプリの仕組みをざっと見ていきますね。
Webアプリを構成するしている２大要素は以下の二つです。
【Webブラウザ】
・クライアント端末にインストールされているアプリケーション
・Webサーバに「この情報をください〜」と依頼し、返って来た情報を表示するのがお仕事
【Webサーバ】
・サーバの一種
・Webアプリの情報は、全てこの中に保存されている
・Webブラウザからの依頼を受け取って、依頼された情報をWebブラウザに返信するのがお仕事
Webアプリは、WebブラウザとWebサーバがあって初めて成立します。
以下のように、Webブラウザ（ブラウザ）からWebサーバに対してアクセスすることで、僕たちはWebアプリを利用することができます。
ブラウザとWebサーバのやりとりにフォーカスすると、以下になります。
ブラウザからWebサーバに対して欲しい情報を依頼し、その依頼に応じてWebサーバが情報を返しています。
返って来た情報をブラウザが表示してくれるので、僕たちユーザは、Webアプリを利用することができるんですね。
ブラウザの表示内容を記述する国際ルール
ブラウザはWebアプリからもらった情報を表示するのがお仕事だ、というのが分かりました。
実際に、ブラウザに表示させる内容を作成するのはWebアプリ開発者です。
Webアプリ開発者は、Webブラウザに表示したい内容をファイルに記述します。
その際に、「ファイルにこういう風に書いたら、Webページにこういう風に表示されますよ」というルールが決まっているのです。
日本国内のルールとかじゃなく、世界で統一されたルールです。
Webアプリに表示させたい内容を書き出すルールのことをHTMLと呼びます。
専門的には、ハイパーテキストマークアップランゲージの略称、なんてググったら出てきますが、意味不明ですよね。
なのでまずは、HTMLってのはWebブラウザで表示する際に守らなければならない書き方のルール、って覚えると良いと思います。
HTMLをちょっと書いてみる
普通にテキストファイルに文章を書くと
こんな感じですよね。
ファイル名の末尾を.txtにすることで「このファイルはtxt形式のファイルです」とコンピュータに伝えています。
このファイルを、HTMLのルールにのっとって編集してみます。
これが、HTMLのルールにのとった書き方です。
末尾を.htmlにして、コンピュータに「このファイルはHTML形式ですよ〜」と伝えています。
（”h1”とかが赤字になっているのは気にしないでください！そのうち分かります！）
これをブラウザで表示すると
こんな感じです。
なぜか、行によって、文字の大きさが変わってますね。
text.htmlファイル上で、<h1>とかで文字を囲んだことにより、こんな風に文字の大きさが変わるようになっています。
HTMLのルールに乗っ取って書いているので、Safariが勝手に大きさを変えてくれます。
具体的には<h1>プログラミング学習を始めた当初</h1>という書き方をすると、Safariが自動的に「この行は、文章の中で”見出し”の役割を担っているんだな」と読み込んでくれて、文字を大きくしてくれます。
Safari以外のブラウザでも、同じことを勝手にやってくれます。
こんな感じのルールがHTMLにはいっぱいあって、ルール通りに書くことで、ブラウザに画像を表示してみたり、リストを表示してみたりすることができるようになっているわけです。
Webアプリ開発者は、このルールを駆使してWebブラウザに表示させるページ毎にHTMLファイルを作っているんです。
Webのページを作る上で、HTMLファイルはなくてはならない存在なんですね。
HTMLファイルはどこにある？
さて、ここまでの説明で、以下をなんとなくイメージして頂けましたか？
・WebブラウザはHTMLファイルを読み込んで、表示してるんだな
では、みなさんがWebサイトを見るときのHTMLファイルは、どこにあるのでしょうか？
今みなさんが読んでいるこの記事も、もちろんHTMLファイルで書かれています。
この記事のHTMLファイルは、どこにあったのでしょうか？
鋭い方はお気づきかもしれませんが、”Webアプリの構成要素”の項でご説明したWebサーバに保存されているのです。
以下のようなイメージです。
WebサーバにはWebアプリのために用意されたHTMLファイルがたくさん保存されています。
ここにあるHTMLファイルを皆さんはお手元のパソコンやスマホに入っているブラウザを使って取りに行ってるのです。
Webブラウザは、こうやって渡されたHTMLファイルを読み込んでWebページを表示します。
「Webブラウザにページを表示させるときは、必ずHTML形式で書きましょう」というルールがあるので、それ以外の形式で書いてはいけないのです。
以上が、HTMLの説明でした。
HTMLの役割がなんとなく分かりましたか？
次の記事では、CSSについて説明していきます。
コメント