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
   .FFUVQ
   WPM
   ʰ3FMFBSO
   .PEFSO
   8FC
   4UBOEBSEʱ VIZP
2. About Speaker VIZP –-*/&ͷϑϩϯτΤϯυΤϯδχΞ –5ZQF4DSJQUͱ3FBDU͕ઐ໳ –དྷ݄5ZQF4DSJQUͷೖ໳ॻ͕ग़Δ
3. This Talk –+BWB4DSJQUʹ͸৭ʑͳϕετϓϥΫςΟε͕͋Γɺ +BWB4DSJQUΛ࢖͍ͬͯΔͱࣗવͱ਎ʹ͖ͭ·͢ –ҰํͰɺ+BWB4DSJQUͷਐԽ͸Ճ଎͓ͯ͠ΓɺͦΕʹԠͯ͡ ϕετϓϥΫςΟε΋มԽ͠·͢ –ࠓޙಋೖ͞Εͦ͏ͳ&$."4DSJQUͷ৽ػೳΛ௨ͯ͡ ৗࣝΛߋ৽͠Α͏ʂ
4. 1. Temporal ݱࡏͷৗࣝ ඪ४ͷ%BUF͸ͱͯ΋ѻ͍ʹ͍͘ NPNFOUKT͸αΠζ͕ ͱͯ΋Ͱ͔͍ EBZKTͳͲܰྔϥΠϒϥϦΛ࢖͏ 5FNQPSBMについてすでにご存知の方は関連リンクを #uit_meetup 付きで投稿しましょう！ ご協力をお願いします কདྷͷৗࣝ ඪ४ͷ5FNQPSBMΛ࢖͏
5. Temporalとは –4UBHF
   
   ϓϩϙʔβϧ – ·ͩॲཧܥʹ͸౥ࡌ͞Ε͍ͯͳ͍ *&5'Ͱͷඪ४Խ࡞ۀ͕ඞཁͷͨΊʣ –೔࣌ॲཧ༻ͷ৽͍͠૊ΈࠐΈΦϒδΣΫτ܈ –ಛ௃ –Πϛϡʔλϒϧ –༻్ผʹ෼͚ΒΕͨΦϒδΣΫτͨͪ 5FNQPSBMについてすでにご存知の方は関連リンクを #uit_meetup 付きで投稿しましょう！ ご協力をお願いします
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 付きで投稿しましょう！ ご協力をお願いします
7. Temporalのオブジェクトたち 5FNQPSBMについてすでにご存知の方は関連リンクを #uit_meetup 付きで投稿しましょう！ ご協力をお願いします Temporal documentation (https://tc39.es/proposal-temporal/docs/ ) より引用
8. いま使えるTemporalのPolyfill @js-temporal/polyfill IUUQTHJUIVCDPNKTUFNQPSBMUFNQPSBMQPMZGJMM 5FNQPSBMについてすでにご存知の方は関連リンクを #uit_meetup 付きで投稿しましょう！ ご協力をお願いします
9. いま使えるTemporalのPolyfill ͨͩ͠1PMZGJMM͸Ͱ͔͍ @js-temporal/polyfill dayjs 5FNQPSBMについてすでにご存知の方は関連リンクを #uit_meetup 付きで投稿しましょう！ ご協力をお願いします
10. いま使えるTemporalのPolyfill ʢ͜Ε͔Β঺հ͢Δଞͷػೳʹ΋ݴ͑Δ͜ͱͰ͕͢ʣ ͍·࢖͏৔߹͸ ϏϧυαΠζ΁ͷෛՙɾະ׬੒ͷػೳΛ࢖͏͜ͱͷϦεΫɾ কདྷ΁ͷ౤ࢿ ͳͲΛצҊͯ͠൑அ͠·͠ΐ͏ 5FNQPSBMについてすでにご存知の方は関連リンクを #uit_meetup 付きで投稿しましょう！ ご協力をお願いします
11. 2. Iterator Helpers ݱࡏͷৗࣝ &4Ҏ߱ͷ"1*ͷଟ͘͸ ΠςϨʔλΛฦ͢ ʢ.BQFOUSJFT
    ͳͲʣ ΠςϨʔλΛ͞Βʹૢ࡞͢Δ ৔߹͸ͱΓ͋͑ͣ "SSBZGSPN
    Ͱ഑ྻʹม׵͢Δʢ <BSS>
    ΋Մʣ *UFSBUPS
    )FMQFSTについてすでにご存知の方は関連リンクを #uit_meetup 付きで投稿しましょう！ ご協力をお願いします কདྷͷৗࣝ ΠςϨʔλʹੜ͍͑ͯΔϝιο υʢ*UFSBUPS
    )FMQFSTʣΛ ࢖ͬͯΠςϨʔλͷ··ૢ࡞͢ Δ
