実はWebサイトを作るには複数の言語が必要！何が必要か徹底解説

自分でWebサイトを作りたい
そして、Web制作を仕事にできたらいいな……！

あなたもこんな風に考えて、Webサイトを作る言語について調べているのではないでしょうか？

しかし調べてみるとHTMLやCSS、Javasvript・PHP・Rubyなどなど、たくさんの言語が出てきて混乱しちゃいますよね。そこでこの記事ではWebサイトを制作するためには

Webサイト制作にはどんな言語が必要なのか
それぞれの言語の役割

を初心者でもわかりやすく解説します。またWebサイトがどうして言語で動くのかや、Web制作に関わるお仕事のこと、オススメの言語についてもご紹介します。この記事を読んでWebサイトを作るために必要な知識を身につけましょう。

この記事の目次

1 なぜ言語でWebサイトは動くのか？
2 Webサイトを作るお仕事
3 実は知らないWebサイトとWebアプリ（サービス）の違い
- 3.1 Webサイト
- 3.2 Webアプリケーション（サービス）
4 Webサイトに必須な基本のプログラミング言語
5 Webサイト制作にオススメなプログラミング言語
6 まとめ

なぜ言語でWebサイトは動くのか？

Webサイトはインターネット上で動く一つのサービスです。他にもファイル転送やメール、チャットなどインターネットには様々なサービスがありWebサイトはそのうちの一つなんですね。

Webサイトには私たちが見たり触れたりすることができないサーバーと、私たちが見たり触れたりすることができるクライアントという2つの種類があります。スマホやパソコン（クライアント）からWebサイトを見たいというリクエストを送り、サーバーが情報を渡す仕組みになっています。

クライアントとサーバの関係

サーバーから送られてきた情報が、そのままパソコンやスマホに表示されている訳ではありません。サーバーから送られてくる情報は、コンピュータが理解できる言語（コード）です。画像や色なども全て言語を使って記述され保存されています。

そのためサーバーから送られてきた情報をクライアント、つまり私たちが理解できる形に翻訳しなければいけません。そこで活躍してくれるのが、Webブラウザです。

Webブラウザ例

Chrom
Safari
Internet Explorer
Firefox

Webブラウザがサーバーとクライアントを橋渡ししてくれるので、私たちは快適にWebサイトをみることができます。

Webサイトを作るお仕事

Webサイトを作る職種には大きく分けて

管理・進行
マーケティング
制作

があります。今回は制作に関わるお仕事を紹介します。どんな業種があるか知ったうえで、あなたがどんな仕事に関わりたいか考えてみてくださいね。

Webデザイナー

Webサイトの見た目を作るお仕事です。Webサイト全体のデザインだけでなく、素材と言われるアイコンやバナーなどを作ります。

フロントエンドエンジニア

Webデザイナーが作ったデザインをもとに、HTML・CSS・JavaScript（jQuery）、PHPなどの言語を使って設計や実装を行います。近年、世界的に大人気のCMS（コンテンツマネジメントシステム）であるWordPressなどの構築やカスタマイズも主な仕事ですね。

フロントエンドエンジニアもWebデザイナーと同じで見た目の部分を作る職種です。

ただしフロントエンドエンジニアは、Webデザイナーのようにサイトをデザインするのではなくでき上がったデザインをプログラマーとして作り込んでいく作業を行う人のことを指します。

バックエンドエンジニア

Webサイトで利用するサーバーやデータベースなどのシステム側の構築や管理を行う仕事です。バックエンドという名称でなんとなく想像がつくでしょうか。

Webデザイナーとフロントエンドエンジニアはユーザーの目に触れる部分を作成し、バックエンドエンジニアはユーザーが見れない部分の構築や管理を行う業務です。

実は知らないWebサイトとWebアプリ（サービス）の違い

WebサイトとWebアプリは見た目に大きな違いがなく、なかなか見分けるのは難しいですよね。そのためどちらも作り方は同じだと思っている人や、Webサイトが作れればWebアプリを作れると勘違いしている人が多くいます。

しかし実際は必要なスキルや知識が違うので、注意が必要です。

	情報提供型	対話型	難易度
Webサイト	◯	×	低
Webアプリ	◯	◯	高

Webサイト

Web サイトは (必ずしも) Web アプリケーションではありません

引用元：第 1 回 Web サイトと Web アプリケーションの違い（IBM Developer）https://www.ibm.com/developerworks/jp/web/library/wa-websiteapp/index.html

Web サイトの主体は情報提供です
純粋な静的 Web サイトの最も簡単な定義は、情報提供を目的としたサイトであることです。

引用元：第 1 回 Web サイトと Web アプリケーションの違い（IBM Developer）https://www.ibm.com/developerworks/jp/web/library/wa-websiteapp/index.html

というようにWebサイトはユーザーへ一方的に情報を提供するためのツールです。

このような動きがなく情報を提供するだけのページを静的ページと言います。例えば企業の公式ホームページやWikiPediaのようなサイトが代表的な例ですね。

そのため作業もどのような情報をどのような内容や順番・デザインで提供するのかが重要になってきます。つまりフロントエンドに関わる作業がほとんどです。

Webアプリケーション（サービス）

Webアプリケーションやサービスは対話型とよく表現されます。なぜならWebアプリやサイトは、ユーザーが起こすアクションによって表示内容が動的に変化します。例えば、物を購入できるECサイトや乗換案内サイト、カレンダーなどが挙げられます。

