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
880
Remix × Cloudflare Pages × Sentry 奮闘記 / remix-pages-sentry
nkzn
1
1.7k
Cloudflareスタックで月間1200万UUの経済メディアにアバター画像生成サービスを作る / Cloudflare Developer Platform for AI avatar service
nkzn
7
3.7k
5分で流し読むCloudflare Developer Platform
nkzn
3
370
次世代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
構造化・自動化・ガードレール - Vibe Coding実践記 -
tonegawa07
0
160
ソフトウェア設計とAI技術の活用
masuda220
PRO
25
7k
#QiitaBash TDDで(自分の)開発がどう変わったか
ryosukedtomita
1
190
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
570
Comparing decimals in Swift Testing
417_72ki
0
140
Claude Code派?Gemini CLI派? みんなで比較LT会!_20250716
junholee
1
760
SQLアンチパターン第2版 データベースプログラミングで陥りがちな失敗とその対策 / Intro to SQL Antipatterns 2nd
twada
PRO
35
10k
Go製CLIツールをnpmで配布するには
syumai
1
920
PHPカンファレンス関西2025 基調講演
sugimotokei
6
1k
なぜあなたのオブザーバビリティ導入は頓挫するのか
ryota_hnk
4
530
Gemini CLIの"強み"を知る! Gemini CLIとClaude Codeを比較してみた!
kotahisafuru
2
680
Workers を定期実行する方法は一つじゃない
rokuosan
0
130
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
524
40k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
The Cost Of JavaScript in 2023
addyosmani
51
8.7k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Docker and Python
trallard
45
3.5k
Raft: Consensus for Rubyists
vanstee
140
7k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
182
54k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
Art, The Web, and Tiny UX
lynnandtonic
301
21k
Statistics for Hackers
jakevdp
799
220k
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ʯʹ׳Ε͍ͯ͜͏ •
͔͜͜Βઌ܅ͨͪͷͰ͔֬Ίͯ͘Εʂ