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.5k
JavaScriptビルド概論
上越TechMeetup #3で喋りました。なんでJavaScriptにビルドが必要なんじゃ!という方向けです。
Yukiya Nakagawa
April 13, 2019
Tweet
Share
More Decks by Yukiya Nakagawa
See All by Yukiya Nakagawa
青い空の歩き方 / Flying in the bluesky
nkzn
1
94
SPAの歴史とRemix SPAモードという到達点 / the SPA's chronicle reaches to remix
nkzn
35
12k
RemixでWeb標準を学んだ1年間 / First year with Remix
nkzn
19
4.9k
純粋培養フルリモート開発組織のワーク&ライフスタイル / monicle full remote style
nkzn
6
2.9k
資産運用を対面で相談するサービスでITエンジニアがやることあるの? / derta-gig-04
nkzn
0
1.2k
React Nativeエコシステム概論 / react-native ecosystem
nkzn
1
770
React Native for Webのこれまでから読み解くReact GUIのこれから
nkzn
7
5.9k
Hooks時代の設計の話 #agrinoteinside
nkzn
41
12k
地方IT企業の戦略を広げる 技術選択としてのReact Native
nkzn
23
21k
Other Decks in Programming
See All in Programming
15分間でふんわり理解するDocker @ Matsuriba MAX
ukwhatn
PRO
1
340
どうしてこうなった命名集 ~🔥編~ / OOC 2024 LT
pictiny
4
2.8k
ドメイン・ファーストで考える問題解決に役立つモデル設計 / Domain First Model Design
suzushin54
1
1.4k
ISUCONってなんだか難しそう……!!でも、初めてのISUCONにPHPで挑戦してきました!
kotomin_m
1
300
オブジェクト指向は必要なのか / Is object-oriented needed?
kishida
27
19k
Data Contracts In Practice With Debezium and Apache Flink (Kafka Summit London)
gunnarmorling
2
280
フロントエンドパフォーマンス 入門
shouta2
7
1.5k
Material 3で Material 2ぽい見た目にする
numeroanddev
2
250
RubyVM を PHP で実装する 〜Hello World を出力するまで〜
memory1994
PRO
1
490
htmx is fun!
codehex
2
190
CSRF対策のやり方、そろそろアップデートしませんか / Update your knowledge of CSRF protection
hiro_y
25
15k
Cloud RunとCloud PubSubでサーバレスなデータ基盤2024 with Terraform / Cloud Run and PubSub with Terraform
shinyorke
7
1.9k
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
1
3.3k
Scaling GitHub
holman
456
140k
Agile that works and the tools we love
rasmusluckow
323
20k
Code Review Best Practice
trishagee
54
15k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.8k
Git: the NoSQL Database
bkeepers
PRO
421
63k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
272
12k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
657
120k
Robots, Beer and Maslow
schacon
PRO
154
7.9k
Designing on Purpose - Digital PM Summit 2013
jponch
109
6.4k
Designing with Data
zakiwarfel
94
4.8k
Navigating Team Friction
lara
177
13k
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ʯʹ׳Ε͍ͯ͜͏ •
͔͜͜Βઌ܅ͨͪͷͰ͔֬Ίͯ͘Εʂ