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での開発でお世話になっています。

Yutaro Shimoda

October 22, 2021
Tweet

More Decks by Yutaro Shimoda

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide