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)
Cloudflare Meetup Nagano Vol.3
torounit
1
59
僕が考える 「HTML サイトを WordPress にする」話 / 2023-11-05 Kansai WordPress Meetup
torounit
9
7.4k
Cloudflare Pages に入門してみた / 2023-10-14 Cloudflare Meetup Nagano Vol.2
torounit
2
1.6k
ブロックエディタをゴリゴリに使い倒してサイトを作った話 / Kansai WordPress Meetup 2023 09 23
torounit
14
9.8k
ブロックエディターカスタマイズことはじめ #wpshinshu / 2023-06-17 Shinshu WordPress Meetup vol.24
torounit
1
380
FSE時代におけるWEBサイト制作の研究 #wpshinshu / 2023-05-20 Shinshu WordPress Meetup vol.23
torounit
0
420
ブロックエディターを用いたWEBサイト開発とカスタムフィールドのあり方を考える。/ WordCamp Japan 2021
torounit
0
550
ブロックエディターで変わる、WordPress でのウェブサイト開発 / SaCSS Special 26
torounit
4
850
Block Editor カスタマイズ入門 #WPmeetupOsaka / Get started customize for block editor
torounit
12
3.2k
Other Decks in Programming
See All in Programming
AIプログラミング雑キャッチアップ
yuheinakasaka
17
4.1k
Datadog Workflow Automation で圧倒的価値提供
showwin
1
140
PHPカンファレンス名古屋2025 タスク分解の試行錯誤〜レビュー負荷を下げるために〜
soichi
1
670
Rails アプリ地図考 Flush Cut
makicamel
1
130
コードを読んで理解するko build
bells17
1
110
Datadog DBMでなにができる? JDDUG Meetup#7
nealle
0
140
Ruby on cygwin 2025-02
fd0
0
180
Code smarter, not harder - How AI Coding Tools Boost Your Productivity | Angular Meetup Berlin
danielsogl
0
100
密集、ドキュメントのコロケーション with AWS Lambda
satoshi256kbyte
1
210
GoとPHPのインターフェイスの違い
shimabox
2
210
React 19アップデートのために必要なこと
uhyo
8
1.4k
From the Wild into the Clouds - Laravel Meetup Talk
neverything
0
110
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
44
14k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
133
33k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
430
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Into the Great Unknown - MozCon
thekraken
35
1.6k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
The World Runs on Bad Software
bkeepers
PRO
67
11k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
640
Mobile First: as difficult as doing things right
swwweet
223
9.4k
Thoughts on Productivity
jonyablonski
69
4.5k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
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