JavaScript 今ドキな書き方 ES2020

配信動画はこちら
https://www.youtube.com/watch?v=x1XdqWtPUdg

もし良かったらムーザルちゃんねるのチャンネル登録お願いします！
https://www.youtube.com/channel/UCLPHXwLp90A5R69Eltxo-sg

Twitter でもプログラミングネタをつぶやいているのでフォローお待ちしております。
ムー
https://twitter.com/mu_book
zaru
https://twitter.com/zaru

Transcript

1. YouTube Live (2020.10.29 Thur. 21:00~)
2. 話す人 現役のエンジニア二人 赤貝が好きな CTO と デザイン勉強中のエンジニア @mu_vpoe 最近の仕事は figma で画 面設計をつくることで す。英語の勉強してる。 ムー zaru @zaru CTO, Love 赤貝, JavaScript, Firebase, Web Components. Twitter フォロー お願いします！
3. 話すこと - JavaScript と ECMAScript - 新しい機能の紹介 - IE11 どうするの問題
4. JavaScript は日々進化している
5. ECMAScript エクマ スクリプト
6. Ecma インターナショナル ECMAScript 規格 TC39 標準化団体 Mozilla, Google, Facebook, Apple, MS な ど多くの企業が参加 作る人たちと作るもの
7. ECMAScript 標準規格 ECMAScript（エクマスクリプト）は、JavaScript の仕 様を標準規格化しているもの。あくまで規格であり実行 する環境や言語そのものではない。 各ブラウザの持つ JavaScript エンジンがその規格を ベースに実行可能な環境を提供している。 ブラウザ JavaScript エンジン DOM API Web API ECMAScript 規格 実行環境 これら HTML などに関連 した API は ECMAScript には関係ない
8. ECMAScript は毎年改定 2015年に策定された ES2015 以降は毎年改定されてい る。標準化作業はTechnical Committee 39（TC39）と 言う技術委員会が中心で行っている。 標準化のドラフトは GitHub で管理され、新しい機能の 提案がされているのが見れる。 - https://github.com/tc39/ecma262 - https://github.com/tc39/proposals ES1 1997 ES2020 2020 ES2019 2020 ES2018 2020 ES2017 2020 ES2016 2020 ES2015 2015 ES5.1 2011 ES5 2009 … v3とv4で分裂して色々あった
9. ECMAScript とエンジンは別 ES2020 ECMAScript 自体はあくまで規格なので、各ブラウザの JavaScript エンジンがどの機能を、どのタイミングで実 装するかは対応が分かれる。 どの機能が使えるかを調べるには CanIuse と言うサイト が便利 https://caniuse.com/ BigInt64Array 新しい仕様 使える まだ…
10. Node.js って何者？ ブラウザ JavaScript エンジン DOM API Web API ECMAScript 規格 実行環境 Node.js JavaScript エンジン CoreModule 実行環境 Node.js はブラウザと同じ実行環境。主にサーバサイド やブラウザ以外の場所で使われる。npm と言うパッケー ジ管理ツールが有名。 ECMAScript 以外に CommonJS と言う規格仕様を実装 している。 CommonJS 規格
11. ES2015 - 2020 の新機能
12. var は使わない var name = 'zaru'; ↓ let name = 'zaru'; const name = 'zaru'; ES2015 let は var と違いブロックスコープになる（影響範囲が せまい）。var をあえて使うメリットは何もない。 また可能なら再代入できない const を使うことで変数使 い回しによる不具合を避けることができる。
13. 文字列の変数展開 const name = 'zaru'; 'My name is ' + name `My name is ${name}` ES2015 バッククオート ` ` で囲むテンプレートリテラルを使うこ とで文字列の中で変数や式などが展開できます。とても 便利なやつです。 const str = `テンプレート リテラルは 改行をすることも できる` ES2015
14. 関数定義の省略アロー function zaru() { /* 処理 */ } function zaru(piyo) { other_func(piyo) } const zaru = function() { /* 処理 */ } const zaru = function(piyo) { other_func(piyo) } const zaru = () => { /* 処理 */ } const zaru = piyo => other_func(piyo) ES2015 関数定義は大きく3つある。function を使った通常の定 義、次に無名関数と言われる変数に入れるもの。最後に => を使ったアロー関数。 単純な関数という意味ではどれも同じ。ただアロー関数 は this などを束縛しない（これどこかで解説したい…） 普通の関数定義 無名関数 アロー関数
15. 配列のマージはスプレッド構文 const arr1 = [1, 2, 3]; const arr2 = [...arr1, 4, 5]; //=> [1, 2, 3, 4, 5] ES2015 ... というスプレッド構文は反復可能なオブジェクトを展 開してくれるやつ。配列に使うと、その場で配列を展開 してくれる。配列同士のマージ concat の代わりに使っ たり、配列のコピーなど幅広い用途で使える。 （ただし速くはない）
16. 分割代入で一部だけもらう const obj = {id: 'aaa', name: 'zaru'}; const { id } = obj //=> id=aaa 配列やオブジェクトの一部分だけ受け取りたい場合は、 分割代入を使うことで実現できる。余計な変数を定義せ ずに済むので便利。 const arr = [1, 2, 3]; const [a, b] = arr; //=> a=1, b=2 ES2015 ES2015
17. オブジェクト初期化の key 省略 const name = 'zaru'; const obj = { name }; // { name: 'zaru' } const params = { key1: 1, key2: 2 } const obj = { ...params, key3: 3 } // { key1: 1, key2: 2, key3: 3 } オブジェクトを初期化する際に key=value の形式ではな く変数そのもので展開することができる。すごく便利。 また、スプレッド構文でまとめて展開というやり方もあ る。すごく便利。 ES2015
18. 桁埋めは padStart '1'.padStart(5, 0) //=> 00001 '1'.padEnd(5, '#') //=> 1#### なぜ今までなかった…と思うくらいの地味で必要なやつ ES2017
19. ネストされた配列をフラットに const arr = [1, [2, 3], 4]; arr.flat(); //=> [1, 2, 3, 4] const arr = [1, [2, [3, [4]]]]; arr.flat(Infinity); //=> [1, 2, 3, 4] なぜ今までなかった…と思うくらいの地味で必要なやつ ES2019
20. null かもしれないけど呼び出したい const obj = { id: 1, profile: { name: 'zaru' } }; obj.avatar?.image?.url //=> undefined 存在するかどうかわからないけど呼び出したい時には ?. のオプショナルチェイニング構文を使うことで煩雑な条 件分岐を書かなくても済む（まぁ評価を後回しにしてい るだけだが）。 ES2020
21. null, undefined だったら右を返す null ?? 1 undefined ?? 1 //=> 1 false ?? 1 //=> false 0 ?? 1 //=> 0 左辺が null もしくは undefined の場合は、右辺を返す Null 合体演算子。既存の OR 演算子 || は falsy な要素の 時も右辺を返すところが違う。 ES2020 null || 1 undefined || 1 false || 1 0 || 1 //=> 1 OR 演算子
22. 全部置換する 'muzaru'.replace(/u/g, '1') //=> m1zar1 'muzaru'.replaceAll('u', '1') //=> m1zar1 今までは正規表現の g オプションで全置換しないといけ なかったが、replaceAll でできるようになる。もっと早 く… ES2021
23. 他にもいっぱいある！ Class, async/await, Object.entries, Object.values, DynamicImport, matchAll, Logical Assignment Operators(2021)
24. IE11 どうするの問題
25. 未対応機能を Polyfill で実現 使える 使え ない 使い たい replaceAll 新しい仕様 core-js + replaceAll Polyfill + 使える Polyfill（ポリフィル）と呼ばれ る、既存の機能の組み合わせで 実現するパッチを当てること で、古いブラウザでも新しい機 能を使える Babel + core-js と言う ライブラリが Polyfill を提 供してくれる
26. IE11 対応 Babel 例 $ npm install --save-dev @babel/cli @babel/core @babel/preset-env babelify browserify $ npm install --save core-js ターミナル { "presets": [ [ "@babel/preset-env", { "targets": { "ie": 11, "esmodules": true }, "useBuiltIns": "usage", "corejs": { "version": 3, "proposals": true } } ] ] } .babelrc $ npx browserify src/index.js -t babelify --outfile dist/index.js ターミナル
27. TypeScript って何者？
28. TypeScript って何者？ JavaScript を良い感じに 静的型付けをした言語だよ 基本、JavaScript の文法 がそのまま使えるよ 規模の大きいプロジェクト で使うと開発しやすいよ TypeScript 独自の便利機 能もあって良い感じだよ
29. ありがとうございました！ 次回は... 未定！ 質問感想など呟いていただけると嬉しいです！ - ハッシュタグ #mu_zaru - ツイッター情報 @mu_vpoe , @zaru チャンネル登録 Good ボタン お願いします！ ムーザルちゃんねる