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

アルパカ
こんにちは、エンジニアブロガーのアルパカ(@engineeraru)です

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

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

  • プログラミング言語とは?誤解しがちな言語の分類
  • Webサイト制作で使う言語まとめ
  • JavaScriptとPHPについての簡単な紹介

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

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

 

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

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

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

 

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

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

  • 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で書かれていることで有名ですね。

 

とにかく、

Webページの複雑な処理は、

プログラミング言語(JavaScript、PHP)でされている

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

 

JavaScriptとPHPの違いは?

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

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

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

 

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

  1. ユーザが「Webページを見せて!」とリクエストする
  2. サーバからWebページのデータが渡される

という流れです。

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

  • PHP:サーバで動く(サーバサイドスクリプト)
  • JavaScript:ブラウザで動く(クライアントサイドスクリプト)

 

動く場所が違うので、

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

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

とも呼ばれます。

【補足】

厳密にはJavaScriptはサーバ上でも動きます(代表例:Node.js)。

ただ初学者のうちは「JavaScriptはブラウザ上で動くんだなあ」と一旦覚えておきましょう!

 

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

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

簡単にまとめると、

POINT

  • Webサイト制作で主に使う言語は「HTML、CSS、JavaScript、PHP」の4つ
  • HTMLはマークアップ言語(プログラミング言語ではない)
  • CSSはスタイルシート言語(プログラミング言語ではない)
  • PHPはサーバで動くプログラミング言語(サーバサイドスクリプト)
  • JavaScriptはブラウザで動くプログラミング言語(クライアントサイドスクリプト)

という感じ!

アルパカ
HTML、CSS、JavaScript…と順番にレベルアップしていきましょう~

【Webスキル診断】“一生使えるスキル”を60秒で診断しよう!

「フリーランスになりたいけど、どんなスキルを身につければいいかわからない」という悩みを解決すべく、東京フリーランスでは【Webスキル診断】をLINEで無料実施中です! Web制作・Webデザイン・アプリ開発・動画編集など「自分に合った理想の働き方は何か」を見極めていただけます。

効率の良い勉強法カテゴリの最新記事