Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JavaScript 今ドキな書き方 ES2020

mu_zaru
October 29, 2020

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

mu_zaru

October 29, 2020
Tweet

More Decks by mu_zaru

Other Decks in Technology

Transcript

  1. 話す人 現役のエンジニア二人 赤貝が好きな CTO と デザイン勉強中のエンジニア @mu_vpoe 最近の仕事は figma で画

    面設計をつくることで す。英語の勉強してる。 ムー zaru @zaru CTO, Love 赤貝, JavaScript, Firebase, Web Components. Twitter フォロー お願いします!
  2. 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で分裂して色々あった
  3. Node.js って何者? ブラウザ JavaScript エンジン DOM API Web API ECMAScript

    規格 実行環境 Node.js JavaScript エンジン CoreModule 実行環境 Node.js はブラウザと同じ実行環境。主にサーバサイド やブラウザ以外の場所で使われる。npm と言うパッケー ジ管理ツールが有名。 ECMAScript 以外に CommonJS と言う規格仕様を実装 している。 CommonJS 規格
  4. var は使わない var name = 'zaru'; ↓ let name =

    'zaru'; const name = 'zaru'; ES2015 let は var と違いブロックスコープになる(影響範囲が せまい)。var をあえて使うメリットは何もない。 また可能なら再代入できない const を使うことで変数使 い回しによる不具合を避けることができる。
  5. 文字列の変数展開 const name = 'zaru'; 'My name is ' +

    name `My name is ${name}` ES2015 バッククオート ` ` で囲むテンプレートリテラルを使うこ とで文字列の中で変数や式などが展開できます。とても 便利なやつです。 const str = `テンプレート リテラルは 改行をすることも できる` ES2015
  6. 関数定義の省略アロー 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 などを束縛しない(これどこかで解説したい…) 普通の関数定義 無名関数 アロー関数
  7. 配列のマージはスプレッド構文 const arr1 = [1, 2, 3]; const arr2 =

    [...arr1, 4, 5]; //=> [1, 2, 3, 4, 5] ES2015 ... というスプレッド構文は反復可能なオブジェクトを展 開してくれるやつ。配列に使うと、その場で配列を展開 してくれる。配列同士のマージ concat の代わりに使っ たり、配列のコピーなど幅広い用途で使える。 (ただし速くはない)
  8. 分割代入で一部だけもらう 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
  9. オブジェクト初期化の 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
  10. 桁埋めは padStart '1'.padStart(5, 0) //=> 00001 '1'.padEnd(5, '#') //=> 1####

    なぜ今までなかった…と思うくらいの地味で必要なやつ ES2017
  11. ネストされた配列をフラットに 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
  12. null かもしれないけど呼び出したい const obj = { id: 1, profile: {

    name: 'zaru' } }; obj.avatar?.image?.url //=> undefined 存在するかどうかわからないけど呼び出したい時には ?. のオプショナルチェイニング構文を使うことで煩雑な条 件分岐を書かなくても済む(まぁ評価を後回しにしてい るだけだが)。 ES2020
  13. 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 演算子
  14. 全部置換する 'muzaru'.replace(/u/g, '1') //=> m1zar1 'muzaru'.replaceAll('u', '1') //=> m1zar1 今までは正規表現の

    g オプションで全置換しないといけ なかったが、replaceAll でできるようになる。もっと早 く… ES2021
  15. 未対応機能を Polyfill で実現 使える 使え ない 使い たい replaceAll 新しい仕様

    core-js + replaceAll Polyfill + 使える Polyfill(ポリフィル)と呼ばれ る、既存の機能の組み合わせで 実現するパッチを当てること で、古いブラウザでも新しい機 能を使える Babel + core-js と言う ライブラリが Polyfill を提 供してくれる
  16. 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 ターミナル