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.7k
JavaScriptビルド概論
上越TechMeetup #3で喋りました。なんでJavaScriptにビルドが必要なんじゃ!という方向けです。
Yukiya Nakagawa
April 13, 2019
Tweet
Share
More Decks by Yukiya Nakagawa
See All by Yukiya Nakagawa
Remix × Cloudflare Pages × Sentry 奮闘記 / remix-pages-sentry
nkzn
1
1.1k
Cloudflareスタックで月間1200万UUの経済メディアにアバター画像生成サービスを作る / Cloudflare Developer Platform for AI avatar service
nkzn
7
3k
5分で流し読むCloudflare Developer Platform
nkzn
3
310
次世代Web認証「パスキー」 / mo-zatsudan-passkey
nkzn
31
18k
パスキーについて今日時点の僕が知っていること / What I Know About Passkeys as of Today
nkzn
8
2.8k
青い空の歩き方 / Flying in the bluesky
nkzn
1
290
SPAの歴史とRemix SPAモードという到達点 / the SPA's chronicle reaches to remix
nkzn
48
17k
RemixでWeb標準を学んだ1年間 / First year with Remix
nkzn
23
8.4k
純粋培養フルリモート開発組織のワーク&ライフスタイル / monicle full remote style
nkzn
5
4k
Other Decks in Programming
See All in Programming
CDK開発におけるコーディング規約の運用
yamanashi_ren01
2
220
新宿駅構内を三人称視点で探索してみる
satoshi7190
2
110
メンテが命: PHPフレームワークのコンテナ化とアップグレード戦略
shunta27
0
280
楽しく向き合う例外対応
okutsu
0
570
Pulsar2 を雰囲気で使ってみよう
anoken
0
250
CI改善もDatadogとともに
taumu
0
180
ML.NETで始める機械学習
ymd65536
0
220
Rubyで始める関数型ドメインモデリング
shogo_tksk
0
130
負債になりにくいCSSをデザイナとつくるには?
fsubal
10
2.5k
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
7
4.1k
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
40
16k
DRFを少しずつ オニオンアーキテクチャに寄せていく DjangoCongress JP 2025
nealle
2
210
Featured
See All Featured
Building an army of robots
kneath
303
45k
Git: the NoSQL Database
bkeepers
PRO
427
65k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Side Projects
sachag
452
42k
For a Future-Friendly Web
brad_frost
176
9.6k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
4 Signs Your Business is Dying
shpigford
182
22k
We Have a Design System, Now What?
morganepeng
51
7.4k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
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ʯʹ׳Ε͍ͯ͜͏ •
͔͜͜Βઌ܅ͨͪͷͰ͔֬Ίͯ͘Εʂ