JavaScriptを使いこなそう

Transcript

1. JavaScriptを使いこなそう 西村 航 ( @wataru_nishi731 ) 未完Project Webpack 勉強会用資料 1
2. 目次 1. JavaScriptをおさらい 2. 一歩進んだJavaScriptの使い方 3. ES2015とかって何？ 4. CommonJS / ES Modules を知ろう！ 5. バンドルツールを活用してJavaScriptを使いこなそう 6. バンドルツールでの軽量化 2
3. JavaScriptをおさらい JavaScriptの一番簡単な使い方をおさらいしましょう <html> <head> <title>Sample website</title> </head> <body> <h1>Heading</h1> </body> <script> // Hello, World! を出力 console.log("Hello, World!") </script> </html> さすがにこの使い方で使うことは少ない 3
4. 一般的な使い方 index.html <html> <!-- <head></head> は省略 --> <body> <h1>Heading</h1> <button id="button">Push me!</button> </body> <!-- index.js で読み込み --> <script src="index.js"></script> </html> index.js var item = document.querySelector("#button") item.addEventListner("click", function(){ console.log("Button Clicked!") }) 4
5. 実際に使うときは jquery等の外部ライブラリを<head>で読み込む <head> <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"crossorigin="anonymous"></script> </head> 複数のJavaScriptを利用したプログラムの記述 <!-- メイン --> <script src="index.js"></script> <!-- サブ --> <script src="alert.js"></script> 5
6. 一歩進んだJavaScriptの使い方 ES2015からの機能を使う（これは後で回収します） const , let , arrow function JavaScriptモジュール (ES Modules) 6
7. JavaScript モジュール JavaScriptの関数やオブジェクト、変数をモジュール化されたファイルを通して、分割 して扱う方法 7
8. index.js draw.js save.js fileManagement.js 例えば... JavaScriptでペイントツールを作ると き 今までだとindex.jsや複数ファイ ルで横断してプログラムを作成 していた JavaScriptモジュールを活用する ことで機能だけを別分けしてコ ードを書くことができる 8
9. 参考 こんな風に使います https://github.com/mdn/js-examples/tree/master/modules/basic-modules 9
10. コード実例 export import を利用してモジュール機能を利用 modules/draw.js const drawRectangle = (x,y,w,h) => { // 長方形を描画 } export { drawRectangle } index.js // importで読み込み import { drawRectangle } from "./modules/draw.js" // 読み込み時に実行 window.onload = (event) => { drawReactangle() } 10
11. ES2015とかって何？ JavaScriptには規格が存在しており、規格を定めている機関Ecma International の名前 からECMAScriptと呼びます ES2015は2015年にリリースされたECMAScriptのバージョンです。 2015年以降毎年更新され、現在ES2022のリリース待ちです。 11
12. ES2015でリリースされた機能 const let による宣言 アロー関数（arrow function） etc... ES2017でリリースされた機能 async/await を利用した非同期処理 ES2018でリリースされた機能 オブジェクトのスプレッド演算子 などなど 12
13. CommonJS / ES Modules を知ろう 先ほどのモジュールを利用した開発には２つの方法があります。 Common JS ウェブブラウザ環境外で一般的に使われているモジュールシステム Node.jsが採用しており、メインのモジュールシステムがこれ module.exports = { // export したい内容を指定 } const object = require("./module.js") 13
14. ES Modules JavaScript Native なモジュールシステム Node.js でも使えるし、クライアントサイド JavaScriptでも使える export import を利用してモジュールを管理する defaultエクスポートや名前付きエクスポートなどCommonJSに比べ選択肢の幅が広く 後述の Tree Shaking で活用される 14
15. バンドルツールを活用してJavaScriptを使いこなそう webpack や vite と呼ばれるバンドルツールを利用することで、 先ほどのモジュールシステムで利用されるたくさんのモジュールファイルを管理可 能。 15
16. バンドルツールでの軽量化 方法はSplitChunkやTree Shakingなど利用方法はいろいろあるが、今回取り上げるのは Tree Shaking Tree Shakingとは？ モジュールを組み合わせてバンドルするときに、使わないコードを含めないでバンド ルすることでバンドル後のファイルサイズ（ビルドサイズ）を小さくし、読み込み速 度を上げることができる。 例えば、lodashと呼ばれるライブラリ群も適切に利用することでビルドサイズを大幅 に削減できる。 16