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

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

Transcript

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

   View Slide

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

   View Slide

3. ES2015とは？
   ● ECMA Internationalのもとで標準化されているJavaScriptの仕様
   ● ES2015 = ECMAScript2015
   ● ES2009→ES2015で大きな技術改訂があった
   ● 最新はES2020（最近は年1回のペースでリリース）
   

   View Slide

4. なぜこのテーマなの？
   React/Next.js開発でES2015以降の仕様のJSをゴリゴリ使っているから！
   （厳密にはTypeScriptですが...）
   ● 既存のJavaScriptコードのリファクタリング
   ● 知識のアップデート
   こんなことに活用してください󰢛
   

   View Slide

5. モダンなJavaScriptの機能
   ● Let、constによる変数宣言
   ● テンプレート文字列
   ● アロー関数
   ● 分割代入
   ● スプレッド構文
   ● デフォルト引数
   ● map ※実際にはまだまだあります ...
   例) Promise、async/await、filter、
   オプショナルチェイニング、 null合体演算子などなど
   

   View Slide

6. let、constによる変数宣言(1)
   ✔ let、const、varの違い
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

19. map(1)
    ✏ ES2015以降で一般的に使われる配列の繰り返し処理
    ✔ JavaScriptで使用できる配列の繰り返し処理
    ● for
    ● forEach
    ● for ~ of
    ● map ←
    ● filter
    for ~ of、forEachもmapと書き方が大きく変わらないけどそれぞれ違いがあります。
    （今回は割愛󰢛）
    

    View Slide

20. map(2)
    配列の要素を順番に処理して新たな配列を作成できる💡
    numにarrの要素が順番に入る
    

    View Slide

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

    View Slide

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

    View Slide