12. Iterator Helpersとは *UFSBUPS
    )FMQFSTについてすでにご存知の方は関連リンクを #uit_meetup 付きで投稿しましょう！ ご協力をお願いします –4UBHF
    
    ϓϩϙʔβϧ –NBQ΍GJMUFSͳͲͷϝιουΛΠςϨʔλʹੜ΍͢ –தؒ഑ྻΦϒδΣΫτΛ࡞Βͳ͍ͷͰϝϞϦΛઅ໿Ͱ͖Δʁ –"TZOD*UFSBUPSαϙʔτ΋ –஗Ԇॲཧ –ΠςϨʔλʹରͯ͠഑ྻԽ΍OFYU ݺͼग़͕͠ߦΘΕΔ·Ͱ ϝιουͷܭࢉ΍ݩσʔλͷফඅ͕ߦΘΕͳ͍
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 付きで投稿しましょう！ ご協力をお願いします
14. Iterator Helpersに関していまできること *UFSBUPS
    )FMQFSTについてすでにご存知の方は関連リンクを #uit_meetup 付きで投稿しましょう！ ご協力をお願いします –1PMZGJMM͸ҰԠ͋Δ͕ɺ4UBHF
    ͳͷͰ࢖͏ͷ͸ͪΐͬͱා͍ –ࠓޙΠςϨʔλͷ஍Ґ͕޲্͢ΔͷͰɺࠓͷ͏ͪʹ ΠςϨʔλʹ׳Ε਌͠ΜͰ͓͜͏ ʢfunction* δΣωϨʔλؔ਺Λੵۃతʹ࢖͏ͳͲʣ
15. 3. Change Array by copy ݱࡏͷৗࣝ Ұ෦ͷ഑ྻϝιου͸ഁյతͳ ΋ͷ͔͠ଘࡏ͠ͳ͍ͷͰɺ ࢖͏ͱ͖͸ઌʹ഑ྻΛίϐʔ ͢Δ $IBOHF
    "SSBZ
    CZ
    $PQZについてすでにご存知の方は関連リンクを #uit_meetup 付きで投稿しましょ う！ ご協力をお願いします কདྷͷৗࣝ ഑ྻʹඇഁյతϝιου͕Ͱ͖ ΔͷͰͦͪΒΛ࢖͏
16. Change Array by copyとは –4UBHF
    
    ϓϩϙʔβϧ –഑ྻʹඇഁյతͳϝιουΛ૿΍͢ –UP3FWFSTFE
    UP4PSUFE
    UP4QMJDFE
    XJUI –3FDPSET
    
    5VQMFT͔Βٯ༌ೖ͞Εͨ ˞
    4UBHF
    ͳͷͰϝιου໊͸GJY͍ͯ͠·ͤΜ $IBOHF
    "SSBZ
    CZ
    $PQZについてすでにご存知の方は関連リンクを #uit_meetup 付きで投稿しましょ う！ ご協力をお願いします
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
    "SSBZ
    CZ
    $PQZについてすでにご存知の方は関連リンクを #uit_meetup 付きで投稿しましょ う！ ご協力をお願いします
18. Change Array by copyに備える –ʮTPSUͰݩͷ഑ྻΛഁյ͠ͳ͍ͨΊʹઌʹίϐʔ͢Δʯ ͷΑ͏ͳৗࣝ͸͍ͭͷؒʹ͔ݹ͘ͳ͍ͬͯΔՄೳੑ͕ߴ͍ ͷͰ࠷৽৘ใΛ΢Υον͠Α͏ $IBOHF
    "SSBZ
    CZ
    $PQZについてすでにご存知の方は関連リンクを #uit_meetup 付きで投稿しましょ う！ ご協力をお願いします
19. 4. String.cooked ݱࡏͷৗࣝ ࣗલͷςϯϓϨʔτλάؔ਺Λ ࣮૷͢Δͱ͖͸จࣈྻͷ࿈݁Λ ࣗલͰ࣮૷͢Δඞཁ͕͋Γ໘౗ 4USJOHDPPLFEについてすでにご存知の方は関連リンクを #uit_meetup 付きで投稿しましょう！ ご協力をお願いします কདྷͷৗࣝ 4USJOHDPPLFEΛ࢖͏ͱ؆୯ʂ
20. String.cookedとは –4UBHF
    
    ϓϩϙʔβϧ –lԿ΋͠ͳ͍zλάؔ਺ –ൺֱత৽ͯ͘͠಺༰͕؆୯ͳͷͰૣΊʹਐΈͦ͏ʢ༧૝ʣ ˞
    4UBHF
    ͳͷͰϝιου໊͸GJY͍ͯ͠·ͤΜ 4USJOHDPPLFEについてすでにご存知の方は関連リンクを #uit_meetup 付きで投稿しましょう！ ご協力をお願いします const whose = “My”; `Hello! ${whose} World!!` === String.cooked`Hello! ${whose} World!!`;
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 付きで投稿しましょう！ ご協力をお願いします
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 付きで投稿しましょう！ ご協力をお願いします
23. String.cookedに備える –λάؔ਺Λ࣮૷͢Δͱ͖͸࿈݁෦෼Λखॻ͖͕͕ͪͩ͠ɺ ͍ͭͷؒʹ͔ෆཁʹͳΔՄೳੑ͕ߴ͍ͷͰ࠷৽৘ใΛ ΢Υον͠Α͏ –λά෇͖ςϯϓϨʔτϦςϥϧ͸ΤσΟλʹΑΔࢧԉͳͲͷ ؍఺Ͱ΋ศརͳͷͰࣗ࡞ͱ͍͏બ୒ࢶΛ਎ʹ͚ͭΑ͏ 4USJOHDPPLFEについてすでにご存知の方は関連リンクを #uit_meetup 付きで投稿しましょう！ ご協力をお願いします
24. まとめ –+BWB4DSJQUͷਐԽʹͱ΋ͳͬͯৗࣝ͸มԽ͠·͢ –ࠓͷʮ࢓ํͳ͍ʯ͸ະདྷͷʮݹ͍ʯ –5$΢Υονϯά͸ָ͍ͧ͠ʂ