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
React 使いじゃなくても知っておきたい教養としての React
oukayuka
18
4.7k
Gemini CLIの"強み"を知る! Gemini CLIとClaude Codeを比較してみた!
kotahisafuru
2
720
フロントエンドのパフォーマンスチューニング
koukimiura
6
2.3k
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
20
9.7k
Prompt Engineeringの再定義「Context Engineering」とは
htsuruo
0
110
Google I/O Extended Incheon 2025 ~ What's new in Android development tools
pluu
1
210
JetBrainsのAI機能の紹介 #jjug
yusuke
0
160
DynamoDBは怖くない!〜テーブル設計の勘所とテスト戦略〜
hyamazaki
0
100
AIのメモリー
watany
11
1.1k
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
4
1.4k
それ CLI フレームワークがなくてもできるよ / Building CLI Tools Without Frameworks
orgachem
PRO
15
3.4k
202507_ADKで始めるエージェント開発の基本 〜デモを通じて紹介〜(奥田りさ)The Basics of Agent Development with ADK — A Demo-Focused Introduction
risatube
PRO
5
1.3k
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Unsuck your backbone
ammeep
671
58k
Optimizing for Happiness
mojombo
379
70k
Documentation Writing (for coders)
carmenintech
72
4.9k
4 Signs Your Business is Dying
shpigford
184
22k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
1k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Music & Morning Musume
bryan
46
6.7k
RailsConf 2023
tenderlove
30
1.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ʯʹ׳Ε͍ͯ͜͏ •
͔͜͜Βઌ܅ͨͪͷͰ͔֬Ίͯ͘Εʂ