Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

 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/

LINE Developers
PRO

March 25, 2022
Tweet

More Decks by LINE Developers

Other Decks in Technology

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