ブラウザでうごく！ ES6+ モダンJavaScript

なぜES6+を学ぶのかブラウザで動かしたい人 IE対応を考えるとES5の範囲で使っていたほうがよかったので、ES6に乗り遅れた人は多いのでは別の言語といってもいいくらい進化しているので積極的に使いたい TypeScriptを学びたい人中〜大型のフロントエンドやバックエンドでTypeScriptの採用が増えている TypeScriptはES6以降のJavaScriptに型付け機能を追加した言語であるから、ES6自体の知識が前提 TypeScriptとES6を同時に学ぼうとすると範囲が広すぎて学習効率が悪い

ES6とは何か IE11にも搭載されているJavaScriptの仕様は ECMAScript 5.1 (ES5) JavaScriptは ECMAScript 6 (ES2015) で大規模に拡張された
その後ES2016, ES2017, …ES2022 と毎年バージョンアップしている (太古) IEでも使えるようにBabelなどでES5に変換（トランスパイル）して利用していた (昔) TypeScriptの処理系にES6->ES5のトランスパイル機能が含まれている (Babel終了) (現在) IEが無くなったのでもうES5を使う必要はないなんと、すでに主要なブラウザでネイティブに最新のES2022が利用可能 ES5との区別から「ES6」と言いがちだが、実際には最新のES2022を使ってok 今日お話しする機能はすべてブラウザだけで利用可能です

これだけは知っておこうES6+ let & const (ES6) オブジェクト初期化子の略記法 (ES6) アロー関数 (ES6) class
構文 (ES6) 関数のデフォルト引数 (ES6) テンプレートリテラル (ES6) 分割代入 (ES6) スプレッド構文 & 残余構文 (ES6) for … of 構文 (ES6) Promise (ES6) async / await 構文 (ES2017) ESモジュール (import & export) (ES6) オプショナルチェーン演算子 (ES2020)

前提知識: JavaScriptの特徴 JavaScriptは次の2つが特徴的ですオブジェクト = 連想配列 JavaScriptのオブジェクトは「クラスの実体」のことではない RubyでいうHash（他言語だとDictionaryとか）ですなんでも変数関数も変数に入れられる
オブジェクト（連想配列）の要素に関数を入れればメソッドになる obj = { prop1: '', method1: function() { return 'hello'; } }; console.log(obj.method1()); //=> "hello"

let & const

変数宣言 let と const は var に代わる変数宣言構文（ちなみにIE11でも使える） // var
( 非推奨) var num = 1; // let ( 再代入可能) let num = 1; num = 2; // OK // const ( 再代入不可) const num = 1; num = 2; // NG

varとlet/const：スコープの違い注意！ var と let は同じものではない var は関数レベルのスコープ let
/ const はブロックスコープ if (true) { var x = 1; }; console.log(x); //=> "1" if (true) { let x = 1; }; console.log(x); //=> Uncaught ReferenceError: x is not defined

varとlet/const：巻き上げの違い宣言より前に変数を参照した時の挙動が違う var は変数が宣言され undefined が代入される let / const
は変数が宣言されるが初期化されない ※ 実際には変数宣言は使う前に書くべきなので、あまり意識することはないが if (true) { console.log(x); var x = 1; //=> undefined } if (true) { console.log(x) //=> Uncaught ReferenceError: Cannot access "x" before initialization let x = 1; }

var/let/const の使い分け基本は const 必要な時だけ let var は使わない（直感的でなく不具合を起こしやすい仕様） var から
let への単純な置換は挙動の違いがあるので注意基本的には let ではなく const を使うどうしても再代入が必要な時だけ let を使うできるだけ変数に再代入しないロジックが望ましい読むのに負担になるし、バグが入りやすくなるので

オブジェクト初期化子の略記法

オブジェクト初期化子の略記法代入先のプロパティ名と代入する変数名が同じ場合は変数名を省略できるようになった次のように書ける分かりにくい記法だが、頻出するので知らないと悩むことになる（Ruby 3.1 でも似た記法が導入されたが、個人的にはあまり好きじゃない） const name =
"Hello"; const object = { name: name }; const name = "Hello"; const object = { name };

アロー関数

3種類の関数定義関数定義は3種類の書き方ができるようになった // 関数宣言 function calcDouble(a) { return a *
2; } // 関数式 const calcDouble = function(a) { return a * 2; }; // アロー関数 const calcDouble = (a) => { return a * 2; };

