The Future of Frontend i18n : Intl.MessageFormat

by Saji

Slide 1

Slide 1 text

3ZVTFJ4BKJLJ!TBKJLJY 5IF'VUVSFPG'SPOUFOEJO *OUM.FTTBHF'PSNBU

Slide 2

Slide 2 text

4BKJ3ZVTFJ4BKJLJ 'SPOUFOE%FWFMPQFSBU$ZCP[V JOD 𝕏 !TBKJLJY

Slide 3

Slide 3 text

ΞδΣϯμ *OUMʹ͍͓ͭͯ͞Β͍ͱ*OUM.FTTBHF'PSNBU *$6.FTTBHF'PSNBUͱ͸ &$."4DSJQUͱͷڠྗɾ.FTTBHF'PSNBUW .FTTBHF'PSNBUWͷߏจ঺հͱ*OUMͰͷ࢖͍ํ ͜Ε͔Β

Slide 4

Slide 4 text

*OUMʹ͍͓ͭͯ͞Β͍ͱ *OUM.FTTBHF'PSNBU

Slide 5

Slide 5 text

෮श *OUMͱ͸ʁ +BWB4DSJQUͷࠃࡍԽ"1*ͷ໊લۭؒ Intl.ʓʓ ҎԼͷΑ͏ʹݴޠʹґଘͨ͠ػೳΛఏڙ͢Δ w ೔࣌ɾ਺஋ͷϑΥʔϚοτ w ϩέʔϧͷղܾ w ݴޠʹґଘͨ͠จࣈྻͷൺֱ w ςΩετ۠੾Γɾෳ਺ܗͷ൑ผ

Slide 6

Slide 6 text

*OUMͷ࢓༷తͳҐஔ෇͚ +BWB4DSJQUͷ࢓༷Ͱ͋Δ&$."ͷʮ֦ு࢓༷ʯͱ͍͏Ґஔ෇͚ɻ &$."ͱ͸۠ผͯ͠&$."ͱ͍͏࢓༷൪߸͕͍͍ͭͯΔɻ 1SPQPTBMͷ؅ཧ΍ձٞ΋෼͚ͯਐΊΒΕ͍ͯΔ &$." &$." *OUM ࣗ෼͕ͨͪ+BWB4DSJQUͷ࢓༷ͱଊ͍͑ͯΔ΋ͷ

Slide 7

Slide 7 text

࢖͍ํͷྫ/VNCFS'PSNBUͷ৔߹ const formatter = new Intl.NumberFormat("en", { notation: "compact", compactDisplay: “long", }); formatter.format(123456789); // 123 million

Slide 8

Slide 8 text

*OUM.FTTBHF'PSNBUͷػӡ

Slide 9

Slide 9 text

*OUMʹจݴશମͷϑΥʔϚοτ΋೚͍ͤͨ ݱঢ়ࠓͷ*OUM͸೔࣌΍਺஋ ୯Ґ ɺจ๏نଇʹԠͨ͡൑ఆ ˠʮ֤ཁૉʯͷॻࣜԽɾॻࣜԽαϙʔτػೳ͕ॆ࣮͖͍ͯͯ͠Δஈ֊ ຊདྷͷ໨తΞϓϦέʔγϣϯશମͷࠃࡍԽ ˠΞϓϦͰ࢖ΘΕΔ͋ΒΏΔจݴΛॻࣜԽ͢Δඞཁ͕͋Δ ཧ૝͔ͤͬ͘ͳΒશ෦*OUM͕΍ͬͯཉ͍͠ͳ͊ʜ ˠ*OUMͷ֤ػೳΛ౷߹͠จݴશମͷࠃࡍԽΛ͍͍ײ͡ʹ؅ཧɾॻࣜԽ͍ͨ͠ʂ

Slide 10

Slide 10 text

Ͱੜ·Εͨͷ͕ *OUM.FTTBHF'PSNBU ͬͯΘ͚👶

Slide 11

Slide 11 text

l*OUMzͳΜ͔ͩΒ΋ͪΖΜ &$."ͷ࢓༷ʁ

Slide 12

Slide 12 text

":FTͰ΋͋Γ/PͰ΋͋Δ ΍΍͍͜͠ϙΠϯτ

Slide 13

Slide 13 text

