Webシステムの開発効率を高めるにはJavaScriptの習得が不可欠だ。今回はJavaScriptの言語仕様「ECMAScript」のなかで、今どきのWeb開発を進めるために欠かせない機能を紹介する。

 今回は今どきのWebシステムで当たり前の処理を実装するための「ECMAScript」の機能を紹介していく。ECMAScriptはWebフロントエンドで動作する唯一のプログラミング言語だ。多くのWebシステム開発で利用されているJavaScriptは、ECMAScriptに基づいた言語である。

 前回は企業システムで普及している米マイクロソフト(Microsoft)のWebブラウザー「Internet Explorer(IE)11」でも利用できる機能を紹介してきた。しかし最近のECMAScriptは進化も早く、IE11に限定しなければ様々な新しい機能を実装可能だ。そこで今回は、現在のWebフロントエンド開発に欠かせないECMAScriptの機能を厳選して紹介する。

簡潔にコードを記述する「アロー関数」

 アロー関数とは、変数に関数を利用する「関数リテラル」を簡便に記述する記法だ。引数に関数を指定する場合に、関数名を指定せずに直接コードを記述する場合などが該当する。

 以下の2つのサンプルは、いずれもbutton要素がクリックされたときの処理を定義している。これまで通りfunctionを使って関数を定義した場合は以下のサンプルコードのようになる。

let button1 = document.getElementById('b1');
button1.addEventListener('click', function() {
  console.log(this); // button 要素のオブジェクト
}, false);

 今度はアロー関数を利用して定義を記述する。

let button2 = document.getElementById('b2');
button2.addEventListener('click', () => {
  console.log(this); // Window オブジェクト
}, false);

 このようにアロー関数を利用すれば簡潔にコードを記述できるが、注意点もある。アロー関数内ではthisの扱いが変わることだ。functionを使って関数を定義した場合thisはbutton要素のオブジェクトになるが、アロー関数を定義した場合はWindowオブジェクトになる。

 thisについてfunctionを使って記述したコードを、後者のアロー関数を使った場合と同じ挙動にしたいときには、次のように「bind()」を使う。

let button3 = document.getElementById('b3');
button3.addEventListener('click', function() {
  console.log(this); // Window オブジェクト
}.bind(this), false);

クラスベースで記述を取り入れる

 ECMAScriptはオブジェクト指向言語だ。しかしJavaのようなクラスベースの言語ではなく、プロトタイプベースの言語である。そのためECMAScriptには、他のオブジェクト指向言語では当たり前の「クラス」という概念がない。

 そこでECMAScriptで、あたかもクラスベースの言語のようにコードが書ける機能が、2015年にリリースされたECMAScript第6版から追加になった。

 次のコードはありきたりだが、Personというクラスを定義し、そのインスタンスを1つ生成している。

class Person {
  constructor( name ) {
    this._name = name;
  }
  get name() {
    return this._name;
  }
  set name(name) {
    this._name = name;
  }
  hello() {
    console.log('Hello! I am ' + this._name + '.');
  }
}

let p = new Person('Taro');
console.log(p.name); // Taro
p.name = 'Jiro';
console.log(p.name); // Jiro
p.hello(); // Hello! I am Jiro.

 コードを見て分かる通り、nameというプロパティにゲッターとセッターを用意している。もし名前を取得したければ、p.nameの値を見ればよいし、名前をセットしたければ、p.nameに値をセットすればよい。

 なおコンストラクターの中では、this._nameに名前をセットしているが、インスタンスからアクセス可能となる。本当の意味のプライベートなプロパティにはならないので、注意してほしい。ECMAScript 第6版ではclassのほか、クラスベースの記述に欠かせないextends(継承)も用意されている。

この先は有料会員の登録が必要です。有料会員(月額プラン)は初月無料!

日経 xTECHには有料記事(有料会員向けまたは定期購読者向け)、無料記事(登録会員向け)、フリー記事(誰でも閲覧可能)があります。有料記事でも、登録会員向け配信期間は登録会員への登録が必要な場合があります。有料会員と登録会員に関するFAQはこちら