従来型関数宣言の特徴：巻き上げ関数宣言のときだけちょっと挙動が違う関数宣言は宣言より前でも使うことができる（だいたい他の言語でも同じ）関数式やアロー関数は定義より前では使えない（変数なので代入前には使えない） ※ 他の言語にはあまりない特徴で間違いやすいので注意 console.log(calcDouble(5)); //=> "10"
function calcDouble(a) { return a * 2; } console.log(calcDouble(5)); //=> Uncaught ReferenceError: calcDouble is not defined const calcDouble = function(a) => { return a * 2; };

関数宣言や関数式で作った関数内の this メソッドを一度別の変数に入れて呼び出すなど、メソッド記法以外の方法で呼び出すと this が変わってしまう this.data = " グローバル"; const
func = function() { console.log(this.data); }; const f = { data: " オブジェクト内", execute: func }; f.execute(); // => " オブジェクト内" // ↑ レシーバである「f 」がthis になる func(); //=> " グローバル" // ↑ レシーバがないので外側のthis と同じになる const func2 = f.execute; func2(); //=> " グローバル" // 同じメソッドを実行しているのに結果が違う！！

アロー関数内の this 常に宣言時のスコープの this this.data = " グローバル"; const func
= () => { console.log(this.data); }; const f = { data: " オブジェクト内", execute: func }; f.execute(); //=> " グローバル" func(); //=> " グローバル"

アロー関数の省略形 {} や return を省略して1行で簡潔に書ける普通の書き方省略形 const calcDouble =
(a) => { return a * 2; }; const calcDouble = (a) => a * 2;

関数宣言/関数式/アロー関数の使い分けアロー関数をおすすめ！ this が扱いやすい記述が簡潔省略形でさらに簡素

class 構文

ES5時代のクラス ES5でもクラスは作れる使うときは普通にクラスっぽく使えるけど、定義のほうが分かりにくい。 function User(lastName, firstName) { this.lastName = lastName;
this.firstName = firstName; } User.prototype.getFullName = function() { return this.firstName + this.lastName; } var u = new User(" 土方", " 歳三"); console.log(u.getFullName()); //=> " 土方歳三"

ES6のclass宣言普通な感じで書ける（継承もできる）オーソドックスで扱いやすいクラス機能詳しい機能は割愛します class User { constructor(lastName, firstName) { this.lastName
= lastName; this.firstName = firstName; } getFullName() { return this.firstName + this.lastName; } } const u = new User(" 土方", " 歳三"); console.log(u.getFullName()); //=> " 土方歳三"

