Javascriptチュートリアル

#Javascript入門
##Javascriptとは
Javascriptは、Webページの要素を相互作用させるために最初に設計されたプログラミング言語です。
Webブラウザ上では、Javascriptは以下の３つのパートから構成されています。

• ECMAscript：コア機能を提供する
• Document Object Model(DOM)：Webページの要素を相互作用させるインターフェイスを提供する
• Browser Object Model(BOM)：Webブラウザを相互作用させるAPIを提供する

Javascriptを使用することにより、Webページに対話機能を持たせることができます。
Javascriptはよく以下の機能を追加するためHTML及びCSSと一緒に使用されす。

• フォームの検証
• インタラクティブマップの作成
• アニメーションの表示

HTML及びCSSがダウンロードされ、WebページがロードされるとWebブラウザ上のJavascriptエンジンがJavascriptコードを実行します。JavaScriptコードは、HTMLとCSSを変更して、ユーザーインターフェイスを動的に更新します。

Javascriptエンジンは、Javascriptコードを実行するプログラムです。Javascriptエンジンはインタープリターとして実装されている。しかし、最近のJavascriptはパフォーマンスを良くするためJavascriptをバイトコードにコンパイルする方法として、実行時コンパイラとして実装されています。

####クライアントサイド及びサーバサイドJavascript

JavascriptがWebページ上で使用される際、ユーザコンピュータのWebブラウザ上でJavascriptが実行される。
この場合、Javascriptはクライアントサイドとして機能していることになります。
一方、Javascriptサーバ上でも動作させることができます。
その代表的なものがnodejsになります。
サーバサイドJavascriptを使用すれば、DatabaseやFilesystemにアクセス可能となります。

####Javascriptの歴史

Javascriptは1995年、Netscapeの開発者であるBrendan Eichによって開発されました。
最初はMochaと名付けられその後、Livescriptと変更されました。
Netscapeは当時人気だったJAVAの名声を活用するため、名前をLivescriptからJavascriptに変更しました。
その決定は、Netscape社のWebブラウザであるNetscape Navigator 2をリリースする直前にされました。
その結果として、Javascriptはversion1.0で投入されます。

Netscape社はNetscape Navigator 3上でJavascript1.1をリリース。
その間、Netscape社と競争関係にあったMicrosoft社はWebブラウザであるInternet Explorer 3をリリース。
しかし、Internet ExplorerはJscriptと呼ばれるJavascript実装をしていたため、
Microsoft社はライセンス問題を避けるため、Jscriptと名付けて使用していた。

結果として、Netscape NavigatorにおけるJavascript及びInternet ExplorerにおけるJscriptという２つの異なったJavascriptが市場に投入されることとなりました。
Javascriptは構文と機能が標準化されていなかったため、標準化する必要があった。

1997年にJavascript1.1がEuropean Computer Manufacturers Association (ECMA) に提出された。
Technical Committee #39 (TC39)は、汎用・クロスプラットフォーム・ベンダー中立言語として割り当てた。
TC39は、ECMAScriptという新しいスクリプト言語を定義したECMA-262を思い出した。

その後、ISO/IECはISO/IEC-16262標準としてECMAscriptを採用した。

####Javascriptの概要

Javascriptにおける変数の定義として、varキーワードが使用できます。

var x = 10;
var y = 20;

ES6では新たな変数の定義方法として、letキーワードがが追加されました。

let x = 10;
let y = 20;

関数を定義するには、functionキーワードを使用します。
以下の例では、２つの引数の合計を計算しています。

function add( a, b ) {
   return a + b;
}

add関数を呼び出すには以下のように記載します。

let result = add(x, y);

結果をWebブラウザに表示させるには、console.log()関数を使用します。

console.log(result); 

Javascriptにはif構文やswitch構文のような条件文を記載できます。

let a = 20, 
    b = 30;

function divide(a, b) {
    if(b == 0) {
       throw new Exception('Division by zero');
    }
    return a / b;
}

divide関数で、bが0かどうかチェックし、0であれば何もせず0以外であれば a / bを実行します。
要素を指定して配列を作成するには、角かっこで要素を囲んで記載します。

let items = [1, 2, 3];

配列の中の要素の数にアクセスするには、lengthプロパティを使用します。

console.log(items.length);

配列の要素の数の分繰り返すには、以下のようにfor loop構文を使用します。

for(let i = 0; i < items.length; i++) {
    console.log(items[i]);
}

Javascriptでclassを宣言するには、functionキーワードを使用します。

function Person(firstName, lastName ){
    this.firstName = firstName;
    this.lastName = lastName;
}

class名は、最初の文字が大文字で記載されたUpperCamelCaseで作成すべきである。

以下の例では、Person classのメソッドが宣言されている。

Person.prototype.getFullName = function(){
    return this.firstName + ' ' + this.lastName;
}

Person classのインスタンスを作成するために、newキーワードを使用しています。

let john = new Person('John','Doe');

classのメソッドを呼び出すために、(.)オペレーターを使用します。

let fullName = john.getFullName();

ES6ではJavascriptでclassを宣言するために、classキーワードを使用します。

class Person {
    constructor(firstName, lastName) {
        this.firstName = firstName;
        this.lastName = lastName;
    }
    getFullName() {
        return this.firstName + ' ' + this.lastName;
    }
}

ここまではJavascriptのいくつかの機能を紹介してきましたが、後に続くチュートリアルで詳細について述べていきます。
是非、Javascriptの学習を楽しんでください！！