JavaScriptの進化で変わる身近なコーディング習慣

JavaScriptの進化で変わる身近なコーディング習慣
uhyo ( https://twitter.com/uhyo_ )

JavaScriptは歴史が結構長い言語であり、さまざまなベストプラクティスがあります。一方で、JavaScriptは進化を続けており、それに伴ってこれまでに蓄積したベストプラクティスも変化します。このトークでは、みなさんの手癖になっていそうなプラクティスのうち今後修正が必要になるところを紹介します。

2022年3月25日開催「UIT Meetup vol.15 『Relearn Modern Web Standard』」
https://uit.connpass.com/event/242359/

Transcript

1. +BWB4DSJQUͷਐԽͰมΘΔ
   ਎ۙͳίʔσΟϯάश׳
   6*5.FFUVQWPMʰ3FMFBSO.PEFSO8FC4UBOEBSEʱ
   VIZP
   

   View Slide

2. About Speaker
   VIZP
   –-*/&ͷϑϩϯτΤϯυΤϯδχΞ
   –5ZQF4DSJQUͱ3FBDU͕ઐ໳
   –དྷ݄5ZQF4DSJQUͷೖ໳ॻ͕ग़Δ
   

   View Slide

3. This Talk
   –+BWB4DSJQUʹ͸৭ʑͳϕετϓϥΫςΟε͕͋Γɺ
   +BWB4DSJQUΛ࢖͍ͬͯΔͱࣗવͱ਎ʹ͖ͭ·͢
   –ҰํͰɺ+BWB4DSJQUͷਐԽ͸Ճ଎͓ͯ͠ΓɺͦΕʹԠͯ͡
   ϕετϓϥΫςΟε΋มԽ͠·͢
   –ࠓޙಋೖ͞Εͦ͏ͳ&$."4DSJQUͷ৽ػೳΛ௨ͯ͡
   ৗࣝΛߋ৽͠Α͏ʂ
   

   View Slide

4. 1. Temporal
   ݱࡏͷৗࣝ
   ඪ४ͷ%BUF͸ͱͯ΋ѻ͍ʹ͍͘
   NPNFOUKT͸αΠζ͕
   ͱͯ΋Ͱ͔͍
   EBZKTͳͲܰྔϥΠϒϥϦΛ࢖͏
   5FNQPSBMについてすでにご存知の方は関連リンクを #uit_meetup 付きで投稿しましょう！
   ご協力をお願いします
   কདྷͷৗࣝ
   ඪ४ͷ5FNQPSBMΛ࢖͏
   

   View Slide

5. Temporalとは
   –4UBHFϓϩϙʔβϧ
   – ·ͩॲཧܥʹ͸౥ࡌ͞Ε͍ͯͳ͍ *&5'Ͱͷඪ४Խ࡞ۀ͕ඞཁͷͨΊʣ
   –೔࣌ॲཧ༻ͷ৽͍͠૊ΈࠐΈΦϒδΣΫτ܈
   –ಛ௃
   –Πϛϡʔλϒϧ
   –༻్ผʹ෼͚ΒΕͨΦϒδΣΫτͨͪ
   5FNQPSBMについてすでにご存知の方は関連リンクを #uit_meetup 付きで投稿しましょう！
   ご協力をお願いします
   

   View Slide

6. Temporalの例
   const aprilFool = Temporal.PlainDate.from("2022-04-01")
   const today = Temporal.Now.plainDateISO()
   const diff = aprilFool.since(today)
   diff.toString() // "P7D"
   diff.toLocaleString() // "7 days"
   5FNQPSBMについてすでにご存知の方は関連リンクを #uit_meetup 付きで投稿しましょう！
   ご協力をお願いします
   

   View Slide

7. Temporalのオブジェクトたち
   5FNQPSBMについてすでにご存知の方は関連リンクを #uit_meetup 付きで投稿しましょう！
   ご協力をお願いします
   Temporal documentation (https://tc39.es/proposal-temporal/docs/ ) より引用
   

   View Slide

8. いま使えるTemporalのPolyfill
   @js-temporal/polyfill
   IUUQTHJUIVCDPNKTUFNQPSBMUFNQPSBMQPMZGJMM
   5FNQPSBMについてすでにご存知の方は関連リンクを #uit_meetup 付きで投稿しましょう！
   ご協力をお願いします
   

   View Slide

9. いま使えるTemporalのPolyfill
   ͨͩ͠1PMZGJMM͸Ͱ͔͍
   @js-temporal/polyfill dayjs
   5FNQPSBMについてすでにご存知の方は関連リンクを #uit_meetup 付きで投稿しましょう！
   ご協力をお願いします
   

   View Slide

10. いま使えるTemporalのPolyfill
    ʢ͜Ε͔Β঺հ͢Δଞͷػೳʹ΋ݴ͑Δ͜ͱͰ͕͢ʣ
    ͍·࢖͏৔߹͸
    ϏϧυαΠζ΁ͷෛՙɾະ׬੒ͷػೳΛ࢖͏͜ͱͷϦεΫɾ
    কདྷ΁ͷ౤ࢿ
    ͳͲΛצҊͯ͠൑அ͠·͠ΐ͏
    5FNQPSBMについてすでにご存知の方は関連リンクを #uit_meetup 付きで投稿しましょう！
    ご協力をお願いします
    

    View Slide

11. 2. Iterator Helpers
    ݱࡏͷৗࣝ
    &4Ҏ߱ͷ"1*ͷଟ͘͸
    ΠςϨʔλΛฦ͢
    ʢ.BQFOUSJFTͳͲʣ
    ΠςϨʔλΛ͞Βʹૢ࡞͢Δ
    ৔߹͸ͱΓ͋͑ͣ "SSBZGSPN
    Ͱ഑ྻʹม׵͢Δʢ <BSS>΋Մʣ
    *UFSBUPS)FMQFSTについてすでにご存知の方は関連リンクを #uit_meetup 付きで投稿しましょう！
    ご協力をお願いします
    কདྷͷৗࣝ
    ΠςϨʔλʹੜ͍͑ͯΔϝιο
    υʢ*UFSBUPS)FMQFSTʣΛ
    ࢖ͬͯΠςϨʔλͷ··ૢ࡞͢
    Δ
    

    View Slide

