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~)
   

   View Slide

2. 話す人
   現役のエンジニア二人
   赤貝が好きな CTO と
   デザイン勉強中のエンジニア
   @mu_vpoe
   最近の仕事は figma で画
   面設計をつくることで
   す。英語の勉強してる。
   ムー
   zaru
   @zaru
   CTO, Love 赤貝,
   JavaScript, Firebase,
   Web Components.
   Twitter フォロー
   お願いします！
   

   View Slide

3. 話すこと
   - JavaScript と ECMAScript
   - 新しい機能の紹介
   - IE11 どうするの問題
   

   View Slide

4. JavaScript は日々進化している
   

   View Slide

5. ECMAScript
   エクマ スクリプト
   

   View Slide

6. Ecma インターナショナル
   ECMAScript
   規格
   TC39
   標準化団体
   Mozilla, Google,
   Facebook, Apple, MS な
   ど多くの企業が参加
   作る人たちと作るもの
   

   View Slide

7. ECMAScript 標準規格
   ECMAScript（エクマスクリプト）は、JavaScript の仕
   様を標準規格化しているもの。あくまで規格であり実行
   する環境や言語そのものではない。
   各ブラウザの持つ JavaScript エンジンがその規格を
   ベースに実行可能な環境を提供している。
   ブラウザ
   JavaScript エンジン
   DOM API Web API
   ECMAScript
   規格 実行環境
   これら HTML などに関連
   した API は ECMAScript
   には関係ない
   

   View Slide

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で分裂して色々あった
   

   View Slide

9. ECMAScript とエンジンは別
   ES2020
   ECMAScript 自体はあくまで規格なので、各ブラウザの
   JavaScript エンジンがどの機能を、どのタイミングで実
   装するかは対応が分かれる。
   どの機能が使えるかを調べるには CanIuse と言うサイト
   が便利 https://caniuse.com/
   BigInt64Array
   新しい仕様
   使える まだ…
   

   View Slide

10. Node.js って何者？
    ブラウザ
    JavaScript エンジン
    DOM API Web API
    ECMAScript
    規格 実行環境
    Node.js
    JavaScript エンジン
    CoreModule
    実行環境
    Node.js はブラウザと同じ実行環境。主にサーバサイド
    やブラウザ以外の場所で使われる。npm と言うパッケー
    ジ管理ツールが有名。
    ECMAScript 以外に CommonJS と言う規格仕様を実装
    している。
    CommonJS
    規格
    

    View Slide

11. ES2015 - 2020 の新機能
    

    View Slide

12. var は使わない
    var name = 'zaru';
    ↓
    let name = 'zaru';
    const name = 'zaru';
    ES2015
    let は var と違いブロックスコープになる（影響範囲が
    せまい）。var をあえて使うメリットは何もない。
    また可能なら再代入できない const を使うことで変数使
    い回しによる不具合を避けることができる。
    

    View Slide

13. 文字列の変数展開
    const name = 'zaru';
    'My name is ' + name
    `My name is ${name}`
    ES2015
    バッククオート ` ` で囲むテンプレートリテラルを使うこ
    とで文字列の中で変数や式などが展開できます。とても
    便利なやつです。
    const str = `テンプレート
    リテラルは
    改行をすることも
    できる`
    ES2015
    

    View Slide

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 などを束縛しない（これどこかで解説したい…）
    普通の関数定義
    無名関数
    アロー関数
    

    View Slide

15. 配列のマージはスプレッド構文
    const arr1 = [1, 2, 3];
    const arr2 = [...arr1, 4, 5];
    //=> [1, 2, 3, 4, 5]
    ES2015
    ... というスプレッド構文は反復可能なオブジェクトを展
    開してくれるやつ。配列に使うと、その場で配列を展開
    してくれる。配列同士のマージ concat の代わりに使っ
    たり、配列のコピーなど幅広い用途で使える。
    （ただし速くはない）
    

    View Slide

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
    

    View Slide

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
    

    View Slide

18. 桁埋めは padStart
    '1'.padStart(5, 0)
    //=> 00001
    '1'.padEnd(5, '#')
    //=> 1####
    なぜ今までなかった…と思うくらいの地味で必要なやつ
    ES2017
    

    View Slide

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
    

    View Slide

20. null かもしれないけど呼び出したい
    const obj = { id: 1, profile: { name: 'zaru' } };
    obj.avatar?.image?.url
    //=> undefined
    存在するかどうかわからないけど呼び出したい時には ?.
    のオプショナルチェイニング構文を使うことで煩雑な条
    件分岐を書かなくても済む（まぁ評価を後回しにしてい
    るだけだが）。
    ES2020
    

    View Slide

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 演算子
    

    View Slide

22. 全部置換する
    'muzaru'.replace(/u/g, '1')
    //=> m1zar1
    'muzaru'.replaceAll('u', '1')
    //=> m1zar1
    今までは正規表現の g オプションで全置換しないといけ
    なかったが、replaceAll でできるようになる。もっと早
    く…
    ES2021
    

    View Slide

23. 他にもいっぱいある！
    Class, async/await, Object.entries,
    Object.values, DynamicImport, matchAll,
    Logical Assignment Operators(2021)
    

    View Slide

24. IE11 どうするの問題
    

    View Slide

25. 未対応機能を Polyfill で実現
    使える
    使え
    ない
    使い
    たい
    replaceAll
    新しい仕様
    core-js
    +
    replaceAll Polyfill
    +
    使える
    Polyfill（ポリフィル）と呼ばれ
    る、既存の機能の組み合わせで
    実現するパッチを当てること
    で、古いブラウザでも新しい機
    能を使える
    Babel + core-js と言う
    ライブラリが Polyfill を提
    供してくれる
    

    View Slide

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
    ターミナル
    

    View Slide

27. TypeScript って何者？
    

    View Slide

28. TypeScript って何者？
    JavaScript を良い感じに
    静的型付けをした言語だよ
    基本、JavaScript の文法
    がそのまま使えるよ
    規模の大きいプロジェクト
    で使うと開発しやすいよ
    TypeScript 独自の便利機
    能もあって良い感じだよ
    

    View Slide

29. ありがとうございました！
    次回は... 未定！
    質問感想など呟いていただけると嬉しいです！
    - ハッシュタグ #mu_zaru
    - ツイッター情報 @mu_vpoe , @zaru チャンネル登録
    Good ボタン
    お願いします！
    ムーザルちゃんねる
    

    View Slide