JavaScriptとは、動的な Webページを作成でき、WebサイトやWebアプリの開発でよく使われるプログラミング言語です。
通常はブラウザ上で実行され、JavaScript を使えば、ユーザの操作に応じたコンテンツの表示やブラウザ上で表示される地図やグラフィックアニメーションなども表示できます。
JavaScript は企業やユーザからの評価も高く、今も廃れること無く使われています。
この記事では、初心者向けに JavaScript について、できることや例を交えて基本的な書き方までを解説します。
JavaScriptとは？
先述したように、JavaScript とはブラウザを「動き」を与えるためのプログラム言語で Webページの開発などでよく使われています。
例えば、Webサイトを閲覧した際、ポップアップ画面のような Webサイト上でアニメーションが動いていたり、入力フォームが設置されているのを見たことがあるでしょう。
このようにブラウザを動的にするのが JavaScript で、「ユーザの操作で内部処理が発動する」というWebサービスにとってとても重要な機能を備えています。
JavaScript は非常に凡庸性が高く、一番身近なのは HTML や CSS など、他のプログラミング言語と組み合わせて使用することで、ブラウザ上で動作させるプログラム（クライアントサイド・スクリプト）ですが、近年では、Node.js（ノードジェイエス）といってブラウザ上だけでなくサーバでも動く JavaScript も普及しています。
また、JavaScript 言語を使うための開発環境も充実してきており、スマホアプリからデスクトップアプリまで、幅広く開発できるようになりました。
JavaScriptの歴史
JavaScript はインターネットが普及し始めた1990年代はじめにNetscape Navigator という Webブラウザ専用に開発されました。
当初の名称は「LiveScript」でしたが、当時人気のあったプログラミング言語「Java」にあやかって、1995年に現在の名称に変更されました。
当時は HTML と CSS だけの Webサイトが一般的でしたが、JavaScript によって表現の幅が広がると注目されました。
1996年に Microsoft の Internet Explorer3.0 に搭載され、1997年には、国際標準化団体 ECMAインターナショナルが JavaScript のコア部分を標準化したこともあり、爆発的に普及し、その後もさまざまなライブラリやフレームワークが続々と誕生し、より便利に活用できるようになっていきました。
2010年以降はサイト上に動きを追加するクライアントサイドスクリプトだけでなく、サーバサイドの実行環境が整理され、バックエンドシステムやアプリ開発などでも使用されるようになりました。
ブラウザで実行される3つの言語
Webページを開いた時、クライアント側のブラウザは以下 3つの言語を翻訳して、ページを表示させます。
HTML・・・「見出し」や「段落」といった構造と意味を持たせる言語
CSS・・・HTML に「文字や背景の色」や「余白」といったデザインやレイアウトを設定するための言語
JavaScript・・・「入力フォームの表示」や「コンテンツの操作」、「地図」など、さまざまな動的コンテンツを作成する言語
「HTML」、「CSS」、「JavaScript」の順で実行されます。
JavaScriptとJavaの違い
JavaScript の歴史で名前の挙がった「Java」ですが、全くの別物です。
具体的にどのような違いがあるのか見ていきましょう。<br>Java は、OS を選ばないサーバサイドのプログラミング言語です。
JVM（＝Java Visual Machine）という仮想マシン上で動くプログラミング言語で、Webサービスやシステム開発などに利用されています。Javaは、どのような OS を使っていても、JVM が入っていなければ動作しません。また、実際に動かすにはコンパイル（プログラミング言語をコンピュータが理解できる言語に変換すること）が必要です。一方、JavaScript はWebサイトに動きを与えるクライアントサイドのプログラミング言語です。ブラウザとテキストエディタがあれば開発ができるなど、手軽さを重視して開発された言語といえます。
JavaScriptの将来性
ここまでで JavaScript は、本来 Webに動きを与えるプログラミング言語でしたが、現在ではアプリやゲームなど、幅広くい分野で活用され、多くのエンジニアにとって非常に将来性の高い言語であるといえます。
JavaScript は汎用性が高く、幅広い分野で使われますが、その中でも需要が高いのはフロントエンド部分の設計・開発です。
また、WEBアプリの開発に必要不可欠な点やさまざまなアプリケーションを作れるという点で需要が高く、ほかの言語を扱うエンジニアよりも平均年収が高いのです。
JavaScriptでできること
WEBサイトに「動き」をつける
HTML、CSS のみでサイトを作ることはできますが、JavaScript を使えば、表示されているボタンやメニューにアニメーションや効果を追加することで、動きが出て、より魅力あるサイトを作ることができます。
ユーザ操作で内部処理が発動する
JavaScript は、ユーザがブラウザ上で行った操作によって、さまざまな処理を発動させることができます。
検知できる操作には、下記のようなものが挙げられます。
・マウス移動
・フォーム送信
・フォーム入力値が間違っている場合、申し込みボタンを押した際エラー項目を表示する
・住所取得ボタンを押すと、郵便番号から自動的に住所を入力する
サーバサイドの開発
Node.js などの出現によって、サーバサイドの開発でも使用されるようになり、フロントエンドもサーバサイドも両方 JavaScript で書くといった開発も可能になりました。
IOS/Android用アプリも開発可能
React Native や Appcelerator、Monaca などによって Android と iOS 両方で利用が可能なスマホ用アプリの開発も可能になり、さまざまなアプリの開発に使われています。
非同期通信
非同期通信とは、サイト自体を更新することなく一部分だけの画面更新ができるというものです。
例えば、Google Mapではいちいち更新せずとも、フォーカスしている位置をずらすだけで、足りない部分だけを通信し、新しい情報が浮かび上がってきます。
この処理に、非同期処理が使われています。
ユーザーのストレスを軽減させることで、ユーザ体験の向上にも繋がります。
基本的な書き方
ここからは JavaScript がどのようなプログラミング言語なのかをより理解するために、基本的な書き方について紹介していきます。
JavaScript は非常にシンプルで、メモ帳やエディタというテキスト編集ソフトを使い、HTMLの中に命令を書いてブラウザで表示させればすぐに実行されるので、すぐに学習が始められます。
必要なアプリケーション
JavaScript を学習するにはプログラムを記述する「テキストエディタ」というアプリケーションと、「ブラウザ」というWebサイトを閲覧するアプリケーションの 2つが必要です。
JavaScriptは基本的にはブラウザで動くスクリプト言語であるため、テキストエディタで命令を記述し、ブラウザで実行して確認するという流れになります。
ちなみに今回は Windows にもとからインストールされている「テキストドキュメント」を使用します。
エディタ
エディタとは、テキストを編集するソフトウェアのことです。
Windows や Mac に標準搭載されているソフトウェアでも書けますが、主にメモ帳のような使い方を想定して作られているため、JavaScript の開発には不向きです。
それぞれのプログラミング言語に適したエディタを用意しましょう。
おすすめのエディタ
JavaScript に限らず、効率的にプログラミングを行うにはエディタが必要です。
おすすめのエディタは、Microsoft社が開発した「Visual Studio Code」は拡張機能が豊富で、自分好みにカスタマイズできます。
また、GitHub社が開発した「Atom」も人気です。
実際に書いてみよう！
それでは、実際にプログラムを書いてみましょう。
JavaScript の記述には、HTMLファイルの中に書く方法と、HTMLファイルとは別にjsファイルを作って、HTMLに参照させる方法があります。
どちらの方法でも動きますが、はじめはHTMLファイルの中に書き込む方法がいいでしょう。
１．テキストファイルを作成する
デスクトップ画面右クリックするとメニューが表示されるので「新規作成」を選択し、「テキストドキュメント」を選択します。ファイル名は、仮にhelloとしておきます。
.jpg)
２．コードを書き込む
テキストドキュメント内にコードを書き込んでいきます。
.jpg)
以下のコードをそのままコピぺで構いません。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Hello World!</p>
<script>
alert("Hello");
</script>
</body>
</html>
HTML ファイル上に書く合、ソースコードの赤字の部分（まで）がJavaScriptです。
でJavaScriptの命令を挟むというのが書き方の基本です。
“”（ダブルクォーテーション）で挟まれた”Hello”の部分は文字列を表します。
３．HTMLファイルを作成する
作成したファイルをHTML形式にして保存します。
名前をつけて保存を選択し、ファイル形式を「テキストファイル」から、「すべてのファイル」にします。
次に、ファイル名の後ろに.htmlをつけて完成です。
デスクトップ画面に戻り、作成したhtmlファイルを開いてみましょう。
以下のようなポップアップが表示されれば成功です。
.jpg)
これで基本的なJavaScriptを使ったHTMLファイルができました。
終わりに
JavaScript はブラウザとテキストエディタさえあれば実行でき、難しい部分を内部で処理してくれるので、プログラミング初心者にもオススメです。
そして JavaScript を習得できれば、他の言語でも共通する部分が多いため、Webサイト作成時以外でも非常に役に立ちます。
JavaScript の基礎が身につけば、Webページが動くのを確認しながら学べ、楽しみながら学びを進められるでしょう。
まずは実際にコードを書いてみて手を動かしながら学んでいくことが重要です。
JavaScriptだけでは Webページを作成することはできないので、HTMLやCSS、PHPなども併せて学習することをおすすめします。
