それ、もっとスマートに書けるよ - JavaScript コードをもっと短く、もっとシンプルに書く Tips 4選

ͦΕɺ΋ͬͱεϚʔτʹॻ͚ΔΑ +BWB4DSJQUίʔυΛ΋ͬͱ୹͘ɺ΋ͬͱγϯϓϧʹॻ͘5JQTબ - My 4 favorite JavaScript clean codes -
/BPLJ:"."%" !XBLBNTIB φ΢͍+4ͷॻ͖ํɾߟ͑ํ·΅Ζ͠ͷ+4ษڧձ

Introduction w +BWB4DSJQU͸ྑ͘΋ѱ͘΋ॊೈੑʹ෋Μͩϓϩάϥϛϯάݴޠ w ͪΐͬͱͷ޻෉Ͱ৑௕ͳίʔυΛΑΓίϯύΫτʹɺ ΑΓεϚʔτʹॻ͖׵͑ͯΈ·͠ΐ͏

Array.prototype.indexOf()

Array.prototype.indexOf() Ҿ਺ʹ౉ͨ͠ཁૉͱಉ͡഑ྻཁૉ͔Β࠷ॳͷఴࣈ index Λฦ͢ ଘࡏ͠ͳ͚Ε͹-1Λฦ͢

use case ʰ͋Δಛఆͷཁૉ͕഑ྻ಺ʹ͋Δ͔Ͳ͏͔ʱͱ͍͏ ৚݅ࣜʹΑ͘࢖ΘΕΔ

const ua = navigator.userAgent; if (ua.indexOf('iPhone') > -1 || ua.indexOf('iPod')
> -1 || ua.indexOf('iPad') > -1) { return 'ios'; } else { return 'other'; } Bad Part

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Λ΋ͬͱγϯϓϧʹॻ ͚ͳ͍ͩΖ͏͔ʜʁ

Solution ~ νϧμ ԋࢉࢠΛ࢖͏

~ νϧμ ԋࢉࢠΛ࢖͏ ~ νϧμ ͸Ϗοτ/05ͱ͍͏ҙຯ ੔਺ʹର࣮ͯ͠ߦ͢Δͱූ߸͕൓సͯ͠-1ͨ͠஋ͱͳΔ 0͸-1ʹม׵͞Εɺ-1͸0ʹม׵͞ΕΔ ৚݅ࣜͰظ଴௨Γͷڍಈ͕࣮ݱͰ͖Δ

const ua = navigator.userAgent; if (~ua.indexOf('iPhone') || ~ua.indexOf('iPod') || ~ua.indexOf(‘iPad'))
{ return 'ios'; } else { return 'other'; } Good Part

console.log

use case σόοάͷͨΊɺҰ࣌తʹϫϯϥΠφʔؔ਺ͷதʹ DPOTPMFMPHΛ࢓ࠐΈ͍ͨ

Bad Part ary.map(item => item * 1000); ary.map(item => {
console.log(item); return item * 1000; });

Bad Part ary.map(item => item * 1000); ary.map(item => {
console.log(item); return item * 1000; }); ͔ͤͬ͘ͷϫϯϥΠφʔ่͕Εͯ͠·͏ Ұ࣌తͳconsole.logͷͨΊʹϒϩοΫԽ͢ΔͳͲؔ਺ͷߏ଄Λม͑ͳͯ͘ ͸ͳΒͳ͍

Solution || ࿦ཧ࿨ ԋࢉࢠΛ࢖͏

|| ࿦ཧ࿨ ԋࢉࢠΛ࢖͏ ϫϯϥΠφʔؔ਺ͷઌ಄ʹconsole.logΛهड़͠ɺ||ΛڬΜͩޙΖʹຊདྷͷ ॲཧ͕ଓ͘Α͏ʹ͢Δ console.logͷ໭Γ஋͸undefined͢ͳΘͪfalseͳͷͰɺ||Ҏ߱ͷॲཧ ͸ඞ࣮ͣߦ͞ΕΔ

ary.map(item => item * 1000); Good Part ary.map(item => console.log(item)
|| item * 1000);

let / const

let foo; let bar; if (new Date().getHours() < 12 )
{ foo = 'forenoon'; bar = 'am'; } else { foo = 'afternoon'; bar = 'pm'; } Bad Part

let foo; let bar; if (new Date().getHours() < 12 )
{ foo = 'forenoon'; bar = 'am'; } else { foo = 'afternoon'; bar = 'pm'; } Bad Part ίʔυ͕ංେԽ͢ΔʹͭΕͯlet͸ՄಡੑΛଛͳ͏ ม਺એݴ͸constΛ࢖͍ɺlet͸ۃྗ߇͑Δͷ͕๬·͍͠ ͦΕlet࢖Θͳͯ͘΋ग़དྷΔΑ

Solution ଈ࣌ؔ਺Λ࢖͏

ଈ࣌ؔ਺Λ࢖͏ if elseΛଈ࣌ؔ਺಺ʹهड़͢Δ ͦΕͧΕͷϒϩοΫ಺ͷ࠷ޙʹ஋Λreturn͢Ε͹໭Γ஋͸ͲͪΒ͔ҰํͷΈͱ ͳΔͷͰconst͕࢖͑Δ

const {foo, bar} = (() => { if (new Date().getHours()
< 12 ) { return { foo: 'forenoon', bar: 'am' }; } else { return { foo: 'afternoon', bar: 'pm' } } })(); Good Part

array => hash

use case 63-ΫΤϦύϥϝʔλΛ࿈૝഑ྻʹύʔε͢Δ

// 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" // ]

// 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]); });

// 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ͩͱresult͸anyܕͰఆٛ͢Δ͜ͱʹͳͬͯ͠·͏ͷ͸ྑ͘ͳ͍

Solution Array.prototype.reduce

Array.prototype.reduce ϧʔϓॲཧͱॳظ஋Λ·ͱΊͯఆٛͰ͖ɺ࠷ऴ݁Ռ஋͚͕ͩ໭Γ஋ͱͳΔ

const result = params.reduce((acc, param) => { const pair =
param.split('='); acc[pair[0]] = decodeURIComponent(pair[1]); return acc; }, {}); Good Part

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ͱશ͘ಉ͡ ҧ͍͸໭Γ஋͕ஞ࣍ฦΔͱ͍͏఺ͷΈ

*OUSPEVDFNZTFMG Զͷ໊ΛݴͬͯΈΖ ࣗݾ঺հ

גࣜձࣾϦΫϧʔτϚʔέςΟϯάύʔτφʔζ XFCϑϩϯτΤϯυΤϯδχΞ ࢁా ௚थ /BPLJ:"."%" *OUSPEVDFNZTFMG !XBLBNTIB

https://tech.recruit-mp.co.jp NET BIZ DIV. TECH BLOG

https://tech.recruit-mp.co.jp 3.1 ϒϩά

5IBOLZPV

それ、もっとスマートに書けるよ - JavaScript コードをもっと短く、もっとシンプルに...

それ、もっとスマートに書けるよ - JavaScript コードをもっと短く、もっとシンプルに書く Tips 4選

More Decks by wakamsha

Other Decks in Technology

Featured

Transcript