JavaScriptやその仕様であるECMAScriptは年々進化しています。ネットで検索すると5年くらい前のコードも見つかるので、ついそのまま使ってしまいがちですが、書き方が古いままになっていることもよくあります。

古い書き方の場合、思わぬ不具合につながったり、メンテナンスのしづらいスパゲティコードになってしまいがちです。ハイブリッドアプリでは対象となるWebブラウザが最新のChromeやSafariをベースにしていますので、新しいJavaScript構文も積極的に取り入れられます。この記事ではそうしたモダンな構文の書き方とそのメリットを解説します。

let/constを使った変数宣言

かつてのJavaScriptでは変数宣言としてvarを使っていました。

このvarは今も使えますが、現在は推奨されていません。代わりに let / const を使います。

let

let は変更できる変数を定義します。なおかつ、JavaScriptのブロック(波括弧)内でのみ有効(スコープといいます)な変数になります。ブロック外には影響しないので、自分が期待している場所以外では利用できない形に制御できます。

関数の中でletを使うことで、その関数の中でしか使えない変数にできます。

そして、letで定義された変数は上書きできます。

基本的に、従来varで定義していたものはletに置き換えできるでしょう。

const

さらにJavaScriptでは変数はletではなくconstでの定義を推奨しています。constはletと異なり上書きできません。

上書きできないということは、定義した変数の内容が変わらないのが保証されるので、定数などにも向いています。ただし、配列は追加や削除できたり、オブジェクトはキーの追加、変更ができるので注意してください。

オブジェクトも同様です。

関数でも利用できます

JavaScriptの関数は繰り返し定義可能で、上書きできてしまいます。

関数名が重複していたために思わぬ動作不具合に繋がるのを防止する目的としてconstを使うこともできます。

このようにlet/constを使うことで、規模が大きなJavaScriptソースであっても安全に、メンテナンスしやすいコードを維持できます。

class構文

JavaScriptには元々クラスという概念がなく、functionを使った擬似的クラスでコーディングされていました。しかし最近ではクラスが使えるようになっています。ECMAScript 2019では # を使ってプライベート変数(クラス内だけで参照できる変数)も定義できるようになっています。

使い方は class でクラスを定義し、new (クラス名) で利用可能になります。

継承も可能です。

継承したメソッドはもちろん、新しいクラスからのみ使えます。

class構文を使うことで、アプリ内の機能をまとめることができたり、別な画面でも利用する同じような機能を再利用しやすくなります。ぜひ積極的に使ってみてください。

アロー関数(Arrow Functions)

JavaScriptでは関数を定義する際には function を使うのが一般的です。

それに対してアロー関数は () => という形を取ります。

細かな違いは色々ありますが、一番大きな違いは通常の関数とアロー関数はthisの扱いがまったく異なります。functionで書いた場合には次のようになります。DOMをクリックしたタイミングでは対象になるDOM(h3)が取れますが、fetchした後はWindowオブジェクトに変わっています。このthisの取り扱いが異なるところがJavaScriptの難しさに感じるでしょう。

これがアロー関数を使った場合、DOMではなくWindowオブジェクトが返ってくるようになります。

他にも、アロー関数の場合は引数が一つの場合は括弧を省略して書けます。

これは次のように書けます。

さらに一行でデータを返却する場合には波括弧とreturnを省略できます。つまり下記のように記述できます。

分割代入(Destructing Assignment)

関数などの返却値としてオブジェクトを返すことがあると思います。例えば複数の値をまとめて返したい時です。

この時、返り値を波括弧で受け取ることができます。

存在しないキー名を指定してもエラーにはなりませんが、変数の内容は存在しません。下記の例の場合 const で指定していますので、変数dには別な値を設定できません。

分割代入はオブジェクトだけでなく、配列でもできます。

この場合は変数名は決まったものではなく、前から順番に代入されます。

あらかじめキー名が分かっているオブジェクトを扱う場合、返却される配列の要素数が分かっている場合などに便利です。

配列展開(Array Spread)

例えばある数の集合の中で最大の数を見つけるのに使うのがMath.max関数です。この関数は次のように使います。

数を並べないといけないのですが、この数がプログラミングによって可変で変わる場合はどうしたらいいでしょうか。昔は次のように書いていました。

これを簡単にしてくれるのが配列展開です。配列の内容を引数に展開してくれる仕組みです。 ... を使います。

同じような例として配列の連結にも使えます。

上記の例ではaryを再代入しているのでletを使っていますが、次のようにすればconstが使えます。

これは配列だけでなくオブジェクトでも利用できます。オブジェクトをコピーするのに便利です。

テンプレート文字列(Template Strings)

テンプレート文字列はこれまでのサンプルコードでも何回か登場しています。これまで、文字の中に変数の内容を入れる場合には次のようにしなければなりませんでした。

この方法の場合、文字列の中に"(ダブルクォート)や'(シングルクォート)を入れたい時に不便だったり、+を使って文字列を連結するのでコードが見づらくなります。例えばHTMLを文字列で作る際に、次のようなコードを書いた経験は誰しもあるのではないでしょうか。

シングルクォートとダブルクォートの使い分けも面倒ですし、文字列が分かれてしまうので閉じタグをミスしてしまったりします。これを防げるのがテンプレート文字列になります。上記のHTMLの例の場合、次のように書けます。

利用するのは(バッククォート)になります。その中では${} を使ってJavaScriptが書けます。変数をそのまま展開するのはもちろん、計算式も入れられます。

テンプレート文字列の場合、改行も利用できます。この点も便利です。

まとめ

このようにJavaScriptはモダンな書き方が多数用意されています。昔ながらの書き方も使えますが、コード量を短くしたり、全体の見通しをよくするためにモダンな書き方を積極的に取り入れていくべきです。

他にもJavaScriptには多くの構文がありますので、ぜひ学んでみてください。

JavaScript reference - JavaScript | MDN