Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
モダンなJavaScriptを知ろう / modern JavaScript since ES2015
Search
Yutaro Shimoda
October 22, 2021
Programming
0
1.8k
モダンなJavaScriptを知ろう / modern JavaScript since ES2015
ES2015の登場で大きな技術刷新があったJavaScriptの汎用性の高い機能をまとめました!
React/Next.jsでの開発でお世話になっています。
Yutaro Shimoda
October 22, 2021
Tweet
Share
More Decks by Yutaro Shimoda
See All by Yutaro Shimoda
エンジニアの次のキャリアに プロダクトマネージャーという選択
shimotaroo
2
410
SNSは最強
shimotaroo
1
500
それ、プロダクトに機能追加しなくてもよくないっすか?
shimotaroo
0
290
イシューからはじめよう
shimotaroo
0
390
マーケ・セールス担当者の話を理解したいいいいい!!!
shimotaroo
0
1.2k
自分のペースで頑張ればいんじゃない?というお話
shimotaroo
0
1.8k
つながる勉強会立ち上げからの1年間を振り返る/tsunagaru-kobe-2021
shimotaroo
0
200
【ハンズオン】PHPUnitでのテストコード実装超入門/PHP-Hands-On
shimotaroo
0
5.8k
SPA/CSR/SSR/SSGまとめ/SPA-SSR-SSG
shimotaroo
0
6.9k
Other Decks in Programming
See All in Programming
TypeScript 関数型スタイルでバックエンド開発のリアル
naoya
30
9k
禅の心を手に入れよ
eltociear
1
440
Apache Hive 4 on Treasure Data
ryukobayashi
1
460
VS Code をプロダクトにどう取り込むか
onomax
1
790
Try creating your own orderedmap
kazamori
1
270
Going beyond Apache Parquet's default settings
xhochy
0
140
if constexpr文はテンプレート世界のラムダ式である
faithandbrave
3
710
dbtのドメイン分割による データ基盤の改善とDigdagとの連携
sakama
0
480
Komplexe Oberflächen mit SVG und der Web Animation API
joergneumann
0
690
Effectで作る堅牢でスケーラブルなAPIゲートウェイ / Robust and Scalable API Gateway Built on Effect
yasaichi
4
540
Go製Webアプリケーションのエラーとの向き合い方大全、あるいはやっぱりスタックトレース欲しいやん / Kyoto.go #50
utgwkk
6
1.9k
Revisiting the Hotwire Landscape after Turbo 8 @ RailsConf 2024, Detroit
marcoroth
1
410
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
43
12k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
From Idea to $5000 a Month in 5 Months
shpigford
378
45k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.7k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
Reflections from 52 weeks, 52 projects
jeffersonlam
345
19k
Faster Mobile Websites
deanohume
300
30k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
34
6.1k
Git: the NoSQL Database
bkeepers
PRO
423
63k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
123
39k
How to name files
jennybc
65
93k
Transcript
モダンなJavaScriptを知ろう 2021年10月22日
”モダン”な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 ← • filter for ~ of、forEachもmapと書き方が大きく変わらないけどそれぞれ違いがあります。 (今回は割愛)
map(2) 配列の要素を順番に処理して新たな配列を作成できる💡 numにarrの要素が順番に入る
map(2) 配列の要素を順番に処理して新たな配列を作成できる💡 第2引数にはインデックスが入る ✔ 引数の名前は任意 ✔ (もちろん)アロー関数が使える
ご清聴ありがとうございました 快適なフロントエンド開発を!