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

82ed567f8497acfed7f7b464225dd536?s=47 wakamsha
October 07, 2017

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

2017年10月6日『まぼろしのJS勉強会 #1 「ナウいJSの書き方・考え方」』にて発表した資料です。

https://maboroshi.connpass.com/event/66502/
#mbrs_js_study

82ed567f8497acfed7f7b464225dd536?s=128

wakamsha

October 07, 2017
Tweet

Transcript

  1. ͦΕɺ΋ͬͱεϚʔτʹॻ͚ΔΑ +BWB4DSJQUίʔυΛ΋ͬͱ୹͘ɺ΋ͬͱγϯϓϧʹॻ͘5JQTબ - My 4 favorite JavaScript clean codes -

     /BPLJ:"."%" !XBLBNTIB φ΢͍+4ͷॻ͖ํɾߟ͑ํ·΅Ζ͠ͷ+4ษڧձ
  2. Introduction w +BWB4DSJQU͸ྑ͘΋ѱ͘΋ॊೈੑʹ෋Μͩϓϩάϥϛϯάݴޠ w ͪΐͬͱͷ޻෉Ͱ৑௕ͳίʔυΛΑΓίϯύΫτʹɺ ΑΓεϚʔτʹॻ͖׵͑ͯΈ·͠ΐ͏

  3. Array.prototype.indexOf()

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

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

  6. const ua = navigator.userAgent; if (ua.indexOf('iPhone') > -1 || ua.indexOf('iPod')

    > -1 || ua.indexOf('iPad') > -1) { return 'ios'; } else { return 'other'; } Bad Part
  7. 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Λ΋ͬͱγϯϓϧʹॻ ͚ͳ͍ͩΖ͏͔ʜʁ
  8. Solution ~ νϧμ ԋࢉࢠΛ࢖͏

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

  10. const ua = navigator.userAgent; if (~ua.indexOf('iPhone') || ~ua.indexOf('iPod') || ~ua.indexOf(‘iPad'))

    { return 'ios'; } else { return 'other'; } Good Part
  11. console.log

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

  13. Bad Part ary.map(item => item * 1000); ary.map(item => {

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

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

    console.log(item); return item * 1000; }); ͔ͤͬ͘ͷϫϯϥΠφʔ่͕Εͯ͠·͏ Ұ࣌తͳconsole.logͷͨΊʹϒϩοΫԽ͢ΔͳͲؔ਺ͷߏ଄Λม͑ͳͯ͘ ͸ͳΒͳ͍
  16. Solution || ࿦ཧ࿨ ԋࢉࢠΛ࢖͏

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

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

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

    || item * 1000);
  20. let / const

  21. let foo; let bar; if (new Date().getHours() < 12 )

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

    { foo = 'forenoon'; bar = 'am'; } else { foo = 'afternoon'; bar = 'pm'; } Bad Part ίʔυ͕ංେԽ͢ΔʹͭΕͯlet͸ՄಡੑΛଛͳ͏ ม਺એݴ͸constΛ࢖͍ɺlet͸ۃྗ߇͑Δͷ͕๬·͍͠ ͦΕlet࢖Θͳͯ͘΋ग़དྷΔΑ
  23. Solution ଈ࣌ؔ਺Λ࢖͏

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

  25. const {foo, bar} = (() => { if (new Date().getHours()

    < 12 ) { return { foo: 'forenoon', bar: 'am' }; } else { return { foo: 'afternoon', bar: 'pm' } } })(); Good Part
  26. array => hash

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

  28. // 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" // ]
  29. // 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]); });
  30. // 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ܕͰఆٛ͢Δ͜ͱʹͳͬͯ͠·͏ͷ͸ྑ͘ͳ͍
  31. Solution Array.prototype.reduce

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

  33. const result = params.reduce((acc, param) => { const pair =

    param.split('='); acc[pair[0]] = decodeURIComponent(pair[1]); return acc; }, {}); Good Part
  34. 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ͱશ͘ಉ͡ ҧ͍͸໭Γ஋͕ஞ࣍ฦΔͱ͍͏఺ͷΈ
  35. *OUSPEVDFNZTFMG Զͷ໊ΛݴͬͯΈΖ ࣗݾ঺հ

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

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

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

  40. 5IBOLZPV