2. ECMAScript 2015とモダンJavaScript
このチュートリアルでは,JavaScriptの基本について説明します。
JavaScriptは,主にウェブブラウザ上で動作し,ウェブページにさまざまな機能を追加するために使われるプログラミング言語です。例えば,利用者の操作に応じて表示内容を変更したり,アニメーションや図形を表示したり,入力されたデータを処理したりできます。
JavaScriptの構文には,C言語と共通する部分があります。そのため,C言語などのプログラミング経験があれば,変数,条件分岐,繰り返しなどの基本的な書き方を理解しやすいでしょう。ただし,JavaScriptには,ウェブページの操作,配列やオブジェクト,関数の扱いなど,独自の特徴もあります。JavaScriptとJavaは名前が似ていますが,異なるプログラミング言語であり,互換性もありません。
JavaScriptは,当初は主にウェブページに簡単な動作を追加するために使われていました。その後,2000年代半ばにAjaxを利用したウェブアプリケーションが普及し,ウェブページの一部を必要に応じて更新できるようになりました。さらに,HTMLや関連するWeb APIの発展により,現在ではウェブブラウザ上で高度なアプリケーションを作成できます。
lab.jsのCanvas Screenでは,HTMLの<canvas>要素とCanvas APIを利用して,図形,文字,画像などを描画します。Canvas APIは,JavaScriptを使って<canvas>要素上にグラフィックスを描画するための仕組みです。MDN Canvas API
JavaScriptの言語仕様は,Ecma Internationalによって「ECMAScript」として標準化されています。JavaScriptは,このECMAScriptの仕様に基づいて実装されています。MDN ECMAScript
ECMAScript 2015は,2015年に正式に採択された第6版の仕様であり,ES2015またはES6とも呼ばれます。let,const,アロー関数,クラス,モジュールなど,現在のJavaScriptの基礎となる多くの機能が導入されました。Ecma International
ECMAScript 2015は,現在では「次世代」の仕様ではなく,モダンJavaScriptの基礎として広く定着しています。また,ECMAScript 2016以降は,基本的に毎年,新しい仕様が公開されています。ECMAScript Language Specification
lab.jsのサンプルプログラムでも,let,const,アロー関数など,ECMAScript 2015以降の書き方が使われています。初めて見ると複雑に感じるかもしれませんが,すべてを一度に覚える必要はありません。
本チュートリアルでは,初心者にも理解しやすい基本的な書き方から説明します。そのうえで,lab.jsのプログラムを理解するために必要なモダンJavaScriptの書き方も,順番に紹介します。
ウェブページでJavaScriptを使用する場合は,通常,HTMLファイルからJavaScriptのコードを読み込みます。
HTMLファイルの拡張子には,一般に.htmlを使用します。JavaScriptをHTMLファイル内に直接記述する場合は,<script>要素を使用します。
<script>
console.log('Hello, world!');
</script>
JavaScriptのコードを外部ファイルに分ける場合は,拡張子.jsのファイルを作成し,HTMLファイルから読み込みます。