プログラミングを始める前に知りたい、フロントエンド言語の違い（HTML/CSS/Javascript）

フロントエンド言語は、Webサイトだけでなく、スマートフォンアプリの見た目やUIの実装方法として広く使われるようになりました。

「Webサイト作り始めました」「アプリを作りはじめました」という方は、これからご紹介するツールを活用してみましょう。さらに各言語の役割や得意なところを押さえて作ると、後で修正しやすい・わかりやすいものを作れるようになります。

今回取り上げるのは以下の3大フロントエンド言語です。

・文書の構成を決める「HTML」
・色や大きさを決める「CSS」
・それらを変化させる「Javascript」

ひとつずつ見ていきましょう。

また、「今すぐにでもフロントエンド言語を取得したいんだ……！」という人は、次の記事もおすすめです。

３大フロントエンド言語

骨格としてのHTML

まずは基礎中の基礎、HTMLです。HTMLとは「Hyper Text Markup Language」の略で、Webサイトの文書構造を定義しています。人間の体で例えると骨格のような部分。「見出し」や「段落」「箇条書き」など、構造の部分をタグで囲んで決めていきます。

HTMLには異なるページを結びつける「ハイパーリンク」という仕組みも導入されました。現在ただ「リンク」と呼ばれているこの仕組み・概念が世に広がったのは、HTMLとWebブラウザによるところが大きいです。

最新バージョンはHTML 5.2です。フォントのサイズ・種類・色の変更や文字の点滅など、見た目を変更する機能は廃止され、より文書構造を定義する言語に特化されています。

皮膚のようなCSS

CSSは「Cascading Style Sheets」の略で、Webサイトの見た目（デザイン）を定義する役割を持っています。人の体で例えるなら皮膚や髪のようなものです。

元々はフォントや色の指定などもHTMLで変更できるように規定されていました。しかし、HTMLの勧告を行うW3Cでは「HTMLは文書構造を定義するものであり、見た目を変更するものではない」と、見た目の定義をする言語・機能をCSSとして分離しました。

「リンク部分にカーソルがある場合、文字の色や背景色を変える」「ボタン部分の角丸」などは、CSSで実装しています。

HTML 3.2で追加された見た目を変更する機能はHTML 4.0では非推奨、HTML 5.0では廃止されています。フォントの大きさを変える、フォントの色を変える、背景色をこの色にする、などはCSSで設定します。最新バージョンはCSS 3となっています。

筋肉のようなJavascript

Webサイトの見た目やデータを変化させるのに利用される、プログラミング言語です。人の体に例えるなら、骨や皮膚を動かす筋肉です。

例えば、Facebookで「いいね！」ボタンを押した時に色が変わるのは、Javascriptで実装しています。ユーザーがボタンを押した際に、データベースから情報を取ってきて、数値（色）を変える、というような仕組みを構築できます。

また、よく使われる処理をまとめたものを「ライブラリ」と呼び、有名なものに「jQuery」や「React.js」等があります。これらを上手に組み合わせて使うことで、Webサイトやアプリを作る際に掛かる労力を少なくすることができます。

バックエンド言語との違い

現在Webサイトを作成する場合には、ここまで見てきたフロントエンド言語と呼ばれているHTML・CSS・Javascripを組み合わせることによって、ユーザーの操作を画面に反映するのが一般的です。

フロントエンド言語は「情報をどのように見せるか」を解決するのが得意です。一方で、PHPなどバックエンド言語と呼ばれる言語は「情報をデータベースに格納したり、格納する前の文字列を加工したり」処理を大きくまとめて実行するのが得意です。

フロントエンド言語で対応出来るような細かな処理（例えばFacebookの「いいね！」ボタンなど）をPHP等で実現しようとすると、挙動ごとにページ全体の読み込みをし直さなければ、ブラウザの画面に反映することができません。

フロントエンド言語を使えば、一部だけを書き換えれば実現出来てしまいます。これを非同期処理といいます。

フロントエンド言語の得意なところ・不得意なところ、バックエンド言語の得意なところ・不得意なところがあります。得意なところを組み合わせて、使い分けられるように心掛けてみましょう。

知っていると便利なテキストエディタ

HTML・CSS・Javascriptは、全てテキストデータです。そのため、Windowsに標準でついてくるメモ帳でも書くことは可能ですが、以下のようなテキストエディタを使うと便利でしょう。言語に合わせたタグやコマンド等の色分け表示が可能で便利です。

・Windowsの場合 → Mery（ https://www.haijin-boys.com/wiki/ ）

HTMLの表示

CSSの表示

Javascriptの表示

・Macの場合 → CotEditor（ https://coteditor.com/ ）

（ https://coteditor.com/ より）

動作確認（デバック）環境としてのブラウザ

ChromeやFirefoxなどには現在、開発者向けの機能が実装されていて便利です。HTMLの記述が画面上のどこにあるか確認できたり（インスペクタツールと呼びます）、CSSの修正が画面を見ながら確認できたりします。

Chrome → デベロッパーツール

メニューの「その他ツール」→「デベロッパーツール」より開きます。

画面の右側にツールが登場。

ツール画面の下側にあるCSSの設定を変更すると表示画面に反映されます。

Firefox → ウェブ開発ツール

メニューの「ウェブ開発」→「開発ツールを表示」から開きます。

画面の下側にツールが表示されます。

開発ツール画面の右側で設定を変更すると表示画面に反映されます。

それぞれ実際のソースコードを変更する前に動作の確認ができるので、覚えておくとよいでしょう。

なお、Javascriptのデバッグが一番めんどうです。実際のコードを修正して動かしてみるしかありません。そのような時のためにテスト用のサーバーを用意しておくとよいでしょう。

まとめ

現在はWebサイトの制作だけでなく、PWA（Progressive Web Apps）と呼ばれる、Webサービスをスマホアプリ化する仕組みもあります。それがWindows向けのアプリケーションにも応用されてきました。ますます使われることになるフロントエンド言語各種、その基礎を覚えておくと、今後の開発に役立つことは間違いありません。