JavaScriptはさまざまな用途に利用されるプログラミング言語であり、例えばWEBページでは複雑なアニメーションやクリック可能なボタン、ポップアップメニューなどの機能にかかわっています。
高速実行と型安全のために設計され、非常に自由な形式を持ち、“何でもできる”と称されることもある言語です。
本記事ではJavaScriptの概要や基本的な書き方、学習時の簡単な道筋について紹介していきたいと思います。
JavaScriptとは
JavaScript（JS）は、“Netscape Navigator”というWEBブラウザに起源を持つプログラミング言語です。
プロトタイプベースのオブジェクト指向スクリプト言語で、クラスなどのクラスベースに見られる機能も盛り込まれています。
WEBページを読み込む際に、更新されたコンテンツの定期表示や2D/3Dグラフィックのアニメーションなどの複雑な機能を実現できるプログラミング言語で、WEBページでよく使用されるスクリプト言語として知られています。
ブラウザ以外の多くの環境でも使用されており、バックエンド、デスクトップアプリ、モバイルアプリなど、使用場面は多岐にわたります。
名称にプログラミング言語“Java”が含まれていますが、両者はまったく別の言語です。
JavaScriptはネットスケープコミュニケーションズのブレンダン・アイクさんによって開発され、Netscape Navigator2.0で実装されました。
開発当初はLiveScriptと呼ばれていましたが、誕生年である1995年にサン・マイクロシステムズが開発したプログラミング言語Javaが当時大きな注目を浴びていたこと、ネットスケープとサン・マイクロシステムズが業務提携していたことから名称がJavaScriptに変更されたという経緯があります。
“Javaは仮想マシンやブラウザ内で実行されるアプリケーションを作成するが、JavaScriptコードはブラウザ上でのみ実行される”、“Javaコードはコンパイルする必要があるが、JavaScriptコードはすべてテキスト形式”などが違いとして挙げられます。
※スクリプト言語
アプリケーションソフトを作成するための簡易的なプログラミング言語の一種。
比較的単純なプログラムを記述するための簡易的なプログラミング言語全般を指す用語としても使われる。
※オブジェクト指向
コンピュータプログラムの設計や実装に関する考え方の1つ。
相互に密接な関連性を持つ“データ”と“メソッド”を“オブジェクト”という1つのまとまりとして定義し、オブジェクトを組み合わせて関連性や相互作用を記述していくことでシステムを構築する。
※プロトタイプベース
オブジェクト指向言語と呼ばれるプログラミング言語のうち、プロトタイプを基礎（ベース）としてオブジェクトを取り扱うものを指す。
ここでいうプロトタイプとは、“クローンとしての新しいオブジェクト”を作ることができるオブジェクトのことをいう。
JavaScriptの使用用途
JavaScriptはWEBブラウザにおけるHTML操作を目的として開発され、現在ではWEBページやデスクトップアプリケーション、モバイルアプリケーションなど、幅広い領域で使われています。
WEBページでのJavaScriptの使用用途は、“ページの再読み込みを挟まないコンテンツの読み込みやサーバーへの投稿”、“動的コンテンツの提供”、“サーバーへのデータ送信を挟まないフォーム入力値検証”、“WEB解析や広告追跡を目的としたユーザーの閲覧情報を収集”といったもので、HTMLページにクライアント側の特徴を持たせる点はJavaScriptのもっとも歴史の長い使用方法です。
モバイルアプリケーションの領域ではJavaScriptとHTML5を使用することで、iOSとAndroidの両方に対応したアプリを作成できます。
iOSではObjective-CやSwift、AndroidではJavaとそれぞれ異なるプログラム言語で作成することなく、効率的にアプリ開発を進めることができます。
JavaScriptでできること
JavaScriptは、“値の変数への格納”、“文字列の操作”、“WEBページにおける動作の作成”を実現するプログラミング機能で構成されています。
また、Application Programming Interface（アプリケーションプログラミングインタフェース/API）によってさまざまな動作を容易に行うことができます。
なお、APIは大まかに2種類に分類でき、WEBブラウザに組み込まれていて、ブラウザやコンピュータの環境の情報を取得し、それを使って動作を行う“ブラウザAPI”とデフォルトではブラウザに組み込まれておらず、コードと情報をWEBのどこから読み込ム必要がある“サードパーティAPI”があります。
本項では、APIを使用してJavaScriptができることについて、我々がよく見る例を紹介します。
Document Object Model
Document Object Model（DOM）は、HTMLとCSSを操作するためのAPIです。
HTMLの生成、削除、変更の他、動的なページの見た目の変更が可能です。
WEBページでよく見られるポップアップウィンドウや新しいコンテンツの表示には、このAPIが使われています。
Geolocation API
WEBアプリでユーザーの位置情報を取得したい時に使うAPIで、ユーザーが望む場合に位置情報をウェブアプリケーションに提供することが可能になります。
これにより、ユーザーの位置を地図上にプロットしたり、ユーザーの位置に関連する情報を表示したりできます。
なお、プライバシー上の理由からユーザーは位置情報を報告する許可を求められます。
Canvas API
JavaScriptとHTMLのみでグラフィックを描画するための機能ですが、アニメーション、ゲームのグラフィック、データの可視化、写真加工、リアルタイム動画処理などにも使用できます。
従来はブラウザ上で動的に図形を描画する際にFlashのようなプラグインが必要でしたが、Canvas APIを使えばブラウザ標準の機能だけで同じようなことが実現できます。
Canvas APIは全体的に2Dグラフィックを対象としており、ハードウェアで高速化された2Dおよび3Dグラフィックを描画する際は後述のWEBGL APIを使用します。
WEBGL
WEBGLは、WEBブラウザで3Dグラフィックスを表示させるための標準仕様で、プラグインを使用せずにレンダリングを行うことができます。
本APIのプログラムはJavaScriptで記述する制御コードと、コンピュータのGraphics Processing Unit（GPU）で実行する特殊効果コード（シェーダーコード）で構成されています。
WEBGL要素は他のHTML要素と混ぜられ、他のページ部品やページの背景と合成された状態で表示されます。
Twitter API
Twitterのデータにプログラムレベルでアクセスし、企業、開発者、利用者に提供するためのAPIです。
ツイート、ダイレクトメッセージ、ユーザーなどの主要なTwitterリソースを分析、学習、操作することが可能で、よく見る例としてはWEBサイトでの最新ツイートの表示などに使用されています。
なお、利用には、アプリケーション登録を行う必要があります。
Google Maps API
Google Mapの機能をWEBサイトやアプリに埋め込むことができるAPIです。
地図の表示はもちろん、マーカーや情報ウィンドウといった付加機能を付けることもできます。
※Application Programming Interface（API）
アプリケーション・ソフトウェアの構築および統合に使われるツール、定義、プロトコルのこと。
ソフトウェア開発の効率化のために、多くのソフトウェアに共通する機能はOSやミドルウェアなどの形でまとめて提供されており、その汎用的な機能を呼び出して利用するための手続きを定めたものがAPIである。
JavaScriptの基本的な書き方
JavaScriptの書き方は、基本的にはHTMLファイルに直接JavaScriptのコードを書く“直接定義”と、HTMLにファイルを読み込む宣言だけを記述し、JavaScriptのコード自体は外部ファイルに分割して書く“外部定義”の2種類です。
直接定義は読み込みが早くファイルが1つで済み、外部定義はHTMLとJavaScriptが分離されるので再利用や管理が容易というメリットがあります。
初心者のうちはシンプルな直接定義で記述していくのがオススメです。
直接定義
直接定義で記述する場合はコードを“<script>”と“</script>”の間に記述します。
例として、ブラウザ上に“Hello world!!”と表示する場合は下記の通りとなります。
====================サンプル====================
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプル：“Hello world!!”</title>
</head>
<body>
<script>
document.write(“Hello world!!”);
</script>
</body>
</html>
====================サンプル====================
外部定義
外部定義の際は、外部に記述したJavaScriptファイルを呼び出す動作があります。
まずは、呼びだすためのファイルとして、拡張子が“.js”のものを作成しましょう。
今回のサンプルでは、直接定義と同じくブラウザ上に“Hello world!!”と表示するコードを作成します。
====================サンプル====================
document.write(“Hello world!!”);
====================サンプル====================
JavaScriptファイルを用意したら、scriptタグにsrc属性を指定してコードを書くだけで問題ありません。
“<script src="（用意したJavaScriptファイルのファイル名）"></script>”のコードをHTMLファイルに記述すれば読み込んだこととなります。
なお、ファイル名は拡張子まで記述する必要があるので注意しましょう。
今回の場合、上のJavaScriptファイルに“helloworld.js”というファイル名を付けたならば、“.js”まできちんと記述する必要があります。
====================サンプル====================
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプル：外部定義</title>
</head>
<body>
（HTMLの記述箇所）
<script src="（用意するJavaScriptファイルのファイル名）"></script>
</body>
</html>
====================サンプル====================
JavaScriptをページ内に追加する方法
JavaScriptはHTMLページに適用することが可能です。
下記のコードをhtmlの形式で保存した後、WEBページとして開くと、ボタンを押すたびに“pタグの追加箇所（開始点）”の下に新しい段落が作られて、“pタグ”という文章が追加されるページが表示されます。
これは、<script>～</script>の部分でタグを追加する要素の取得やタグを追加するボタンの指定、ボタンクリック時の処理内容を記述しているためです。
====================サンプル====================
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="utf-8">
<title>サンプル：ボタンの追加</title>
</head>
<body>
<div id="wrapper">
<p>pタグの追加箇所（開始点）</p>
</div>
<button id="addButton">ボタン</button>
</body>
<script>
var target = document.getElementById("wrapper");
var addButton = document.getElementById("addButton");
addButton.addEventListener("click", function() {
var newTag = document.createElement("p");
newTag.innerHTML = "pタグ。";
target.appendChild(newTag);
}, false);
</script>
</html>
====================サンプル====================
※本工程は直接定義によるものです。
※文字化けしてしまう場合は、一度テキスト形式で保存し、メモ帳で文字コードを“UTF-8（BOM付き）”にした状態で保存（“名前を付けて保存”の作業時に指定できます）した後、もう一度ページを表示してください。
JavaScriptの学習方法
JavaScriptはブラウザで動作可能となっているため、学習を始める上でのハードルは比較的低いといえます。
しかし、JavaScriptを十分に扱えるようになるための知識は膨大で、独学で身に着けることはあまりオススメできることではありません。
そのため、Udemy、Progate、ドットインストール、paizaラーニングといった学習サイトを活用し、必要であれば書籍を購入しつつ学習を進めていくことになると思われます。
本項では、学習サイトにおいて活用しておきたいレッスン項目を紹介します。
HTMLおよびCSS
HTMLおよびCSSの知識がないのであれば、まずはJavaScriptよりも先に学習を進める必要があります。
初心者のうちは、JavaScriptの記述はHTMLファイルに直接コードを書く“直接定義”がオススメなのは、“JavaScriptの基本的な書き方”の項で説明した通りです。
つまり、HTMLが理解できていなければJavaScriptの文法を学んだとしても有効に活用できないのです。
また、JavaScriptのフレームワークにはHTMLやCSSに変換されたコードが最後に表示されるものが存在するため、あらかじめ理解しておく必要があります。
ひとまずは、学習サイトでいう“入門～中級レベル”で概要やルールを理解しましょう。
JavaScriptの文法
HTMLおよびCSSについての理解が進んだら（あるいはすでに理解している場合は）、JavaScriptの文法を学んでいくことになります。
文法の学習については、学習サイトによっては動画を見ながら実際にコードを記述できるので、そちらを活用するのが効率的です。
思うように学習が進まない場合はライブラリに関する学習を並行させてみるのもよいかもしれません。
ライブラリとフレームワーク
基本的には、ライブラリ→フレームワークの順に勉強していくのがオススメです。
ライブラリについては、WEBページにアニメーションや効果を簡単につけることができる“jQuery”がオススメですが、jQuery1およびjQuery2は公式に廃止されているため、古いバージョンの授業ではないかよく確認しておきましょう。
まとめ
JavaScriptは“何でもできる”と称される通り非常に汎用性の高い言語ですが、当然ながら学習難易度も高くなっています。
思い通りに活用できるようになるには相応の勉強量が必要となるので、なかなかうまくいかないと感じても焦らず自分のペースで勉強を続けていきましょう。