JavaScriptを使いこなそう

JavaScriptを使いこなそう西村航 ( @wataru_nishi731 ) 未完Project Webpack 勉強会用資料 1

目次 1. JavaScriptをおさらい 2. 一歩進んだJavaScriptの使い方 3. ES2015とかって何？ 4. CommonJS /
ES Modules を知ろう！ 5. バンドルツールを活用してJavaScriptを使いこなそう 6. バンドルツールでの軽量化 2

JavaScriptをおさらい JavaScriptの一番簡単な使い方をおさらいしましょう <html> <head> <title>Sample website</title> </head> <body> <h1>Heading</h1> </body>
<script> // Hello, World! を出力 console.log("Hello, World!") </script> </html> さすがにこの使い方で使うことは少ない 3

一般的な使い方 index.html <html>  <body> <h1>Heading</h1> <button
id="button">Push me!</button> </body>  <script src="index.js"></script> </html> index.js var item = document.querySelector("#button") item.addEventListner("click", function(){ console.log("Button Clicked!") }) 4

実際に使うときは 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

一歩進んだJavaScriptの使い方 ES2015からの機能を使う（これは後で回収します） const , let , arrow function JavaScriptモジュール (ES
Modules) 6

JavaScript モジュール JavaScriptの関数やオブジェクト、変数をモジュール化されたファイルを通して、分割して扱う方法 7

index.js draw.js save.js fileManagement.js 例えば... JavaScriptでペイントツールを作るとき今までだとindex.jsや複数ファイルで横断してプログラムを作成していた
JavaScriptモジュールを活用することで機能だけを別分けしてコードを書くことができる 8

参考こんな風に使います https://github.com/mdn/js-examples/tree/master/modules/basic-modules 9

コード実例 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

ES2015とかって何？ JavaScriptには規格が存在しており、規格を定めている機関Ecma International の名前からECMAScriptと呼びます ES2015は2015年にリリースされたECMAScriptのバージョンです。 2015年以降毎年更新され、現在ES2022のリリース待ちです。 11

ES2015でリリースされた機能 const let による宣言アロー関数（arrow function） etc... ES2017でリリースされた機能 async/await を利用した非同期処理
ES2018でリリースされた機能オブジェクトのスプレッド演算子などなど 12

CommonJS / ES Modules を知ろう先ほどのモジュールを利用した開発には２つの方法があります。 Common JS ウェブブラウザ環境外で一般的に使われているモジュールシステム Node.jsが採用しており、メインのモジュールシステムがこれ
module.exports = { // export したい内容を指定 } const object = require("./module.js") 13

ES Modules JavaScript Native なモジュールシステム Node.js でも使えるし、クライアントサイド JavaScriptでも使える export import
を利用してモジュールを管理する defaultエクスポートや名前付きエクスポートなどCommonJSに比べ選択肢の幅が広く後述の Tree Shaking で活用される 14

バンドルツールを活用してJavaScriptを使いこなそう webpack や vite と呼ばれるバンドルツールを利用することで、先ほどのモジュールシステムで利用されるたくさんのモジュールファイルを管理可能。 15

バンドルツールでの軽量化方法はSplitChunkやTree Shakingなど利用方法はいろいろあるが、今回取り上げるのは Tree Shaking Tree Shakingとは？モジュールを組み合わせてバンドルするときに、使わないコードを含めないでバンドルすることでバンドル後のファイルサイズ（ビルドサイズ）を小さくし、読み込み速度を上げることができる。
例えば、lodashと呼ばれるライブラリ群も適切に利用することでビルドサイズを大幅に削減できる。 16

JavaScriptを使いこなそう

JavaScriptを使いこなそう

Nishimura Wataru

More Decks by Nishimura Wataru

Other Decks in Programming

Featured

Transcript