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
360
SNSは最強
shimotaroo
1
450
それ、プロダクトに機能追加しなくてもよくないっすか?
shimotaroo
0
280
イシューからはじめよう
shimotaroo
0
370
マーケ・セールス担当者の話を理解したいいいいい!!!
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.8k
Other Decks in Programming
See All in Programming
実践!RDRAを活用した既存システムの仕様変更 / Specification Changes in Existing Systems Utilizing RDRA
imamotohikaru
0
1.8k
Parallel Socket Communication in Swift
s_shimotori
0
210
イベントストーミングによるオブジェクトモデリング・オブジェクト指向プログラミングの適用・開発プロセスの変遷・アーキテクチャの変革 / Object modeling with Event Storming.
nrslib
12
2.3k
DDD, necessary but insufficient: physical design principles for microservices
cer
PRO
0
2.1k
DDDはなぜ難しいのか / 良いコードの定義と設計能力の壁
pospome
24
6.7k
せっかくモデル図描くのなら、嬉しいことが多い方がいいよね!
kuboaki
1
1.2k
15分間でふんわり理解するDocker @ Matsuriba MAX
ukwhatn
PRO
1
330
Deno に Web 標準 API を実装する / Implementing Web Standard API to Deno
petamoriken
0
350
Kotlinを用いたDSL的な設計手法と使用上の注意
kohii00
3
530
SwiftUI, Jetpack Composeの導入で変化した「家族アルバム みてね」のアプリ開発体験
hicka04
6
390
【KMC春合宿2024】実装視点で見るNeural Radiance Fields
runningoutrate
0
150
どうしてこうなった命名集 ~🔥編~ / OOC 2024 LT
pictiny
4
2.7k
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
28
12k
The Illustrated Children's Guide to Kubernetes
chrisshort
28
46k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
153
14k
Git: the NoSQL Database
bkeepers
PRO
421
63k
The Art of Programming - Codeland 2020
erikaheidi
40
12k
Why You Should Never Use an ORM
jnunemaker
PRO
50
8.6k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.8k
Building a Modern Day E-commerce SEO Strategy
aleyda
15
6.3k
In The Pink: A Labor of Love
frogandcode
137
21k
VelocityConf: Rendering Performance Case Studies
addyosmani
319
23k
Build The Right Thing And Hit Your Dates
maggiecrowley
23
1.9k
Designing the Hi-DPI Web
ddemaree
275
33k
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引数にはインデックスが入る ✔ 引数の名前は任意 ✔ (もちろん)アロー関数が使える
ご清聴ありがとうございました 快適なフロントエンド開発を!