12. Iterator Helpersとは
    *UFSBUPS)FMQFSTについてすでにご存知の方は関連リンクを #uit_meetup 付きで投稿しましょう！
    ご協力をお願いします
    –4UBHFϓϩϙʔβϧ
    –NBQ΍GJMUFSͳͲͷϝιουΛΠςϨʔλʹੜ΍͢
    –தؒ഑ྻΦϒδΣΫτΛ࡞Βͳ͍ͷͰϝϞϦΛઅ໿Ͱ͖Δʁ
    –"TZOD*UFSBUPSαϙʔτ΋
    –஗Ԇॲཧ
    –ΠςϨʔλʹରͯ͠഑ྻԽ΍OFYU
    ݺͼग़͕͠ߦΘΕΔ·Ͱ
    ϝιουͷܭࢉ΍ݩσʔλͷফඅ͕ߦΘΕͳ͍
    

    View Slide

13. Iterator Helpersの例
    // ͜Ε·Ͱ
    Array.from(map.entries())
    .filter(([k, v]) => v === "yes")
    .map(([k, v]) => k)
    // Iterator Helpers
    map.entries()
    .filter(([k, v]) => v === "yes")
    .map(([k, v]) => k)
    .toArray()
    *UFSBUPS)FMQFSTについてすでにご存知の方は関連リンクを #uit_meetup 付きで投稿しましょう！
    ご協力をお願いします
    

    View Slide

14. Iterator Helpersに関していまできること
    *UFSBUPS)FMQFSTについてすでにご存知の方は関連リンクを #uit_meetup 付きで投稿しましょう！
    ご協力をお願いします
    –1PMZGJMM͸ҰԠ͋Δ͕ɺ4UBHFͳͷͰ࢖͏ͷ͸ͪΐͬͱා͍
    –ࠓޙΠςϨʔλͷ஍Ґ͕޲্͢ΔͷͰɺࠓͷ͏ͪʹ
    ΠςϨʔλʹ׳Ε਌͠ΜͰ͓͜͏
    ʢfunction* δΣωϨʔλؔ਺Λੵۃతʹ࢖͏ͳͲʣ
    

    View Slide

15. 3. Change Array by copy
    ݱࡏͷৗࣝ
    Ұ෦ͷ഑ྻϝιου͸ഁյతͳ
    ΋ͷ͔͠ଘࡏ͠ͳ͍ͷͰɺ
    ࢖͏ͱ͖͸ઌʹ഑ྻΛίϐʔ
    ͢Δ
    $IBOHF"SSBZCZ$PQZについてすでにご存知の方は関連リンクを #uit_meetup 付きで投稿しましょ
    う！ ご協力をお願いします
    কདྷͷৗࣝ
    ഑ྻʹඇഁյతϝιου͕Ͱ͖
    ΔͷͰͦͪΒΛ࢖͏
    

    View Slide

16. Change Array by copyとは
    –4UBHFϓϩϙʔβϧ
    –഑ྻʹඇഁյతͳϝιουΛ૿΍͢
    –UP3FWFSTFE UP4PSUFE UP4QMJDFE XJUI
    –3FDPSET5VQMFT͔Βٯ༌ೖ͞Εͨ
    ˞4UBHFͳͷͰϝιου໊͸GJY͍ͯ͠·ͤΜ
    $IBOHF"SSBZCZ$PQZについてすでにご存知の方は関連リンクを #uit_meetup 付きで投稿しましょ
    う！ ご協力をお願いします
    

    View Slide