class式関数と同様に式で定義することもできるあまり使う機会ははなさそう関数と同じようにクラスも動的に変数に入れられるということは覚えておいて const User = class { constructor(firstName,
lastName) { this.firstName = firstName; this.lastName = lastName; } ...

関数のデフォルト引数

関数のデフォルト引数関数の引数が省略されたときにデフォルト値を使いたい場合、従来はこうやってがんばる必要があったそれがこう書けるようになったいままでできなかったのがおかしい（便利！） function multiply(a, b) { if (typeof
b === "undefined") { b = 2; } return a * b; } function multiply(a, b = 2) { return a * b; }

テンプレートリテラル

テンプレートリテラルいわゆるヒアドキュメント。文字列の中に式展開できる従来は文字列結合するしかなかったこう書けるようになった。バッククォートで囲う言語によっては数十年前から当たり前の機能だがようやく var name = " 近藤勇";
console.log(" こんにちは、" + name + " さん！"); const name = " 近藤勇"; console.log(` こんにちは、${name} さん！`);

テンプレートリテラル（応用）改行も入れられるが、Rubyのヒアドキュメントほど高機能ではなく、インデントを無視してくれる機能などはないいい感じにするためには、自力で加工する必要がある (() => { const html =
` <ul> <li>foo</li> <li>bar</li> </ul> `.replace(/^\n|\s+$|^ {4}/gm, ""); console.log(html); })();

分割代入

配列の分割代入配列から順番に値を取り出して別個の変数に代入 Rubyとか他の言語でも大抵こんな感じのことはできますね const arr = [1, 2, 3, 4,
5]; const [var1, var2] = arr; console.log(var1); //=> "1" console.log(var2); //=> "2"

オブジェクトの分割代入オブジェクトからプロパティを取り出して別個の変数に代入左辺の変数名と同じ名前のプロパティを取り出して代入する以下と同じ意味オブジェクトの中身を一気に変数に取り出して扱うのに便利初見で理解しにくい書き方だが、多用されるので覚えておきたい Reactなどでも多用される。知らないと理解不可能になる const { foo,
bar } = obj; const foo = obj.foo; const bar = obj.bar;

分割代入：その他他にも色々細かいことができてかなり強力な機能ネストしたオブジェトのプロパティを取り出すこともできる（難解だが）デフォルトを指定することもできる const nested = { obj:
{ foo: "hello", bar: "world" } } const { obj: [foo] } = nested; console.log(foo); //=> "hello" // プロパティobj.foo が存在しなければ99 が代入される const { foo = 99 } = obj;

スプレッド構文 & 残余構文

配列のスプレッド構文配列を展開して別の配列に埋め込む配列の複製、結合などが直感的に書ける使いやすい機能！ const foo = [1, 2]; //
配列を複製 const bar = [...foo]; //=> [1, 2] // 要素を追加した新しい配列を作成 const baz = [...foo, 3, 4]; //=> [1, 2, 3, 4] // 配列を結合 const hoge = [...foo, ...bar]; //=> [1, 2, 1, 2]

オブジェクトのスプレッド構文配列の場合と同じように操作できる const foo = { a: 1, b: 2
}; // オブジェクトを複製 const bar = { ...foo }; //=> { a: 1, b: 2 } // プロパティを追加した新しいオブジェクトを作成 const baz = { ...foo, c: 3 }; //=> { a: 1, b: 2, c: 3 } // オブジェクトを結合 const hoge = { ...foo, ...{ c: 3, d: 4 } }; //=> { a: 1, b: 2, c: 3, d: 4 }

引数のスプレッド構文配列を展開して引数に渡せる function sum(x, y, z) { return x +
y + z; } const numbers = [1, 2, 3]; const result = sum(...numbers); console.log(result); //=> "6"

引数の残余構文（レスト構文）スプレッド構文の逆で、不定数の引数を集約する function sum(...args) { let total = 0; for
(let arg of args) { total += arg; } return total; } const result = sum(1, 2, 3); console.log(result); //=> "6"

for … of

ES5: foreachしたい(1) for … in 構文オブジェクトのキー（配列のインデックス）が返る順序は保証されないオブジェクト（連想配列）用という感じ。配列でも使えるが不向きでもオブジェクトを回すときは
map などを使うことのほうが多そう const array = ["value1", "value2", "value3"]; for (let index in array) { console.log(array[index]); }

ES5: foreachしたい(2) forEach 高階関数 for文ではないので break, continue が使えないループを途中で止められない returnすることでcontinue的なことはできる
インデックスを取得することができる（メリット） const array = ["value1", "value2", "value3"]; array.forEach(function(elem) { console.log(elem); }); const array = ["value1", "value2", "value3"]; array.forEach(function(elem, index) { console.log(index + ": " + elem); });

ES6: foreachしたい(3) for … of 構文今までまともなforeachがなかった ES6で普通のforeach構文が使えるようになった for文のバリエーションなので、break, continue
も使える const array = ["value1", "value2", "value3"]; for (let elem of array) { console.log(elem); };

foreachの使い分け配列をループして要素を処理したいときは for … of が扱いやすいインデックスがほしいときは forEach がスマートオブジェクトのプロパティを処理したいときは
for … in ただし map や filter のほうが適しているケースが多い

Promise

Promise以前の非同期処理（コールバック地獄）処理が終わったらコールバック関数を呼び出す高階関数実装非同期関数の戻り値をさらに非同期関数に渡す…、ということをしていくと、ネストがエグいことになっていく function aFunc(val, callback) { // .. 時間のかかる処理..
callback(val * 2); } function sampleAsync() { aFunc(100, function(val) { console.log(val); //=> "200" aFunc(val, function(val) { console.log(val); //=> "400" aFunc(val, function(val) { console.log(val); //=> "800" }); }); }); }

Promiseでの解決 Promiseオブジェクトを返却する実装。メソッドチェーンで並列に書ける const aFunc = (val) => { return new
Promise((resolve) => { // .. 時間のかかる処理.. resolve(val * 2); }); }; const sampleAsync => () { aFunc(100) .then((val) => { console.log(val); //=> "200" return aFunc(val); }) .then((val) => { console.log(val); //=> "400" return aFunc(val); }) .then((val) => { console.log(val); //=> "800" }); };

async / await ES2017からはさらに簡単に、同期関数のように自然に書くことができるようになった await を付けてPromiseを呼ぶと結果が来るまで待ってくれる（超便利） await は async のついた関数の中でのみ使用可能なので、無名関数でラップするテクニックが多用される
ES2022からこの制約が緩和。トップレベルからの呼び出しの場合は async 関数でラップする必要はなくなった const sampleAsync = async () => { let val = await aFunc(100); console.log(val); //=> "200" val = await aFunc(val); console.log(val); //=> "400" val = await aFunc(val); console.log(val); //=> "800" }; (async () => { let val = await aFunc(100); console.log(val); })();

ESモジュール (import & export)

従来はファイルインクルードの仕組みがなかった従来 jsファイル内から別のjsファイルを読み込む機能が存在しなかった外部jsファイルを取り込むには、HTMLにscriptタグを埋め込むしかなかった HTMLファイルと密結合になり、データはグローバルスコープで共有するしかないなど問題多いめちゃくちゃつらかった <script src="js/vender/jquery.min.js"></script>

ESモジュール (import & export) webpackなどモジュールバンドラー環境では以前から import と export が使えた。これなしはありえない読み込まれる側
(hello.js) 読み込む側 (index.js) 別名で読み込むこともできるこれ実は今ではブラウザでも使える！ export const sayHello = (message) => { alert(message); }; import { sayHello } from "./hello.js"; sayHello(" こんにちはこんにちは"); import { sayHello as shout } from "./hello.js"; shout(" こんにちはこんにちは");

HTMLから読み込むには type="text/javascript" の代わりに type="module" を指定これで import / export 宣言を含むjsが使える
または、インラインでもつまり、モジュールバンドラーが使えないClipkitでもスクリプトをモジュール化できるよ <script type="module" src="index.js"></script> <script type="module"> import { sayHello } from "./hello.js"; sayHello(" こんにちはこんにちは"); </script>

デメリットは？たくさんのjsファイルを1つにまとめて配信効率化できるのがモジュールバンドラーのメリットだったではモジュールバンドラーを使わないと、配信するファイルが多くなるのでパフォーマンスが問題になるのでは？ → HTTP/1.1だと効率悪い。HTTP/2なら問題ないもはやモジュールバンドラーを使う必要はない？ → TypeScriptやJSXなどのコンパイルには必要個人的にはMinifyも不要だと思う（ソースが見づらくなるし、CDNでgzip化すればいい）

おまけ One more thing…

オプショナルチェーン演算子 ES2020で追加された、地味ながら超便利機能 Rubyのぼっち演算子 (&.) と同じものどれほど便利かは知ってのとおり const user =
{ name: 'John', //... }; console.log(user.profile.age); //=> Cannot read property 'age' of undefined console.log(user.profile?.age); //=> undefined

ブラウザでうごく！ ES6+ モダンJavaScript

ブラウザでうごく！ ES6+ モダンJavaScript

More Decks by Tatsuya Miyamae

Other Decks in Programming

Featured

Transcript