こんにちは、大学院でIT系の研究を専攻している、ひらりんです。
JavaScriptは、Webページにて様々な機能を搭載したり、操作する際に使用されるプログラミング言語です。HTMLとCSSによって、Webページの表面上の制作は行えますが、JaVaScriptによってサイトを動的にすることができます。プログラミング言語人気ランキングの上位にも挙がり、エンジニアやプログラム初学者など、幅広い対象者が押さえておきたい言語のひとつです！
本記事では、そんな人気なJavaScriptの最新バージョンについてご紹介します。果たして、2020年にはどのような新機能が加わったのでしょうか。プログラミング言語のアップデートは、どこまで把握しておくべきか迷いますよね。ここだけは押さえておきたい新機能や変更点を解説するので、JavaScriptを学習している方や、JavaScriptを用いてWebページを制作する方は、ぜひ読んでみてください。
目次
JavaScriptとは？
JavaScriptは、オブジェクト指向のプログラミング言語で、1990年代にLiveScriptという名前で開発されました。その後、名称が変更されて一般向けへとなり、今のJavaScriptとなっています。
私たちが普段使用しているWebページは、画面が動いたり、入力フォームに情報を書き込むだけで登録出来たりしますよね。これらはだいたい、JavaScriptによって動いています。HTMLやCSSだけでWebページはたしかに作れますが、ユーザビリティやグラフィックを追求する際には欠かせない言語です。様々な機能を搭載できる分、理解しておくべき概念や言語が複雑になり、使いこなせるようになるには少し時間がかかりがちな面もあります。
JavaScriptの最新バージョンは？
JavaScriptの仕様は、毎年6月頃にECMA総会によってアップデートされます。2020年現在の最新仕様は、ES2020（ECMAScript2020）です。
JavaScriptは、2015年前後の仕様によって、大きく仕様が変わります。2014年以前のES2014（ECMAScript2014）などは、現在あまり使われていない比較的古いブラウザ用に設計されています。そのため、古いブラウザでも対応させたい場合は、最新バージョンも含めたES2015からES2020にかけては、JavaScriptファイルを互換性のある形式（ECMAScript5など）に変換する必要があります。言い換えると、現在はES2015以上の仕様によってJavaScriptを書くことが求められてます。
プログラミング言語は、JavaScriptだけでなくPythonなどの多くの言語が随時アップデートを繰り返してます。しかし、アップデート内容をすべて網羅するのは大変ですよね。次の章からは、JavaScriptの最新バージョンであるES2020の主な新機能についてご紹介します。
最新仕様で押さえておきたい新機能3選！
JavaScriptの最新仕様であるES2020では例年通りのアップデートが実施されました。ここではその中でも、よく使いそうなアップデート点を3つ解説します。なお、ES2020の新機能については、Google Chromeのv80以降で確認できます。
Dynamic import
開発では、アプリケーションが大きくなるにつれて煩雑になっていくため、分割にするモジュールを作ります。Dynamic importは、モジュールをimport()関数で読み込めます。使い方やメリットを、実際のプログラムの新旧バージョンを比較しつつ解説します。
ここでは、以下のようなサブクラスのsample.jsを定義します。このモジュールが読み込まれ、メソッドが実行されると、「サンプル」と表示されます。
|
1 2 3 4 5 6 |
// sample.js export class Sample { sub() { export const con = 'サンプル'; } } |
このsample.jsを、ES2019以前のバージョンでは以下のようなプログラムで読み込んでいました。
|
1 2 3 4 |
// ES2019以前の仕様 import {sample} from './sample.js' console.log(sample.sub()); |
従来のimport()関数は、モジュールの読み込みは即座に行われ、JavaScriptのトップレベルのみでしか使用できません。そのため、巨大なモジュールだったりした際に、任意のタイミングで読み込むことができませんでした。
最新バージョンのDynamic importは、好きなタイミングでモジュールが読み込めるという点が最大のメリットになります。上記のように、sample.jsモジュールを読み込むプログラムは以下の通りです。
|
1 2 3 4 5 6 |
// ES2020 最新バージョン import('./sample.js') .then(module => { // 動的にsampleモジュールの読み込み console.log(sample.sub()); }); |
この他にも、async関数などを用いることで、モジュール読み込み開始時間を指定することなども可能です。
Dynamic importによって、必要な時に必要な分だけモジュールを読み込めるため、巨大なモジュールは遅延させてロードさせることなどができます。そうすることで、Webページのコンテンツ展開の際に遅延ロードなどが可能になり、処理負荷が軽減されるメリットがあります。
Optional Chaining for JavaScript
エンジニアなどは、顧客のデータベースやAPIからデータを取得する際に、JavaScriptのデータフォーマットのJSON形式のデータを読み取るといったことを行います。しかし、データが綺麗に整形されておらず、欠損データがあるなんてことは日常茶飯事です。欠損値があったときに、いちいちプログラムがエラー状態になっていたらたまりませんよね。Optional Chainingはその問題を解決できます。ここでは、以下のような顧客データがあるとします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// データ例1 const kokyaku = { user: 'Tom', address: { town: 'Yokohama' }, }; // データ例2 const kokyaku = { user: 'Ami', address: {} }; |
ここでは、TomのtownデータにはYokohamaが記録されていますが、Amiはまだaddressを登録していません。このデータを読み込む際、以前は以下のように書いていました。
|
1 2 3 |
// ES2019以前 const town = kokyaku.address && kokyaku.address.town; console.log(town); |
これを実行すると、データ例1を読み込んだときは、Yokohamaと表示されますが、addressを登録していないデータ例2を読み込んだときは、「townが定義されてない」というエラーが表示されます。
最新バージョンのOptional Chainingでは、データが格納されていなかったり定義されていなくても、エラーにならずにプログラムを回せます。エラーにならないためには、?.を用いて以下のように記述します。
|
1 2 |
const town = kokyaku.address?.town; console.log(town); |
この結果、データ例1では問題なくtownが表示され、addressを登録していないデータ例2では、undefinedとなり、エラーにはなりません。これにより、エラー発生を考慮したプログラムを組む必要がなくなり、負担が軽減することが期待されます。
Nullish Coalescing for JavaScript
最後はNullish Coalescingと呼ばれるメソッドです。Optional CHainingと少し似ていて、データがない状態のnullやundefinedのときのみ、指定した値を返せます。先ほどの顧客データを読み取るプログラムで比較してみましょう。従来のプログラムでは、以下のように条件文を用いて記述する必要がありました。
|
1 2 |
// ES2019以前 const town = kokyaku.address.town != null ? kokyaku.address.town : 'なし'; |
最新仕様では簡易に記述できるのが魅力です。??を用いて以下のように使います。
|
1 2 |
// ES2020 const town = kokyaku.address.town ?? 'なし'; |
わずかにこの分量で、もしユーザがaddress登録してなかったら、「なし」と値を格納できます。そこまで大きな変化か？とも思いますが、遅延評価されており、パフォーマンスが少し改善されることが期待されます。
まとめ
いかがでしたでしょうか？今回は、JavaScriptの最新バージョンのES2020について説明しました。
毎年、少しずつアップデートがあるJavaScriptですが、使用頻度が高い仕様について把握しておくと、作業効率がアップすること間違いなし！
ぜひ、JavaScriptの最新バージョンをチェックし、Webサービス作成やシステム構築に活かしてください。