17. Change Array by copyの例
    // ͜Ε·Ͱ
    const sorted = [...arr];
    sorted.sort();
    const fixed = [...arr];
    fixed[3] = 3.14;
    // Change Array by Copy
    const sorted = arr.toSorted();
    const fixed = arr.with(3, 3.14);
    $IBOHF"SSBZCZ$PQZについてすでにご存知の方は関連リンクを #uit_meetup 付きで投稿しましょ
    う！ ご協力をお願いします
    

    View Slide

18. Change Array by copyに備える
    –ʮTPSUͰݩͷ഑ྻΛഁյ͠ͳ͍ͨΊʹઌʹίϐʔ͢Δʯ
    ͷΑ͏ͳৗࣝ͸͍ͭͷؒʹ͔ݹ͘ͳ͍ͬͯΔՄೳੑ͕ߴ͍
    ͷͰ࠷৽৘ใΛ΢Υον͠Α͏
    $IBOHF"SSBZCZ$PQZについてすでにご存知の方は関連リンクを #uit_meetup 付きで投稿しましょ
    う！ ご協力をお願いします
    

    View Slide

19. 4. String.cooked
    ݱࡏͷৗࣝ
    ࣗલͷςϯϓϨʔτλάؔ਺Λ
    ࣮૷͢Δͱ͖͸จࣈྻͷ࿈݁Λ
    ࣗલͰ࣮૷͢Δඞཁ͕͋Γ໘౗
    4USJOHDPPLFEについてすでにご存知の方は関連リンクを #uit_meetup 付きで投稿しましょう！
    ご協力をお願いします
    কདྷͷৗࣝ
    4USJOHDPPLFEΛ࢖͏ͱ؆୯ʂ
    

    View Slide

20. String.cookedとは
    –4UBHFϓϩϙʔβϧ
    –lԿ΋͠ͳ͍zλάؔ਺
    –ൺֱత৽ͯ͘͠಺༰͕؆୯ͳͷͰૣΊʹਐΈͦ͏ʢ༧૝ʣ
    ˞4UBHFͳͷͰϝιου໊͸GJY͍ͯ͠·ͤΜ
    4USJOHDPPLFEについてすでにご存知の方は関連リンクを #uit_meetup 付きで投稿しましょう！
    ご協力をお願いします
    const whose = “My”;
    `Hello! ${whose} World!!` === String.cooked`Hello! ${whose} World!!`;
    

    View Slide

21. String.cookedの使い道
    // ͜Ε·Ͱ: จࣈྻ࿈݁ΛࣗલͰ࣮૷͢Δඞཁ͕͋Δ
    function tag(strings, ...values) {
    let result = "";
    for (const [index, value] of values.entries()) {
    result += strings[index] + (value * 5000) + "ஹ";
    }
    result += strings.at(-1);
    return result;
    }
    console.log(tag`I have ${1}ԁ`) // "I have 5000ஹԁ"
    4USJOHDPPLFEについてすでにご存知の方は関連リンクを #uit_meetup 付きで投稿しましょう！
    ご協力をお願いします
    

    View Slide

22. String.cookedの使い道
    // String.cookedΛ࢖͏ͱจࣈྻ࿈݁Λ೚ͤΒΕΔ
    function tag(strings, ...values) {
    return String.cooked(strings, ...values.map(x => x * 5000 + "ஹ"));
    }
    console.log(tag`I have ${1}ԁ`) // "I have 5000ஹԁ"
    4USJOHDPPLFEについてすでにご存知の方は関連リンクを #uit_meetup 付きで投稿しましょう！
    ご協力をお願いします
    

    View Slide

23. String.cookedに備える
    –λάؔ਺Λ࣮૷͢Δͱ͖͸࿈݁෦෼Λखॻ͖͕͕ͪͩ͠ɺ
    ͍ͭͷؒʹ͔ෆཁʹͳΔՄೳੑ͕ߴ͍ͷͰ࠷৽৘ใΛ
    ΢Υον͠Α͏
    –λά෇͖ςϯϓϨʔτϦςϥϧ͸ΤσΟλʹΑΔࢧԉͳͲͷ
    ؍఺Ͱ΋ศརͳͷͰࣗ࡞ͱ͍͏બ୒ࢶΛ਎ʹ͚ͭΑ͏
    4USJOHDPPLFEについてすでにご存知の方は関連リンクを #uit_meetup 付きで投稿しましょう！
    ご協力をお願いします
    

    View Slide

24. まとめ
    –+BWB4DSJQUͷਐԽʹͱ΋ͳͬͯৗࣝ͸มԽ͠·͢
    –ࠓͷʮ࢓ํͳ͍ʯ͸ະདྷͷʮݹ͍ʯ
    –5$΢Υονϯά͸ָ͍ͧ͠ʂ
    

    View Slide