*OUM.FTTBHF'PSNBUΛମܥతʹཧղ͢Δ *OUM.FTTBHF'PSNBU͸&$."4DSJQUʹดͨ͡࢓༷Ͱ͸ͳ͍ w 6OJDPEFͱ࿈ܞͯ͠ਐΊ͍ͯΔϓϩδΣΫτ w ͳͷͰ&$."4DSJQUͷ࢓༷΍ٞ࿦͚ͩݟͯ΋௥͑ͳ͍ 6OJDPEF *$6 *OUM.FTTBHF'PSNBU &$."4DSJQU

Slide 14

Slide 14 text

*$6.FTTBHF'PSNBU

Slide 15

Slide 15 text

ͦ΋ͦ΋จݴ؅ཧͷܗࣜ͸ͨ͘͞Μ͋Δ ୯७ྻڍܥ w +BWB1SPQFSUJFTJ044USJOHT.P[JMMB1301&35*&4ʜ +40/ܥ w JOFYU"OHVMBS5SBOTMBUFHPJOJOOPEFʜ 9.-ܥ w "OESPJE+BWB1SPQFSUZ3VCZPO3BJMT.JDSPTPGU/&5ʜ

Slide 16

Slide 16 text

จݴ؅ཧͷΑ͋͘Δػೳ ϩέʔϧʹԠͯ͡ग़͠Θ͚ ඞਢ w ݴޠ΍஍Ҭ͝ͱʹϦιʔεϑΝΠϧΛ࡞੒ͯ͠؅ཧ͢Δͷ͕Ұൠత ϓϨʔεϗϧμʔ w ϝοηʔδΛग़͢৔໘Ͱطଘͷจݴʹม਺ΛೖΕࠐΉػೳ w ྫJOFYU {"greeting" : "Hi! {{userName}}!"}

Slide 17

Slide 17 text

*$6.FTTBHF'PSNBU ΋ͦͷ̍छ

Slide 18

Slide 18 text

ิ଍ *$6ͬͯͳʹʁ *OUFSOBUJPOBM$PNQPOFOUTGPS6OJDPEFͷུ 6OJDPEFίϯιʔγΞϜ͕؅ཧ͢ΔࠃࡍԽͱ஍ҬԽʹؔ͢ΔػೳͷϥΠϒϥϦ w ϩέʔϧͷѻ͍ɾจࣈͷѻ͍ɾॻࣜԽɾڥքݕ஌FUDʜ $$࣮૷ͷ*$6$ +BWB࣮૷ͷ*$6+ 3VTU࣮૷ͷ*$69͕͋Δ w *$6$΍*$69ͳͲ͸+4Τϯδϯͷ಺෦Ͱ΋࢖ΘΕ͍ͯΔ

Slide 19

Slide 19 text

*$6.FTTBHF'PSNBUͱ͸ *$6͕ఆٛɾӡ༻͍ͯ͠ΔจݴͷߏจɾϑΥʔϚοτ"1* w ϝοηʔδͷߏจఆٛߏจͷղऍͱॻࣜԽΤϥʔॲཧ w ೥Ҏ্ݱ໾ͰۀքͰ΋޿͘࢖ΘΕΔϑΥʔϚοτͷҰͭ ϓϨʔεϗϧμʔ͚ͩͰͳ͘ɺࡉ͔͍ॻࣜԽࢦఆɺ৚݅෼ذͳͲ΋ॻ͚Δ w ˠϝοηʔδ಺ͰϓϩάϥϜͬΆ͍ڍಈ͕Ͱ͖ͪΌ͏ ΋ͪΖΜ*$6ʹ͋Δ"1*ͰจݴͷύʔεϑΥʔϚοτ΋Ͱ͖Δ

Slide 20

Slide 20 text

͋Εʁ&$."4DSJQU͸ʁ

Slide 21

Slide 21 text

👌ͪΌΜͱग़ͯ͘Δ

Slide 22

Slide 22 text

&$."4DSJQUͱͷڠྗɾ .FTTBHF'PSNBUW

Slide 23

Slide 23 text

*$6.FTTBHF'PSNBU W ͷ๊͍͑ͯͨ՝୊ ֦ுੑ໰୊ w ಠࣗͷϑΥʔϚοτؔ਺ΛఆٛͰ͖ͳ͍͠ɺٯʹഇࢭ΋Ͱ͖ͳ͍ *$6ʹ৽͘͠૿͑ͨॻࣜԽػೳͳͲΛαϙʔτͰ͖͍ͯͳ͍ ෳࡶͳݴޠʹΑΔจ๏ߟྀࣄ߲ͷҧ͍ͳͲʹରԠͰ͖ͳ͍ w จ๏తɾਓతͳੑผͷߟྀ΍୯਺ෳ਺ͷύλʔϯ ৄ͘͠͸IUUQTHJUIVCDPNVOJDPEFPSHNFTTBHFGPSNBUXHCMPC NBJOEPDTXIZ@NG@OFYUNE

Slide 24

Slide 24 text

&$."4DSJQUͱ*$6 .FTTBHF'PSNBU՝୊৭ʑ͋Δͳ͊ *OUMͰ౷߹తͳจݴͷ؅ཧɾॻࣜԽ͍ͨ͠ͳ

Slide 25

Slide 25 text

&$."4DSJQUͱ*$6

Slide 26

Slide 26 text

&$."4DSJQUͱ*$6 &$."ͱ΋దٓڠྗͭͭ͠ .FTTBHF'PSNBUWΛ࡞Γ·͢ʂ *OUM.FTTBHF'PSNBU͸Λ *$6.FTTBHF'PSNBUW४ڌͰʂ

Slide 27

Slide 27 text

*OUMͱ*$6.FTTBHF'PSNBUW BLB.' ͦΕͧΕͷ෼୲ൣғ w *$6.FTTBHF'PSNBUWͷߏจɾΤϥʔɾॻࣜԽಈ࡞ͷఆٛ w .FTTBHF'PSNBU8PSLJOH(SPVQͰࡦఆ͍ͯ͠Δ w *OUM+4ϥϯλΠϜͰͲ͏0QUJPOΛ౉͔࣮͢ࡍͷϑΥʔϚοτͷ࣮ߦ w ಺෦తʹ͸*$6Λ࢖͏ͷͰݫີʹ͸࣮૷΋*$6ʹґଘ͢Δ͜ͱʹͳΔ͚Ͳ ˠͭ·Γ&$."ͱ6OJDPEFͷ߹࡞͕*OUM.FTTBHF'PSNBU🤝

Slide 28

Slide 28 text

.FTTBHF'PSNBUW ͷߏจ঺հͱ*OUMͰͷ࢖͍ํ

Slide 29

Slide 29 text

஫ҙ·ͩ4UBHFͩ͠5FDIOJDBM1SFWJFX *OUM.FTTBHF'PSNBU͸ݱࡏ4UBHFͷ1SPQPTBM w શવ"1*΍ػೳ͕มΘΔՄೳੑ͕͋Δ .'΋ࠓ೥5FDIOJDBM1SFWJFXʹͳͬͨ͹͔Γ w ࠜຊ͔ΒมΘΔ͜ͱ͸ͳͯ͘΋ࡉ͔͍ϧʔϧͷมߋ͸શવ͋Γ͏Δ ˠ͜ͷεϥΠυͷൃද࣌఺ ͔ΒมΘΔՄೳੑ͕͋Γ·͢ɻ

Slide 30

Slide 30 text

.FTTBHF'PSNBUWͷߏจ ˞͔ͬ͜Β͸௕͍ͷͰʮ.'ʯͬͯॻ͘Αʂ

Slide 31

Slide 31 text

.'ͷߏจ̎छྨͷʮNFTTBHFʯ .'ͷ.FTTBHFʹ͸̎छྨͷʮNFTTBHFʯ͕͋Δ w 4JNQMFNFTTBHF w ී௨ͷςΩετ͚ͩͷ΋ͷ w ී௨ͷςΩετதʹ\IPHF^ͷΑ͏ͳ\^ͰғΘΕͨߏจ͕ೖΔ w $PNQMFYNFTTBHF w શମ ֎ଆ ͕.'ͷߏจʹͳͬͯΔ΋ͷ w தʹ\\^^ͰғΘΕͨzද͍ࣔͨ͠ςΩετz͕ೖͬͯΔ

Slide 32

Slide 32 text

.'ͷߏจ̎छྨͷʮNFTTBHFʯྫ ྫʹ͢ΔͱҎԼͷΑ͏ͳײ͡ Ұ୴ߏจͷҙຯ͕෼͔Βͳͯ͘΋ྑ͍ w 4JNQMFNFTTBHF w $PNQMFYNFTTBHF Hello,{$userName} // → Hello,Saji .local $userId= {$id :integer} {{user:{$userId} has logged in}} // user:12345 has logged in

Slide 33

Slide 33 text

.'ͷߏจಡΉ࣌ͷϙΠϯτ ಡΜͰ͍Δ෦෼͕.'ͷߏจͷதͳͷ͔ͦΕͱ΋දࣔ͢ΔςΩετͳͷ͔ w ߏจͷ৔߹ۭനɾվߦ͸ແࢹ͞ΕΔಡΈ΍͍͢Α͏ʹ੔ܗͯ͠0, w දࣔ͢ΔςΩετۭന΍վߦ͸΋ͪΖΜͦͷ··දࣔ͞ΕΔ w ͡Όͳ͍ͱۭനͱ͔վߦࣗମΛදͤͳ͘ͳͬͪΌ͏ 4JNQMF.FTTBHFˠ\^ͷதҎ֎͸දࣔ͢ΔςΩετ $PNQMFY.FTTBHFˠ\\^^ͷதҎ֎͸.'ͷߏจ $PNQMFY 4JNQMF

Slide 34

Slide 34 text

.'ͷߏจ୯७ͳจࣈྻͱม਺ ୯७ͳจࣈྻ΍Τεέʔϓ͞Εͨจࣈྻ͸৔߹ͦͷ··දࣔ͞ΕΔ ม਺͸\ม਺໊^Ͱॻ͚Δɻ͍ΘΏΔϓϨʔεϗϧμ w ϝοηʔδ಺Ͱએݴ ޙड़ ͯ͠ͳ͍ݶΓ͸֎͔Βͷೖྗͱͯ͠ѻ͏ Hello,{$userName} // → Hello,Saji Hello, world! 4JNQMF

Slide 35

Slide 35 text

.'ͷߏจΤεέʔϓ දࣔ͞ΕΔςΩετ෦෼Ҏ֎ \^ͷதͱ͔ ͰจࣈྻΛදݱ͍ͨ͠৔߹ ccͰғ͏͜ͱͰΤεέʔϓ͢Δ͜ͱʹͳΔ ଓ͘ߏจ঺հ ม਺એݴ΍ϚʔΫΞοϓ Ͱग़ͯ͘Δ w ͦΕҎ֎ͩͱ࢖ΘΕΔ͜ͱ͸গͳ͍͚Ͳʜ literal expression: {|literal|} 4JNQMF

Slide 36

Slide 36 text

.'ͷߏจؔ਺ ؔ਺ΛຒΊࠐΉ͜ͱͰɺݺͼग़݁͠Ռ͕ॻࣜԽ͞ΕΔ w \<ม਺PSϦςϥϧ><ؔ਺໊>^ w ࢦఆ͞Εͨม਺Ϧςϥϧʹ<ؔ਺໊>Ͱࢦఆͨؔ͠਺Λద༻ ্ॻ͖ w ޙΖʹ<Ҿ਺໊><Ҿ਺ͷ஋>ͷܗͰҾ਺Λ౉ͤΔ w ؔ਺͸ొ࿥͢Δ͜ͱͰ࢖͑ΔσϑΥϧτͰ࢖͑Δؔ਺΋͋Δ Today is {$date :datetime} Today is {$date :datetime weekday=long} 4JNQMF

Slide 37

Slide 37 text

.'ͷߏจσϑΥϧτͰొ࿥͞ΕͯΔؔ਺ OVNCFS਺஋ͷϑΥʔϚοτ *OUM/VNCFS'PSNBUͱࣅͨײ͡ *OUFHFS੔਺ͷάϧʔϐϯά ୯਺ɾෳ਺ܗͷͨΊ ͱ੔਺ͷϑΥʔϚοτ EBUFUJNF೔෇࣌ࠁͷ஋ΛϑΥʔϚοτ͢Δ EBUFUJNF೔෇࣌ࠁͷ஋ΛผʑͰϑΥʔϚοτ͢Δ͜ͱ΋Ͱ͖Δ TUSJOHจࣈྻ΁ͷม׵Λߦ͏ +4Ͱ͍͏UP4USJOHΈ͍ͨͳΠϝʔδ

Slide 38

Slide 38 text

.'ͷߏจ<ิ଍>ม਺Ҏ֎΁ͷؔ਺దԠ ʮม਺PSϦςϥϧʯͱॻ͍͚ͨͲϦςϥϧʹؔ਺దԠͬͯͲΜͳ΍ͭʁ w ྫ਺஋Ϧςϥϧʹؔ਺Λద༻ͯ͠දهΛม͑Δ w ྫจࣈྻϦςϥϧʹؔ਺Λద༻ͯ͠දهΛม͑Δ w ͨͩਖ਼௚͋Μ·Γ࢖Θͳͦ͏ʜ ஋ݻఆͳΒͦͷ··ॻ͚͹ྑ͍ͷͰ w ࣮͸ม਺෦෼ͳͯؔ͘਺͚ͩͷݺͼग़͠΋0, The total was {0.5 :number style=percent}. Define a constant : {|userId| :toUpperSnake}. 4JNQMF

Slide 39

Slide 39 text

.'ͷߏจϚʔΫΞοϓ ϚʔΫΞοϓ෦෼ΛએݴͰ͖Δه๏ ղऍ͸QBSTF͢ΔSVOUJNF࣍ୈ w \<λά໊>^<த਎>\<λά໊>^ͷจ๏ͰදͤΔ ด͡λάΛলུͰ͖Δଐੑ΋ॻ͚Δ {#button}Submit{/button} // Submit {#img alt=|Cancel| /} // “cancel”

4JNQMF

Slide 40

Slide 40 text

.'ͷߏจม਺ͷએݴ ϝοηʔδͷઌ಄෦෼Ͱར༻Ͱ͖Δม਺ͷએݴΛ͢Δ͜ͱ͕Ͱ͖Δ ม਺ͷએݴʹ͸̎छྨ͋Δ w JOQVUEFDMBSBUJPO֎෦͔Βͷೖྗ஋Λม਺ͱͯ͠อ࣋ w ޙΖʹؔ਺͕ద༻͞ΕΔ৔߹ͦͷؔ਺͕దԠ͞Εͨ஋ͱ্ͯ͠ॻ͖͢Δ w MPDBMEFDMBSBUJPOࣜͷղܾ͞Εͨ஋Λม਺ͱͯ͠อ࣋ $PNQMFY .input {$date :datetime dateStyle=long} .local $userId = {$id :integer}

Slide 41

Slide 41 text

.'ͷߏจม਺ͷએݴྫ ม਺એݴΛར༻ͨ͠ϝοηʔδͷྫ w ֎෦͔ΒzEBUFzͱ͖ͯͨ͠ม਺ʹEBUFUJNFؔ਺Λద༻্ͯ͠ॻ͖ w ֎෦͔ΒJEͱ͖ͯͨ͠஋ʹJOUFHFSؔ਺Λద༻ͯ͠VTFS*Eͱ͍͏໊લͰอଘ w $PNQMFYNFTTBHFͳͷͰ\\^^ͰғΘΕͨதʹදࣔςΩετΛॻ͘ $PNQMFY .input {$date :datetime dateStyle=long} .local $userId = {$id :integer} {{user:{$userId} has logged in {$date}}} // user:12345 has logged in August 23, 2024

Slide 42

Slide 42 text

.'ͷߏจύλʔϯϚον .BUDIFS ౉͞ΕͨࣜPSએݴ͞Εͨม਺ͷ݁ՌʹԠͨ͡ϝοηʔδͷग़͠Θ͚͕Ͱ͖Δ w NBUDI\<ࣜ>^<ύλʔϯ>\\<ϝοηʔδ>^^<ύλʔϯ>\\<ϝοηʔδ>^^ w l*z͸શͯΛΩϟον͢Δͱ͍͏ҙຯΛ࣋ͭಛघͳจࣈ w $PNQMFYNFTTBHFͳͷͰ\\^^ͰғΘΕͨதʹදࣔςΩετΛॻ͘ .match {$count :integer} 0 {{You have no notifications.}} one {{You have {$count} notification.}} * {{You have {$count} notifications.}} $PNQMFY

Slide 43

Slide 43 text

.'ͷߏจύλʔϯϚον .BUDIFS ࣜPSએݴ͞Εͨม਺ͬͯԿʁ NBUDIͷൺֱ͢Δ஋Λࢦఆ͢Δ෦෼͸جຊҎԼͷͲΕ͔͡Όͳ͍ͱ͍͚ͳ͍ w ม਺ʹؔ਺Λద༻ͨࣜ͋͠Δ͍͸୯७ͳؔ਺ͷݺͼग़͠ w ˢͷ஋Λอ͍࣋ͯ͠ΔJOQVUMPDBMEFDMBSBUJPOͰ࡞ΒΕͨม਺ ͳͷͰؔ਺ΛదԠ͍ͯ͠ͳ͍ࣄલʹએݴͯ͠ͳ͍ม਺͸࢖͑ͳ͍ $PNQMFY .input {$date :datetime dateStyle=long} {$count :integer} {$ :platform}

Slide 44

Slide 44 text

.'ͷߏจෳ਺ύλʔϯϚον .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ύλʔϯ)

Slide 45

Slide 45 text

.'ͷߏจ·ͱΊ .'ͷ.FTTBHFʹ͸4JNQMF.FTTBHFͱ$PNQMFY.FTTBHF͕͋Δ ͨ͘͞Μͷߏจ͕͋Γɺෳࡶͳ৔߹Θ͚΍ॻࣜԽͷΧελϚΠζ΋ରԠ w ϓϨʔεϗϧμಛఆͷ஋ΛϑΥʔϚοτ࣌ʹຒΊࠐΈ w ؔ਺ؔ਺Λݺͼग़ͨ݁͠ՌΛϑΥʔϚοτ࣌ʹຒΊࠐΈ w ϚʔΫΞοϓ)5.-ͳͲͷϚʔΫΞοϓͰ͋Δ͜ͱΛදݱ w ม਺એݴϝʔηʔδ಺Ͱ࢖͏ϩʔΧϧͳม਺΍ೖྗ஋ͷ্ॻ͖ w ύλʔϯϚονม਺΍ࣜͷධՁ݁ՌͰϝοηʔδͷग़͠Θ͚

Slide 46

Slide 46 text

.'ʹ͍ͭͯ੝ΓࠐΊͳ͔ͬͨ࿩ গ͠ϚχΞοΫͦ͏ͳ.'ͷߏจ w 1SJWBUF6TF"OOPUBUJPOT w /BNFTQBDF ॻࣜԽͷࡉ͔͍ಈ࡞ w ม਺ɾؔ਺ͷղܾ w ϑΥʔϧόοΫͱΤϥʔॲཧ ొ࿥ࡁΈؔ਺ͷࡉ͔͍ύϥϝʔλ

Slide 47

Slide 47 text

͜͜·Ͱ.'ͷ࿩ 6OJDPEFଆͰࡦఆͯ͠Δ

Slide 48

Slide 48 text

*OUMଆ͸Ͳ͏ॻ͘ͷ

Slide 49

Slide 49 text

*OUMଆͰ΍Δ͜ͱ جຊಈ࡞ͷͨΊʹඞཁͳ͜ͱ w ϩέʔϧͷࢦఆ w ϝοηʔδͷࢦఆ w ϑΥʔϚοτͷݺͼग़͠ .'ͷߏจΛαϙʔτ͢Δʹ͸ʜ w ม਺ͷࢦఆ w ؔ਺ͷొ࿥

Slide 50

Slide 50 text

*OUMଆͰͷࢦఆϩέʔϧͱϝοηʔδͷࢦఆ ίϯετϥΫλʹϩέʔϧͱϝοηʔδจࣈྻΛࢦఆͯ͠ॳظԽ ϝοηʔδจࣈྻͷ୅ΘΓʹ.FTTBHF%BUBΛ౉͢͜ͱ΋Ͱ͖Δ w ͜Ε͸.'ϝοηʔδΛߏ଄Խͨ͠σʔλͷ͜ͱ w ιʔείʔυ ϝοηʔδจࣈྻ WT"45 .FTTBHF%BUB Έ͍ͨͳײ͡ const message = "Hello,{$userName}" const mf = new Intl.MessageFormat("en", message);

Slide 51

Slide 51 text

*OUMଆͰͷࢦఆม਺Λ౉ͯ͠ॻࣜԽ ϝοηʔδ಺Ͱར༻͍ͯ͠Δม਺͸ΠϯελϯεͷGPSNBUؔ਺Ͱࢦఆ͢Δ w \<஋>^ͷܗͰࢦఆ͢Δ w GPSNBU5P1BSUT ͱ͍͏ϝιου΋͋Δ const message = "Hello,{$userName}" const mf = new Intl.MessageFormat("en", message); const greeting = mf.format({ userName: "saji" }); // Hello, Saji

Slide 52

Slide 52 text

*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

Slide 53

Slide 53 text

*OUMଆͰͷࢦఆొ࿥͢Δؔ਺ͷ*' ؔ਺͸DPOUFYU PQUJPO JOQVUΛҾ਺ʹ΋Β͏ w $POUFYUϩέʔϧ৘ใ΍ม਺ͷ৘ใɺΤϥʔͷDBMMCBDLͳͲ ฦΓ஋͸.FTTBHF7BMVFͱݺ͹ΕΔΦϒδΣΫτ w UZQFMPDBMFTPVSDFͷΑ͏ͳϝλ৘ใΛؚΊΔ w UP4USJOHUP1BSUTͷΑ͏ͳॻࣜԽͷͨΊͷؔ਺Λ࣮૷͢Δ "logged in at {$date :myDate type=short}"; *OQVU 0QUJPO

Slide 54

Slide 54 text

*OUMଆͰͷࢦఆ·ͱΊ ίϯετϥΫλΛOFX͢Δͱ͖ʹࢦఆ w ϝοηʔδจࣈྻɾϩέʔϧ w ϝοηʔδͷߏจͰར༻͍ͨ͠ಠࣗؔ਺ొ࿥ GPSNBUGPSNBU5P1BSUTؔ਺Ͱࢦఆ͢Δ΋ͷ w ϝοηʔδʹ౉͢ม਺ ͳ͘ͳ͘ল͍ͨͱ͜😢 w 5P1BSUTϝιουͰฦΔ஋ɾ.FTTBHF%BUBৄࡉɾΤϥʔϋϯυϦϯά

Slide 55

Slide 55 text

ॻ͖ͨ͘ͳ͖ͬͯ·͔ͨ͠ʁ

Slide 56

Slide 56 text

͜Ε͔Β

Slide 57

Slide 57 text

*OUM.FTTBHF'PSNBU ͷ͞ΒͳΔ֦ு

Slide 58

Slide 58 text

*OUM.FTTBHF'PSNBUQBSTF3FTPVSDF Ұൠతͳจݴ؅ཧͰ͸จݴϦιʔεΛύʔε͠ɺཉ͍͠จݴΛLFZͰऔಘ͢Δ w Α͋͘ΔHFU.FTTBHF lOPUJ fi DBUJPO.FTTBHFz Έ͍ͨͳ΍ͭ *OUM.FTTBHF'PSNBUͰ΋͜Ε͕Ͱ͖ͯཉ͍͠ͱ͍͏ఏҊ w *OUM.FTTBHF'PSNBUຊମͱ͸෼͚ͯఏҊ͞Ε͓ͯΓɺݱࡏ4UBHF ͨͩ͠ɺͦ΋ͦ΋ʮϦιʔεϑΝΠϧʯͷඪ४͕ܾ·͍ͬͯͳ͍ w Ͳ͏΍ͬͯෳ਺ͷ.FTTBHFΛྻڍ͢Δͷ͔ w ίϝϯτ͸ʁηΫγϣϯͰ۠੾Γʁϝλ৘ใ͸ʁFUD

Slide 59

Slide 59 text

*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!'

Slide 60

Slide 60 text

*OUM.FTTBHF'PSNBU͕౰ͨΓલͷະདྷΛ૝૾͢Δ 👍.'Ͱॻ͚͹+4ඪ४ͰॻࣜԽ΍ϦιʔεಡΈࠐΈ͕αϙʔτ͞ΕΔ 👍ଞͷจݴϦιʔεܗࣜͱൺ΂ͯ΋๛෋ͳػೳ 👍طଘͷ*OUMͷػೳͱڠௐ͕ҙࣝ͞Εͨ࢓༷ࡦఆ ˠXFCΞϓϦέʔγϣϯʹ͓͚ΔจݴϦιʔεܗࣜͷୈ̍બ୒ࢶʹʁ 🤔ෳࡶͳߏจ΁ͷ׳Εͱशಘɾ͋Δ͍͸ෳࡶ͞Λ཈͑Δن໿ͷඞཁੑ 🤔ϥΠλʔɾ຋༁ऀ͞Μͱͷ෼୲ڥքΛߟ͑௚͢ඞཁ ˠΞϓϦέʔγϣϯͷઃܭʹดͣ͡ɺपล৬຿ͱྖҬΛݟ௚͖͔͚ͬ͢ʹ