WEB関係のプログラム言語について
こんばんわ。
ばったんです。
前回のおさらいですが、
サイトを見るまでの裏側を説明しましたね。
覚えていますか？
ブラウザでサイトをクリックすると…
URL(例：https://lisk.jp)を基に、
サイトのデータがある場所を特定。
データを自分のパソコンにダウンロード。
ブラウザが翻訳して、サイトが見れる。
ということでしたね。
今回の記事では、サイトや仮想通貨のLISKは、
なぜ複数の言語（HTML、CSS、Javascript等）
を使用するのか。
その疑問を紐解いていきます。
…今回の記事は少し長いです( ﾟДﾟ)
6部に分けて説明します。
説明するのは、
HTML、CSS、JavaScript、PHP
どれも、サイトを作るには欠かせない言語です。
１、HTMLの役割
HTMLとは、サイトの土台になるプログラムです。
サイトに表示させる文字は、HTML言語で記述します。
言語の中でも、特に重要なので、
プログラムの中身を説明します。
～HTML言語の記述例～
<html>
<title>タイトル</title>
<body>本文</body>
</html>
見ての通り、①の部分が「タイトル」に、
②の部分が「本文」になりました。
分かった人もいると思いますが、
HTML言語はタグと呼ばれる物で、
表示させたい文字を挟みます。
<title>〇〇</title>
この場合、『〇〇 ＝ タイトル』
という意味になる訳です。
２、CSSの役割
CSSとは、サイトのデザインを指定するプログラムです。
サイトのデザインをCSS言語で記述します。
CSS言語はHTML言語の中に記述できるので、
HTML＝HTML＋CSS
と考える人も多いです。
※ここからのプログラム言語は、少し難しいので、
プログラムの中身は説明しません。
ちなみに、HTML・CSS言語で作られたサイトは、
静的サイトと呼ばれています。
単に文章を表示させて、色を付ける、
動きがないサイトということですね。
考えてみれば、昔のサイトは
単に文字を表示するだけの、
静的サイトばかりです。
３、JavaScriptの役割
JavaScriptとは、HTMLやCSSで出来ない、
動きを付けることができるプログラムです。
画像をスライドショーで表示したり、
文字をアニメーションで動かしたり、
今のWEB世界に無くてはならない
プログラム言語とも言えます。
因みに、JavaScript言語を書いて、
アニメーションのような動きを付けた
サイトのことを、動的サイトと言います。
近年のサイトは、動きのあるサイトばかりなので、
JavaScript言語が広く普及していることは、
すぐに分かりますね。
４、PHPの役割
SNSやネットショッピングサイト等、
WEBアプリを作成する時に
よく使用されています。
ただし、文字や背景などのデザインや
アニメーション等の
リアルタイムで動く処理は
PHP言語で作ることができません。
５、プログラム言語の動く場所
簡単ではありましたが、
プログラム言語の役割について、
理解できましたか？
いまいちピンと来ないと思うので、
ここからはプログラム言語が動く場所に着目。
２つのパターンを説明します。
これを理解することで、
JavaScriptやPHPの明確な違いが
分かりますので、お付き合いください。
まずは、HTML(CSS)、JavaScript で作った
サイトのパターンです。
①ばったんがブラウザでサイト
『リスク(Lisk)とは？』をクリック。
②まっくすくんのパソコンから、
サイトのデータをダウンロード。
ここまでは分かると思いますが、ここからが重要です。
③ブラウザでHTML言語、JavaScript言語を翻訳
④ブラウザがサイトのタイトルを右に移動
（アニメーション）
見てわかる通り、翻訳もアニメーションも、
ブラウザが処理します。
まっくすくんのサーバでは、処理をしていません。
HTML(CSS)やJavaScriptは
クライアントサイド(顧客側)で
動くプログラム言語だと言えますね。
サイトのパターンです。
①ばったんがブラウザでサイト
『リスク(Lisk)とは？』をクリック。
ここでいきなり、クライアントサイドの
プログラムと違ってきます。
②まっくすくんのパソコンがPHP言語を翻訳
③まっくすくんのパソコンでPHP言語の命令に従って処理
④まっくすくんのパソコンでサイトデータを加工
⑤まっくすくんのパソコンから、
サイトのデータをダウンロード。
⑥ブラウザがHTML言語を翻訳してサイトを表示
クライアントサイドと違い、PHP言語は
まっくすくんのサーバで、翻訳も処理もしています。
ブラウザではPHP言語の処理をしていません。
PHP言語は、サーバサイド(サイト作成者のパソコン側)で
動くプログラム言語だと言えますね。
６、まとめ
プログラム言語は、処理する場所が
それぞれ違います。
もしもJavaScript言語がサーバーサイドで
動くとしたら…
サーバーでアニメーションが動いて、
ブラウザでは静止（アニメーションが停止）
している状態になってしまいます。
ブラウザで処理するから、
ブラウザ上でアニメーションが付けれるのです。
もしもPHP言語がクライアントサイドで
動くとしたら…
Twitterを見ようとすると、顧客のブラウザへ
高負荷がかかってしまいます。
サーバーで処理するから、
ぼくたちのパソコンでの処理が
軽減されている訳です。
大きな開発会社は、
処理をどのプログラム言語で書くか
十分に議論して、
複数の言語を組み合わせて
サイトを作っています。
プログラム言語の役割だけでなく、
動く場所も理解することが大切だと
分かりましたか？
今日はここまでにして、
次回は、Google（グーグル）とサイトの
関係性について、説明します。
ブロガーの方は必見です。
なぜかって？
SEO対策のコツをつかむことができるからです。
SEO対策って？と思った方も、
分かりやすく解説します。
興味を持って頂けたら、フォローやリツイート、
コメントをよろしくお願いします。
