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
Yukiya Nakagawa
April 13, 2019
Programming
2
1.8k
JavaScriptビルド概論
上越TechMeetup #3で喋りました。なんでJavaScriptにビルドが必要なんじゃ!という方向けです。
Yukiya Nakagawa
April 13, 2019
Tweet
Share
More Decks by Yukiya Nakagawa
See All by Yukiya Nakagawa
経済メディア編集部の実務に小さく刺さるAI / small-ai-with-editorial
nkzn
2
830
Remix × Cloudflare Pages × Sentry 奮闘記 / remix-pages-sentry
nkzn
1
1.6k
Cloudflareスタックで月間1200万UUの経済メディアにアバター画像生成サービスを作る / Cloudflare Developer Platform for AI avatar service
nkzn
7
3.6k
5分で流し読むCloudflare Developer Platform
nkzn
3
360
次世代Web認証「パスキー」 / mo-zatsudan-passkey
nkzn
32
18k
パスキーについて今日時点の僕が知っていること / What I Know About Passkeys as of Today
nkzn
8
2.9k
青い空の歩き方 / Flying in the bluesky
nkzn
1
320
SPAの歴史とRemix SPAモードという到達点 / the SPA's chronicle reaches to remix
nkzn
48
18k
RemixでWeb標準を学んだ1年間 / First year with Remix
nkzn
23
8.7k
Other Decks in Programming
See All in Programming
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
110
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
170
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
510
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
380
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
230
アンドパッドの Go 勉強会「 gopher 会」とその内容の紹介
andpad
0
270
GraphRAGの仕組みまるわかり
tosuri13
8
500
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
100
VS Code Update for GitHub Copilot
74th
1
480
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
670
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
1
130
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
870
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
A Modern Web Designer's Workflow
chriscoyier
694
190k
Rails Girls Zürich Keynote
gr2m
94
14k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
We Have a Design System, Now What?
morganepeng
53
7.7k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Six Lessons from altMBA
skipperchong
28
3.9k
GitHub's CSS Performance
jonrohan
1031
460k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Practical Orchestrator
shlominoach
188
11k
Transcript
JavaScriptϏϧυ֓ 2019.4.13 @Nkzn / Yukiya Nakagawa Joetsu Tech Meetup
whoami • Yukiya Nakagawa / @Nkzn ʢ32ࡀʣ ্ӽࢢग़ • Υʔλʔηϧגࣜձࣾ@৽ׁࢢ
ۀ͚αʔϏεʮΞάϦϊʔτʯ • AndroidΤϯδχΞˠϞόΠϧدΓJSΤϯδχΞ • ໌ٕज़ॻయͰຊചͬͯ·͢
ධൃץத
ࠓ JSͷϏϧυͷΛ͠·͢
Target • JavaScriptʹͲ͏ͯ͠Ϗϧυ͕ඞཁʹͳ͍ͬͯ Δͷ͔ͬ͘͠Γདྷ͍ͯͳ͍ํ
࠷ۙͷJavaScript
ϞδϡʔϧػߏͬͯେࣄͰ͢ΑͶ • ϑΝΠϧ͝ͱʹ໊લۭؒΛ͚ΒΕΔ • େ͖ͳΞϓϦέʔγϣϯΛখ͞ͳػೳͷू߹ ͱͯ͠࡞Γ͘͢ͳΔ ಥવͰ͕͢
<!-- index.html --> <script type="text/javascript" src="./greeter.js"></script> <script type="text/javascript" src="./app.js"></script> Plain
Old JavaScript (ES5) // app.js Greeter.greet('Bob'); // greeter.js var Greeter = { greet: function(name) { alert("Hello, " + name + "!"); } }; • ϑΝΠϧؒͰ ໊લۭؒΛڞ༗ • ؔʹ͔͠ είʔϓ͕ͳ͍ • ΈΜͳͰ໊લͷ औΓ߹͍
20179݄ • Chrome 61ͰϞδϡʔϧػߏ͕ϦϦʔε
ES6 Modules <!-- index.html --> <script type="module" src="./app.js"></script> // greeter.js
const greet = (name) => { alert(`Hello, ${name}!`); } export const Greeter = { greet, }; // app.js import {Greeter} from './greeter.js'; Greeter.greet("hoge"); (SFFUFS͔͠ެ։͞Εͳ͍ ʢHSFFUؔӅṭ͞ΕΔʣ JNQPSUͨ͠ϞδϡʔϧΛΈ߹Θͤͯ ػೳΛ࡞ΕΔ
େମͷ࠷৽ϒϥβͰಈ͘ https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/import
ΊͰͨ͠ʂ
Ͱͳͯ͘
օ͞ΜͷखݩͷϒϥβͰ import/exportಈ͖·͔͢ʁ
ͨͿΜಈ͖·͢ΑͶ
օ͞Μͷ ͓٬͞ΜͷϒϥβͰ import/exportಈ͖·͔͢ʁ
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/import
ES201xͷ ͋ͷจ๏͜ͷจ๏ ͓٬͞ΜͷϒϥβͰ ಈ͖·͔͢ʁ
const greet = (name) => { alert(`Hello, ${name}!`); } export
const Greeter = { greet, }; "SSPX'VODUJPOT 5FNQMBUF-JUFSBMT 4IPSUIBOEQSPQFSUZOBNFT
Arrow Functions https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions
Template Literals
Shorthand property names https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Object_initializer
IE11͕͍ ʢEdgeͱSafariͪΐͬͱ͍ʣ
WebΞϓϦέʔγϣϯ͕ Ͳͷϒϥβ͔Β ΞΫηε͞ΕΔ͔Λ ੍ݶ͢Δ͜ͱ͍͠ ʢ͋ΔఔͰ͖Δ͚Ͳମݧ͕ѱ͍ʣ
Ͳ͏͠Α͏ • ͔ͤͬ͘ྑ͍ݴޠ༷ʹͳ͖ͬͯͨͷʹɺݹ͍ϒϥ βͰಈ͔ͨ͢Ίʹݹ͍JavaScriptͰॻ͘ͷݏ • WebΞϓϦෳࡶͳϏδωεϩδοΫΛ࣋ͭͷଟ ͍ • Ϟδϡʔϧػߏasync/awaitແ͠ͰෳࡶͳϏδωεϩ δοΫΛίʔυ্ʹදݱ͢Δͷɺ։ൃޮอकੑ
ͷ໘ͰΑΖ͘͠ͳ͍
ES201xͰॻ͍ͨίʔυΛ ES5͔͠ಈ͔ͳ͍ϒϥβͰ ಈ͔͍ͨ͠
ϓϩάϥϚʔ͕ॻ͍ͨ ϑΝΠϧͷݴޠ༷ͱ ࣮ࡍʹಈ͘ϑΝΠϧͷ ݴޠ༷Λผʹ͍ͨ͠
͋ΔϓϩάϥϜϑΝΠϧΛ ϥϯλΠϜϑΝΠϧʹ ม͍ͨ͠
͜ΕίϯύΠϧϏϧυͱ ݺΕΔͷͰʁ JavaScriptΛ Ϗϧυ͢Δͧʂʂ
JavaScriptͷϏϧυ
JavaScriptͷ3ͭͷΞϓϩʔν • τϥϯεύΠϧ • ґଘੑղܾ • ϙϦϑΟϧ
τϥϯεύΠϧ • ʮಈ͘จ๏ʹ͢ΔʯʹಛԽͨ͠ • ͕͜͜ಘҙͳͷ͕Babelʢ͋ͱTypeScriptʣ • ϑΝΠϧόϥόϥͷ··ʢimportߏจ ͪΐͬͱܗ͕มΘΔఔʣ
https://babeljs.io/repl Babel(presets-es2015)ʹΑΔม Ṗͷάϩʔόϧมʹม͞Εͨ ʢ$PNNPO+4༷ͷFYQPSUػߏʣ #FGPSF "GUFS
https://babeljs.io/repl Babel(presets-es2015)ʹΑΔม #FGPSF "GUFS Ṗͷάϩʔόϧؔʹม͞Εͨ ʢ$PNNPO+4༷ͷJNQPSUػߏʣ
https://babeljs.io/repl Babel(presets-es2017)ʹΑΔม ϒϥβʹશ෯ͷ৴པΛஔ͘߹͜ΕͰ͍͍ #FGPSF "GUFS
https://babeljs.io/repl Babel(presets-es2017)ʹΑΔม #FGPSF "GUFS es2017ڥͰasync/awaitΛಈ͔͍ͨ͠߹ Γม͕ೖΔ BTZODؔΛ ͔ͭͬͯΈͨ
TypeScript(tsc)ʹΑΔม #FGPSF "GUFS ※ ઃఆͰมઌͷϞδϡʔϧ༷ʢCommonJS, AMDʣΛબͰ͖Δ https://www.typescriptlang.org/play/
ґଘੑղܾ • importߏจrequireؔͷ࣮ݱ • ΤϯτϦʔϙΠϯτʢindex.jsʣ͔ΒimportrequireͰ ܨ͕ͬͨϞδϡʔϧΛɺຊʹ࣮ߦͰ͖ΔΑ͏ʹ͢Δ • ࣮ߦ࣌ʹܨ͛ΔͭɿRequireJSʢAMDܗࣜΛಈ͔ ͢ʣ •
Ϗϧυ࣌ʹܨ͛ΔͭɿWebpack/Browserify/Rollup
Webpackͷ߹ @@XFCQBDL@SFRVJSF@@ ͱ͍͏͕ؔϞδϡʔϧղܾΛؤுΔ ͻͱͭPS͍͔ͭ͘ͷ +4ϑΝΠϧʹશϑΝΠϧΛ·ͱΊΔ
Webpackͷ߹ ˞ FWBMͳͷσόοάதͷڍಈͰ ͋ͱͰͪΌΜͱͨ͠ίʔυʹͳΓ·͢ ֎෦ϥΠϒϥϦϓϩμΫτίʔυ͕ SFRVJSFՄೳͳܗͰऔΓࠐ·Ε͍ͯΔ
NJOJGZVHMJGZͱ͔͍Ζ͍Ζೖͬͯ ϓϩμΫγϣϯڥͰ͜͏ͳΔ ʢ͜ͷྫUXJUUFSDPNʣ
ϙϦϑΟϧ • Γͳ͍ඪ४ϥΠϒϥϦΛJSͷସ࣮Ͱॆͯ͘͠ΕΔ • PromiseObject.assign͕ແ͔ͬͨࠒͷϒϥβͰɺಉ ͷಈ͖Λ͢Δಉ໊ͷؔ/Ϟδϡʔϧ͕ଘࡏ͢ΔΑ͏ʹؤுΔ • ϒϥβଆʹຊ࣮͕͋Δ߹ຊ࣮ͷํΛ͏ • ͕͜͜ಘҙͳͷ͕core-js
• @babel/preset-env Ͱྑ͍ײ͡ʹͳΔ͜ͱ͕ଟ͍
Babel(presets-es2015) https://babeljs.io/repl #FGPSF "GUFS 1SPNJTFղܾ͞Εͳ͍
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise
@babel/preset-env + core-js https://babeljs.io/repl 1SPNJTFΛάϩʔόϧείʔϓʹ ొͯ͘͠ΕΔ1PMZpMM !CBCFMQSFTFUFOWͷVTF#VJMU*OΦϓγϣϯΛ zVTBHFzʹ͢Δ͜ͱͰɺඞཁͳ1PMZpMM͕ೖΔΑ͏ʹͳΔ
padStart͑ΔΑ
core-js/modules/es.string.pad-start.js 'use strict'; var internalStringPad = require('../internals/string-pad'); var WEBKIT_BUG =
require('../internals/webkit-string-pad-bug'); // `String.prototype.padStart` method // https://tc39.github.io/ecma262/#sec-string.prototype.padstart require(‘../internals/export') ({ target: 'String', proto: true, forced: WEBKIT_BUG }, { padStart: function padStart(maxLength /* , fillString = ' ' */) { return internalStringPad( this, maxLength, arguments.length > 1 ? arguments[1] : undefined, true); } }); https://github.com/zloirock/core-js/blob/e3b99db/packages/core-js/modules/es.string.pad-start.js
2019ͷJavaScriptϏϧυ • Babel / TypeScriptͰτϥϯεύΠϧ͢Δ • WebpackͰґଘੑղܾΛߦ͏ • @babel/preset-envͱ͔ͰϙϦϑΟϧΛೖΕΔ Ͳ͏ͬͯʁ
ʢ@babel/preset-typescriptͰBabelͰτϥϯεύΠϧͰ͖ΔΑ͏ʹͳͬͨʣ
தڃऀҎ্͚ webpack.config.jsͱ babel.config.jsͷ ॻ͖ํΛ֮͑Δ
Ϗϧυ৬ਓͷேૣ͍
ॳڃऀ͚ɿ ͜ͷลͬͯॳظԽ͢ΔͱউखʹೖΔ • Create React App https://facebook.github.io/create-react-app/ • Angular CLI
https://cli.angular.io/ • Vue CLI https://cli.vuejs.org/ τϥϯεύΠϧ 5ZQF4DSJQUͰ࣮ݱ ઃఆϑΝΠϧΛ৮ΒͤͯΒ͑ͳ͍έʔε͋Δ ৮Γͨ͘ͳͬͨΒεςοϓΞοϓͷλΠϛϯά
·ͱΊ • JavaScriptͷϏϧυॻ͘ݴޠͱಈ͘ݴޠͷဃ͔Β ੜ·Εͨ • ϊϯϏϧυϞμϯJS·ͩ·ͩ͜Ε͔Βʢϗϯτ ͔ʁʣ • ࠓ͙͢։ൃ͢ΔͳΒʮϏϧυ͢ΔJSʯʹ׳Ε͍ͯ͜͏ •
͔͜͜Βઌ܅ͨͪͷͰ͔֬Ίͯ͘Εʂ