Slide 1
Slide 1 text
ͦΕɺͬͱεϚʔτʹॻ͚ΔΑ
+BWB4DSJQUίʔυΛͬͱ͘ɺͬͱγϯϓϧʹॻ͘5JQTબ
- My 4 favorite JavaScript clean codes -
/BPLJ:"."%"
!XBLBNTIB
φ͍+4ͷॻ͖ํɾߟ͑ํ·΅Ζ͠ͷ+4ษڧձ
Slide 2
Slide 2 text
Introduction
w +BWB4DSJQUྑ͘ѱ͘ॊೈੑʹΜͩϓϩάϥϛϯάݴޠ
w ͪΐͬͱͷͰͳίʔυΛΑΓίϯύΫτʹɺ
ΑΓεϚʔτʹॻ͖͑ͯΈ·͠ΐ͏
Slide 3
Slide 3 text
Array.prototype.indexOf()
Slide 4
Slide 4 text
Array.prototype.indexOf()
Ҿʹͨ͠ཁૉͱಉ͡ྻཁૉ͔Β࠷ॳͷఴࣈ index
Λฦ͢
ଘࡏ͠ͳ͚Ε-1Λฦ͢
Slide 5
Slide 5 text
use case
ʰ͋Δಛఆͷཁૉ͕ྻʹ͋Δ͔Ͳ͏͔ʱͱ͍͏
݅ࣜʹΑ͘ΘΕΔ
Slide 6
Slide 6 text
const ua = navigator.userAgent;
if (ua.indexOf('iPhone') > -1 || ua.indexOf('iPod') > -1 || ua.indexOf('iPad') > -1) {
return 'ios';
} else {
return 'other';
}
Bad Part
Slide 7
Slide 7 text
const ua = navigator.userAgent;
if (ua.indexOf('iPhone') > -1 || ua.indexOf('iPod') > -1 || ua.indexOf('iPad') > -1) {
return 'ios';
} else {
return 'other';
}
Bad Part
ͦͷ··ͩͱ͍ʹ͍͘
ྻͷઌ಄ʹ͕͋ΔͱΓ͕0ͳͷͰfalseͱͳΓɺ͕ແ͍ͱ-1ͳͷ
Ͱtrueͱͳͬͯ͠·͏
୯७ʹ͕͋Δ͔Ͳ͏͔ΛΓ͍͚ͨͩͳͷͰɺ > -1Λͬͱγϯϓϧʹॻ
͚ͳ͍ͩΖ͏͔ʜʁ
Slide 8
Slide 8 text
Solution
~ νϧμ
ԋࢉࢠΛ͏
Slide 9
Slide 9 text
~ νϧμ
ԋࢉࢠΛ͏
~ νϧμ
Ϗοτ/05ͱ͍͏ҙຯ
ʹର࣮ͯ͠ߦ͢Δͱූ߸͕సͯ͠-1ͨ͠ͱͳΔ
0-1ʹม͞Εɺ-10ʹม͞ΕΔ
݅ࣜͰظ௨Γͷڍಈ͕࣮ݱͰ͖Δ
Slide 10
Slide 10 text
const ua = navigator.userAgent;
if (~ua.indexOf('iPhone') || ~ua.indexOf('iPod') || ~ua.indexOf(‘iPad')) {
return 'ios';
} else {
return 'other';
}
Good Part
Slide 11
Slide 11 text
console.log
Slide 12
Slide 12 text
use case
σόοάͷͨΊɺҰ࣌తʹϫϯϥΠφʔؔͷதʹ
DPOTPMFMPHΛࠐΈ͍ͨ
Slide 13
Slide 13 text
Bad Part
ary.map(item => item * 1000);
ary.map(item => {
console.log(item);
return item * 1000;
});
Slide 14
Slide 14 text
Bad Part
ary.map(item => item * 1000);
ary.map(item => {
console.log(item);
return item * 1000;
});
Slide 15
Slide 15 text
Bad Part
ary.map(item => item * 1000);
ary.map(item => {
console.log(item);
return item * 1000;
});
͔ͤͬ͘ͷϫϯϥΠφʔ่͕Εͯ͠·͏
Ұ࣌తͳconsole.logͷͨΊʹϒϩοΫԽ͢ΔͳͲؔͷߏΛม͑ͳͯ͘
ͳΒͳ͍
Slide 16
Slide 16 text
Solution
|| ཧ
ԋࢉࢠΛ͏
Slide 17
Slide 17 text
|| ཧ
ԋࢉࢠΛ͏
ϫϯϥΠφʔؔͷઌ಄ʹconsole.logΛهड़͠ɺ||ΛڬΜͩޙΖʹຊདྷͷ
ॲཧ͕ଓ͘Α͏ʹ͢Δ
console.logͷΓundefined͢ͳΘͪfalseͳͷͰɺ||Ҏ߱ͷॲཧ
ඞ࣮ͣߦ͞ΕΔ
Slide 18
Slide 18 text
ary.map(item => item * 1000);
Good Part
ary.map(item => console.log(item) || item * 1000);
Slide 19
Slide 19 text
ary.map(item => item * 1000);
Good Part
ary.map(item => console.log(item) || item * 1000);
Slide 20
Slide 20 text
let / const
Slide 21
Slide 21 text
let foo;
let bar;
if (new Date().getHours() < 12 ) {
foo = 'forenoon';
bar = 'am';
} else {
foo = 'afternoon';
bar = 'pm';
}
Bad Part
Slide 22
Slide 22 text
let foo;
let bar;
if (new Date().getHours() < 12 ) {
foo = 'forenoon';
bar = 'am';
} else {
foo = 'afternoon';
bar = 'pm';
}
Bad Part
ίʔυ͕ංେԽ͢ΔʹͭΕͯletՄಡੑΛଛͳ͏
มએݴconstΛ͍ɺletۃྗ߇͑Δͷ͕·͍͠
ͦΕletΘͳͯ͘ग़དྷΔΑ
Slide 23
Slide 23 text
Solution
ଈ࣌ؔΛ͏
Slide 24
Slide 24 text
ଈ࣌ؔΛ͏
if elseΛଈ࣌ؔʹهड़͢Δ
ͦΕͧΕͷϒϩοΫͷ࠷ޙʹΛreturn͢ΕΓͲͪΒ͔ҰํͷΈͱ
ͳΔͷͰconst͕͑Δ
Slide 25
Slide 25 text
const {foo, bar} = (() => {
if (new Date().getHours() < 12 ) {
return {
foo: 'forenoon',
bar: 'am'
};
} else {
return {
foo: 'afternoon',
bar: 'pm'
}
}
})();
Good Part
Slide 26
Slide 26 text
array => hash
Slide 27
Slide 27 text
use case
63-ΫΤϦύϥϝʔλΛ࿈ྻʹύʔε͢Δ
Slide 28
Slide 28 text
// https://example.com/?utm_s=google&utm_m=ppc&utm_c=campaign1
const params = location.search.substring(1).split('&');
Bad Part
// [
// "utm_s=google",
// "utm_m=ppc",
// "utm_c=campaign1"
// ]
Slide 29
Slide 29 text
// https://example.com/?utm_s=google&utm_m=ppc&utm_c=campaign1
const params = location.search.substring(1).split('&');
Bad Part
const result = {};
params.forEach(param => {
const pair = param.split('=');
result[pair[0]] = decodeURIComponent(pair[1]);
});
Slide 30
Slide 30 text
// https://example.com/?utm_s=google&utm_m=ppc&utm_c=campaign1
const params = location.search.substring(1).split('&');
Bad Part
const result = {};
params.forEach(param => {
const pair = param.split('=');
result[pair[0]] = decodeURIComponent(pair[1]);
});
͍Ζ͍Ζͱ͗͢Δ
࠷ॳʹۭΦϒδΣΫτΛॳظͱͯ͠ఆٛ͠ɺϧʔϓॲཧͰΛ٧Ί͍͔ͯͳ
ͯ͘ͳΒͳ͍
5ZQF4DSJQUͩͱresultanyܕͰఆٛ͢Δ͜ͱʹͳͬͯ͠·͏ͷྑ͘ͳ͍
Slide 31
Slide 31 text
Solution
Array.prototype.reduce
Slide 32
Slide 32 text
Array.prototype.reduce
ϧʔϓॲཧͱॳظΛ·ͱΊͯఆٛͰ͖ɺ࠷ऴ݁Ռ͚͕ͩΓͱͳΔ
Slide 33
Slide 33 text
const result = params.reduce((acc, param) => {
const pair = param.split('=');
acc[pair[0]] = decodeURIComponent(pair[1]);
return acc;
}, {});
Good Part
Slide 34
Slide 34 text
const result = params.reduce((acc, param) => {
const pair = param.split('=');
acc[pair[0]] = decodeURIComponent(pair[1]);
return acc;
}, {});
Good Part
ϧʔϓॲཧͷ్தஈ֊ͷஞ࣍ཉ͍͠ͱ͖ɺ3Y+4ͷscanΛ͑0,
ॻ͖ํreduceͱશ͘ಉ͡
ҧ͍Γ͕ஞ࣍ฦΔͱ͍͏ͷΈ
Slide 35
Slide 35 text
*OUSPEVDFNZTFMG
Զͷ໊ΛݴͬͯΈΖ
ࣗݾհ
Slide 36
Slide 36 text
גࣜձࣾϦΫϧʔτϚʔέςΟϯάύʔτφʔζ
XFCϑϩϯτΤϯυΤϯδχΞ
ࢁా थ
/BPLJ:"."%"
*OUSPEVDFNZTFMG
!XBLBNTIB
Slide 37
Slide 37 text
https://tech.recruit-mp.co.jp
NET BIZ DIV. TECH BLOG
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
https://tech.recruit-mp.co.jp
3.1 ϒϩά
Slide 40
Slide 40 text
5IBOLZPV