$30 off During Our Annual Pro Sale. View Details »

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

  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"SSBZCZ$PQZについてすでにご存知の方は関連リンクを #uit_meetup 付きで投稿しましょ う! ご協力をお願いします কདྷͷৗࣝ ഑ྻʹඇഁյతϝιου͕Ͱ͖ ΔͷͰͦͪΒΛ࢖͏
  16. Change Array by copyとは –4UBHFϓϩϙʔβϧ –഑ྻʹඇഁյతͳϝιουΛ૿΍͢ –UP3FWFSTFE UP4PSUFE UP4QMJDFE XJUI

    –3FDPSET5VQMFT͔Βٯ༌ೖ͞Εͨ ˞4UBHFͳͷͰϝιου໊͸GJY͍ͯ͠·ͤΜ $IBOHF"SSBZCZ$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"SSBZCZ$PQZについてすでにご存知の方は関連リンクを #uit_meetup 付きで投稿しましょ う! ご協力をお願いします
  18. Change Array by copyに備える –ʮTPSUͰݩͷ഑ྻΛഁյ͠ͳ͍ͨΊʹઌʹίϐʔ͢Δʯ ͷΑ͏ͳৗࣝ͸͍ͭͷؒʹ͔ݹ͘ͳ͍ͬͯΔՄೳੑ͕ߴ͍ ͷͰ࠷৽৘ใΛ΢Υον͠Α͏ $IBOHF"SSBZCZ$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$΢Υονϯά͸ָ͍ͧ͠ʂ