The Future of Frontend i18n : Intl.MessageFormat

フロントエンドカンファレンス北海道 2024 : 2023/08/24
- https://fortee.jp/frontend-conf-hokkaido-2024/proposal/31eab828-f20d-4f9d-87ae-e2d92c790dfb
X
- https://twitter.com/sajikix

Transcript

1. 3ZVTFJ
   4BKJLJ
   
   !TBKJLJY 5IF
   'VUVSF
   PG
   'SPOUFOE
   JO
   
   *OUM.FTTBHF'PSNBU
2. 4BKJ
   
   3ZVTFJ
   4BKJLJ 'SPOUFOE
   %FWFMPQFS
   BU
   $ZCP[V
   JOD 𝕏
   !TBKJLJY
3. ΞδΣϯμ  *OUMʹ͍͓ͭͯ͞Β͍ͱ*OUM.FTTBHF'PSNBU
    *$6
   .FTTBHF'PSNBUͱ͸
    &$."4DSJQUͱͷڠྗɾ.FTTBHF'PSNBU
   W
    .FTTBHF'PSNBU
   W
   ͷߏจ঺հͱ*OUMͰͷ࢖͍ํ
    ͜Ε͔Β
4. 
   *OUMʹ͍͓ͭͯ͞Β͍ͱ *OUM.FTTBHF'PSNBU
5. ෮श
   *OUMͱ͸ʁ +BWB4DSJQUͷࠃࡍԽ"1*ͷ໊લۭؒ Intl.ʓʓ
   ҎԼͷΑ͏ʹݴޠʹґଘͨ͠ػೳΛఏڙ͢Δ
   w ೔࣌ɾ਺஋ͷϑΥʔϚοτ
   w ϩέʔϧͷղܾ
   w ݴޠʹґଘͨ͠จࣈྻͷൺֱ
   w ςΩετ۠੾Γɾෳ਺ܗͷ൑ผ
6. *OUMͷ࢓༷తͳҐஔ෇͚ +BWB4DSJQUͷ࢓༷Ͱ͋Δ&$."ͷʮ֦ு࢓༷ʯͱ͍͏Ґஔ෇͚ɻ
   &$."ͱ͸۠ผͯ͠&$."ͱ͍͏࢓༷൪߸͕͍͍ͭͯΔɻ
   1SPQPTBMͷ؅ཧ΍ձٞ΋෼͚ͯਐΊΒΕ͍ͯΔ &$." &$."
   *OUM ࣗ෼͕ͨͪ+BWB4DSJQUͷ࢓༷ͱଊ͍͑ͯΔ΋ͷ
7. ࢖͍ํͷྫ
   
   /VNCFS'PSNBUͷ৔߹ const formatter = new Intl.NumberFormat("en", { notation: "compact", compactDisplay: “long", }); formatter.format(123456789); // 123 million
8. *OUM.FTTBHF'PSNBUͷػӡ
9. *OUMʹจݴશମͷϑΥʔϚοτ΋೚͍ͤͨ ݱঢ়
   
   ࠓͷ*OUM͸೔࣌΍਺஋ ୯Ґ ɺจ๏نଇʹԠͨ͡൑ఆ
   ˠʮ֤ཁૉʯͷॻࣜԽɾॻࣜԽαϙʔτػೳ͕ॆ࣮͖͍ͯͯ͠Δஈ֊
   ຊདྷͷ໨త
   
   ΞϓϦέʔγϣϯશମͷࠃࡍԽ
   ˠ
   ΞϓϦͰ࢖ΘΕΔ͋ΒΏΔจݴΛॻࣜԽ͢Δඞཁ͕͋Δ
   ཧ૝
   
   ͔ͤͬ͘ͳΒશ෦
   *OUM
   ͕΍ͬͯཉ͍͠ͳ͊ʜ
   ˠ
   *OUMͷ֤ػೳΛ౷߹͠จݴશମͷࠃࡍԽΛ͍͍ײ͡ʹ؅ཧɾॻࣜԽ͍ͨ͠ʂ
10. Ͱੜ·Εͨͷ͕
    *OUM.FTTBHF'PSNBU
    ͬͯΘ͚👶
11. l*OUMzͳΜ͔ͩΒ΋ͪΖΜ
    &$."ͷ࢓༷ʁ
12. "
    :FTͰ΋͋Γ/PͰ΋͋Δ
    ΍΍͍͜͠ϙΠϯτ
13. *OUM.FTTBHF'PSNBUΛମܥతʹཧղ͢Δ *OUM.FTTBHF'PSNBU͸&$."4DSJQUʹดͨ͡࢓༷Ͱ͸ͳ͍
    w 6OJDPEFͱ࿈ܞͯ͠ਐΊ͍ͯΔϓϩδΣΫτ
    w ͳͷͰ&$."4DSJQUͷ࢓༷΍ٞ࿦͚ͩݟͯ΋௥͑ͳ͍ 6OJDPEF
    *$6
    *OUM.FTTBHF'PSNBU &$."4DSJQU
    
14. 
    *$6
    .FTTBHF'PSNBU
15. ͦ΋ͦ΋
    
    จݴ؅ཧͷܗࣜ͸ͨ͘͞Μ͋Δ ୯७ྻڍܥ
    w +BWB
    1SPQFSUJFT
    
    J04
    4USJOHT
    
    .P[JMMB
    1301&35*&4
    ʜ
    +40/ܥ
    w JOFYU
    
    "OHVMBS
    5SBOTMBUF
    
    HPJO
    
    JOOPEF
    ʜ
    9.-ܥ
    w "OESPJE
    
    +BWB
    1SPQFSUZ
    
    3VCZ
    PO
    3BJMT
    
    .JDSPTPGU
    /&5
    ʜ
16. จݴ؅ཧͷΑ͋͘Δػೳ ϩέʔϧʹԠͯ͡ग़͠Θ͚ ඞਢ
    w ݴޠ΍஍Ҭ͝ͱʹϦιʔεϑΝΠϧΛ࡞੒ͯ͠؅ཧ͢Δͷ͕Ұൠత
    ϓϨʔεϗϧμʔ
    w ϝοηʔδΛग़͢৔໘Ͱطଘͷจݴʹม਺ΛೖΕࠐΉػೳ
    w ྫ
    
    JOFYU
    {"greeting" : "Hi! {{userName}}!"}
17. *$6
    .FTTBHF'PSNBU
    ΋ͦͷ̍छ
18. ิ଍ *$6ͬͯͳʹʁ *OUFSOBUJPOBM
    $PNQPOFOUT
    GPS
    6OJDPEF
    ͷུ
    6OJDPEFίϯιʔγΞϜ͕؅ཧ͢ΔࠃࡍԽͱ஍ҬԽʹؔ͢ΔػೳͷϥΠϒϥϦ
    w ϩέʔϧͷѻ͍ɾจࣈͷѻ͍ɾॻࣜԽɾڥքݕ஌
    FUDʜ
    $$ ࣮૷ͷ*$6$
    +BWB࣮૷ͷ*$6+
    3VTU࣮૷ͷ*$69͕͋Δ
    w *$6$΍*$69ͳͲ͸+4Τϯδϯͷ಺෦Ͱ΋࢖ΘΕ͍ͯΔ
    
19. *$6
    .FTTBHF'PSNBU
    ͱ͸ *$6͕ఆٛɾӡ༻͍ͯ͠ΔจݴͷߏจɾϑΥʔϚοτ"1*
    w ϝοηʔδͷߏจఆٛ
    
    ߏจͷղऍͱॻࣜԽ
    
    Τϥʔॲཧ
    w ೥Ҏ্ݱ໾ͰۀքͰ΋޿͘࢖ΘΕΔϑΥʔϚοτͷҰͭ
    
    ϓϨʔεϗϧμʔ͚ͩͰͳ͘ɺࡉ͔͍ॻࣜԽࢦఆɺ৚݅෼ذͳͲ΋ॻ͚Δ
    w ˠ
    ϝοηʔδ಺ͰϓϩάϥϜͬΆ͍ڍಈ͕Ͱ͖ͪΌ͏
    ΋ͪΖΜ*$6ʹ͋Δ"1*ͰจݴͷύʔεϑΥʔϚοτ΋Ͱ͖Δ
20. ͋Εʁ&$."4DSJQU͸ʁ
21. 👌ͪΌΜͱग़ͯ͘Δ
22. 
    &$."4DSJQUͱͷڠྗɾ .FTTBHF'PSNBU
    W
23. *$6
    .FTTBHF'PSNBU
    W ͷ๊͍͑ͯͨ՝୊ ֦ுੑ໰୊
    w ಠࣗͷϑΥʔϚοτؔ਺ΛఆٛͰ͖ͳ͍͠ɺٯʹഇࢭ΋Ͱ͖ͳ͍
    *$6ʹ৽͘͠૿͑ͨॻࣜԽػೳͳͲΛαϙʔτͰ͖͍ͯͳ͍
    ෳࡶͳݴޠʹΑΔจ๏ߟྀࣄ߲ͷҧ͍ͳͲʹରԠͰ͖ͳ͍
    w จ๏తɾਓతͳੑผͷߟྀ΍୯਺ෳ਺ͷύλʔϯ
    ৄ͘͠͸
    
    IUUQTHJUIVCDPNVOJDPEFPSHNFTTBHFGPSNBUXHCMPC NBJOEPDTXIZ@NG@OFYUNE
24. &$."4DSJQU
    ͱ
    *$6 .FTTBHF'PSNBU
    ՝୊৭ʑ͋Δͳ͊ *OUMͰ౷߹తͳจݴͷ؅ཧɾॻࣜԽ͍ͨ͠ͳ
25. &$."4DSJQU
    ͱ
    *$6
26. &$."4DSJQU
    ͱ
    *$6 &$."ͱ΋దٓڠྗͭͭ͠
    .FTTBHF'PSNBU
    W
    Λ࡞Γ·͢ʂ *OUM.FTTBHF'PSNBU͸Λ
    *$6
    .FTTBHF'PSNBU
    W
    ४ڌͰʂ
27. *OUM
    ͱ
    *$6
    .FTTBHF'PSNBU
    W BLB
    .'
    ͦΕͧΕͷ෼୲ൣғ
    w *$6
    
    .FTTBHF'PSNBU
    WͷߏจɾΤϥʔɾॻࣜԽಈ࡞ͷఆٛ
    w .FTTBHF'PSNBU
    8PSLJOH
    (SPVQ
    Ͱࡦఆ͍ͯ͠Δ
    w *OUM
    
    +4ϥϯλΠϜͰͲ͏0QUJPOΛ౉͔࣮͢ࡍͷϑΥʔϚοτͷ࣮ߦ
    w ಺෦తʹ͸*$6Λ࢖͏ͷͰݫີʹ͸࣮૷΋*$6ʹґଘ͢Δ͜ͱʹͳΔ͚Ͳ
    ˠ
    ͭ·Γ&$."ͱ6OJDPEFͷ߹࡞͕
    *OUM.FTTBHF'PSNBU
    🤝
28. 
    .FTTBHF'PSNBU
    W
    
    ͷߏจ঺հͱ*OUMͰͷ࢖͍ํ
29. ஫ҙ
    
    ·ͩ
    4UBHFͩ͠5FDIOJDBM
    1SFWJFX *OUM.FTTBHF'PSNBU͸ݱࡏ4UBHFͷ1SPQPTBM
    w શવ"1*΍ػೳ͕มΘΔՄೳੑ͕͋Δ
    .'΋ࠓ೥5FDIOJDBM
    1SFWJFXʹͳͬͨ͹͔Γ
    w ࠜຊ͔ΒมΘΔ͜ͱ͸ͳͯ͘΋ࡉ͔͍ϧʔϧͷมߋ͸શવ͋Γ͏Δ
    ˠ
    ͜ͷεϥΠυͷൃද࣌఺  ͔ΒมΘΔՄೳੑ͕͋Γ·͢ɻ
30. .FTTBHF'PSNBU
    W
    ͷߏจ ˞͔ͬ͜Β͸௕͍ͷͰ
    ʮ.'ʯ
    ͬͯॻ͘Αʂ
31. .'
    ͷߏจ
    
    ̎छྨͷʮNFTTBHFʯ .'ͷ.FTTBHFʹ͸̎छྨͷʮNFTTBHFʯ͕͋Δ
    w 4JNQMF
    NFTTBHF
    w ී௨ͷςΩετ͚ͩͷ΋ͷ
    w ී௨ͷςΩετதʹ\
    IPHF^ͷΑ͏ͳ\
    ^ͰғΘΕͨߏจ͕ೖΔ
    w $PNQMFY
    NFTTBHF
    w શମ ֎ଆ ͕.'ͷߏจʹͳͬͯΔ΋ͷ
    w தʹ\\
    ^^
    ͰғΘΕͨzද͍ࣔͨ͠ςΩετz͕ೖͬͯΔ
32. .'
    ͷߏจ
    
    ̎छྨͷʮNFTTBHFʯྫ ྫʹ͢ΔͱҎԼͷΑ͏ͳײ͡ Ұ୴ߏจͷҙຯ͕෼͔Βͳͯ͘΋ྑ͍
    w 4JNQMF
    NFTTBHF
    w $PNQMFY
    NFTTBHF Hello,{$userName} // → Hello,Saji .local $userId= {$id :integer} {{user:{$userId} has logged in}} // user:12345 has logged in
33. .'
    ͷߏจ
    
    ಡΉ࣌ͷϙΠϯτ ಡΜͰ͍Δ෦෼͕
    .'ͷߏจͷதͳͷ͔ͦΕͱ΋දࣔ͢ΔςΩετͳͷ͔
    w ߏจͷ৔߹
    
    ۭനɾվߦ͸ແࢹ͞ΕΔ
    
    ಡΈ΍͍͢Α͏ʹ੔ܗͯ͠0,
    w දࣔ͢ΔςΩετ
    
    ۭന΍վߦ͸΋ͪΖΜͦͷ··දࣔ͞ΕΔ
    w ͡Όͳ͍ͱۭനͱ͔վߦࣗମΛදͤͳ͘ͳͬͪΌ͏
    4JNQMF
    .FTTBHF
    ˠ
    \^
    ͷதҎ֎͸දࣔ͢ΔςΩετ
    
    
    
    $PNQMFY
    .FTTBHF
    ˠ
    \\
    ^^
    ͷதҎ֎͸.'ͷߏจ
    
    
    
    
     $PNQMFY 4JNQMF
34. .'
    ͷߏจ
    
    ୯७ͳจࣈྻͱม਺ ୯७ͳจࣈྻ΍Τεέʔϓ͞Εͨจࣈྻ͸৔߹ͦͷ··දࣔ͞ΕΔ
    ม਺͸\ม਺໊^Ͱॻ͚Δɻ͍ΘΏΔϓϨʔεϗϧμ
    w ϝοηʔδ಺Ͱએݴ ޙड़ ͯ͠ͳ͍ݶΓ͸֎͔Βͷೖྗͱͯ͠ѻ͏ Hello,{$userName} // → Hello,Saji Hello, world! 4JNQMF
35. .'
    ͷߏจ
    
    Τεέʔϓ දࣔ͞ΕΔςΩετ෦෼Ҏ֎
    
    \^
    ͷதͱ͔ ͰจࣈྻΛදݱ͍ͨ͠৔߹
    c
    cͰғ͏͜ͱͰΤεέʔϓ͢Δ͜ͱʹͳΔ
    ଓ͘ߏจ঺հ ม਺એݴ΍ϚʔΫΞοϓ Ͱग़ͯ͘Δ
    w ͦΕҎ֎ͩͱ࢖ΘΕΔ͜ͱ͸গͳ͍͚Ͳʜ literal expression: {|literal|} 4JNQMF
36. .'
    ͷߏจ
    
    ؔ਺ ؔ਺ΛຒΊࠐΉ͜ͱͰɺݺͼग़݁͠Ռ͕ॻࣜԽ͞ΕΔ
    w \<ม਺PSϦςϥϧ><ؔ਺໊>^
    w ࢦఆ͞Εͨม਺
    Ϧςϥϧʹ
    <ؔ਺໊>
    Ͱࢦఆͨؔ͠਺Λద༻ ্ॻ͖
    w ޙΖʹ
    <Ҿ਺໊><Ҿ਺ͷ஋>
    ͷܗͰҾ਺Λ౉ͤΔ
    w ؔ਺͸ొ࿥͢Δ͜ͱͰ࢖͑Δ
    
    σϑΥϧτͰ࢖͑Δؔ਺΋͋Δ Today is {$date :datetime} Today is {$date :datetime weekday=long} 4JNQMF
37. .'
    ͷߏจ
    
    σϑΥϧτͰొ࿥͞ΕͯΔؔ਺ OVNCFS
    
    ਺஋ͷϑΥʔϚοτ
    *OUM/VNCFS'PSNBUͱࣅͨײ͡
    *OUFHFS
    
    ੔਺ͷάϧʔϐϯά ୯਺ɾෳ਺ܗͷͨΊ ͱ੔਺ͷϑΥʔϚοτ
    EBUFUJNF
    
    ೔෇࣌ࠁͷ஋ΛϑΥʔϚοτ͢Δ
    EBUF
    
    UJNF
    
    ೔෇࣌ࠁͷ஋ΛผʑͰϑΥʔϚοτ͢Δ͜ͱ΋Ͱ͖Δ
    TUSJOH
    
    จࣈྻ΁ͷม׵Λߦ͏
    +4Ͱ͍͏UP4USJOHΈ͍ͨͳΠϝʔδ
38. .'
    ͷߏจ
    
    <ิ଍>ม਺Ҏ֎΁ͷؔ਺దԠ ʮม਺PSϦςϥϧʯͱॻ͍͚ͨͲϦςϥϧʹؔ਺దԠͬͯͲΜͳ΍ͭʁ
    w ྫ
    ਺஋Ϧςϥϧʹؔ਺Λద༻ͯ͠දهΛม͑Δ
    w ྫ
    จࣈྻϦςϥϧʹؔ਺Λద༻ͯ͠දهΛม͑Δ
    w ͨͩਖ਼௚͋Μ·Γ࢖Θͳͦ͏ʜ ஋ݻఆͳΒͦͷ··ॻ͚͹ྑ͍ͷͰ
    w ࣮͸ม਺෦෼ͳͯؔ͘਺͚ͩͷݺͼग़͠΋0, The total was {0.5 :number style=percent}. Define a constant : {|userId| :toUpperSnake}. 4JNQMF
39. .'
    ͷߏจ
    ϚʔΫΞοϓ ϚʔΫΞοϓ෦෼ΛએݴͰ͖Δه๏ ղऍ͸QBSTF͢ΔSVOUJNF࣍ୈ
    w \<λά໊>^<த਎>\<λά໊>^
    ͷจ๏ͰදͤΔ
    ด͡λάΛলུͰ͖Δ
    
    ଐੑ΋ॻ͚Δ
    {#button}Submit{/button} // <button>Submit</button> {#img alt=|Cancel| /} // <img alt=“cancel”> 4JNQMF
40. .'
    ͷߏจ
    
    ม਺ͷએݴ ϝοηʔδͷઌ಄෦෼Ͱར༻Ͱ͖Δม਺ͷએݴΛ͢Δ͜ͱ͕Ͱ͖Δ
    ม਺ͷએݴʹ͸̎छྨ͋Δ
    w JOQVUEFDMBSBUJPO
    
    ֎෦͔Βͷೖྗ஋Λม਺ͱͯ͠อ࣋
    w ޙΖʹؔ਺͕ద༻͞ΕΔ৔߹ͦͷؔ਺͕దԠ͞Εͨ஋ͱ্ͯ͠ॻ͖͢Δ
    w MPDBMEFDMBSBUJPO
    
    ࣜͷղܾ͞Εͨ஋Λม਺ͱͯ͠อ࣋
    $PNQMFY .input {$date :datetime dateStyle=long} .local $userId = {$id :integer}
41. .'
    ͷߏจ
    
    ม਺ͷએݴྫ ม਺એݴΛར༻ͨ͠ϝοηʔδͷྫ
    w ֎෦͔ΒzEBUFzͱ͖ͯͨ͠ม਺ʹEBUFUJNFؔ਺Λద༻্ͯ͠ॻ͖
    w ֎෦͔ΒJEͱ͖ͯͨ͠஋ʹJOUFHFSؔ਺Λద༻ͯ͠VTFS*Eͱ͍͏໊લͰอଘ
    w $PNQMFY
    NFTTBHFͳͷͰ
    \\
    ^^
    ͰғΘΕͨதʹදࣔςΩετΛॻ͘ $PNQMFY .input {$date :datetime dateStyle=long} .local $userId = {$id :integer} {{user:{$userId} has logged in {$date}}} // user:12345 has logged in August 23, 2024
42. .'
    ͷߏจ
    
    ύλʔϯϚον .BUDIFS ౉͞ΕͨࣜPSએݴ͞Εͨม਺ͷ݁ՌʹԠͨ͡ϝοηʔδͷग़͠Θ͚͕Ͱ͖Δ
    w NBUDI
    \<ࣜ>^
    <ύλʔϯ>
    \\<ϝοηʔδ>^^
    <ύλʔϯ>
    \\<ϝοηʔδ>^^
    w l*z
    ͸શͯΛΩϟον͢Δͱ͍͏ҙຯΛ࣋ͭಛघͳจࣈ
    w $PNQMFY
    NFTTBHFͳͷͰ
    \\
    ^^
    ͰғΘΕͨதʹදࣔςΩετΛॻ͘ .match {$count :integer} 0 {{You have no notifications.}} one {{You have {$count} notification.}} * {{You have {$count} notifications.}} $PNQMFY
43. .'
    ͷߏจ
    
    ύλʔϯϚον .BUDIFS ࣜPSએݴ͞Εͨม਺
    ͬͯԿʁ
    NBUDI
    ͷ
    ൺֱ͢Δ஋Λࢦఆ͢Δ෦෼͸جຊҎԼͷͲΕ͔͡Όͳ͍ͱ͍͚ͳ͍
    w ม਺ʹؔ਺Λద༻ͨࣜ͋͠Δ͍͸୯७ͳؔ਺ͷݺͼग़͠
    w ˢͷ஋Λอ͍࣋ͯ͠Δ
    JOQVUMPDBMEFDMBSBUJPO
    Ͱ࡞ΒΕͨม਺
    ͳͷͰؔ਺ΛదԠ͍ͯ͠ͳ͍ࣄલʹએݴͯ͠ͳ͍ม਺͸࢖͑ͳ͍ $PNQMFY .input {$date :datetime dateStyle=long} {$count :integer} {$ :platform}
44. .'
    ͷߏจ
    
    ෳ਺ύλʔϯϚον .BUDIFS Ϛον͍ͨࣜ͠PSม਺ͷࢀরΛ૿΍͢͜ͱ͕Ͱ͖Δ
    w ͜ͷ৔߹ύλʔϯ΋ͦͷ਺ʹԠͯ͡૿΍ͤΔ
    w $PNQMFY .input {$numLikes :integer} .input {$numShares :integer} .match {$numLikes} {$numShares} // match৚͕݅2ͭ 0 0 {{Your item has no likes and has not been shared.}} 0 one {{Your item has no likes and has been shared …}} 0 * {{Your item has no likes and has been shared …}} // … ҎԼશύλʔϯྻڍ(͜ͷྫͩͱ3x3ͷ9ύλʔϯ)
45. .'
    ͷߏจ
    ·ͱΊ .'ͷ.FTTBHFʹ͸
    4JNQMF
    .FTTBHF
    ͱ
    $PNQMFY
    .FTTBHF
    ͕͋Δ
    ͨ͘͞Μͷߏจ͕͋Γɺෳࡶͳ৔߹Θ͚΍ॻࣜԽͷΧελϚΠζ΋ରԠ
    w ϓϨʔεϗϧμ
    
    ಛఆͷ஋ΛϑΥʔϚοτ࣌ʹຒΊࠐΈ
    w ؔ਺
    
    ؔ਺Λݺͼग़ͨ݁͠ՌΛϑΥʔϚοτ࣌ʹຒΊࠐΈ
    w ϚʔΫΞοϓ
    
    )5.-ͳͲͷϚʔΫΞοϓͰ͋Δ͜ͱΛදݱ
    w ม਺એݴ
    
    ϝʔηʔδ಺Ͱ࢖͏ϩʔΧϧͳม਺΍ೖྗ஋ͷ্ॻ͖
    w ύλʔϯϚον
    
    ม਺΍ࣜͷධՁ݁ՌͰϝοηʔδͷग़͠Θ͚
46. .'ʹ͍ͭͯ੝ΓࠐΊͳ͔ͬͨ࿩ গ͠ϚχΞοΫͦ͏ͳ.'ͷߏจ
    w 1SJWBUF6TF
    "OOPUBUJPOT
    w /BNFTQBDF
    ॻࣜԽͷࡉ͔͍ಈ࡞
    w ม਺ɾؔ਺ͷղܾ
    w ϑΥʔϧόοΫͱΤϥʔॲཧ
    ొ࿥ࡁΈؔ਺ͷࡉ͔͍ύϥϝʔλ
47. ͜͜·Ͱ.'ͷ࿩
    
    6OJDPEFଆͰࡦఆͯ͠Δ
48. *OUMଆ͸Ͳ͏ॻ͘ͷ
49. 
    *OUMଆͰ΍Δ͜ͱ جຊಈ࡞ͷͨΊʹඞཁͳ͜ͱ
    w ϩέʔϧͷࢦఆ
    w ϝοηʔδͷࢦఆ
    w ϑΥʔϚοτͷݺͼग़͠
    .'ͷߏจΛαϙʔτ͢Δʹ͸ʜ
    w ม਺ͷࢦఆ
    w ؔ਺ͷొ࿥
50. *OUMଆͰͷࢦఆ
    
    ϩέʔϧͱϝοηʔδͷࢦఆ ίϯετϥΫλʹϩέʔϧͱϝοηʔδจࣈྻΛࢦఆͯ͠ॳظԽ ϝοηʔδจࣈྻͷ୅ΘΓʹ.FTTBHF%BUBΛ౉͢͜ͱ΋Ͱ͖Δ
    w ͜Ε͸.'ϝοηʔδΛߏ଄Խͨ͠σʔλͷ͜ͱ
    w ιʔείʔυ ϝοηʔδจࣈྻ
    WT
    "45 .FTTBHF%BUB Έ͍ͨͳײ͡ const message = "Hello,{$userName}" const mf = new Intl.MessageFormat("en", message);
51. *OUMଆͰͷࢦఆ
    
    ม਺Λ౉ͯ͠ॻࣜԽ ϝοηʔδ಺Ͱར༻͍ͯ͠Δม਺͸ΠϯελϯεͷGPSNBUؔ਺Ͱࢦఆ͢Δ
    w \<NFTTBHF಺ͷLFZ>
    
    <஋>^
    ͷܗͰࢦఆ͢Δ
    w GPSNBU5P1BSUT ͱ͍͏ϝιου΋͋Δ
    const message = "Hello,{$userName}" const mf = new Intl.MessageFormat("en", message); const greeting = mf.format({ userName: "saji" }); // Hello, Saji
52. *OUMଆͰͷࢦఆ
    
    ؔ਺Λొ࿥ ؔ਺͸.FTTBHF'PSNBUίϯετϥΫλॳظԽ࣌ʹࢦఆ͢Δ
    const message = "logged in at {$date :myDate type=short}"; const mf = new Intl.MessageFormat("en", message, { functions: { myDate: (…) => {…} }, }); const logMes = mf.format({ date: new Date() }); // logged in at 2024/08/23
53. *OUMଆͰͷࢦఆ
    
    ొ࿥͢Δؔ਺ͷ*' ؔ਺͸DPOUFYU
    
    PQUJPO
    
    JOQVUΛҾ਺ʹ΋Β͏
    w $POUFYU
    
    ϩέʔϧ৘ใ΍ม਺ͷ৘ใɺΤϥʔͷDBMMCBDLͳͲ
    ฦΓ஋͸
    .FTTBHF7BMVFͱݺ͹ΕΔΦϒδΣΫτ
    w UZQFMPDBMFTPVSDFͷΑ͏ͳϝλ৘ใΛؚΊΔ
    w UP4USJOHUP1BSUTͷΑ͏ͳॻࣜԽͷͨΊͷؔ਺Λ࣮૷͢Δ "logged in at {$date :myDate type=short}"; *OQVU 0QUJPO
54. *OUMଆͰͷࢦఆ
    
    ·ͱΊ ίϯετϥΫλΛOFX͢Δͱ͖ʹࢦఆ
    w ϝοηʔδจࣈྻɾϩέʔϧ
    w ϝοηʔδͷߏจͰར༻͍ͨ͠ಠࣗؔ਺ొ࿥
    GPSNBUGPSNBU5P1BSUTؔ਺Ͱࢦఆ͢Δ΋ͷ
    
    w ϝοηʔδʹ౉͢ม਺
    ͳ͘ͳ͘ল͍ͨͱ͜😢
    w 5P1BSUTϝιουͰฦΔ஋ɾ.FTTBHF%BUBৄࡉɾΤϥʔϋϯυϦϯά
55. ॻ͖ͨ͘ͳ͖ͬͯ·͔ͨ͠ʁ
56. 
    ͜Ε͔Β
57. *OUM.FTTBHF'PSNBU
    ͷ͞ΒͳΔ֦ு
58. *OUM.FTTBHF'PSNBUQBSTF3FTPVSDF Ұൠతͳจݴ؅ཧͰ͸จݴϦιʔεΛύʔε͠ɺཉ͍͠จݴΛLFZͰऔಘ͢Δ
    w Α͋͘Δ
    HFU.FTTBHF lOPUJ fi DBUJPO.FTTBHFz
    Έ͍ͨͳ΍ͭ
    *OUM.FTTBHF'PSNBUͰ΋͜Ε͕Ͱ͖ͯཉ͍͠ͱ͍͏ఏҊ
    w *OUM.FTTBHF'PSNBUຊମͱ͸෼͚ͯఏҊ͞Ε͓ͯΓɺݱࡏ4UBHF
    ͨͩ͠ɺͦ΋ͦ΋ʮϦιʔεϑΝΠϧʯͷඪ४͕ܾ·͍ͬͯͳ͍
    w Ͳ͏΍ͬͯෳ਺ͷ.FTTBHFΛྻڍ͢Δͷ͔
    w ίϝϯτ͸ʁ
    ηΫγϣϯͰ۠੾Γʁ
    
    ϝλ৘ใ͸ʁFUD
59. *OUM.FTTBHF'PSNBUQBSTF3FTPVSDF Πϝʔδ ࠓޙશવมΘΔՄೳੑ͋Γ
    const source = "…"; // string source const resource = Intl.MessageFormat.parseResource(source, [ "en", ]); const greeting = resource .get("greeting") .resolveMessage({ place: "world" }); greeting.toString(); // 'Hello world!'
60. *OUM.FTTBHF'PSNBU͕౰ͨΓલͷະདྷΛ૝૾͢Δ 👍
    .'Ͱॻ͚͹+4ඪ४ͰॻࣜԽ΍ϦιʔεಡΈࠐΈ͕αϙʔτ͞ΕΔ
    👍
    ଞͷจݴϦιʔεܗࣜͱൺ΂ͯ΋๛෋ͳػೳ
    👍
    طଘͷ*OUMͷػೳͱڠௐ͕ҙࣝ͞Εͨ࢓༷ࡦఆ
    ˠ
    XFCΞϓϦέʔγϣϯʹ͓͚ΔจݴϦιʔεܗࣜͷୈ̍બ୒ࢶʹʁ
    🤔
    ෳࡶͳߏจ΁ͷ׳Εͱशಘɾ͋Δ͍͸ෳࡶ͞Λ཈͑Δن໿ͷඞཁੑ
    🤔
    ϥΠλʔɾ຋༁ऀ͞Μͱͷ෼୲ڥքΛߟ͑௚͢ඞཁ
    ˠ
    ΞϓϦέʔγϣϯͷઃܭʹดͣ͡ɺपล৬຿ͱྖҬΛݟ௚͖͔͚ͬ͢ʹ
61. ͜Ε͔Β΋
    *OUM.FTTBHF'PSNBU͔Β
    ໨͕཭ͤͳ͍
    👀
62. 3ZVTFJ
    4BKJLJ
    
    !TBKJLJY ͋Γ͕ͱ͏͍͟͝·ͨ͠