Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
JavaScriptを使いこなそう
Search
Nishimura Wataru
April 09, 2022
Programming
0
170
JavaScriptを使いこなそう
Nishimura Wataru
April 09, 2022
Tweet
Share
More Decks by Nishimura Wataru
See All by Nishimura Wataru
Minecraft Modding in 1.7.10 環境構築編 @ 電脳隊
watarunishimura
0
72
Other Decks in Programming
See All in Programming
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
50
33k
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
750
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
550
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
770
datadog dash 2025 LLM observability for reliability and stability
ivry_presentationmaterials
0
450
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
220
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
250
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
500
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
620
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
160
5つのアンチパターンから学ぶLT設計
narihara
1
160
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
270
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
42
2.7k
For a Future-Friendly Web
brad_frost
179
9.8k
Raft: Consensus for Rubyists
vanstee
140
7k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
250
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
680
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
How to Ace a Technical Interview
jacobian
277
23k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
A Modern Web Designer's Workflow
chriscoyier
694
190k
Done Done
chrislema
184
16k
The Language of Interfaces
destraynor
158
25k
Transcript
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> <!-- <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
実際に使うときは 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 を知ろう 先ほどのモジュールを利用した開発には2つの方法があります。 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