Slide 1
Slide 1 text
ϑϩϯτΤϯυΤϯδχΞ͕͍͑ͨ࠷ۙͷࣄ
Mercari, Inc.
Software Engineer
Sota Ohara
PHP Conference Kansai 2018
Slide 2
Slide 2 text
about me
Sota Ohara / sottar
Mercari, Inc.
Software Engineer
Web, JavaScript, React
Sell, mercari NOW, CSTool
@sottar_
sottar
Slide 3
Slide 3 text
ϑϩϯτΤϯυͷಈɺ͍ͬͯ·͔͢
Slide 4
Slide 4 text
͔ͭͯͷϑϩϯτΤϯυ
Slide 5
Slide 5 text
☺
Slide 6
Slide 6 text
࠷ۙͷϑϩϯτΤϯυ
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
• JavaScript ࣗମͷ͠
• ϑϩϯτΤϯυपΓͷ৭ʑͳτϨϯυͷ͠
• ϑϩϯτΤϯυΤϯδχΞͱ͏·͘ڠۀ͢Δํ๏
ࠓ͜͏ݴͬͨ͠Λ͠·͢
Slide 9
Slide 9 text
JavaScript ʹۤखҙࣝ͋Δ
Slide 10
Slide 10 text
͍Ζ͍Ζ᠘ֻ͕͚ΒΕ͍ͯΔ
DBMMCBDLࠈͱ͔
ಈతͳܕมͷڍಈ͕Θ͔Γʹ͍͘ͱ͔
VOEFpOFEͱOVMMͱ͔
ͳͷ͔ͳͷ͔ͱ͔
&$."4DSJQUͬͯͳΜͰ͔͢ͱ͔
มͷר্͖͛ͱ͔ UIJT͕Α͘Θ͔Βͳ͍ͱ͔
QSPUPUZQFͬͯͳʹͱ͔
Slide 11
Slide 11 text
JavaScript ͷ᠘̍
var hoge = ‘global’;
function foo() {
console.log(hoge); // global? local?
if (true) {
var hoge = ‘local’;
console.log(hoge); // global? local?
}
}
foo();
Slide 12
Slide 12 text
JavaScript ͷ᠘̍
var hoge = ‘global’;
function foo() {
console.log(hoge); // undefined
if (true) {
var hoge = ‘local’;
console.log(hoge); // local
}
}
foo();
Slide 13
Slide 13 text
JavaScript ͷ᠘̍
var hoge = ‘global’;
function foo() {
var hoge;
console.log(hoge); // -> undefined
if (true) {
var hoge = ‘local’;
console.log(hoge); // -> local
}
}
foo();
࣮ࡍͷΤϯδϯͰ͜͏͍͏ղऍʹͳΔ
มͷר্͖͛
Slide 14
Slide 14 text
JavaScript ͷ᠘̎
var Person = function(name){
this.name = name;
};
Person.prototype.sayName = function(){
console.log(this.name); // sottar?
var hoge = function() {
console.log(this.name); // sottar?
}();
};
var sottar = new Person(‘sottar’)
sottar.sayName();
Slide 15
Slide 15 text
JavaScript ͷ᠘̎
var Person = function(name){
this.name = name;
};
Person.prototype.sayName = function(){
console.log(this.name); // sottar
var hoge = function() {
console.log(this.name); // undefined
}();
};
var sottar = new Person(‘sottar’)
sottar.sayName();
Slide 16
Slide 16 text
JavaScript ͷ᠘̎
var Person = function(name){
this.name = name;
};
Person.prototype.sayName = function(){
console.log(this.name); // this -> Person
var name = function() {
console.log(this.name); // this -> Global Object
}();
};
var sottar = new Person(‘sottar’)
sottar.sayName();
UIJTͷࢦ͍ͯ͠Δͷ͕ҟͳΔ
Slide 17
Slide 17 text
JavaScript ͷ᠘̏
'' == false;
'' === false;
9 + '1';
9 - '1';
null == undefined
0.1 + 0.2 == 0.3;
. . .
Slide 18
Slide 18 text
JavaScript ͷ᠘̏
'' == false; // true
'' === false; // false
9 + '1'; // '91'
9 - '1'; // 8
null == undefined // true
0.1 + 0.2 == 0.3; // false
. . .
Slide 19
Slide 19 text
IUUQTUXJUUFSDPNDEFTJPTUBUVTQIPUP
Slide 20
Slide 20 text
͜͏͍ͬͨ᠘Λճආ͢ΔͨΊͷڥ͍ͭͭ͋Δ
Slide 21
Slide 21 text
JavaScript ͷ᠘̍
var hoge = ‘global’;
function foo() {
console.log(hoge); // undefined
if (true) {
var hoge = ‘local’;
console.log(hoge); // local
}
}
foo(); มͷר্͖͛
Slide 22
Slide 22 text
ES2015 ͷ let ͔ const Λ͏
Slide 23
Slide 23 text
JavaScript ͷ᠘̍
const hoge = ‘global’;
function foo() {
console.log(hoge); // global
if (true) {
const hoge = ‘local’;
console.log(hoge); // local
}
}
foo();
Slide 24
Slide 24 text
JavaScript ͷ᠘̎
var Person = function(name){
this.name = name;
};
Person.prototype.sayName = function(){
console.log(this.name); // sottar
var name = function() {
console.log(this.name); // undefined
}();
};
var sottar = new Person(‘sottar’)
sottar.sayName();
UIJTͷࢀরมΘΔ
Slide 25
Slide 25 text
ES2015 ͷΞϩʔؔΛ͏
Slide 26
Slide 26 text
JavaScript ͷ᠘̎
var Person = function(name){
this.name = name;
};
Person.prototype.sayName = function(){
console.log(this.name); // sottar
var hoge = () => {
console.log(this.name); // sottar
};
hoge();
};
var sottar = new Person(‘sottar’)
sottar.sayName();
UIJTͷର͕มߋ͞Εͳ͍
Slide 27
Slide 27 text
JavaScript ͷ᠘̏
'' == false; // true
'' === false; // false
9 + '1'; // '91'
9 - '1'; // 8
null == undefined // true
0.1 + 0.2 == 0.3; // false
. . .
ܕมΑ͘Θ͔Βͳ͍
Slide 28
Slide 28 text
ܕΛಋೖ͢Δ
Slide 29
Slide 29 text
FlowType or TypeScript
Slide 30
Slide 30 text
• ͲͪΒ JavaScript ͷੈքʹܕΛͨΒ͢ͷ
• FlowType FacebookɺTypeScript Microsoft
• React FlowType ΛಋೖɺAngular TypeScript Λಋೖ
• Flowtype ϓϩδΣΫτͷ్த͔ΒಋೖՄೳ
FlowType or TypeScript
Slide 31
Slide 31 text
TypeScript ͷྫ
IUUQTXXXUZQFTDSJQUMBOHPSHQMBZJOEFYIUNM
Slide 32
Slide 32 text
FlowType ͷྫ
IUUQTqPXPSHUSZ
Slide 33
Slide 33 text
• ίʔϧόοΫࠈ => Promise, Async / Await
• class ߏจ
• Template literal, Spread operator, Destructuring assignment,
import / export, Symbol
ଞʹ͍Ζ͍Ζศརʹͳ͖͍ͬͯͯ·͢
Slide 34
Slide 34 text
class Λ͏ͱ
var Person = function(name){
this.name = name;
};
Person.prototype.sayName = function(){
console.log(this.name);
var name = function() {
console.log(this.name);
}();
};
var sottar = new Person(‘sottar’)
sottar.sayName();
Slide 35
Slide 35 text
class Λ͏ͱ
class Person {
constructor(name){
This.name = name;
}
sayName = () => {
console.log(this.name);
var name = () => {
console.log(this.name);
};
name();
}
}
const sottar = new Person(‘sottar’)
sottar.sayName();
Slide 36
Slide 36 text
JavaScript ਐԽ͍ͯ͠Δ
Slide 37
Slide 37 text
• JavaScriptࣗମͷ͠
• ϑϩϯτΤϯυपΓͷ৭ʑͳτϨϯυͷ͠
• ϑϩϯτΤϯυΤϯδχΞͱ͏·͘ڠۀ͢Δํ๏
ࠓ͜͏ݴͬͨ͠Λ͠·͢
Slide 38
Slide 38 text
SPA, SSR, BFF
Slide 39
Slide 39 text
• Single Page Application ͷུ
• ୯ҰϖʔδͰߏ͞ΕΔWebΞϓϦέʔγϣϯ
• ϖʔδભҠΛߦΘͣʹ JavaScript Ͱ DOM Λૢ࡞ͯ͠ϖʔδΛΓସ͑Δ
• Routing ϑϩϯτଆͰߦͬͯɺదٓɺඞཁͳใΛAPIͰऔಘɾૹ৴͢Δ
SPAͱ
Slide 40
Slide 40 text
ैདྷͷΞϓϦέʔγϣϯ
#SPXTFS 4FSWFS
ᶃΠϕϯτൃੜ
ʢྫ͑ϖʔδભҠʣ
ᶄ)551ϦΫΤετ
ᶅ3PVUJOH
)5.-ੜ
ᶆ)5.-
Slide 41
Slide 41 text
SPA
#SPXTFS
ᶅ"KBY
ᶆσʔλऔಘ
ᶇKTPO
+4
ᶈը໘Λߋ৽
4FSWFS
ᶄ3PVUJOH
ᶃΠϕϯτൃੜ
ʢྫ͑ϖʔδભҠʣ
ʢඞཁʹԠͯ͡σʔλΛऔಘʣ
Slide 42
Slide 42 text
• ߴͳϖʔδભҠ
• UXͷ্
• ։ൃɾӡ༻ίετ͕͍*
SPA (Pros)
Slide 43
Slide 43 text
• ֶशίετߴ͍
• ॳճΞΫηε࣌ʹύϑΥʔϚϯε͕ѱ͍
• SEO ͕ෆ҆ఆ
• OGPλά͕͑ͳ͍
SPA (Cons)
Slide 44
Slide 44 text
ॳճΞΫηε࣌
#SPXTFS
4FSWFS
1BHF3FRVFTU
ۭͷ)5.-ฦ͢
3FOEFSJOH
ॳճදࣔʹ͕͔͔࣌ؒΔʂʂ
ෳϖʔδͷڊେͳKTΛ
ಡΈࠐΜͰ࣮ߦ͢Δ
ඞཁʹԠͯ͡"1*ୟ͘
Slide 45
Slide 45 text
SEO ͕ෆ҆ఆɺOGPλά͕͑ͳ͍
Slide 46
Slide 46 text
Ϋϩʔϥʔ͕ JavaScript Λղੳͯ͘͠Εͳ͍ͱ
ۭͷϖʔδͩͱೝࣝ͞ΕΔ
Slide 47
Slide 47 text
• SEO ͕ෆ҆ఆ
• جຊతʹ google ͷΫϩʔϥʔ JavaScript Λ࣮ߦͯ͘͠ΕΔ͕…
SPA (Cons)
Slide 48
Slide 48 text
• OGPλά͕͑ͳ͍
• Twitter facebook JavaScript Λղੳͯ͘͠Εͳ͍
SPA (Cons)
Slide 49
Slide 49 text
SSR
Slide 50
Slide 50 text
• Server Side Rendering ͷུ
• Client ଆ ͰϨϯμϦϯά͢Δ͜ͱΛ Client Side Rendering ͱݺͿ
• ͦΕʹରͯ͠ Server ଆ ͰϨϯμϦϯά͢Δ͜ͱΛ Server Side
Rendering ͱݺͿ
• ॳճͷΞΫηεͷ͚࣌ͩ Server ଆͰ Rendering Λߦ͏
SSRͱ
Slide 51
Slide 51 text
#SPXTFS 4FSWFS
"1*%#
DPNQPOFOUT
3FOEFSJOH
3FOEFSJOH
3FOEFSJOHޙͷ)5.-
1BHF3FRVFTU
ॳճΞΫηε࣌ʢSSRʣ
ॳճΞΫηεҎ߱41"ͱͯ͠
ΫϥΠΞϯτଆͰϨϯμϦϯάΛߦ͏
ϑϩϯτͱαʔόʔͰಉ͡
ϩδοΫͰ3FOEFSJOHΛߦ͏
Slide 52
Slide 52 text
• ✅ ॳճϨϯμϦϯά࣌ͷύϑΥʔϚϯε͕ѱ͍
• ✅ SEO ͕ෆ҆ఆ
• ✅ OGPλά͕͑ͳ͍
Server Side Rendering
Slide 53
Slide 53 text
BFF
Slide 54
Slide 54 text
• Backends for Frontends ͷུ
BFFͱ
#SPXTFS
#BDLFOET
GPS
'SPOUFOET
%BUBCBTF
"1*
"1*
%BUBCBTF
"1*
Slide 55
Slide 55 text
ͳͥBFF͕ඞཁͳͷ͔
Slide 56
Slide 56 text
• ैདྷͷ web ΞϓϦέʔγϣϯ
• HTMLςϯϓϨʔτͰදࣔ
• ߋ৽ form ܥ
• SPAతͳ web ΞϓϦέʔγϣϯ
• ϖʔδ͝ͱʹඞཁͳใΛ Ajax Ͱऔಘ͢Δ
• ಈ͖ Ajax ΛͬͯΠϯλϥΫςΟϒʹ
• 1ϖʔδදࣔ͢ΔͷʹԿճAPIΛ͛ΔͷύϑΥʔϚϯε্Α͘ͳ͍
• υϝΠϯ୯ҐͰͳ͘ϖʔδඞཁͳใ୯ҐͰΤϯυϙΠϯτΛ࡞Γ͍ͨ
BFF͕ඞཁͳཧ༝
Slide 57
Slide 57 text
• ϖʔδΛͭ͘ΔॴͱσʔλΛཧ͢ΔॴΛ͚͍ͨ
• σʔλΛཧ͢Δͱ͜ΖαʔόʔαΠυͰཧʢRESTͳͲʣ
• ϖʔδΛ࡞Δͱ͜ΖϑϩϯτΤϯυͰཧʢϖʔδ͝ͱʹඞཁͳใʣ
BFF͕ඞཁͳཧ༝
Slide 58
Slide 58 text
BFFͱ
#SPXTFS
%BUBCBTF
"1*
"1*
%BUBCBTF
#BDLFOET
GPS
'SPOUFOET
"1*
ϖʔδΛߏங͢Δ σʔλͷૢ࡞ɾཧ
'SPOUFOE 4FSWFSTJEF
Slide 59
Slide 59 text
ૄ݁߹ʹͳͬͯΛׂͰ͖Δ
Slide 60
Slide 60 text
• JavaScriptࣗମͷ͠
• ϑϩϯτΤϯυपΓͷ৭ʑͳτϨϯυͷ͠
• ϑϩϯτΤϯυΤϯδχΞͱ͏·͘ڠۀ͢Δํ๏
ࠓ͜͏ݴͬͨ͠Λ͠·͢
Slide 61
Slide 61 text
• ϑϩϯτΤϯυ͔Β͍͍͢APIઃܭΛߦ͍͍ͨ
• APIͷΤϯυϙΠϯτͱฦͬͯ͘ΔJSONͷத͕ܾ·ͬͪΌ͑
͋ͱۀͰ͖Δ
• ͭ·ΓઌʹAPIΛϑϩϯτΤϯυɺαʔόʔαΠυ྆ํͷࢹΛ
࣋ͬͯఆٛ͢Δඞཁ͕͋Δ
• Protocol Buffers, API blueprint, excel …
͏·͘ڠۀ͢Δʹ
Slide 62
Slide 62 text
IUUQTTXBHHFSJP
Slide 63
Slide 63 text
• The world’s most popular framework for APIs.ʢެࣜʣ
• YAML or JSON ͰཧՄೳ
• REST API ͷઃܭ͔ΒυΩϡϝϯτԽɺςετɺσϓϩΠ·Ͱߦ
͏͜ͱ͕Ͱ͖Δ
• APIఆٛ
• Blueprint (ϞοΫ)
• Codegen
Swagger ͱ
Slide 64
Slide 64 text
• Swagger Editor
• to design, define and document RESTful APIs in the Swagger
Specification.
• Swagger Codegen
• to build server stubs and client SDKs directly from a Swagger defined
RESTful API
• Swagger UI
• meant for consumption by JavaScript web projects that include module
bundlers, such as Webpack, Browserify, and Rollup
Swagger ͱ
Slide 65
Slide 65 text
• Swagger Editor
• to design, define and document RESTful APIs in the Swagger
Specification.
• Swagger Codegen
• to build server stubs and client SDKs directly from a Swagger defined
RESTful API
• Swagger UI
• meant for consumption by JavaScript web projects that include module
bundlers, such as Webpack, Browserify, and Rollup
Swagger ͱ
Slide 66
Slide 66 text
Swagger Editor
IUUQTFEJUPSTXBHHFSJP
Slide 67
Slide 67 text
Swagger Editor
"1*ͷϕʔε63-
Slide 68
Slide 68 text
Swagger Editor
εΩʔϚ
Slide 69
Slide 69 text
Swagger Editor
"1*ͷύεɾ)551ϝιου
Slide 70
Slide 70 text
Swagger Editor
CPEZͷఆٛ
NPEFMΛࢀর͢Δ͜ͱͰ͖Δ
Slide 71
Slide 71 text
Swagger Editor
Ϩεϙϯε
Slide 72
Slide 72 text
ϞοΫαʔόʔ࡞ΕΔ
Slide 73
Slide 73 text
Swagger Editor
Slide 74
Slide 74 text
• JavaScript ES2015Ͱ͔ͳΓਐԽ͠ɺ᠘ݮͬͨ
• ͓ޓ͍ؾ࣋ͪΑ͘։ൃ͢ΔͨΊʹɺ࠷ݶͰ͓ޓ͍ͷ͜ͱΛͬ
͓ͯ͘͜ͱେ
·ͱΊ
Slide 75
Slide 75 text
Thank you