Suche senden
Hochladen
Node.js version16の新機能
•
Als PPTX, PDF herunterladen
•
0 gefällt mir
•
563 views
M
Masaki Suzuki
Folgen
2021/6/28(月) 19:00~開催の「Node学園 36時限目」における、私のセッション「Node.js version16の機能」の登壇資料になります。
Weniger lesen
Mehr lesen
Software
Melden
Teilen
Melden
Teilen
1 von 20
Jetzt herunterladen
Empfohlen
Editorlt
Editorlt
Masaki Suzuki
AWS Lambdaのテストで役立つ各種ツール
AWS Lambdaのテストで役立つ各種ツール
Masaki Suzuki
Vscodemeetup6
Vscodemeetup6
Masaki Suzuki
開発チーム管理で役立ったVSCode拡張機能
開発チーム管理で役立ったVSCode拡張機能
Masaki Suzuki
アプリ開発&チーム管理で役立った拡張機能
アプリ開発&チーム管理で役立った拡張機能
Masaki Suzuki
【LT】 怖くない恐怖のScala.js
【LT】 怖くない恐怖のScala.js
Yuto Suzuki
進撃のSbt
進撃のSbt
Yuto Suzuki
One Time Binding & Digest Loop
One Time Binding & Digest Loop
Kon Yuichi
Empfohlen
Editorlt
Editorlt
Masaki Suzuki
AWS Lambdaのテストで役立つ各種ツール
AWS Lambdaのテストで役立つ各種ツール
Masaki Suzuki
Vscodemeetup6
Vscodemeetup6
Masaki Suzuki
開発チーム管理で役立ったVSCode拡張機能
開発チーム管理で役立ったVSCode拡張機能
Masaki Suzuki
アプリ開発&チーム管理で役立った拡張機能
アプリ開発&チーム管理で役立った拡張機能
Masaki Suzuki
【LT】 怖くない恐怖のScala.js
【LT】 怖くない恐怖のScala.js
Yuto Suzuki
進撃のSbt
進撃のSbt
Yuto Suzuki
One Time Binding & Digest Loop
One Time Binding & Digest Loop
Kon Yuichi
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
Yusuke Murata
angular1脳で見るangular2
angular1脳で見るangular2
Moriyuki Arakawa
Face APIで開発する時に使っている7つの道具
Face APIで開発する時に使っている7つの道具
Kazuyuki Miyake
Angular2実践入門
Angular2実践入門
Shumpei Shiraishi
Riot.jsに触れてみた話
Riot.jsに触れてみた話
エンジニア勉強会 エスキュービズム
Type scriptmemo
Type scriptmemo
ytanno
Isomorphic web development with scala and scala.js
Isomorphic web development with scala and scala.js
TanUkkii
Our Track to Modern Angular #2
Our Track to Modern Angular #2
Yuta Shimizu
10分でわかるOpenAPI V3
10分でわかるOpenAPI V3
Kazuchika Sekiya
本番運用で使うVisual Studio
本番運用で使うVisual Studio
Kazuyuki Miyake
俺とAngular JS 2
俺とAngular JS 2
Masayuki KaToH
Alt01-LT
Alt01-LT
Yuta Hiroto
capybara で快適なテスト生活を
capybara で快適なテスト生活を
Ryunosuke SATO
ReactNativeを語る勉強会
ReactNativeを語る勉強会
yohei sugigami
Java + React.jsでSever Side Rendering #reactjs_meetup
Java + React.jsでSever Side Rendering #reactjs_meetup
Toshiaki Maki
JavaScript使いのためのTypeScript実践入門
JavaScript使いのためのTypeScript実践入門
Shumpei Shiraishi
AngularJSとFluxとRiotJSと
AngularJSとFluxとRiotJSと
Ryo Iinuma
Directiveで実現できたこと
Directiveで実現できたこと
Kon Yuichi
開発ライフサイクルから見たAngularJS
開発ライフサイクルから見たAngularJS
Mizuho Sakamaki
One-time Binding & $digest
One-time Binding & $digest
Hayashi Yuichi
TypeScriptで書くLambdaをCDKでいい感じに管理する.pptx
TypeScriptで書くLambdaをCDKでいい感じに管理する.pptx
ssuser8b389c
Next2Dで始めるゲーム開発 - Game Development Starting with Next2D
Next2Dで始めるゲーム開発 - Game Development Starting with Next2D
Toshiyuki Ienaga
Weitere ähnliche Inhalte
Was ist angesagt?
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
Yusuke Murata
angular1脳で見るangular2
angular1脳で見るangular2
Moriyuki Arakawa
Face APIで開発する時に使っている7つの道具
Face APIで開発する時に使っている7つの道具
Kazuyuki Miyake
Angular2実践入門
Angular2実践入門
Shumpei Shiraishi
Riot.jsに触れてみた話
Riot.jsに触れてみた話
エンジニア勉強会 エスキュービズム
Type scriptmemo
Type scriptmemo
ytanno
Isomorphic web development with scala and scala.js
Isomorphic web development with scala and scala.js
TanUkkii
Our Track to Modern Angular #2
Our Track to Modern Angular #2
Yuta Shimizu
10分でわかるOpenAPI V3
10分でわかるOpenAPI V3
Kazuchika Sekiya
本番運用で使うVisual Studio
本番運用で使うVisual Studio
Kazuyuki Miyake
俺とAngular JS 2
俺とAngular JS 2
Masayuki KaToH
Alt01-LT
Alt01-LT
Yuta Hiroto
capybara で快適なテスト生活を
capybara で快適なテスト生活を
Ryunosuke SATO
ReactNativeを語る勉強会
ReactNativeを語る勉強会
yohei sugigami
Java + React.jsでSever Side Rendering #reactjs_meetup
Java + React.jsでSever Side Rendering #reactjs_meetup
Toshiaki Maki
JavaScript使いのためのTypeScript実践入門
JavaScript使いのためのTypeScript実践入門
Shumpei Shiraishi
AngularJSとFluxとRiotJSと
AngularJSとFluxとRiotJSと
Ryo Iinuma
Directiveで実現できたこと
Directiveで実現できたこと
Kon Yuichi
開発ライフサイクルから見たAngularJS
開発ライフサイクルから見たAngularJS
Mizuho Sakamaki
One-time Binding & $digest
One-time Binding & $digest
Hayashi Yuichi
Was ist angesagt?
(20)
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
angular1脳で見るangular2
angular1脳で見るangular2
Face APIで開発する時に使っている7つの道具
Face APIで開発する時に使っている7つの道具
Angular2実践入門
Angular2実践入門
Riot.jsに触れてみた話
Riot.jsに触れてみた話
Type scriptmemo
Type scriptmemo
Isomorphic web development with scala and scala.js
Isomorphic web development with scala and scala.js
Our Track to Modern Angular #2
Our Track to Modern Angular #2
10分でわかるOpenAPI V3
10分でわかるOpenAPI V3
本番運用で使うVisual Studio
本番運用で使うVisual Studio
俺とAngular JS 2
俺とAngular JS 2
Alt01-LT
Alt01-LT
capybara で快適なテスト生活を
capybara で快適なテスト生活を
ReactNativeを語る勉強会
ReactNativeを語る勉強会
Java + React.jsでSever Side Rendering #reactjs_meetup
Java + React.jsでSever Side Rendering #reactjs_meetup
JavaScript使いのためのTypeScript実践入門
JavaScript使いのためのTypeScript実践入門
AngularJSとFluxとRiotJSと
AngularJSとFluxとRiotJSと
Directiveで実現できたこと
Directiveで実現できたこと
開発ライフサイクルから見たAngularJS
開発ライフサイクルから見たAngularJS
One-time Binding & $digest
One-time Binding & $digest
Ähnlich wie Node.js version16の新機能
TypeScriptで書くLambdaをCDKでいい感じに管理する.pptx
TypeScriptで書くLambdaをCDKでいい感じに管理する.pptx
ssuser8b389c
Next2Dで始めるゲーム開発 - Game Development Starting with Next2D
Next2Dで始めるゲーム開発 - Game Development Starting with Next2D
Toshiyuki Ienaga
Remote-Containersでnext.js環境を作った話
Remote-Containersでnext.js環境を作った話
Masaki Suzuki
The Next Generation for C# Developers
The Next Generation for C# Developers
Takayoshi Tanaka
分散環境におけるDocker とオーケストレーション
分散環境におけるDocker とオーケストレーション
Masahito Zembutsu
Node.jsでブラウザメッセンジャー
Node.jsでブラウザメッセンジャー
Yahoo!デベロッパーネットワーク
JAWS-UG静岡 #1 Introduction to AWS SDK for Ruby
JAWS-UG静岡 #1 Introduction to AWS SDK for Ruby
Kazuhiko ISOBE
マイクロサービス時代の生存戦略 with HashiCorp
マイクロサービス時代の生存戦略 with HashiCorp
Masahito Zembutsu
WebSocket+Akka(Remote)+Play 2.1 Java
WebSocket+Akka(Remote)+Play 2.1 Java
Kazuhiro Hara
cocos2d-xハンズオン勉強会 in 名古屋
cocos2d-xハンズオン勉強会 in 名古屋
Tomoaki Shimizu
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
Yatabe Terumasa
Azure のポータル画面で、AI フレーバな BOT の作成ハンズオン
Azure のポータル画面で、AI フレーバな BOT の作成ハンズオン
Yasuaki Matsuda
About Jobs
About Jobs
Shinichi Kozake
VSCodeで始めるAzure Static Web Apps開発
VSCodeで始めるAzure Static Web Apps開発
Yuta Matsumura
Smart Tennis Lesson Serverless Design
Smart Tennis Lesson Serverless Design
Ryuji TAKEHARA
Lt 111217
Lt 111217
Tomoyuki Obi
無償のVisual studioで作るクライアント アプリ
無償のVisual studioで作るクライアント アプリ
Yasuhiko Yamamoto
Ansible 2.0を使って組む kubernetesクラスタ vol.1
Ansible 2.0を使って組む kubernetesクラスタ vol.1
Hidetoshi Hirokawa
Cocos2d-x公開講座 in 鹿児島
Cocos2d-x公開講座 in 鹿児島
Tomoaki Shimizu
Async Enhancement
Async Enhancement
kamiyam .
Ähnlich wie Node.js version16の新機能
(20)
TypeScriptで書くLambdaをCDKでいい感じに管理する.pptx
TypeScriptで書くLambdaをCDKでいい感じに管理する.pptx
Next2Dで始めるゲーム開発 - Game Development Starting with Next2D
Next2Dで始めるゲーム開発 - Game Development Starting with Next2D
Remote-Containersでnext.js環境を作った話
Remote-Containersでnext.js環境を作った話
The Next Generation for C# Developers
The Next Generation for C# Developers
分散環境におけるDocker とオーケストレーション
分散環境におけるDocker とオーケストレーション
Node.jsでブラウザメッセンジャー
Node.jsでブラウザメッセンジャー
JAWS-UG静岡 #1 Introduction to AWS SDK for Ruby
JAWS-UG静岡 #1 Introduction to AWS SDK for Ruby
マイクロサービス時代の生存戦略 with HashiCorp
マイクロサービス時代の生存戦略 with HashiCorp
WebSocket+Akka(Remote)+Play 2.1 Java
WebSocket+Akka(Remote)+Play 2.1 Java
cocos2d-xハンズオン勉強会 in 名古屋
cocos2d-xハンズオン勉強会 in 名古屋
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
Azure のポータル画面で、AI フレーバな BOT の作成ハンズオン
Azure のポータル画面で、AI フレーバな BOT の作成ハンズオン
About Jobs
About Jobs
VSCodeで始めるAzure Static Web Apps開発
VSCodeで始めるAzure Static Web Apps開発
Smart Tennis Lesson Serverless Design
Smart Tennis Lesson Serverless Design
Lt 111217
Lt 111217
無償のVisual studioで作るクライアント アプリ
無償のVisual studioで作るクライアント アプリ
Ansible 2.0を使って組む kubernetesクラスタ vol.1
Ansible 2.0を使って組む kubernetesクラスタ vol.1
Cocos2d-x公開講座 in 鹿児島
Cocos2d-x公開講座 in 鹿児島
Async Enhancement
Async Enhancement
Node.js version16の新機能
1.
Node学園 36時限目 Node.js version16の新機能 Author:
Masaki Suzuki @makky12
2.
自己紹介 • 名前:鈴木 正樹
(Masaki Suzuki) • 在住:愛知県半田市 • 職業:フリーランスエンジニア(※現在ニート) • 得意分野:サーバーレスアプリのバックエンド(アーキ構築/設計/開発など) • 技術: • AWS/Serverless Framework/サーバーレス全般 • JavaScript(Node.js)/TypeScript/AWS Amplify/AWS CDK/Jest • 各種イベント・SNS・ブログでのクラウド普及活動(個人的に) • SNS: http://makky12.hatenablog.com/ https://github.com/smt7174 @makky12 (Masaki Suzuki@フリーランスクラウドエンジニア) 名古屋市 豊橋市 Node学園 36時限目
3.
本日紹介する新機能 • Numeric Separators(桁区切り) •
String.prototype.replaceAll(文字列全置換) • Promise.any • WeakReferences(オブジェクトへの弱参照) • WeakRef • FinalizationRegistry • Logical Assignment(代入演算子) Node学園 36時限目
4.
参考資料・サイト • 【参考情報】 • node.js公式サイト •
node.green • JavaScript new features in ECMAScript 2021 - dev.to • 【ブログ】 • 正式仕様リリース! JavaScriptの最新仕様ES2021で追加された新機能まとめ - Zenn • 【Node.js】Node.js version16(ES2021)の新機能 - echo("備忘録") Node学園 36時限目
5.
Node学園 36時限目 Numeric Separators(桁区切り)
6.
Numeric Separators(桁区切り) • 数値の「_」での桁区切りが可能に •
10進数以外(2進数, 16進数など)にも対応 • もちろん数値として、各種計算が可能 • 大きい数を扱う場合に、値が分かりやすくなった • ソースの可読性の向上につながる • 保守のしやすさが上がる(かも) • 区切り桁の制限(n桁ごと…など)はない • 見やすい桁で区切るのが良い(10進なら3桁等) • 参考ページ: • Numeric Separators - GitHub - Node学園 36時限目 // 10進数の桁区切り const num1 = 100_000_000; const num2 = 12_345_567; console.log(num1 + num2); // 112345678 // 16進数、2進数の桁区切り const hexNum = 0x01_2F; const binNum = 0b1010_0101; // parseIntでの10進数変換もできる// console.log(parseInt(hexNum)); // 303 console.log(paeseInt(binNum)); // 165 // 注意:parseIntは、桁区切りの文字列は対応不可 console.log(parseInt(1_024)); // 1024 console.log(paeseInt(“1_024”)); // 1(=‘_’の直前まで)
7.
Node学園 36時限目 String.prototype.replaceAll(文字列全置換)
8.
String.prototype.replaceAll(文字列全置換) • 文字列の全置換専用の関数 • 置換対象文字列の正規表現での指定が不要に •
「/hoge/g」→「”hoge”」と、文字列の指定でOK • 正規表現での指定も可能 • 「g」フラグを付けないとエラーになる • 引数指定が、他言語(C#, Javaなど)と近い感じに • 知らないと結構ハマる部分だと思うので… • Javaの「replaceAll」と混同するかも? • でも正規表現の指定もOKだから問題ない • 関数名から「全置換」という挙動が明確 • 参考ページ: • String.prototype.replaceAll() -MDN Web Docs - Node学園 36時限目 // 置換対象の文字列 const str =“hoge|fuga|piyo”; // replace関数は、文字列指定だと「一致した最初の文 字列」しか置換してくれない。 console.log(str.replace(‘|’, ‘_’)); // hoge_fuga|piyo // replace関数で全置換する場合、正規表現で指定する 必要がある。// console.log(str.replace(/|/g, ‘_’)); // hoge_fuga_piyo // replaceAll関数ならば、文字列指定でも全置換して くれる。 console.log(str.replaceAll(‘|’, ‘_’)); // hoge_fuga_piyo
9.
Node学園 36時限目 Promise.any
10.
Promise.any • 複数のPromiseのうち「最初にresolveされたPromise」を返す関数 • どれか1個(=any)でもresolveされればOK •
Promise.raceとの違いは「どれか1個でもresolveされればOK」ということ • Promise.raceと違い「最初に返されたPromise」だけで判定しない • 一番最後に返されたPromiseのみresolveされた…というケースでもOK • 「どれか1つでも正常終了したらOK」という実装が可能に • 地味に実装が大変な部分だったので、個人的には結構嬉しい • 参考ページ: • Promise.any() -MDN Web Docs - Node学園 36時限目
11.
Promise.anyのコード例 //msミリ秒間処理を停止する処理。(Thread.Sleepと同じ) const _sleep =
(ms) => new Promise((resolve) => setTimeout(resolve, ms)); // この関数が外部から呼ばれるとする。 async function promiseAnyOrRace() { // Promise.anyはエラーにならない。(promise3がresolveされるので。 resultには「promise3 is resolved」が格納される) const result = await Promise.any([promise1(), promise2(), promise3()]); // Promise.raceはエラーになる。(最初に返ってくるpromise1が rejectされるので。エラーメッセージには「promise1 is rejected」が格 納される) const result2 = await Promise.race([promise1(), promise2(), promise3()]); } (※右上へ続く) (※左下からの続き) // 1秒後にrejectする関数 async function promise1() { await _sleep(1000); throw new Error("promise1 is rejected"); } // 2秒後にrejectする関数 async function promise2() { await _sleep(2000); throw new Error("promise2 is rejected"); } // 3秒後にresolveする関数 async function promise3() { await _sleep(3000); return "promise3 is resolved"; } Node学園 36時限目
12.
Node学園 36時限目 WeakReferences(オブジェクトへの弱参照) → WeakRef/FinalizationRegistry
13.
WeakRef • オブジェクトへの「弱い参照」を提供する機能 • 「弱い参照」とは、以下の機構を持つ参照 •
オブジェクトの参照(=値の取得)が可能 • ガベージコレクション(GC)の挙動を邪魔しない • 「GCの挙動を邪魔しない」とは… • WeakRef以外にそのオブジェクトが参照されない場合、 そのオブジェクトはGCされる • WeakRefが参照しているオブジェクトがメモリ上にある 保証はない • 挙動がGCに大きく依存する • 参考ページ: • WeakRef -MDN Web Docs - Node学園 36時限目 const obj = { value: { hoge: 'fuga’} } // WeakRef(=弱参照)を設定し、deref()で値を参照 const ref = new WeakRef(obj.value); console.log(ref.deref()); // obj.valueのWeakRef以外の参照をなくす(GC対象) obj.value = null; // どこかのタイミングobj.valueがGCされ、deref()で 参照できなくなる。(nullでもundefinedでもない) setInterval(() => { console.log(ref.deref()); }, 1000)
14.
FinalizationRegistry • 「オブジェクトがGCされたこと」をトリガに起動 するコールバック関数を提供 • C#の「IDisposable」に近い •
WeakRefと組み合わせて「GCされた場合にログを 出す」などの処理が可能 • これも挙動がGCに大きく依存する • 参考ページ: • FinalizationRegistry -MDN Web Docs - Node学園 36時限目 const obj = { value: { hoge: 'fuga’}, token: { value: ‘piyo’} } // GCされた場合のコールバック関数を定義 const registry = new FinalizationRegistry(value => { console.log(`${value} はGCされました。`); }); // FinalizationRegistryにオブジェクトを登録 registry.register(obj.value, "obj.value.hoge“, obj.token); // FinalizationRegistryに登録されたオブジェクトの登 録解除 registry.unregister(obj.token);
15.
Node学園 36時限目 デモ(WeakRef/FinalizationRegistry)
16.
WeakRef/FinalizationRegistryの使いどころ • 主な使い道としては「大きいオブジェクトのキャッシュやマッピング」(TC39公式) • 例:繰り返し参照するDBテーブルのレコードセット…など •
ただし「可能な限り使用は避けるべき」(TC39公式) • GCに大きく依存する・GCの挙動の制御が困難 • 使い道を挙げるならば「開発時・障害時のメモリの調査」に用いる? • 少なくとも、プロダクトコードでの使用は避けた方が良いと思う • 参考ページ: • A note of caution - WeakRefs TC39 proposal - Node学園 36時限目
17.
Node学園 36時限目 Logical Assignment(代入演算子)
18.
Logical Assignment(代入演算子) • Version16で、下記の代入演算子が新たに追加 •
??= • ||= • &&= • 使い方、および挙動などは下表を参照 Node学園 36時限目 演算子 主な使い方 挙動 備考 ??= a ??= b aがnullまたはundefinedの場合、aにbを代入 する 0, false, 空文字の場合は代入されない ||= a || = b aがfalsyな値の場合、aにbを代入する falsyな値:null, undefined, 0, false, 空文 字など &&= a &&= b aがtruthyな値の場合、aにbを代入する truthyな値:falsyではない値
19.
まとめ • Version16の感想としては「大きな変更はないが、地味な部分で便利になった」印象 • でもreplaceAllやPromise.anyはありがたい •
WeakRefやFinalizationRegistryの扱いには注意が必要 • できれば扱わないに越したことはない Node学園 36時限目
20.
以上です ご清聴ありがとうございました Node学園 36時限目
Jetzt herunterladen