Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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