Webアプリケーション（サービス）はユーザーが文字を入力したりボタンを押すなどのアクションが前提となるため、制作するうえで「どのような機能が必要か」が大切になります。また、Webサイトよりもデータのやりとりが多く発生するため、バックエンドの知識やスキルも必要になります。

Webサイトに必須な基本のプログラミング言語

Webサイトを作る場合、実はこれから解説する3つの言語を使いこなす必要があります。まずは3つの言語の大まかな役割をザックリ理解してから、それぞれの言語の特徴や役割を理解しましょう。

Webサイトを作る3大言語

HTML
CSS
JavaScript（jQuery）

Webサイトを作るために必要な言語が3つ必要だと聞いて、あなたも「どれか一つじゃできないの？」と思いますよね。HTMLだけでもWebサイトを作ることは可能です。

しかし優れたデザイン・動きのあるWebサイトを作ろうと思うと、CSSとJavaScriptが必要になります。特にHTMLとCSSは切っても切り離せない関係にあります。次の図をみてください。

HTMLはWebサイトの土台や骨組みと言われる言語です。HTMLを使ってWebサイトがどういった構造なのかを定義するため、土台や骨組みと表現されます。

そこにCSSを使って見た目、つまりデザインを作ります。

JavaScriptはWebサイトにプラスαの要素である動きを作ります。例えば何枚かの写真をスライドさせて表示したり、地図やメッセージボックスを表示させたりします。

このように、日頃あなたが利用しているWebサイトを作るためにはHTML・CSS・JavaScriptが必要不可欠です。そして、この3つの言語はWebサイトを制作するなら必須のスキルになっています。

余談ですがWebサイトを制作する求人もこの3つのスキルが必ず求められます。そのためWebサイト制作に関わる仕事がしたいあなたは、必ず使えるようになる必要があります。

次の項目では、それぞれの言語についてもっと詳しく解説します。

HTML

HTMLとは、Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略です。Webサイトを作る土台や骨組みとなる言語です。インターネット上で公開されてるWebページのほとんどに、HTMLが使われています。

HTMLはMarkup（マークアップ）言語と呼ばれる言語の一種です。Markupとは印をつけるという意味で、文字にタグという印をつけていくことで画像や表を見れるようにします。ちなみにHTMLの基本構造は以下のような要素で成り立っています。

HTML

 
<!DOCTYPE html>
<html lang="ja">
  <head>
  </head>

  <body>
  </body>
</html>

この構造にさらに他のHTMLやCSS・JavaScriptの要素が付け足されてます。上記のようなタグや文章の集合体をソースコードと呼びます。

ちなみにソースコードは、ウェブサイトの余白部分で右クリックすると表示されるポップアップの「ページのソースを表示」を選択すると表示されます（下記画像参照）。

画像：ページのソースを表示

画像：ページのソース画面

HTMLを勉強する際に意識して欲しいのが規格（ルール）です。

規格はW3C（World Wide Web Consortium）というWeb技術の標準化を行う非営利団体が制定しています。Webで使用される技術を標準化し、よりスムーズな開発や品質向上を目標に規格が作られています。

この規格に沿ってWebサイトを作ることによってユーザーの使い勝手をよくするだけでなく、制作側の負担軽減や品質保証につながります。現在は2017年12月14日に勧告されたHTML 5.2が最新版になっています。

CSS

CSSとは、Cascading Style Sheets（カスケーディング・スタイル・シート）の略でスタイルシート言語と言われています。HTMLで作った骨組みに背景や文字の色・サイズなどのデザインを追加していきます。

それくらいならHTMLでもできるんじゃないかと思われるでしょう。しかしCSSを使うことでHTMLの記述がシンプルになり記述間違い減少し管理がしやすくなります。

またCSSはHTMLよりもはるかにデザイン性に優れているので、より詳細なデザインを作ることができます。

HTML

<div class="font_test">
    こんにちは。<br>
    私の名前はナナミです。<br>
    音楽を聴くのが好きです。<br>
    特に邦ロックが大好きです。
</div>

CSS

.font_test {
    font-size: 20px;    /* 文字サイズ指定 */
    color: #2196F3;     /* 文字色指定 */
}

上記のようにCSSだけでは、追加したデザインの要素が反映されません。CSSはHTMLを装飾する物なのでCSSで定義されたデザインを読み取りHTMLに反映されます。

CSSはスタイルシートと呼ばれるファイルで管理されています。スタイルシートのファイル名はstylesheet.cssとするのが一般的です。ファイルの拡張子を「.css」とすることでデザインの要素がつまったスタイルシートだとコンピュータが判断してくれます。

CSSにもHTMLと同じように規格があります。HTMLと同じW3Cが作成しています。2011年6月に勧告されたCSS 2.1を中心に、新しい機能の追加や改良をモジュールとすることで実現するCSS3・CSS4があります。

JavaScript

JavaScriptとはHTMLやCSSと親和性が高い言語で、Webサイトに動きをつけるために使われます。例えば画像を自動でスライドさせたり、お問い合わせフォームなどの文字を打ち込むような機能もJavaScriptで作ることができます。JavaScriptもCSS同様になくてもWebサイトは制作できます。

しかし動きがない（静的な）サイトはできることが限られてしまいます。また私たちが利用しているWebサイトのほとんどが動きがあるサイトなので、ユーザーによって動きがないサイトは、味気ないサイトだと感じてしまうかもしれませんね。

他にもJavaScriptには、フロントエンドとバックエンドの橋渡しを行うという重要な役割があります。

先ほど例にあげたお問い合わせフォームでは、打ち込まれた文字データを取り込んでメールとして送信する処理がユーザーには見えないバックエンド側で行われています。