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 E...
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
600
SNSは最強
shimotaroo
3
630
それ、プロダクトに機能追加しなくてもよくないっすか?
shimotaroo
0
330
イシューからはじめよう
shimotaroo
0
460
マーケ・セールス担当者の話を理解したいいいいい!!!
shimotaroo
0
1.3k
自分のペースで頑張ればいんじゃない?というお話
shimotaroo
0
1.8k
つながる勉強会立ち上げからの1年間を振り返る/tsunagaru-kobe-2021
shimotaroo
0
230
【ハンズオン】PHPUnitでのテストコード実装超入門/PHP-Hands-On
shimotaroo
0
6k
SPA/CSR/SSR/SSGまとめ/SPA-SSR-SSG
shimotaroo
0
7.2k
Other Decks in Programming
See All in Programming
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
810
技術を改善し続ける
gumioji
0
120
Go 1.24でジェネリックになった型エイリアスの紹介
syumai
2
290
たのしいSocketのしくみ / Socket Under a Microscope
coe401_
8
1.3k
DRFを少しずつ オニオンアーキテクチャに寄せていく DjangoCongress JP 2025
nealle
2
270
コミュニティ駆動 AWS CDK ライブラリ「Open Constructs Library」 / community-cdk-library
gotok365
2
240
はじめての Go * WASM *OCR
sgash708
1
100
Jakarta EE meets AI
ivargrimstad
0
390
Datadog DBMでなにができる? JDDUG Meetup#7
nealle
0
140
Kotlinの開発でも AIをいい感じに使いたい / Making the Most of AI in Kotlin Development
kohii00
5
1.3k
複数のAWSアカウントから横断で 利用する Lambda Authorizer の作り方
tc3jp
0
120
Ruby on cygwin 2025-02
fd0
0
180
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Making Projects Easy
brettharned
116
6k
Fireside Chat
paigeccino
34
3.2k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Building an army of robots
kneath
303
45k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
370
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
How STYLIGHT went responsive
nonsquared
98
5.4k
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引数にはインデックスが入る ✔ 引数の名前は任意 ✔ (もちろん)アロー関数が使える
ご清聴ありがとうございました 快適なフロントエンド開発を!