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
JSのお勉強の話。
Search
Toro_Unit (Hiroshi Urabe)
August 05, 2017
Programming
3
1.1k
JSのお勉強の話。
SaCSS Special13 の発表資料です。
Toro_Unit (Hiroshi Urabe)
August 05, 2017
Tweet
Share
More Decks by Toro_Unit (Hiroshi Urabe)
See All by Toro_Unit (Hiroshi Urabe)
ブロックテーマでサイトリニューアルした話 / Toro_Unit / 2025.04.12 @ Shinshu WordPress Meetup
torounit
0
150
Cloudflare Meetup Nagano Vol.3
torounit
1
70
僕が考える 「HTML サイトを WordPress にする」話 / 2023-11-05 Kansai WordPress Meetup
torounit
9
7.6k
Cloudflare Pages に入門してみた / 2023-10-14 Cloudflare Meetup Nagano Vol.2
torounit
2
1.7k
ブロックエディタをゴリゴリに使い倒してサイトを作った話 / Kansai WordPress Meetup 2023 09 23
torounit
14
10k
ブロックエディターカスタマイズことはじめ #wpshinshu / 2023-06-17 Shinshu WordPress Meetup vol.24
torounit
1
390
FSE時代におけるWEBサイト制作の研究 #wpshinshu / 2023-05-20 Shinshu WordPress Meetup vol.23
torounit
0
430
ブロックエディターを用いたWEBサイト開発とカスタムフィールドのあり方を考える。/ WordCamp Japan 2021
torounit
0
560
ブロックエディターで変わる、WordPress でのウェブサイト開発 / SaCSS Special 26
torounit
4
870
Other Decks in Programming
See All in Programming
Rollupのビルド時間高速化によるプレビュー表示速度改善とバンドラとASTを駆使したプロダクト開発の難しさ
plaidtech
PRO
1
180
プロフェッショナルとしての成長「問題の深掘り」が導く真のスキルアップ / issue-analysis-and-skill-up
minodriven
7
1.5k
Chrome Extension Techniques from Hell
moznion
1
160
Cursor/Devin全社導入の理想と現実
saitoryc
15
9.5k
Module Boundaries and Architecture with Forensic Analysis @NxSummit Amsterdam 2025
manfredsteyer
PRO
0
100
Bedrock×MCPで社内ブログ執筆文化を育てたい!
har1101
6
1k
Youtube Lofier - Chrome拡張開発
ninikoko
0
2.4k
監視 やばい
syossan27
11
9.8k
Laravel × Clean Architecture
bumptakayuki
PRO
0
100
Contribute to Comunities | React Tokyo Meetup #4 LT
sasagar
0
500
サービスレベルを管理してアジャイルを加速しよう!! / slm-accelerate-agility
tomoyakitaura
1
180
Amazon CloudWatchの地味だけど強力な機能紹介!
itotsum
0
180
Featured
See All Featured
How to Ace a Technical Interview
jacobian
276
23k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
390
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.5k
GraphQLの誤解/rethinking-graphql
sonatard
71
10k
Six Lessons from altMBA
skipperchong
27
3.7k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Rails Girls Zürich Keynote
gr2m
94
13k
Building Flexible Design Systems
yeseniaperezcruz
329
38k
The Pragmatic Product Professional
lauravandoore
33
6.5k
Scaling GitHub
holman
459
140k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Transcript
JSͷ͓ษڧͷɻ Toro_Unit@SACSS Special13 1
$whoami 2
Toro_Unit ෦ ߛ (͏Β ͻΖ͠) ϑϦʔϥϯεr Frontend Engineer / Web
Designer Github: @torounit Twitter: @Toro_Unit Facebook: fb.me/torounit Blog: https://torounit.com 3
ׂͱWordPressͷਓͰ͢ɻ • WordBench ϞσϨʔλʔ • ϓϥάΠϯ/ςʔϚ࡞ऀ • WordCamp Kyoto
2017 ηογϣϯ νʔϜ 4
Plugins • Custom Post Type Permalinks • 413,500 Downloads •
Active Install 80,000+ • Other... Theme • Vanilla 5
Others • VCCW Team • WordPress Core Contributor (4.3,4.4,4.5,4.7) 6
ݝদຊࢢ͔Β͖·ͨ͠ɻ1 • ຊҰඒຯ͍͠Β͍͍͔͕͋͢͠Δ ͱ͔ແ͍ͱ͔ɻ • ϫΠϯඒຯ͍ɻ 1 https://commons.wikimedia.org/wiki/File: 130608_Matsumoto_Castle_Matsumoto_Nagano_pref_Japan02bs4.jpg Author:
663highland. License: CC BY 2.5 7
8
͖ͬͯͨ͜ͱ (2010 ~) • HTML&CSS ։ൃ / ͨ·ʹWebσβΠϯ • JavaScriptjQueryͰΰϦΰϦܥ͕ΘΓͱଟΊɻ
• CMS ςʔϚ੍࡞ • ( 9ׂํ WordPress or MovableType / ͨ·ʹDrupalͱ͔...etc ) • CMS ΧελϚΠζɾϓϥάΠϯ੍࡞ • ( ΧελϜϑΟʔϧυΊͬͪΌ࡞ͬͨΓɺPHPΊͬͪΌॻ͍ͨΓ ) • ڥ΄ͱΜͲϨϯλϧαʔόʔ (LAMP) 9
ͬͯͳ͍͜ͱ (ख͍ఔͳΒ͋Δ) • εϚϗΞϓϦ։ൃ • WEBαʔϏε։ൃ • γεςϜ։ൃ 10
ࠓͷͷΰʔϧ • ࣗͰάάΓͳ͕ΒJSͷษڧ͕ग़དྷ ΔΑ͏ʹͳΔɻ • Qiita ͷจॻ͕͋ΔఔཧղͰ͖Δ Α͏ʹͳΔɻ 11
Do you know JavaScript? 12
ͦͦJavaScript ͬͯͳʹʁ 13
• 1995ʹɺNetscapeʢޙͷFirefoxʣʹࡌ͞Εͨϒϥβ ༻ͷϓϩάϥϛϯάݴޠɻ • ݩʑLiveScript໊ͬͯલ͚ͩͬͨͲɺେਓͷࣄͰվ໊ɻ 14
• ࠷ۙNode.jsɺϒϥβʹͱͲ· Βͣ൚༻తͳϓϩάϥϛϯάݴޠͱ ͯ͠ͷར༻૿͖͑ͯͨɻ • ݴޠͱͯ͠ɺͪΐͬͱมΘͬͨಛ Λ͍Ζ͍Ζ࣋ͬͯΔɻ • ϓϩτλΠϓϕʔε 15
JavaScriptͰԿ͕ग़དྷΔͷʁ 16
WEBαΠτͰͷϢʔεέʔεɻ • DOM (ϒϥβ্ͰͷHTML/CSS)ͷૢ࡞ɻ • https://codepen.io/torounit/pen/xLwjMB • Ajax. αʔόʔͱͷ௨৴ɻ •
https://codepen.io/torounit/pen/Kvzdej • more... 17
DEMO 18
͜ͷΑ͏ʹɺͪΐͬͱͨ͜͠ͱ͔ΒɺΞϓϦέʔγϣϯΈ͍ͨͳϞϊ·Ͱɺ༷ʑͳίτ͕Ͱ͖·͢ɻ 19
Usecase • WEBαΠτɾϒϥβΞϓϦέʔγϣϯ • ϞόΠϧΞϓϦ • σεΫτοϓΞϓϦέʔγϣϯ • Atom/Vscode/Slack/WordPress.com...etc •
Brackets 20
ͪΐͬͱָͦ͠͏͡Όͳ͍Ͱ͔͢ʁ ΕͬͭͱΒ͍ʂ 21
Ͱɺ͍͟άάͬͨΓ৭ΜͳࢿྉΛΑΉͱɾɾɾ 22
ES3/ES5/ES6/ES7/ ECMAScript2015/ ECMAScript2016/Node.js/Babel/ Bable/Webpack/browserify/ Rollup/fusebox/CoffeeScript/ TypeScript/jQuery/underscore.js/ Backbone.js/Angular/React/Vue/ Riot… 23
ʢ´°Ϝ°`;ʣ 24
• JavaScript ͷ͕Γ͍ͨΜ͚ͩ Ͳɻɻɻ • ͔͠ίϐϖͯ͠ಈ͔ͳ͍ɻɻɻ 25
ͱ͍͏Θ͚Ͱɺ࠷ॳɺJSքʹຮԆΔṖͷ୯ޠͷͬ͘͟Γղ આɺͦͷπʔϧ͕ੜ·ΕͨҙຯΛ͓͠͠Α͏ͱࢥ͍·͢ɻ 26
Α͘ฉ͘ ES6 ͱ ͔ ES2015 ͬͯ Կʁ 27
ECMAScript (௨শES) • ੜ͙ͯ͢͠ʹɺJavaScriptͬΆ͍ݴ ޠ͕ੜ·ΕΔɻ(IEͷJScript) • ECMAͱ͍͏ඪ४Խஂମ͕ඪ४ن֨ ΛఆΊΔɻͦΕ͕ECMAScript. • ཁJISن֨Έ͍ͨͳϠπɻ
28
ES6 / ES2015 • ECMAScript 6 Edition. 6൛. • ͜ΕͷࡦఆதʹຖϦϦʔε͢ΔΑ͏ʹͳͬͨͷͰɺਖ਼ࣜʹ
ɺECMAScript 2015ɻͨͩ͠Ҏલ͔ΒES6ͱݺΜͰ͍ͨͷ ͰɺES6ͱݺͼଓ͚͍ͯΔɻ • ES6ES5(2009)ͱผʹͳΔϨϕϧͰͷେ͖ͳมߋ͕͋ ͬͨɻ 29
ES2016 • ES2016: ECMAScript 2016ɻݱࡏެ։͞Ε͍ͯΔ࠷৽ͷ ༷ɻ ES.next, ES7 • ະདྷʹ࣮༧ఆor࣮͕ٞ͞Ε͍ͯΔ༷ͷ͜ͱɻES7
ແ͍͚Ͳɺաڈʹͦ͏͍͏ݴ͍ํΛ͍ͯͨ͠ࠒͷ໊ɻ 30
JavaScript / ECMAScript ͷྺ࢙ 1 • 1995: JavaScriptੜɻNetscapeʹࡌɻ • 1996:
JScriptੜɻIE3ʹࡌɻҰؾʹීٴɻ • 1997: ECMAScriptॳ൛ɻ • 1998: ES2. ୈ2൛ɻ • 1999: ES3͕ࡦఆɻ 31
JavaScript / ECMAScript ͷྺ࢙ 2 • 2000~2003ࠒ: ES4ͷ༷ࡦఆ͕࢝·Δɻ͕ɺࣦഊɻ • 2007~2008ࠒ:
࠶ͼES4ͷ༷ࡦఆ͕࢝·Δɻ͕ɺࣦഊɻͦͯ͠ES4 ͓ଂೖΓʹ... • 2008: ࣍ੈͷJSΛߟ͑ΔϓϩδΣΫτ ECMAScript Harmony ൃɻ • 2009: Internet Explorer 8 (ES3४ڌ…) • 2009: Node.JSͷొɻ • 2009: ES5ࡦఆ ʢͪ͜ΒES3.1Λͪΐͬͱվྑͨ͠Ϟϊʣ 32
ਐԽఀ͢Δ͕ͦͷؒɺരൃతʹधཁ͕৳ͼΔɻ • ύιίϯɺΠϯλʔωοτͷීٴɻ • Ajaxʹ͕ू·Δɻ • εϚʔτϑΥϯͷීٴɻ • Flashͷಈ͖ɻ 33
CommonJS / Node.JS • αʔόʔαΠυϒϥβҎ֎ͰJavaScriptΛ͍͍ͨʂ V8Τϯδϯ(Google ChromeͷJSΤϯδϯ)໓ۤૣ͍ʂ 34
AltJS (Altnative Javascript) • JavaScript ͍Ζ͍ΖͱଞͷϓϩάϥϜݴޠͱҧ͏ಛ͕ ͋Δɻ͍Ζ͍Ζݸੑతɻ(thisͱ͔...) • ͦΕΒͷΛղܾ͢ΔͨΊʹɺผͷݴޠͰॻ͍ͯɺͦΕΛ JSʹม͠Α͏ʂͱ͍͏ಈ͖͕ੜ·ΕΔɻ͍ͦͭΒAltJSͱ
ݺΕΔɻ 35
άάΔͱɺTypeScriptͱ͔CoffeeScriptͱ͍͏୯ޠ͕ग़ͯ͘Δ͚ ͲɺʮJSʹΜ͔Μ͢ΔΜͩʔɺ;ʔΜʯͬͯࢥͬͯΕOK. • AltJSͷػೳ͕ES6ʹऔΓࠐ·ΕͨͷͰ΄ͱΜͲਰୀ͕ͨ͠ɺ TypeScript ॱௐʹϢʔβʔ͕૿͍͑ͯΔɻಛʹେن͔ ͭνʔϜͰͷ։ൃͰɺܕ͕ཉ͍͠έʔε͕ଟ͍ͱͷ͜ͱɻ 36
ͳͲͳͲ͍Ζ͍Ζឯ༨ۂં͕͋Γ·ͯ͠ɻ 37
ECMAScript 2015 ( 6 edition ) !!! 38
ECMAScript Harmony ͕͍ͭʹϦϦʔεɻ ʢ7!!!ʣ • ES4Ͱ࠳ં༷ͨ͠औΓࠐ·Ε͍ͯΔɻ • 1999ҎདྷͷେنΞοϓσʔτɻ(16!!!) • ΄΅ผͷݴޠʹͳͬͨͱࢥͬͯࠩ͠ࢧ͑ͳ͍ɻ
• CommonJS AltJS ༝དྷͷػೳͳͲҰ෦औΓࠐ·Ε͍ͯ Δɻ 39
ͲΜͳ෩ʹมΘͬͨͷʁ େྔʹ͋Γ͗ͯ͢શ෦հͰ͖·ͤΜ͕͍͔ͭ͘ɻ 40
ఆ Ҏલม͔͠ແ͔ͬͨɻ const ham = 'ʢ´°Ϝ°`ʣ' ham = 'ϋϜ' //
<- Τϥʔ!!! 41
Ҏલɻɻɻ ఆͱͯ͠ѻ͏Ϟϊɺେจࣈʹͯ͠ίʔσΟϯάنͰର Ԡɻ ͦͯ͠ഁΒΕΔ var HAM = 'ʢ´°Ϝ°`ʣ' HAM =
'ϋϜ' // <- ΤϥʔʹͳΒͳ͍!!! 42
σϑΥϧτҾ function multiply(a, b = 1) { return a*b; }
multiply(5); // 5 43
Ҏલɻɻɻ function multiply(a, b) { var b = typeof b
!== 'undefined' ? b : 1; return a*b; } multiply(5); // 5 44
Class ߏจ class Human { constructor(name) { this.name = name;
} say(){ console.log('ࢲͷ໊લ' + this.name + 'Ͱ͢ʂ'); } } const ham = new Human('ʢ´°Ϝ°`ʣ'); const torounit = new Human('ͱΖΏʹ'); ham.say(); //'ࢲͷ໊લʢ´°Ϝ°`ʣͰ͢ʂ' torounit.say(); //'ࢲͷ໊લͱΖΏʹͰ͢ʂ' 45
Ҏલɻɻɻ function Human(name) { this.name = name } Human.prototype.say =
function () { console.log('ࢲͷ໊લ' + this.name + 'Ͱ͢ʂ'); } const ham = new Human('ʢ´°Ϝ°`ʣ'); const torounit = new Human('ͱΖΏʹ'); ham.say(); //'ࢲͷ໊લʢ´°Ϝ°`ʣͰ͢ʂ' torounit.say(); //'ࢲͷ໊લͱΖΏʹͰ͢ʂ' 46
ES6 Modules JS ͔Β JSΛऔΓࠐΉΈɻ import hoge from './hoge.js' hoge.js
const hoge = '΄͛'; export default hoge; 47
CommonJSʹࣅͨΑ͏ͳΈ͕ɻ var hoge = require('./hoge.js'); 48
Ҏલ... window.hoge = {} ͦͷଞ • require.js 49
• scriptλάͷಡΈࠐΈॱͳͲΛͪΐͬͱؒҧ͑Δͱಈ͔ͳ͔ ͬͨɻ • window.hoge άϩʔόϧมͳͷͰɺͲ͔͜ΒͰॻ͖ ͑ΒΕΔɻ·ͨɺvar hoge ͱ ؔͳͲͷ֎Ͱॻ͘ͱ
window.hoge ͕ॻ͖ΘΔɻ • ྑ͘ղΒͳ͍ͱ͜ΖͰಥવͷΤϥʔ͕ൃੜͨ͠Γɻ 50
ม͕Өڹ͠ͳ͍Α͏ʹɺଈ࣌ؔͰғΜͩΓɻ (function(){ var hoge = '΄͛'; })(); 51
ৄ͘͠ • ͍·͔Β͡ΊΔECMAScript 6 52
JSʹ͓͚Δ༷ʑͳ͕ղܾ! ؆୯ʹॻ͚Δͧʂʂ 53
ͬͨʔʂ 54
ΈΜͳ JS ॻ͜͏ʂʂ 55
... 56
ͦ͏͔ΜͨΜʹ͍͔ͳ͍ͷ͕͜ͷੈ 57
JSʢͱ͍͏͔ϑϩϯτΤϯυશൠʣͷ࠷େͷਏΈɻ • ಉҰͷίʔυͰෳͷϒϥβɾόʔδϣϯʹରԠɻ • IE / Edge / Safari /
Chrome / Firefox / iOS / Android / …. • ECMAScript͋͘·Ͱ༷ɻϒϥβʹͦͷػೳ͕ೖ͍ͬͯΔ ͔Ͳ͏͔ผɻ • શͯͷػೳΛ100%࣮ͨ͠ϒϥβɺSafariͷΈɻࠓதʹ ଞͷϒϥβ? • ES6 Modules ʹ·ͩ·ͩน͕ɾɾɾ 58
શવָʹͳͬͯͳ͍… 59
͡Ό͊Ͳ͏ͯ͠Δʁ 60
࠷ۙΑ͋͘Δख๏ɻ 1. ES6ͦΕҎ߱ͷ༷Ͱॻ͘ɻ 2. ϒϥβͰಈ͘Α͏ʹมɻ • ม͢ΔϓϩάϥϜͷ͜ͱΛτϥ ϯεύΠϥͱ͍͏ɻBabel ͕༗ ໊ɻʢม͢Δ͜ͱΛόϕΔͬͯ
ݴͬͨΓʣ 61
ES6 Modules • τϥϯεύΠϥJSͷߏจΛม͠ ͯ͘ΕΔ͕ɺimport require ผ ͷରԠ͕ඞཁɻ •
webpack / browserify / rollup.js ͋ͨ Γ͕༗໊ɻ 62
͜͜·Ͱͷ·ͱΊ • ES/ECMAScript ͕༷ɻ JavaScript ͕࣮ɻ • ͍ͭ࠷ۙ·Ͱ 1999ͷ༷͔ΒಀΕΒΕͳ͔ͬͨͷ͕JSɻ •
ͦͷಈͰɺES2015 Ͱ΄΅ผͷݴޠʹͳͬͯΔɻ • ͍ΖΜͳڥͰಉ͡ίʔυΛಈ͔ͨ͢Ίʹɺόά͕গͳ͘ಡ Έ͘͢ཧ͍͢͠JSͷͨΊʹɺwebpackͱ͔Ͱ·ͱΊͨ ΓɺBabel Ͱมͨ͠Γͯ͠Δɻ 63
͕ײ͡Δɺ࠷ۙͷJSपΓͷงғؾɻ WEBΞϓϦɾαʔϏεɺϞόΠϧΞϓϦɺWEBαΠτͳͲͰ ɾٻΊΒΕΔٕज़ϨϕϧͦΕͧΕҟͳΓ·͕͢ɺϘʔμʔ Ϩεʹͳ͖ͬͯͨ෦ଟ͍ؾ͕͢Δɻ • ΞϓϦͳͲͰɺJSͰHTMLCSSಈతʹੜ͢ΔΑ͏ͳ Ϟϊଟ͍ɻ·ͨϦονͳUI͕ཁٻ͞ΕΔέʔεͳͲͰɻ • RESTAPIɺJS(ͦΕҎ֎Ͱ)͔Β͍Ζ͍Ζ৮ΕΔػೳ͕ CMS/ϑϨʔϜϫʔΫ/αʔϏεʹࡌ͞ΕͨΓɻ
64
ͨͱ͑͜Μͳͷ 65
66
Good Morning Sunshine • gms.life • new barlance ͷWEBϚΨδϯ •
CMSʢWordPressʣ͕ग़ྗͨ͠JSONΛAjaxͰऔ͖ͬͯͯɺ ReactͰϨϯμϦϯάɻ 67
ϑϨʔϜϫʔΫ/ϥΠϒϥϦ • ϦονͳUIɺͦΕͳΓͷنͷJSΛॻ͘߹ɺԿΒ͔ͷϥ ΠϒϥϦɾϑϨʔϜϫʔΫΛ͏͜ͱ͕ଟ͍ɻ • ͨͿΜɺ࠷ۙͷJSք۾ͷϝΠϯͷɻ 68
jQuery Ұڧͩͬͨ࣌͋ͬͨɻ 69
• ͪΐΖͬͱॻ͘ͿΜʹศརɻ • ࠷ۙɺʮͱΓ͋͑ͣjQueryʯආ͚ΒΕΔɻ • jQuery͕ఏڙ͖ͯͨ͠ػೳ࠷ۙͷϒϥβʹ͍͍ͩͨඪ४ උɻ • ϒϥβͷػೳ͕ඪ४Խ͞ΕΔલྑ͍ײ͡ʹͯ͘͠Εͨɻ •
࣮݁ߏτϦοΩʔͳ͜ͱΛͬͯΔͷͰΈ߹ΘͤΓ͢Δ ͷʹ͕͋Δ͜ͱɻ • औ͖ͬͭ͢͞ૉΒ͍͚͠ͲɺͲͪΒʹ͠ΖJSͷࣝཁΔɻ 70
͍͔ͭ͘ྫɻ 71
use jQuery var button = jQuery('.button'); button.on('click', function(){ jQuery(this).addClass('active'); });
Vanilla.js var button = document.querySelector('.button'); button.addEventListener('click', (e) => { e.currentTarget.classList.add('active'); }); 72
use jQuery jQuery.ajax('/api.json') .then( data => console.log( data ) )
Vanilla.js fetch('/api.json') .then( response => response.json() ) .then( data => console.log( data ) ) 73
ॴײ • ࠓͰศརͳέʔε͋ΔͷͰ΄Ͳ΄Ͳʹ͖߹͑ྑ͍ͷ ͔ͳͱɻ • jQuery ͦͷͷඪ४Խ͞Ε༷ͨʹ߹ΘͤΑ͏ͱ͍ͯ͠Δ งғؾɻ(ver3ܥ) 74
Angular/React/Vue/Riot • JavaScript ͷϥΠϒϥϦɻAngular GoogleɺReactFacebookɻ • ViewɺUIΛߏங͢ΔͨΊͷϥΠϒϥ Ϧɻ༩͑ΒΕͨσʔλʹԠͯ͡HTML Λੜͨ͠Γ͕ಘҙɻ •
͜ΕΒͷϥΠϒϥϦͰݟͨΛߏங → σʔλJSͰAPIͱ௨৴ͯ͠औ ಘɻͱݴ͏ྲྀΕࠓޙ·͢·͢૿͑ ͦ͏ɻ 75
ͻͱͭͷϑϨʔϜϫʔΫͷ্Ͱͱݴ͏ྲྀΕ͔ΒɺׂʹಛԽ͠ ͨϥΠϒϥϦΛΈ߹Θͤͯ͏Α͏ʹͳ͖ͬͯͨɻ 76
ৄ͘͠Γ͍ͨਓ JavaScriptϑϨʔϜϫʔΫબఆͷٞ - Qiita 77
PWA • ϓϩάϨογϒΣϒΞϓϦ • WEBαΠτͱΞϓϦͷ͍͍ͱ͜औΓΛͨ͠Α͏ͳϞϊɻ • ΦϑϥΠϯϑΝʔετͱ͍͏ߟ͑ํɻ • Yosuke Onoue:
WORDPRESSϢʔβʔͷͨΊͷ PROGRESSIVE WEB APPSͷ | WordPress.tv 78
Ͳ͏͖ͬͯ߹͍ͬͯ͘ʁ Ͳ͏ͬͯษڧ͢Δʁ 79
ͷ߹ɻ • ࣗJSͷҊ݅ͦ͜·Ͱଟ͘ͳ͍ɻͰɺಥવWEBΞϓ Ϧ͡Έͨ͜ͱɺෳࡶͳϑΥʔϜΛ࡞ΔҊ͕݅;ͬͯ͘Δɻ • jQuery Ͱྑ͍͚ͲɺͦΕ͔͠Βͳ͍ͱదͳબ͕ग़ དྷͳ͍ͷͰɺͪΐͬ͜ͱ৮ͬͯΈΔɻ • ը໘ભҠ͕͋ΔϞϊঢ়ଶͷཧ͕ਏ͍͚ͲɺJS͚ͩͰ
ΔͱׂͱαΫοͱऴΘΔέʔε͕ଟ͍ؾ͕͢Δɻʢଟஈࣜ ͷϑΥʔϜͱ͔ʣ 80
ͨͱ͑͜Μͳͷɻ 81
• νϡʔτϦΞϧαϯϓϧΞϓϦ͕ උ͞Ε͍ͯΔͷ͕ଟ͍ͷͰɺͦΕͷ ࣸܦ͓͢͢Ίɻ ࣸܦ • ۩ମྫΛݟͳ͕ΒࣗͰಉ͡ϞϊΛ ॻ͍͍ͯ͘ߦҝɻ • খ͍͞ϞϊΛͬ͘͡Γߟ͑ͳ͕Βॻ
͍͍ͯ͘ɻԿߦ͔ॻ͘͝ͱʹಈ͔ͯ͠ ΈͨΓɻͨͩയવͱॻ͍ͯͩΊɻ 82
TodoΞϓϦ • TodoΞϓϦ͕جૅ͕Ұഋ٧·ͬͯͯΦεεϝɻ • TodoMVCͱ͍͏͍ΖΜͳٕज़Ͱಉ͡TodoΞϓϦΛͭͬͯ͘ݟΑ͏ͱ͍͏ ϓϩδΣΫτ͋ΔͷͰɺࢀߟʹͳΔ͔ɻ 83
ͱΓ͋͑ͣಈ͘ϞϊΛ࡞Δͱςϯγϣϯ্͕Δ! • ϞνϕʔγϣϯΛҡ࣋͢Δ্Ͱ͍ͩ͡ɻ • ͳΜ͔ͩΜͩͰಈ͘Ϟϊ࡞Δͷୡײ͋ΔͰ͠ΐʁ • ੌ͍ϞϊΛ࡞Δඞཁແ͍ɻ • torounit/one-day-onsen-in-asamaonsen 84
ਓʹฉ͘ɻ • ۙʹΤϯδχΞ͕͍Δ߹͍Ζ͍Ζฉ͍ͯΈΔɻ • ۙʹډͳ͍߹ɺษڧձͳͲʹࢀՃͯؒ͠Λ૿͢ɻ • ྑ͘ͳΔ -> SNS Ͱܨ͕Δ
-> ใ͕ࣗવʹʹೖͬͯ͘Δ • ༑ୡ͕ͬͯΔ͜ͱͬͯ݁ߏؾʹͳΔΑͶɻ 85
ίʔυΛެ։͢Δɻ • ίʔυΛެ։ͯ͠SNSϒϩάͰ͞Β͢ͱɺ͍Ζ͍Ζڭ͑ͯ ͘ΕΔਓ͕ͦͷؒͷத͔Βग़ݱͨ͠Γ͢Δɻ • ਓͷίʔυΛಡΉͷࣸܦ͢ΔͷษڧʹͳΔ͠ɺຊਓʹฉ ͍ͨΓͰ͖Δɻ • Github͓͢͢ΊɻϑϩϯτΤϯυͩͬͨΒ Codepen
͓͢ ͢Ίɻ 86
• ϑϨʔϜϫʔΫͷशಘݴޠҰ֮ͭ͑Δͷͱಉ͘͡Β͍ͷ࿑ ྗ͕͔͔ΔͱݴΘΕΔͷͰɺͷΜͼΓΏΔΏΔͱಓʹ͖ ߹ͬͯߦ͘ͷ͕ྑ͍ͱࢥ͍·͢ɻҰ30ͱ͔ɻ • ࣄͰίϐϖͯ͠Δίʔυͱ͔ͪΌΜͱಡΜͰΈͨΓ͢Δ ͷେɻ 87
ͱΓ͋͑ͣɺࠓ͔ΒJSΛॻ͍ ͯΈΔͳΒɻ • codepen • JSBin ͋ͨΓ͕ϒϥβͰͬ͘͞ͱΕ͓ͯख ܰɻ 88
ͱΓ͋͑ͣɺͳʹ͔ͭͬͯ͘ΈΔͳΒ 89
Felt • https://cognitom.github.io/felt/ • ΦʔϓϯιʔεΧϑΣͷՏଜ͞Μ࡞ͷ ։ൃɾϏϧυڥɻ • ཁNode.js. • ίϚϯυΛίϐϖ͢Εग़དྷΔɻ
ʢ cd path/to/project దٓಡΈ ସ͑ͯɻʣ 90
WebStarterKit • https://developers.google.com/ web/tools/starter-kit/ • Google ࡞ͷελʔλʔΩοτ • ES6 Modules
ʹඇରԠ 91
• HTML/CSS/JS͚ͩͳΒɺͲͪΒࣄͰී௨ʹ͑Δɻ • PHPͱΈ߹ΘͤΔͱ͔ͩͱ͍Ζ͍ΖେมͰ͕͢ɺஶ໊ͳ ϑϨʔϜϫʔΫCMSͱ͔ͳΒͻͳܗ͕͋ͬͨΓ͢Δɻ • ͜ΕΒʹݶΒͣɺNode.js ͷπʔϧ͕ଟ͍ͷͰɺΠϯετʔ ϧ͓ͯ͘͠ͱ͍͍ɻ •
ஶ໊ͳϑϨʔϜϫʔΫͳͲɺϓϩδΣΫτͷͻͳܗΛ ͍ͯͨ͠Γ͢ΔͷͰɺͦΕ͔Β͡ΊΔͱ͍͍ײ͡ʹJSΛॻ ͘͜ͱ͚ͩʹूதग़དྷΔɻ 92
ͪΐͬͱͰ͖ΔΑ͏ʹͳͬͨΒ 93
࣮ઓೖɻ • ࣮ࡍʹࣄҊ݅Λ͜ͳ͢தͰݟ͑ͯ͘Δ෦ଟ͍ɻ • ʮ͜Μͳ͜ͱʹؾΛݣ͏ͷ͔ʔʯͱ͔ɻ • ීஈίϐϖͯ͠ΔΑ͏ͳ10ߦఔͷίʔυΛࣗͰվΊͯॻ͍ͯΈ ͨΓɻ • ͍ίʔυΛ͔ͬ͠ΓͪΌΜͱߟ͑ͯॻ͘͜ͱ͕ͦͷޙʹܨ͕
Δɻ • ͪΐͬͱͣͭͬͯΈΔͷ͕͍ͨͤͭɻ 94
͏͢͜͠Ͱ͖ΔΑ͏ʹͳͬͨΒ 95
ଞͷݴޠ৮ͬͯΈΔ • ϓϩάϥϛϯάݴޠ͍Ζ͍ΖӨڹΛ༩͑͋ͬͯΔͷͰɺ ࣄͰ৮ͬͯΔଞͷݴޠͱ͔ಉ࣌ฒߦతʹษڧͯ͠ΈΔɻ • ʮJSͷ͜ΕͬͯPHPͰ͍͏ͱ͜Ζͷ͋Ε͔ʂʯΈ͍ͨͳൃ ݟ͕͋ͬͨΓɺ͍Ζ͍Ζཧղͷॿ͚ʹͳΔɻ • ଞͷݴޠͷػೳ͕༌ೖ͞ΕΔέʔεJSʹݶΒͣΑ͋͘ Δɻ
96
·ͱΊ • ࣸܦେࣄɻྔΑΓ࣭ɻ • ࣮ઓೖେࣄɻͨͩɺ͍ͪͭͭ͘͜͜͞ɻ • ͻͱΓͰؤுΔͷ͍ͨΜͳͷͰɺίʔυΛެ։͍ͯ͠Ζ ΜͳਓͱҰॹʹΜ͖ΐ͏͍ͯ͜͠͏ɻ • ͱΓ͋͑ͣ
Codepen Ͱͳʹ͔ॻ͜͏ɻ • ͱΓ͋͑ͣ Node.js Πϯετʔϧ͠ͱ͜͏ɻ 97
͍͞͝ʹ 98
JS·ͩ·ͩൃల్্ɻࢢͷχʔζʹΑͬͯͲΜͲΜਐԽ͠ ͍ͯ͘ɻ͜Ε͔Β·ͩ·ͩਐԽଓ͘ɻ 99
࠷৽ͷϞϊ͔ͩΒྑ͍ʂͬͯ͜ͱͳ͍ɻ͚ͲͦΕΛ༻͍Δͱ ؆୯ʹղܾग़དྷΔ͜ͱ͋Δɻ • ৽͍͠ػೳԿΒ͔ͷΛղܾ͢ΔͨΊʹੜ·ΕΔɻ • 1,2Ε͘Β͍Ͱ͍͍ͷ͔ͳʔͱ͍͏ΏΔ͍ؾ࣋ͪͰɻ • ֓ཁ͘Β͍ԡ͓͑ͯ͘͞ΫηΛ͚ͭΔͱ͍͍͔ɻ • શ෦ͷػೳΛҰʹͬͯΈΑ͏ʂͱ͍͏ͷେมɻ
• ࢼͯ͠Έͳ͕Βঃʑʹྑ͘ͳͬͯߦ͚Εɻ 100
ͭͭ͜͜ಓʹ͖͍͖ͭ͋ͬͯ·͠ΐ͏ɻ • 130ͱ͔Ͱ͍͍ɻ͖ͳ͍ఔʹɻ • ࣮ઓೖͱؒΛ࡞Δ͜ͱϞνϕʔγϣϯͷҡ࣋ʹͱͯ ॏཁɻ • ࠔͬͯΜͩ࣌ؒઈରແବʹͳΒͳ͍ɻ 101
@see • ͍·͔Β͡ΊΔECMAScript 6 102
͓ΘΓɻ Thanks! Github: @torounit Twitter: @Toro_Unit Facebook: fb.me/torounit WEB Site:
https://torounit.com 103