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

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

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

Transcript

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

   View Slide

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

   View Slide

3. Array.prototype.indexOf()
   

   View Slide

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

   View Slide

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

   View Slide

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
   

   View Slide

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

   View Slide

8. Solution
   ~ νϧμ
   ԋࢉࢠΛ࢖͏
   

   View Slide

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

   View Slide

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

    View Slide

11. console.log
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

20. let / const
    

    View Slide

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

    View Slide

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࢖Θͳͯ͘΋ग़དྷΔΑ
    

    View Slide

23. Solution
    ଈ࣌ؔ਺Λ࢖͏
    

    View Slide

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

    View Slide

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

    View Slide

26. array => hash
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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ܕͰఆٛ͢Δ͜ͱʹͳͬͯ͠·͏ͷ͸ྑ͘ͳ͍
    

    View Slide

31. Solution
    Array.prototype.reduce
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

38. View Slide

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

    View Slide

40. 5IBOLZPV
    

    View Slide