The Future of Frontend i18n : Intl.MessageFormat

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

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

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

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

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

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

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

*OUM.FTTBHF'PSNBUͷػӡ

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

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

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

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

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

*$6.FTTBHF'PSNBU

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

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

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

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

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

͋Εʁ&$."4DSJQU͸ʁ

👌ͪΌΜͱग़ͯ͘Δ

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

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

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

&$."4DSJQUͱ*$6

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.'ͷߏจม਺ͷએݴྫ ม਺એݴΛར༻ͨ͠ϝοηʔδͷྫ 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

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

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

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

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

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

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

*OUMଆ͸Ͳ͏ॻ͘ͷ

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

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

*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

*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

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

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

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

͜Ε͔Β

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

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

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

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

͜Ε͔Β΋ *OUM.FTTBHF'PSNBU͔Β ໨͕཭ͤͳ͍👀

3ZVTFJ4BKJLJ!TBKJLJY ͋Γ͕ͱ͏͍͟͝·ͨ͠

The Future of Frontend i18n : Intl.MessageFormat

The Future of Frontend i18n : Intl.MessageFormat

Transcript

More Decks by Saji

Other Decks in Programming

Featured