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

モダンなJavaScriptを知ろう / modern JavaScript since ES2015

モダンなJavaScriptを知ろう / modern JavaScript since ES2015

ES2015の登場で大きな技術刷新があったJavaScriptの汎用性の高い機能をまとめました!
React/Next.jsでの開発でお世話になっています。

C400a6dc29b681f0284fd33c468e396e?s=128

Yutaro Shimoda

October 22, 2021
Tweet

More Decks by Yutaro Shimoda

Other Decks in Programming

Transcript

  1. モダンなJavaScriptを知ろう 2021年10月22日

  2. ”モダン”なJavaScriptとは? この場では、 ES2015以降のJavaScript として扱います。

  3. ES2015とは? • ECMA Internationalのもとで標準化されているJavaScriptの仕様 • ES2015 = ECMAScript2015 • ES2009→ES2015で大きな技術改訂があった

    • 最新はES2020(最近は年1回のペースでリリース)
  4. なぜこのテーマなの? React/Next.js開発でES2015以降の仕様のJSをゴリゴリ使っているから! (厳密にはTypeScriptですが...) • 既存のJavaScriptコードのリファクタリング • 知識のアップデート こんなことに活用してください󰢛

  5. モダンなJavaScriptの機能 • Let、constによる変数宣言 • テンプレート文字列 • アロー関数 • 分割代入 •

    スプレッド構文 • デフォルト引数 • map ※実際にはまだまだあります ... 例) Promise、async/await、filter、 オプショナルチェイニング、 null合体演算子などなど
  6. let、constによる変数宣言(1) ✔ let、const、varの違い

  7. let、constによる変数宣言(2) オブジェクト、配列はconstでも中身を変えることができる💡 ✔オブジェクト、配列は必ずconstで定義する

  8. let、constによる変数宣言(3) varはwindowオブジェクトのプロパティを上書きしてしまう危険性がある😨 ✔ varは(絶対)使わない ✔ 基本はconst、どうしても必要な時だけletを使う

  9. テンプレート文字列 ✔ ES2009以前 ✔ ES2015以降 バッククオートで囲む 変数は${ }で囲む

  10. アロー関数(1) ✔ 通常の関数定義 functionでの宣言→ 無名関数を変数に格納→

  11. アロー関数(2) ✔ アロー関数での関数定義 無名関数の省略記法 TypeScriptで型定義する場合は()は省略できない

  12. アロー関数(3) 補足:返り値が1文の場合は{}だけでなくreturnも省略可能💡 ✔ React、Vue.jsではアロー関数がよく使われます。

  13. 分割代入(1) ✔ 通常のオブジェクトの展開 オブジェクト名.キー名 でプロパティの値を取得する

  14. 分割代入(2) ✔ 分割代入を使用 それぞれのプロパティの値が 格納される

  15. スプレッド構文(1) ✏ オブジェクト、配列を扱うときに役立つ機能 ✔ 配列 ✔ 配列の展開、合体ができる

  16. スプレッド構文(2) 関数の引数に配列を展開して設定できる💡

  17. スプレッド構文(3) ✔ オブジェクト ✔ プロパティの上書きができる ✔ プロパティの追加もできる

  18. デフォルト引数 通常の関数→ デフォルト引数使用→ 第2引数が必須ではなくなる

  19. map(1) ✏ ES2015以降で一般的に使われる配列の繰り返し処理 ✔ JavaScriptで使用できる配列の繰り返し処理 • for • forEach •

    for ~ of • map ← • filter for ~ of、forEachもmapと書き方が大きく変わらないけどそれぞれ違いがあります。 (今回は割愛󰢛)
  20. map(2) 配列の要素を順番に処理して新たな配列を作成できる💡 numにarrの要素が順番に入る

  21. map(2) 配列の要素を順番に処理して新たな配列を作成できる💡 第2引数にはインデックスが入る ✔ 引数の名前は任意 ✔ (もちろん)アロー関数が使える

  22. ご清聴ありがとうございました 快適なフロントエンド開発を!