モダンJavaScript入門

Transcript

1. モダン JavaScript 入門 ES2015(ES6) 以降の書き方と Webpack, Babel について Daichi Sunagawa
2. モダンJavaScript とは？ 仮想DOMとは？ ECMAScript とは？ Babel とは？ Webpack とは？ この書き方知ってる？ 実践モダンJavaScript 1. 2. 3. 4. 5. 6. 7. アジェンダ
3. 1. React、Vue、Angular、Riot 等の 仮想DOM を用いるライブ ラリ/フレームワークを利用している 2. パッケージマネージャ(npm,yarnなど)を利用している 3. 主に ES2015 以降の記法を利用している 4. トランスパイラ(Babelなど)を利用している 5. モジュールバンドラー(Webpackなど)を利用している モダンJavaScriptとは? 厳密な定義はないものの、現状よく言われているのは...
4. 1. React、Vue、Angular、Riot 等の 仮想DOM を用いるライブ ラリ/フレームワークを利用している 2. パッケージマネージャ(npm,yarnなど)を利用している 3. 主に ES2015 以降の記法を利用している 4. トランスパイラ(Babelなど)を利用している 5. モジュールバンドラー(Webpackなど)を利用している モダンJavaScriptとは? 厳密な定義はないものの、現状よく言われているのは...
5. 仮想DOMとは UI の理想的な、または"仮想"表現を メモリー内に保持し、"実際の" DOM と同期させる というプログラミングの概念 Vue.js より引用
6. DOMとは Document Object Model の略。 ウェブ上の文書のコンテンツと構造からなるオブジ ェクトのデータ表現のこと。 ウェブページとスクリプトやプログラミング言語を 接続するもの。 MDN より引用
7. Document html head body h1 モダンJavaScript入門 p ES2015(ES6) 以降の書き方と Webpack, Babel について id Node HTMLElement Text Attr … getElementById()
8. Document html head body h1 モダンJavaScript入門 p ES2015(ES6) 以降の書き方と Webpack, Babel について JavaScriptでDOMを操作して、 Webページの要素を 操作することができる id … getElementById()
9. React や Vue.js は、 「実際のDOMを直接操作するのではなく、 仮想DOMを操作した結果を、DOMに反映する」 ライブラリ / フレームワーク
10. 仮想DOMのメリット 第3回『ReactとNext.js』に続く... とりあえず、仮想DOMを使うのがナウい。
11. 1. React、Vue、Angular、Riot 等の 仮想DOM を用いるライブ ラリ/フレームワークを利用している 2. パッケージマネージャ(npm,yarnなど)を利用している 3. 主に ES2015 以降の記法を利用している 4. トランスパイラ(Babelなど)を利用している 5. モジュールバンドラー(Webpackなど)を利用している モダンJavaScriptとは? 厳密な定義はないものの、現状よく言われているのは...
12. ECMAScriptとは 国際的な標準化団体のEcma International （エクマ・インターナショナル）が策定している JavaScriptの標準規格。 IT用語辞典 e-Words より引用
13. JavaScriptが 抱えていた問題点 JavaScriptは、Netscape Communications 社によって 開発されたプログラミング言語で、 同社が開発していたブラウザ Netscape Navigator で動作 するものでした。 その後、他のブラウザでも利用できるようになり、 ブラウザごとに機能拡張が行われ、互換性に問題が生じるよ うになりました。
14. ECMAScriptとは 国際的な標準化団体のEcma International （エクマ・インターナショナル）が策定している JavaScriptの標準規格。 IT用語辞典 e-Words より引用
15. ECMAScript の仕様を実装したものが JavaScript JavaScriptはブラウザごとに仕様が実装されている （JavaScriptエンジンが作られている） e.g) V8, SpiderMonkey, etc... ECMAScriptと JavaScriptの関係は？
16. Edition 略称 公開日 ECMAScript 1 ES1 1997年6月 ECMAScript 2 ES2 1998年6月 ECMAScript 3 ES3 1999年12月 ECMAScript 4 ES4 破棄 ECMAScript 5 ES5 2009年12月 ECMAScript 5.1 ES5.1 2011年6月 ECMAScript 2015 ES2015 / ES6 2015年6月 ECMAScript 2016 ES2016 / ES7 2016年6月 ECMAScript 2017 ES2017 / ES8 2017年6月 ECMAScript 2018 ES2018 / ES9 2018年6月 ECMAScript 2019 ES2019 / ES10 2019年6月 ECMAScript 2020 ES2020 / ES11 2020年6月 ECMAScriptのバージョン は？ JavaScriptはブラウザごとに動作が異なるため、バージョンという概念がない
17. 1. React、Vue、Angular、Riot 等の 仮想DOM を用いるライブ ラリ/フレームワークを利用している 2. パッケージマネージャ(npm,yarnなど)を利用している 3. 主に ES2015 以降の記法を利用している 4. トランスパイラ(Babelなど)を利用している 5. モジュールバンドラー(Webpackなど)を利用している モダンJavaScriptとは? 厳密な定義はないものの、現状よく言われているのは...
18. トランスパイラとは あるプログラミング言語で書かれたプログラムを、 別のプログラミング言語のプログラムに変換するソ フトウェア。 IT用語辞典 e-Words より引用
19. Babelとは JavaScriptのコードを新しい書き方から古い書き方 に変換するツール。
20. 1. React、Vue、Angular、Riot 等の 仮想DOM を用いるライブ ラリ/フレームワークを利用している 2. パッケージマネージャ(npm,yarnなど)を利用している 3. 主に ES2015 以降の記法を利用している 4. トランスパイラ(Babelなど)を利用している 5. モジュールバンドラー(Webpackなど)を利用している モダンJavaScriptとは? 厳密な定義はないものの、現状よく言われているのは...
21. 複数のファイルを１つにまとめて出力してくれる ツール。 モジュールバンドラとは
22. 複数のJavaScriptファイルを 一つのファイルにまとめて 出力するツール Webpackとは
23. Webpack、Babelの使い方 詳しい使い方は、時間があればいつかやります。
24. JavaScriptを学ぶなら 新しいESバージョンで 学ぶ方がお得
25. さて、ここからが本題です。 ECMAScript2015以降の書き方、 いくつ知ってるでしょうか。 この書き方知ってる？
26. includes, map, filter, etc... 配列操作系
27. オブジェクトリテラル, スプレッド構文 オブジェクト系
28. オプショナルチェーン オブジェクト系
29. Reactを添えて ここまでのまとめ
30. async/await, Promise.all 非同期処理
31. Nullish Coalescing Operator, Numeric Separators その他
32. 現代的なJSの書き方で出力してくれるらしい。 ChatGPTでJSのコードを出力させるときは、 "現代的なJSの書き方で"のような文言を入れると 最後に