身近にある刺激的な言語「JavaScript」

• 

  MozillaによるJavaScriptの解説サイト

JavaScriptとは？

JavaScriptは、Webブラウザに標準で搭載されているプログラミング言語です。JavaScriptのプログラムを実行するために、特別な開発ツールを用意する必要はありません。基本的に、インタプリタ型の言語であり、プログラムを書いたら、ブラウザ上でそのまま実行することができます。その文法は、シンプルで覚えやすいため、初心者にも優しく、「最初に覚えると良いプログラミング言語」としても有力です。とは言え、非常に表現力や自由度が高く、初心者だけでなく、多くのプロにも愛されています。

JavaScriptの歴史は意外と古い

そもそも、JavaScriptの歴史は、Webブラウザの歴史と重なります。画像が表示できる最初のWebブラウザMosaicが登場したのは1993年ですが、JavaScriptが登場するのは、そのわずか2年後の1995年で、Netscape Navigator2.0に搭載されました。つまり、原稿執筆時点(2018年)で既に23年の歴史があることになります。

しかし、その長い歴史の中で、JavaScriptは何度も危機に面しています。その初期には、WebブラウザごとにJavaScriptの動作が異なるという問題がありました。開発者はブラウザごとにプログラムの調整しなくてはならず、とても大変でした。また、JavaScriptが無意味に乱用され、セキュリティ的な不安が高まると、JavaScriptを無効にした方が良いと勧められた時代もありました。現在では、JavaScriptの標準化団体Ecma Internationalによって、ECMAScriptという仕様がまとめられており、異なるブラウザでも同じように動かすことができるようになりました。また、JavaScriptを安全に実行するための制限や仕組みも多く備わっています。

そうした危機を乗り越えて、現在JavaScriptは大いに活用されています。地図、メール、SNSなど、多くのWebアプリケーションで使われています。近年、Webアプリケーションの中でJavaScriptが担う役割が大きくなっているため、2015年に発表された規格、ECMA2015(ES6)では、言語機能に対して大きな拡張が行われました。クラスやモジュール、ジェネレータ、アロー関数と言った便利で先進的な機能が追加されました。

JavaとJavaScriptは全く違う言語

ちなみに、JavaScriptが誕生した1995年というのは、プログラミング言語Javaが非常に流行した年でした。それで、Netscape社は、開発したプログラミング言語に「JavaScript」という名前を付けました。Javaの開発元であるサン・マイクロシステムズ社と業務提携していた事も理由でした。多くの人が勘違いしていますが、名前が似ているだけで、JavaとJavaScriptは全く違うプログラミング言語なので、注意しましょう。

JavaScriptから新技術がたくさん生まれている

ところで、筆者もJavaScriptが大好きで、仕事だけでなく趣味でもJavaScriptを使っています。なぜ、そんなに好きなのか言うと、JavaScriptが非常に柔軟性に富んだ言語である上に、日々、JavaScriptを使った面白い新技術が登場しているからです。

まず、JavaScriptそのもののバージョンアップがあります。先ほど紹介したECMA2015以降、毎年、新しい機能が追加されています。しかし、それ以上に面白いのが、JavaScript周辺技術です。JavaScritpを効率的に使うために、AngularJS、Vue.js、Reactなどのフレームワークが次々と登場しています。また、スマートフォンのアプリを作るためのJavaScriptフレームワークのPhoneGapやReact Nativeがあり、PC向けのアプリをJavaScriptで作るElectronもあります。そして、Webサーバーやバッチ処理を作るのに便利なNode.jsがあります。このように、便利で面白いJavaScriptの周辺技術を数え上げたらキリがありません。

JavaScriptを実行するには？

コンソールを使う方法

さて、Webブラウザさえあれば、JavaScriptを実行できますが、どのようにJavaScriptを実行したら良いでしょうか。PCであれば、JavaScriptコンソールを起動して、その中でJavaScriptを動かすことができます。

例えば、PC版のGoogle Chromeであれば、Webブラウザを起動したら、画面右上のポップアップメニューから[その他のツール > デベロッパーツール]をクリックします。すると、デベロッパーツールが起動するので、ツールの上部にある[Console]をクリックします。

• 

  PC版のChromeでコンソールを起動する方法

すると、JavaScriptコンソールが表示されます。「>」と書かれた部分にJavaScriptのプログラムを書くことで、プログラムを実行できます。例えば、以下のように、計算式を書いて、[Enter]キーを押してみましょう。

1 + 2 * 3

すると、記述したプログラムのすぐ下に「7」と表示されます。つまり、「1 + 2 * 3」というプログラムが実行されて、実行結果の「7」が表示されます。

Webサービスを使う方法

また、別のJavaScriptを実行する方法ですが、テキストエディタに書いたプログラムを、Webサーバーにアップロードし、そこへWebブラウザでアクセスするという方法もあります。しかし、せっかく、スマートフォンやタブレットでも、JavaScriptを動かすことができるのですから、もっと気軽にJavaScriptを始めたいと思いませんか。

そんな時のために、Webブラウザ上でHTML/JavaScriptを編集するWebサービスがあります。それが、「JSFiddle」や、「jsdo.it」などです。ここでは、jsdo.itを利用してみましょう。

まず、jsdo.itのサイトにアクセスします。そして、[Start coding]のボタンをクリックしましょう。

• 

  jsdo.itのWebサイト

すると、ログイン画面が表示されます。そこには、Yahoo!やGoogle、facebookなどのWebサービスのバナーの一覧が表示されます。そこで、自分が持っているIDのサービスを選んでログインします。ログインすると、次のようなコードエディタが表示されます。

• 

  jsdo.itのエディタ

もし、HTMLやCSSのタブがアクティブになっていれば、[JavaScript]のタブをクリックすると、JavaScriptのプログラムを記述することができます。プログラムを書いたら、画面右側の実行アイコンをクリックすると、JavaScriptが実行されます。

FizzBuzzのプログラムを書いてみよう

ここでは、JavaScriptの雰囲気を確認するために、FizzBuzzのプログラムを書いてみましょう。jsdo.itでプログラムを書いたら、画面上部の[Saved]ボタンをクリックします。すると、自動的にプログラムが実行されます。

 // 引数nの値を確認してFizzBuzzか値を返す --- (*1)
 function check (n) {
     if (n % 3 === 0 && n % 5 === 0) return 'FizzBuzz';
     if (n % 3 === 0) return 'Fizz';
     if (n % 5 === 0) return 'Buzz';
     return '' + n;
 }
 // 1から100まで繰り返し続ける --- (*2)
 var result = '';
 for (var i = 1; i <= 100; i++) {
     result += check(i) + "<br>\n";
 }
 // 結果をjsdo.itのデフォルトに出力 --- (*3)
 document.getElementById('helloWorld').innerHTML = result;

実行すると、以下のように表示されます。

• 

  JavaScriptのFizzBuzz

プログラムの(＊1)では、関数check()を宣言します。この関数は、引数nの値に応じた、FizzBuzzの答えを返します。そして、(＊2)の部分では、1から100まで繰り返す、関数checkを呼び出し、その戻り値を変数resultに追記します。そして、最後(＊3)の部分で、変数resultの値を画面に出力するようにします。

まとめ

ここまでの部分で、JavaScriptについて簡単な紹介をしました。なんと言っても、JavaScriptは、Webブラウザさえあれば動かすことができると言うのが良い点です。JavaScriptを覚えるなら、身近なスマートフォンやタブレットでも動かすことができるからです。また、日々、新しい技術がJavaScriptから生まれているので、目が離せません。