Webサイト制作で使うプログラミング言語の解説 – 図解で分かる！Webにまつわる基礎講座 vol.4

Webサイト制作やフロントエンドに興味を持った初学者向けに、図解を使って分かりやすく解説しています👍

連載第4回目の今回は、Webサイト製作者が使うプログラミング言語について紹介します。

など、初学者なら理解するべきことを簡単にまとめました。

前提知識として「Webサイトとは何か？その仕組みを紹介」を先に見ておいてくださいね！

HTMLとCSSはプログラミング言語か？

わたしたちは日常生活の中で、日本語・英語など「人間が使う言語」を使いますよね。

一方で、WebサイトやWebサービスを作るときには、コンピュータが理解できる形式で書かれた「コンピュータのための言語」を使う必要があります。

よくある誤解ですが、コンピュータのための言語がすべて「プログラミング言語」というわけではありません。

例えば、Webサイト制作で最初に習うHTMLやCSSも実は「プログラミング言語」ではなくて、それぞれ

と分類されます。

一方で、JavaScript、PHP、Ruby、Pythonなどが「プログラミング言語」ですね。

図でまとめると以下の通りです↓

HTML（マークアップ言語）は「文章のこの部分が見出しで、この部分が画像で…」など文章の構造を表現できます。

CSS（スタイルシート言語）は「文章の部分は赤色で、サイズも大きくして…」など文章の見た目を決めることができます。

一方で、PHPやJavaScript（プログラミング言語）は「データを演算したり、繰り返したり、場合分けしたり…」などデータ処理をすることができます。

Webサイト制作で使う主な言語

Webサイト制作で使う主な言語はHTML、CSS、JavaScript、PHPです。

一番簡単なWebページはHTMLとCSSだけで作ることが出来ます。

しかし、ページに動きをつけたり、WordPressなどの複雑なソフトウェアを使うためには、JavaScriptやPHPなどのプログラミング言語を扱う必要があります。

Webサイト制作の勉強中「HTMLとCSSは理解できるけど、JavaScriptがよくわからない…」という人も多いはず。

HTMLやCSSと違ってJavaScriptはプログラミング言語。

複雑なことができる分、やや難しくなるので、つまづきやすいのは当たり前です。

30DAYSトライアルでもすすめられているように、Progateなどの分かりやすい学習教材を使って学ぶのがオススメですよ！

30DAYSトライアル1st【コーディング基礎学習〜環境設定編】

Webサイト制作で使う主な言語の簡単な紹介

Webサイト制作で使う主な4言語をざっくり理解しておきましょう。

HTMLは「Webページ内の文章や文章構造を書く」ために使うマークアップ言語です。

※参考：HTMLファイルとHTMLタグの基本を解説 – 図解で分かる！Webにまつわる基礎講座 vol.2

CSSは「Webページのデザイン（見た目）を決める」ために使うスタイルシート言語です。

※参考：CSSの基本を超初心者向けに解説 – 図解で分かる！Webにまつわる基礎講座 vol.3

JavaScriptは「Webページに動きをつける」ために使うプログラミング言語です。

Webページを見た時のアニメーションや、ボタンをクリックした時の動作など、複雑な動きを担当しています。

PHPは「裏側でデータの処理をする」ために使うプログラミング言語です。

WordPressというソフトウェアはPHPで書かれていることで有名ですね。

とにかく、

という点を理解しておくことが重要です。

JavaScriptとPHPの違いは？

「JavaScriptとPHPがプログラミング言語ということは分かったけど、何が違うの？」

そんな疑問を持った方もいるはず。

簡単に言うと「動く場所（処理する場所）」が違うと理解すればOK。

Webページが表示されるまでは「Webサイトって何？サイトが表示される仕組みを解説」でも書いたとおり

という流れです。

サーバからWebページのデータが渡される時「動く場所に違い」があるんですね。

動く場所が違うので、

PHPはサーバサイドスクリプト（サーバ上で動くプログラム）、

JavaScriptはクライアントサイドスクリプト（クライアント＝ユーザのWebブラウザ上で動くプログラム）

とも呼ばれます。

Webサイト制作で使うプログラミング言語の解説【まとめ】

今回はWebサイト制作で使う言語について、超初心者向けに解説しました。

簡単にまとめると、

という感じ！