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
A2A プロトコルを試してみる
azukiazusa1
2
1.3k
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
600
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
130
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
250
NPOでのDevinの活用
codeforeveryone
0
730
WebViewの現在地 - SwiftUI時代のWebKit - / The Current State Of WebView
marcy731
0
110
Porting a visionOS App to Android XR
akkeylab
0
220
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
610
#QiitaBash MCPのセキュリティ
ryosukedtomita
0
890
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
1
7.7k
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
110
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
daisuketakeda
1
130
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Balancing Empowerment & Direction
lara
1
400
Making Projects Easy
brettharned
116
6.3k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
4 Signs Your Business is Dying
shpigford
184
22k
Raft: Consensus for Rubyists
vanstee
140
7k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
500
Thoughts on Productivity
jonyablonski
69
4.7k
Side Projects
sachag
455
42k
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