初心者向け学習方法一覧はこちら
はじめに
本記事ではJavaScriptについて理解を深めるために、JavaScriptの歴史やバージョンの遷移について解説します。
Javascriptの概要や環境構築方法を知りたい方は、前回の記事
JavaScriptは現在までに様々な遷移がありましたが、2015年に誕生した通称ES6と呼ばれているバージョンから大規模な変更が盛り込まれました。
どのような変更があったのか、ES6公開前のJavaScriptの特徴とあわせて説明します。また、実践としてJavaScriptでよく使われる機能（メソッド）を紹介します。
紹介した機能（メソッド）を使って、結果がランダムに変わるおみくじを作れるところまでが目標です。
JavaScriptの成り立ち
JavaScriptは1995年にネットスケープコミュニケーションズのエンジニアであるBrendan Eich氏によって開発された言語です。
最初はLiveScriptという名前でしたが、ほぼ同時期に発表されたJavaという言語が注目を集めていたことからJavaScriptという名称に変更されたという経緯があります。
名前は似ていますが言語の体系はJavaとはかなり異なっています。Javaは業務システムの開発や、アプリケーションの開発に使われている言語です。記述したコードを機械語に変換（コンパイル）した実行ファイルを用意してから実行します。
そのためスクリプト言語と比較すると実行が早く安定しているという特徴があります。また、JavaはJVM（Java Virtual Machine）という仕組みで異なるOSであっても同じようにシステムを動作させることができるという特徴もあります。
一方、JavaScriptはコンパイルを行わないインタプリタ方式です。コードを1行ずつ解釈しながら実行するので、処理速度は遅くなることもありますが実行結果をすぐに確認できます。
そのためデザインやレイアウトなど変更を加えながら、すぐに確認して修正が可能です。不具合が出た際も、どこまで実行してエラーが発生したのか確認できるのでデバックがしやすいとも言えます。
もともと、JavaScriptはブラウザ上のみで動作する動的なコンテンツを作成するために使われていましたが、現在ではサーバーサイドの処理にも使えるようになっています。使える幅が増えたことで更にJavaScriptや関連言語のニーズが高まっています。
ECMAScriptとは
ECMAScriptは国際標準化団体であるECMAインターナショナルが、JavaScriptの標準仕様を定めたものです。JavaScriptの勉強をしていてES5やES6というバージョン名を聞いたことがあるかもしれませんが、ES6の正式名称はECMAScript 6th Editionといいます。
ES6以降は続き番号で呼ぶこともありますが、ES2015のように公開年をつける呼び方もあります。標準仕様が決まる前はブラウザによってJavaScriptの記述の仕方が異なっていましたが、仕様が決まったことでブラウザ間の違いによる問題が解消されました。現在ではほとんどのブラウザがECMAScriptをサポートしています。
ES6公開前のJavaScriptの特徴
ES6公開前の古いバージョンのJavaScriptには様々な問題点がありました。特にエンジニアから問題視されるのが「自由過ぎるvarという変数」と「モジュール化ができない」ことです。
1つ目の問題点であるvarの特徴としては「再代入可能」で「再宣言が可能」となっています。
再代入可能というのは、変数の宣言時に「var a = 0;」と0を代入した後に「a = 1;」というように変数の内容を書き換えられます。
再代入可能な変数は他の言語でも使われており、使い方を間違えなければ問題にはなりません。
再宣言が可能というのは、「var a = 0;」と宣言した後に再び「var a = 100;」のように同じ変数名で宣言が可能ということです。これではよく使われる変数名を意図せず再宣言することで、先に宣言した変数の値が書き換わってしまいバグの原因となります。
2つ目の問題点であるモジュール化ができなかった頃のバージョンではJavaScriptのコードを複数ファイルに分けて記述しても、読み込まれた時点ですべて展開されてまるで1つのファイルにまとまっているかのような扱われ方をしていました。
そのためファイルAでaという変数を宣言していて、その後に展開されたファイルBでもaという変数を宣言していると先に展開したファイルAの変数aが乗っ取られてしまうことになります。
モジュール化ができていれば、各モジュール内で定義した変数はそのモジュール内でのみ有効となるので、他のモジュールでどのような変数名が宣言されているのか考慮する必要がなくなります。
ES6（ES2015）からのJavaScriptの特徴
2015年に公開されたバージョンはES6またはES2015と呼ばれています。毎年新しい要素が更新されており、モダンな言語の特徴を取り込む形でこれまでになかった便利な要素が増え続けています。
ES2015からJavaScriptは大きな変化がありました。変数宣言時のconstとlet、クラス、モジュール化、アロー関数、非同期処理などです。他にも様々な仕様の変更点があり、これまでJavaScriptで問題となっていた構造を解決できるようになりました。
- 変数宣言時のconstとlet ES6から変数の宣言には再宣言は不可能なconst（再代入不可）やlet（再代入可能）が使われるようになりました。 変数の再宣言が不可能となったことでvarによる再宣言時の問題をクリアできます。 どちらを使えばいいのか迷うかもしれませんが、基本的にconstで宣言するのがおすすめです。再代入が必要な場合のみletを使いましょう。
- クラス オブジェクト指向プログラミングをする上でかかせないクラス（Class）はオブジェクトがどのような振る舞いをするものなのか定義します。 クラスの概念が追加されたことでJavaScriptでもオブジェクト指向の実装が可能となりました。
- モジュール化（importとexport） JavaScriptのコードをモジュール化して読み込むことが可能となりました。 使用したいメソッドやクラスは宣言時にexportを記述することで、後からimportができるようになります。
これまではファイルを読み込んでグローバルな環境で展開していたため同じ変数名を使用することでエラーが起きる原因にもなっていましたが、モジュール化すると他のモジュールとの変数名やクラス名が同じでも問題が起きなくなります。
また、モジュール化することでコードの保守性が向上しますし、メソッドの再利用も可能です。
- アロー関数 アロー関数を使用すると関数を簡潔に記述できます。 簡潔な表記にすることで後から見直しても理解しやすいコードとなり、複数人で開発する際も便利です。
もう1つの特徴としてthisという特別な変数が扱いやすくなります。
thisはJavaScriptでは標準で用意されている変数です。呼び出した場所や呼び出し方で内容が変わるという特徴がありますが、アロー関数を使用すると明示的に参照する内容を記述できます。
- 非同期処理（promise） 非同期処理とは時間のかかる処理などをメイン処理から切り離して別の処理とすることで、複数の処理を同時並行的に行う技術です。
promiseが使用できない頃も非同期処理は可能でしたが、コールバック関数という関数の呼び出し方をしていました。
コールバック関数では非同期処理は増えるほどに階層が深くなるコールバック地獄と呼ばれる問題がありましたがpromiseを使用することでわかりやすく簡潔な記述が可能となりました。
JavaScriptは今後も更新され続ける見込みですが、後方互換性といって過去のバージョンで使えていた機能も変わらず使い続けることが可能です。
毎年書き方が変わると勉強し続けるのが大変と思うかもしれませんが、基礎をしっかりと押さえておけばバージョンが変わっても対応できます。
それでは、次回の記事で実際にプログラミングを書いてみましょう。
プログラミングスクールの選び方
転職を検討中の方向け
フリーランス・副業で活躍したい方向け
教養・キャリアアップしたい方向け
給付金について詳しく知りたい方向け
