ES2015の登場で大きな技術刷新があったJavaScriptの汎用性の高い機能をまとめました! React/Next.jsでの開発でお世話になっています。
モダンなJavaScriptを知ろう2021年10月22日
View Slide
”モダン”なJavaScriptとは?この場では、ES2015以降のJavaScriptとして扱います。
ES2015とは?● ECMA Internationalのもとで標準化されているJavaScriptの仕様● ES2015 = ECMAScript2015● ES2009→ES2015で大きな技術改訂があった● 最新はES2020(最近は年1回のペースでリリース)
なぜこのテーマなの?React/Next.js開発でES2015以降の仕様のJSをゴリゴリ使っているから!(厳密にはTypeScriptですが...)● 既存のJavaScriptコードのリファクタリング● 知識のアップデートこんなことに活用してください
モダンなJavaScriptの機能● Let、constによる変数宣言● テンプレート文字列● アロー関数● 分割代入● スプレッド構文● デフォルト引数● map ※実際にはまだまだあります ...例) Promise、async/await、filter、オプショナルチェイニング、 null合体演算子などなど
let、constによる変数宣言(1)✔ let、const、varの違い
let、constによる変数宣言(2)オブジェクト、配列はconstでも中身を変えることができる💡✔オブジェクト、配列は必ずconstで定義する
let、constによる変数宣言(3)varはwindowオブジェクトのプロパティを上書きしてしまう危険性がある😨✔ varは(絶対)使わない✔ 基本はconst、どうしても必要な時だけletを使う
テンプレート文字列✔ ES2009以前✔ ES2015以降 バッククオートで囲む 変数は${ }で囲む
アロー関数(1)✔ 通常の関数定義functionでの宣言→無名関数を変数に格納→
アロー関数(2)✔ アロー関数での関数定義無名関数の省略記法TypeScriptで型定義する場合は()は省略できない
アロー関数(3)補足:返り値が1文の場合は{}だけでなくreturnも省略可能💡✔ React、Vue.jsではアロー関数がよく使われます。
分割代入(1)✔ 通常のオブジェクトの展開オブジェクト名.キー名でプロパティの値を取得する
分割代入(2)✔ 分割代入を使用それぞれのプロパティの値が格納される
スプレッド構文(1)✏ オブジェクト、配列を扱うときに役立つ機能✔ 配列✔ 配列の展開、合体ができる
スプレッド構文(2)関数の引数に配列を展開して設定できる💡
スプレッド構文(3)✔ オブジェクト✔ プロパティの上書きができる✔ プロパティの追加もできる
デフォルト引数通常の関数→デフォルト引数使用→第2引数が必須ではなくなる
map(1)✏ ES2015以降で一般的に使われる配列の繰り返し処理✔ JavaScriptで使用できる配列の繰り返し処理● for● forEach● for ~ of● map ←● filterfor ~ of、forEachもmapと書き方が大きく変わらないけどそれぞれ違いがあります。(今回は割愛)
map(2)配列の要素を順番に処理して新たな配列を作成できる💡numにarrの要素が順番に入る
map(2)配列の要素を順番に処理して新たな配列を作成できる💡第2引数にはインデックスが入る✔ 引数の名前は任意✔ (もちろん)アロー関数が使える
ご清聴ありがとうございました快適なフロントエンド開発を!