実はWebサイトを作るには複数の言語が必要！ 何が必要か徹底解説
自分でWebサイトを作りたい
そして、Web制作を仕事にできたらいいな……！
そして、Web制作を仕事にできたらいいな……！
あなたもこんな風に考えて、Webサイトを作る言語について調べているのではないでしょうか？
しかし調べてみるとHTMLやCSS、Javasvript・PHP・Rubyなどなど、たくさんの言語が出てきて混乱しちゃいますよね。そこでこの記事ではWebサイトを制作するためには
- Webサイト制作にはどんな言語が必要なのか
- それぞれの言語の役割
を初心者でもわかりやすく解説します。またWebサイトがどうして言語で動くのかや、Web制作に関わるお仕事のこと、オススメの言語についてもご紹介します。この記事を読んでWebサイトを作るために必要な知識を身につけましょう。
この記事の目次
なぜ言語で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には、フロントエンドとバックエンドの橋渡しを行うという重要な役割があります。
先ほど例にあげたお問い合わせフォームでは、打ち込まれた文字データを取り込んでメールとして送信する処理がユーザーには見えないバックエンド側で行われています。
JavaScriptとは？概要・始め方・将来性を初心者にもわかりやすく解説
更新日 : 2020年7月23日
Webサイト制作にオススメなプログラミング言語
ここからはHTML・CSS・JavaScriptにプラスαで学習するのにオススメの言語を紹介します。
PHP
PHPはWebサイトを作る言語の中でも人気があり、初心者でも習得しやすいと言われています。PHPはサーバーサイドのスクリプト言語で、サーバー側にあるデータベースと簡単に連携することができたり、HTMLに埋め込んで使うことができる便利な言語です。
Webサイトだけでなく、Webアプリケーション（サービス）の開発にも利用される言語です。そのため仕事にもつながりやすいと同時に、応募条件にPHPのスキルを求められるケースが非常に多くあります。
世界的に人気のCMSであるWordPressもPHPを使って作られています。PHPが扱えれば、WordPressをカスタマイズすることができます。
PHPとは？ 初心者向け学習方法やPHPエンジニアになる方法を解説
更新日 : 2020年7月15日
- スクリプト言語とは
- スクリプト言語とは習得するのを簡単にするために工夫されたプログラミング言語のことです。コンピューターが命令文を読みながら実行する（動作する）スタイルで、簡単にプログラムを組むことができます。/ 詳細はこちら
Ruby
RubyもPHPと同じスクリプト言語です。Rubyは日本で生まれたプログラミング言語なので、最新情報もヘルプも日本語で読むことができます。そのため学習が行いやすく、日本人にとって扱いやすい言語です。
多くの企業でも採用されている言語で、SNS・マッチングサイト・ソーシャルゲームなどに使われています。
- クックパッド
- 食べログ
- 価格.com
- Hulu
etc...
Rubyを学習する上でRuby on Railsというフレームワークの習得も視野に入れましょう。開発効率が非常に良いのでRubyを使って開発する場合、このRailsも利用されています。
そのため求人でもRailsのスキルが求められます。Rubyを使って開発したい人は、Railsも一緒に習得するとより有利に案件が獲得できるでしょう。
- フレームワークとは
- 頻繁に必要とされる基礎的な機能をまとめて提供してくれる枠組み・テンプレートのようなものです。
Rubyとは？初心者が学びやすい言語の特徴から始め方まで徹底解説！
更新日 : 2020年7月21日
Java
Javaとは、アプリ開発など幅広い開発に使用されている人気のプログラミング言語です。JavaとJavaScriptは全く別の言語なので、注意が必要です。
JavaとJavaScriptって何が違うの？わかりやすく４つの違いで徹底分析
更新日 : 2020年8月19日
Javaの最大の特徴は、どんなコンピュータ上でも利用することができる点です。実はプログラムは全てのパソコンやスマホで利用できるわけではないのです。Apple製品とAndroid製品では規格が違うため、それぞれに合ったプログラムを作らなくてはいけません。
しかしJavaは製品の規格に関係なく利用できるため、非常に重宝されます。人気言語であるJavaは技術的に安定していて、バクなどが見つかってもすぐに修正されます。
人気な反面、設計や組み込みが複雑なため簡単なプログラムを作る場合は手間がかかります。そのため大型案件での利用が多く、小規模な開発であればPHPが採用される場合が多いです。
とはいえ、Javaは昔から人気が高く、Javaを扱えるようになると他のプログラミング言語の学習が楽になると言われています。需要も高く求人案件も豊富です。
また学習環境も書籍や学習サイト・プログラミングスクールなどが豊富で整っています。将来、大規模な開発にも関わりたいというあなたはJavaも勉強してみると良いでしょう。
まとめ
いかがでしたか？ Webサイトを作る上で大切な三大言語は
- HTML
- CSS
- JavaScript
の3つです。
特にHTMLとCSSはWebサイトを開発する上で必須の言語となります。また仕事としてWeb制作に関わるのであれば、JavaScriptもかならず必要になります。
Webサイトは便利なツールの普及により、専門知識がなくても誰でも簡単に作れるようになりました。しかし自分好みのデザインや欲しい機能など、思い通りにWebサイトを作るためにはプログラミング言語でのカスタマイズが必要となります。
初心者でもできるのか不安に感じるかもしれませんが、無料でできる学習環境も整っています。まずは無料で学習を始めたいと思うあなたは、下記の記事をご覧ください。
初心者必見！プログラミング無料学習サイトを効率的に使う方法
更新日 : 2019年4月2日
独学で勉強するのは不安というあなたには、プログラミングスクールをオススメします。弊社侍エンジニア塾では、現役エンジニアがマンツーマンで学習をサポートしています。
いきなり通うのは敷居が高いと思うあなたは、まずは無料体験レッスンを受けてみましょう。
プログラミングスキルを身に付けて、エンジニアを目指したい方はぜひ侍エンジニア塾をご利用ください。いまなら無料体験レッスンを受講することで「Amazonギフトカード」「電子書籍」「あなただけのオリジナルカリキュラム」をプレゼントいたします。
下記カレンダーから簡単に予約することが出来るのでぜひご活用ください。
