モダンJavaScript入門

モダン JavaScript 入門 ES2015(ES6) 以降の書き方と Webpack, Babel について Daichi Sunagawa

モダンJavaScript とは？仮想DOMとは？ ECMAScript とは？ Babel とは？ Webpack とは？この書き方知ってる？
実践モダンJavaScript 1. 2. 3. 4. 5. 6. 7. アジェンダ

1. React、Vue、Angular、Riot 等の仮想DOM を用いるライブラリ/フレームワークを利用している 2. パッケージマネージャ(npm,yarnなど)を利用している 3. 主に
ES2015 以降の記法を利用している 4. トランスパイラ(Babelなど)を利用している 5. モジュールバンドラー(Webpackなど)を利用しているモダンJavaScriptとは? 厳密な定義はないものの、現状よく言われているのは...

仮想DOMとは UI の理想的な、または"仮想"表現をメモリー内に保持し、"実際の" DOM と同期させるというプログラミングの概念 Vue.js より引用

DOMとは Document Object Model の略。ウェブ上の文書のコンテンツと構造からなるオブジェクトのデータ表現のこと。ウェブページとスクリプトやプログラミング言語を接続するもの。 MDN
より引用

Document html head body h1 モダンJavaScript入門 p ES2015(ES6) 以降の書き方と Webpack,
Babel について id Node HTMLElement Text Attr … getElementById()

Document html head body h1 モダンJavaScript入門 p ES2015(ES6) 以降の書き方と Webpack,
Babel について JavaScriptでDOMを操作して、 Webページの要素を操作することができる id … getElementById()

React や Vue.js は、「実際のDOMを直接操作するのではなく、仮想DOMを操作した結果を、DOMに反映する」ライブラリ / フレームワーク

仮想DOMのメリット第3回『ReactとNext.js』に続く... とりあえず、仮想DOMを使うのがナウい。

ECMAScriptとは国際的な標準化団体のEcma International （エクマ・インターナショナル）が策定している JavaScriptの標準規格。 IT用語辞典 e-Words より引用

JavaScriptが抱えていた問題点 JavaScriptは、Netscape Communications 社によって開発されたプログラミング言語で、同社が開発していたブラウザ Netscape Navigator で動作
するものでした。その後、他のブラウザでも利用できるようになり、ブラウザごとに機能拡張が行われ、互換性に問題が生じるようになりました。

ECMAScriptとは国際的な標準化団体のEcma International （エクマ・インターナショナル）が策定している JavaScriptの標準規格。 IT用語辞典 e-Words より引用

ECMAScript の仕様を実装したものが JavaScript JavaScriptはブラウザごとに仕様が実装されている（JavaScriptエンジンが作られている） e.g) V8, SpiderMonkey, etc... ECMAScriptと
JavaScriptの関係は？

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はブラウザごとに動作が異なるため、バージョンという概念がない

トランスパイラとはあるプログラミング言語で書かれたプログラムを、別のプログラミング言語のプログラムに変換するソフトウェア。 IT用語辞典 e-Words より引用

Babelとは JavaScriptのコードを新しい書き方から古い書き方に変換するツール。

複数のファイルを１つにまとめて出力してくれるツール。モジュールバンドラとは

複数のJavaScriptファイルを一つのファイルにまとめて出力するツール Webpackとは

Webpack、Babelの使い方詳しい使い方は、時間があればいつかやります。

JavaScriptを学ぶなら新しいESバージョンで学ぶ方がお得

さて、ここからが本題です。 ECMAScript2015以降の書き方、いくつ知ってるでしょうか。この書き方知ってる？

includes, map, filter, etc... 配列操作系

オブジェクトリテラル, スプレッド構文オブジェクト系

オプショナルチェーンオブジェクト系

Reactを添えてここまでのまとめ

async/await, Promise.all 非同期処理

Nullish Coalescing Operator, Numeric Separators その他

現代的なJSの書き方で出力してくれるらしい。 ChatGPTでJSのコードを出力させるときは、 "現代的なJSの書き方で"のような文言を入れると最後に

モダンJavaScript入門

モダンJavaScript入門

Daichi Sunagawa

More Decks by Daichi Sunagawa

Other Decks in Programming

Featured

Transcript