Slide 1
Slide 1 text
3ZVTFJ4BKJLJ!TBKJLJY
*OUMͷࠓ·Ͱͱ͜Ε͔Β
Slide 2
Slide 2 text
4BKJ3ZVTFJ4BKJLJ
'SPOUFOE%FWFMPQFSBU$ZCP[V
JOD
𝕏
!TBKJLJY
Slide 3
Slide 3 text
ΞδΣϯμ
*OUMͱ
*OUMࡦఆ·Ͱͷྺ࢙
*OUMͷ͜Ε·ͰͷਐԽɾαϙʔτ
*OUMʹؔ࿈͢Δ༷ͨͪ
*OUMͷ͜Ε͔Β
Slide 4
Slide 4 text
*OUMͱ
Slide 5
Slide 5 text
8IBUJT*OUM༷ॻʹΑΔͱ
This Standard de
fi
nes the application programming interface for ECMAScript
objects that support programs that need to adapt to the linguistic and cultural
conventions used by different human languages and countries.(from
ECMA-402, 10th
edition)
͜ͷඪ४ɺҟͳΔਓؒͷݴޠࠃͰ༻͞ΕΔݴޠతɾจԽతͳ׳शʹదԠ
͢Δඞཁͷ͋ΔϓϩάϥϜΛαϙʔτ͢ΔECMAScriptΦϒδΣΫτͷΞϓϦέ
ʔγϣϯϓϩάϥϛϯάΠϯλϑΣʔεΛఆٛ͢Δɻ
Slide 6
Slide 6 text
͏ͪΐͬͱ۩ମతʹ
+BWB4DSJQUͷࠃࡍԽ"1*ͷ໊લۭؒ Intl.ʓʓ
ҎԼͷΑ͏ʹݴޠʹґଘͨ͠ػೳΛఏڙ͢Δ
w ࣌ɾͷϑΥʔϚοτ
w ϩέʔϧͷղܾ
w ݴޠʹґଘͨ͠จࣈྻͷൺֱ
w ςΩετ۠Γɾෳܗͷผ
Slide 7
Slide 7 text
*OUMͷ༷తͳҐஔ͚
+BWB4DSJQUͷ༷Ͱ͋Δ&$."ͷʮ֦ு༷ʯͱ͍͏Ґஔ͚ɻ
&$."ͱ۠ผͯ͠&$."ͱ͍͏༷൪߸͕͍͍ͭͯΔɻ
1SPQPTBMͷཧձٞʹ͚ͯਐΊΒΕ͍ͯΔ
&$."
&$."
*OUM
͕ࣗͨͪ+BWB4DSJQUͷ༷ͱଊ͍͑ͯΔͷ
Slide 8
Slide 8 text
͍ํͱ֤"1*Λͬ͘͟Γհ
Slide 9
Slide 9 text
*OUMͷ"1*֓ཁ
*OUM̎ͭͷϝιουͱͭ̕ͷίϯετϥΫλϓϩύςΟΛ͍࣋ͬͯΔ
w ϝιουิॿతͳͷͰϝΠϯͷػೳίϯετϥΫλϓϩύςΟܦ༝
Α͘͏ίϯετϥΫλϓϩύςΟ
•
✨Intl.DateTimeFormat()
•
✨Intl.NumberFormat()
• Intl.RelativeTimeFormat() / Intl.Segmenter() /
Intl.PluralRules()
Slide 10
Slide 10 text
*OUMͷ"1*֓ཁ
શͯͷίϯετϥΫλϓϩύςΟMPDBMFͱ0QUJPOͷ̎ͭΛҾʹऔΔ
w -PDBMF༻͢ΔMPDBMFɻݴޠλά͔-PDBMFΦϒδΣΫτͰࢦఆɻ
w ྫ“ja-JP”, “en-US”
w 0QUJPOGPSNBUͳͲʹ͓͚ΔΦϓγϣϯɻ
w ྫ{calender : "japanese"} ༻͢ΔྐྵΛྐྵʹ͢Δ
ίϯετϥΫλΛॳظԽ͢ΔࡍʹϩέʔϧͱϑΥʔϚοτͳͲͷΦϓγϣϯΛࢦ
ఆ͢Δͷ͕ϙΠϯτ
Slide 11
Slide 11 text
͍ํͷྫ
const formatter = new Intl.NumberFormat("en", {
notation: "compact",
compactDisplay: "long",
});
formatter.format(123456789);
શମ૾
Slide 12
Slide 12 text
͍ํͷྫ
const formatter = new Intl.NumberFormat("en", {
notation: "compact",
compactDisplay: "long",
});
formatter.format(123456789);
ϩέʔϧͷࢦఆ
Slide 13
Slide 13 text
͍ํͷྫ
const formatter = new Intl.NumberFormat("en", {
notation: "compact",
compactDisplay: "long",
});
formatter.format(123456789);
Φϓγϣϯͷࢦఆ
Slide 14
Slide 14 text
͍ํͷྫ
const formatter = new Intl.NumberFormat("en", {
notation: "compact",
compactDisplay: "long",
});
formatter.format(123456789);
ίϯετϥΫλϓϩύςΟΛOFX
Slide 15
Slide 15 text
͍ํͷྫ
const formatter = new Intl.NumberFormat("en", {
notation: "compact",
compactDisplay: "long",
});
formatter.format(123456789);
࣮ࡍʹGPSNBUϝιουΛݺͼग़͢
Slide 16
Slide 16 text
͍ํͷྫ
const formatter = new Intl.NumberFormat("en", {
notation: "compact",
compactDisplay: "long",
});
formatter.format(123456789); // → 123 million
ϑΥʔϚοτ͞ΕΔʂ
Slide 17
Slide 17 text
Α͘͏ػೳ*OUM%BUF5JNF'PSNBU
ݴޠ͝ͱʹҟͳΔ࣌ͷϑΥʔϚοτΛߦ͏
format()ϝιουͱformatRange()ϝιουΛ࣋ͭ
w format()“12/07/2015”
w formatRange()“12/07/2015 ~ 12/09/2015”
ͦΕͧΕ“ToParts”ͷ͍ͭͨόʔδϣϯͷϝιου͋Δ
• formatToParts() / formatRangeToParts()
w ϑΥʔϚοτจࣈྻΛҙຯ͝ͱʹ۠ͬͨྻͰग़ྗͯ͘͠ΕΔ
Slide 18
Slide 18 text
*OUM%BUF5JNF'PSNBUͷ༻ྫ
const formatter = Intl.DateTimeFormat('en-US', {
dateStyle: 'short'
});
const date = new Date(Date.UTC(2023, 10, 19));
formatter.format(date); // → 11/19/23
formatter.formatToParts(date);
// [
// { type: 'month', value: '11' },
// { type: 'literal', value: '/' },
// { type: 'day', value: ’19' },
// { type: 'literal', value: '/' },
// { type: 'year', value: '23' }
// ];
Slide 19
Slide 19 text
Α͘͏ػೳ*OUM/VNCFS'PSNBU
७ਮͳ͚ͩͰͳ͘୯Ґ௨՟ɺύʔηϯτΛؚΜͩͷϑΥʔϚοτ
w “decimal”ྫ
“123.4”
w “currency”ྫ
“$123.4”
w “percent”ྫ
“123.4%”
w “unit”ྫ
“123.4km/h”
ϝιου%BUF5JNF'PSNBUͱಉ༷
w format()/formatRange()/formatToParts()/formatRangeToParts()
Slide 20
Slide 20 text
*OUM/VNCFS'PSNBUͷ༻ྫ
const compactFormatter = new Intl.NumberFormat('en', {
style: 'decimal',
notation: 'compact'
});
compactFormatter.format(1000000); // '1M'
const FourDigitFormatter = new Intl.NumberFormat('en', {
style: 'decimal',
maximumSignificantDigits: 4
});
FourDigitFormatter.format(123.456); // "123.5"
Slide 21
Slide 21 text
*OUM/VNCFS'PSNBUͷ༻ྫ ௨՟
const enFormatter = new Intl.NumberFormat("en", {
style: "currency",
currency: "USD",
});
enFormatter.format(12345); // “$12,345.00”
const jaFormatter = new Intl.NumberFormat("ja", {
style: “currency",
currency: "JPY",
});
jaFormatter.format(12345); // “ˇ12,345”
Slide 22
Slide 22 text
*OUM/VNCFS'PSNBUͷ༻ྫ ୯Ґ
const formatter = new Intl.NumberFormat("en", {
style: "unit",
unit: "foot",
unitDisplay: "long",
});
formatter.format(1); // → 1 foot
formatter.format(2); // → 2 feet
Slide 23
Slide 23 text
ଞʹ͋Δ*OUMͷศརͳػೳ
Intl.RelativeTimeFormat()
w ʮ໌ʯʮ͓ͱͱ͍ʯͷΑ͏ͳ૬ରతͳ࣌දهͷࠃࡍԽΛߦ͏
Intl.Segmenter()
w จࣈɾ୯ޠɾจ͝ͱͷͪॻ͖Λߦ͏
Intl.PluralRules()
w ݴޠ͝ͱͷෳܗϧʔϧྨং TU
OEʜ
Λฦ͢
Slide 24
Slide 24 text
ͦΜͳ*OUMɺ
࣮ྺ࢙͕͍ΜͰ͢
Slide 25
Slide 25 text
*OUMࡦఆ·Ͱͷྺ࢙
Slide 26
Slide 26 text
ḪΔ͜ͱલ
Slide 27
Slide 27 text
UINFFUJOHPG5$
(PPHMFͷ/FCPKãB㶎JSJ㶛ࢯͱ+VOHTIJL4IJOࢯʹΑͬͯఏҊ͞Εͨ
Slide 28
Slide 28 text
ࡦఆ։࢝࣌ʹ͓͚Δ՝ײ
🤔&$."4DSJQUࠃࡍԽػೳΛݶఆతʹ͔͠αϙʔτ͍ͯ͠ͳ͔ͬͨ
w Date.toLocaleString()ͷΑ͏ͳॳาతͳιʔτϑΥʔϚοτػೳͷΈ
🤔จࣈྻιʔτͷ࣮͕ϒϥβʹΑͬͯҟͳΔ
w ϒϥβؒͰͷ&$."4DSJQUΤϯδϯͷ࣮͕·ͪ·ͪ
Slide 29
Slide 29 text
*OUMࡦఆલʹߟ͑ΒΕͯͨղܾํ๏ͱ
௨՟ΛϑΥʔϚοτ͢Δઐ༻ͷJOϥΠϒϥϦΛ࣮ˠγϯάϧϩ
έʔϧσʔλʹόϯυϧ
w 👎ϥΠϒϥϦͷαΠζͱҰ؏ੑͷͳ͍"1*
w 👎ࣅͨػೳͷϥΠϒϥϦΛॏෳͯ͠Πϯετʔϧ͢Δ͜ͱʹͳΔՄೳੑ
αʔόʔ্Ͱͯ͢ͷࠃࡍԽॲཧΛߦ͍ɺ݁ՌΛૹ৴͢Δɻ
w 👎Ԇ͢Δ্ʹΦϯϥΠϯΞΫηεͱࠃࡍԽॲཧΛߦ͏αʔόʔ͕ඞཁ
Slide 30
Slide 30 text
Ұ؏ͨ͠&$."4DSJQU"1*
Ͱղܾͩʂ
Slide 31
Slide 31 text
ࠃࡍԽ"1*ࡦఆʹΑͬͯͰ͖Δ͜ͱ
👍Ұ؏ͨ͠ࠃࡍԽ݁ՌΛฦͤΔ
w $-%3ओཁͳϓϥοτϑΥʔϜͷϩέʔϧαϙʔτͱಉϨϕϧ
👍ΞϓϦέʔγϣϯ͝ͱʹෳͷϩέʔϧΛαϙʔτͰ͖Δ
w ϩέʔϧࣝผࢠ6OJDPEFඪ४ʹै͏
👍౷Ұ͞Εͨ"1*ʹΑΓίʔυͰΦϒδΣΫτͷ࠶ར༻͕͘͢͠ͳΔ
w ࡞ίετͷߴ͍ΦϒδΣΫτͩͱಛʹԸܙ͕͋Δ
Slide 32
Slide 32 text
ࠃࡍԽ"1*ࡦఆʹΑͬͯͰ͖Δ͜ͱ
αʔόʔ্ͰࠃࡍԽΛߦ͏Θ͚Ͱͳ͍ͷͰʜ
👍αʔόʔͷݺͼग़͕͠ͳ͍ͨΊɺ͕ͪ࣌ؒͳ͍ɻ
👍ΦϑϥΠϯॲཧ࣮ݱͰ͖Δ
ඪ४ػೳͷ"1*ͳͷͰʜ
👍ϖʔδΤΫεςϯγϣϯͷαΠζ͕૿Ճ͠ͳ͍
Slide 33
Slide 33 text
ॳ൛·ͰͷಓͷΓ
*OUMͷݩͱͳΔఏҊ͕5$ͷ.FFUJOHͰ͞ΕΔ
࠷ॳͷࠃࡍԽ"1*.FFUJOH͕։࠵
4USBXNBOQSPQPTBMW͕ެ։
݄Ͱͷ༷ࡦఆΛࢦ͢͜ͱʹͳΔ
ୈdճͷࠃࡍԽ.FFUJOH ໊લۭؒͷ౷Ұɾػೳͷݮɾपล༷ͱͷௐFUD
࠷ॳͷ%SBGU4QFD ͜ͷลΓͰ͋Δఔ༷ΛݻΊΔ
࠷ޙͷ%SBGU4QFDJ
fi
DBUJPO
%SBGU4QFDͷվળ࡞ۀɾ࣮࡞ۀ ໊લۭؒͷ໊લมߋɾ"1*ͷमਖ਼FUD
Slide 34
Slide 34 text
݄ͦͯ͠
Slide 35
Slide 35 text
TU&EJUJPOެ։ʂ🎉
Slide 36
Slide 36 text
TU&EJUJPOͷ֓ཁ
ఆٛ͞ΕͨίϯετϥΫλϓϩύςΟ̏ͭ
w *OUM$PMMBUPS
w *OUM/VNCFS'PSNBU
w *OUM%BUF5JNF'PSNBU
طଘͷ࣮ͱͷ౷߹
w /VNCFSUP-PDBM4USJOH%BUFUP-PDBM4USJOHͷ֦ு
Slide 37
Slide 37 text
ݱࡏͷػೳͱൺΔͱ
݁ߏγϯϓϧ
Slide 38
Slide 38 text
*OUMͷ͜Ε·ͰͷਐԽ
Slide 39
Slide 39 text
ࡦఆޙͷϒϥβαϙʔτ
Slide 40
Slide 40 text
TU&EJUJPOࡦఆ͔Β
$ISPNF *& 'JSFGPY 4BGBSJ
%BUF5JNF'PSNBU
⚪︎
˚ º º
/VNCFS'PSNBU
⚪︎
˚ º º
$PMMBUPS
⚪︎
˚ º º
Slide 41
Slide 41 text
$ISPNF *& 'JSFGPY 4BGBSJ
%BUF5JNF'PSNBU
⚪︎
˚
⚪︎
º
/VNCFS'PSNBU
⚪︎
˚
⚪︎
º
$PMMBUPS
⚪︎
˚
⚪︎
º
Slide 42
Slide 42 text
$ISPNF *&ˠ&EHF 'JSFGPY 4BGBSJ
%BUF5JNF'PSNBU
⚪︎
⚪︎
⚪︎
º
/VNCFS'PSNBU
⚪︎
⚪︎
⚪︎
º
$PMMBUPS
⚪︎
⚪︎
⚪︎
º
Slide 43
Slide 43 text
$ISPNF *&ˠ&EHF 'JSFGPY 4BGBSJ
%BUF5JNF'PSNBU
⚪︎
⚪︎
⚪︎
⚪︎
/VNCFS'PSNBU
⚪︎
⚪︎
⚪︎
⚪︎
$PMMBUPS
⚪︎
⚪︎
⚪︎
⚪︎
Slide 44
Slide 44 text
ɺॳ൛ͰఏҊ͞Εͨ
"1*܈͕Ұ௨Γ͑ΔΑ͏ʹ
🎉
Slide 45
Slide 45 text
ػೳ໘ਐԽͯ͠·͢
Slide 46
Slide 46 text
ݱࡏͷ*OUMUI&EJUJPO
OE&EJUJPO͕ɾͦͷޙຖࡦఆ
Slide 47
Slide 47 text
OE&EJUJPOҎ߱ͷ
ػೳՃΛݟ͍ͯ͘
Slide 48
Slide 48 text
OE&EJUJPO
େ͖ͳػೳՃͱ͍͏ΑΓपล༷&4ͱͷڠௐ͕ϝΠϯ
w &4ͱͷڠௐ
w Array.toLocaleString()ΛՃ
w *"/"5JNF[POF/BNFΛड͚͚ΔΑ͏ʹ
Slide 49
Slide 49 text
SE&EJUJPO
Intl.getCanonicalLocales();
// ॏෳ͕লུ͞Εɺ༗ޮͳݴޠλάͷྻΛฦ͢
console.log(Intl.getCanonicalLocales("EN-US"));
// Array [“en-US"]
console.log(
Intl.getCanonicalLocales(["EN-US", "Fr"]),
);
// Array ["en-US", "fr"]
Slide 50
Slide 50 text
UI
UI&EJUJPO
formatToParts() (DateTimeFormat / NumberFormat)
// ҙຯ͝ͱʹformatจࣈྻΛׂͨ͠ྻͱͯ͠ฦ͢
const formatter = Intl.DateTimeFormat('en-US', {});
formatter.formatToParts(new Date(Date.UTC(2023, 10, 19)));
// [
// { type: 'month', value: '11' },
// { type: 'literal', value: '/' },
// { type: 'day', value: ’19' },
// { type: 'literal', value: '/' },
// { type: 'year', value: '23' }
// ];
Slide 51
Slide 51 text
UI&EJUJPO
Intl.PluralRules
// ংෳܗͷϧʔϧΛผ͢ΔػೳͷՃ
const pluralRule = new Intl.PluralRules("en-US", {
type: "ordinal",
});
pluralRule.select(1); // → "one" : 1st
pluralRule.select(2); // → "two" : 2nd
pluralRule.select(3); // → "few" : 3rd
pluralRule.select(13); // → "other" : 13th
pluralRule.select(103); // → "few" : 103rd
Slide 52
Slide 52 text
UI&EJUJPO
Intl.RelativeTimeFormat
// ʮࡢʯͷΑ͏ͳ૬ରతͳ࣌දهͷϑΥʔϚοτ
const rtfEn = new Intl.RelativeTimeFormat("en", {
numeric: "auto",
});
rtfEn.format(1, "day"); // "tomorrow"
const rtfJa = new Intl.RelativeTimeFormat("ja", {
numeric: "auto",
});
rtfJa.format(2, "day"); // "໌ޙ"
Slide 53
Slide 53 text
UI&EJUJPO
Intl.Locale Object
// ϩέʔϧใΛΑΓ؆୯ʹૢ࡞ɾཧͰ͖Δ
const korean = new Intl.Locale("ko", {
script: "Kore",
region: "KR",
hourCycle: "h23",
calendar: "gregory",
});
console.log(korean.hourCycle); // "h23"
Slide 54
Slide 54 text
UI&EJUJPO
Intl.ListFormat
// ݴޠΛߟྀͨ͠Ϧετ(and/orͰͲ͏ܨ͙͔)ͷϑΥʔϚοτ
const languages = ['JavaScript', 'JavaScript', 'HTML'];
const formatter = new Intl.ListFormat('en', {
style: 'long',
type: 'conjunction',
});
console.log(formatter.format(languages));
// "JavaScript, JavaScript, and HTML"
Slide 55
Slide 55 text
UI&EJUJPO
Intl.DisplayNames
// ݴޠ໊ɺҬ໊ɺจࣈମܥ໊ࣗମͷදࣔΛࠃࡍԽ
const regionNamesInJapanese = new Intl.DisplayNames(
["ja"],
{ type: "language" },
);
regionNamesInJapanese.of("en"); // “ӳޠ”
regionNamesInJapanese.of("ja"); // “ຊޠ"
Slide 56
Slide 56 text
UI&EJUJPO
DateTimeFormat:formatRange()
// ࣌ͷظؒදهͷϑΥʔϚοτΛߦ͏
const formatter = Intl.DateTimeFormat('en-US', {
dateStyle: 'short'
});
const dateStart = new Date(Date.UTC(2023, 10, 18));
const dateEnd = new Date(Date.UTC(2023, 10, 19));
formatter.formatRange(dateStart, dateEnd);
// '11/18/23 – 11/19/23'
Slide 57
Slide 57 text
UI&EJUJPO
'dayStyle','timeStyle' in DateTimeFormat
// ҙຯ͝ͱʹformatจࣈྻΛׂͨ͠ྻͱͯ͠ฦ͢
const dateFormatter = Intl.DateTimeFormat("en-US", {
dateStyle: "short",
});
const timeFormatter = Intl.DateTimeFormat("en-US", {
timeStyle: "long",
});
const date = new Date(Date.UTC(2023, 10, 19))
dateFormatter.format(date); // “11/19/23"
timeFormatter.format(date); // "9:00:00 AM GMT+9"
Slide 58
Slide 58 text
UI&EJUJPO
Intl.Segmenter
// จࣈɾ୯ޠɾจ͝ͱͷͪॻ͖Λߦ͏
const segmenter = new Intl.Segmenter("ja-JP",
{ granularity: "word" },
);
console.log([...segmenter.segment("ޗഐೣͰ͋Δɻ")]);
// [
// {"segment": "ޗഐ", "index": 0, "isWordLike": true},
// {"segment": "", "index": 2, "isWordLike": true},
// ...(ུ)
Slide 59
Slide 59 text
UI&EJUJPO
Intl.DisplayNames v2
// ΧϨϯμʔ໊ɺ࣌ͷϥϕϧ໊ࣗମͳͲͷදࣔΛࠃࡍԽ
const calendarNamesInJapanese = new Intl.DisplayNames(
["ja"], { type: "calendar" },
);
calendarNamesInJapanese.of("japanese"); // “ྐྵ”
const dateTimeNamesInJapanese = new Intl.DisplayNames(
["ja"], { type: "dateTimeField" },
);
dateTimeNamesInJapanese.of("dayPeriod"); // “ޕલ/ޕޙ”
Slide 60
Slide 60 text
UI&EJUJPO
Intl Enumeration API
// ͦͷ࣮Ͱαϙʔτ͞Ε͍ͯΔྐྵɺর߹ॱংɺͳͲͷྻΛฦ͢
Intl.supportedValuesOf("calendar");
// ['buddhist', 'chinese', 'coptic', ‘dangi’, …];
Intl.supportedValuesOf("currency");
// [‘AED', 'AFN', 'ALL', 'AMD', 'ANG', 'AOA', ‘ARS’, …]
Intl.supportedValuesOf("numberingSystem");
// [‘adlm', 'ahom', 'arab', 'arabext', 'bali', …]
Intl.supportedValuesOf("timeZone");
// ['Africa/Abidjan', 'Africa/Accra', …]
Slide 61
Slide 61 text
UI&EJUJPO
Intl.NumberFormat v3
// formatRange()ϝιουͷαϙʔτ
const formatter = new Intl.NumberFormat('en', {
style: 'decimal',
});
formatter.formatRange(100, 200); // ‘100-200’
// ͷؙΊΦϓγϣϯͳͲͷॆ࣮
const compactFormatter = new Intl.NumberFormat('en', {
style: ‘decimal', maximumFractionDigits: 0
});
compactFormatter.formatR(3.14); // ‘3’
Slide 62
Slide 62 text
TU&EJUJPOd·ͰͷػೳՃ
+ Intl.getCanonicalLocales()
+ Intl.ListFormat
+ Intl.Segmenter
+ Intl.DisplayNames
+ Intl.PluralRules
+ Intl.RelativeTimeFormat
+ Intl.Locale
+ formatToParts()
+ formatRange()
+ DateTimeFormat option
+ NumberFormat option(v3)
… and more
Slide 63
Slide 63 text
Ճ͞Εͨػೳͷαϙʔτ
Slide 64
Slide 64 text
ݱࡏͷαϙʔτঢ়گ
$ISPNF &EHF 'JSFGPY 4BGBSJ
%BUF5JNF'PSNBU
/VNCFS'PSNBU
4FHNFOUFS º
1MVSBM3VMFT
3FMBUJWF5JNF'PSNBU
Slide 65
Slide 65 text
ݱࡏͷαϙʔτঢ়گ
$ISPNF &EHF 'JSFGPY 4BGBSJ
1MVSBM3VMFT
-PDBMF0CKFDU
-JTU'PSNBU
%JTQMBZ/BNFT
Slide 66
Slide 66 text
👍جຊతʹαϙʔτ
Slide 67
Slide 67 text
*OUMʹؔ࿈͢Δ༷ͨͪ
Slide 68
Slide 68 text
ؔ࿈༷ΛΔҙຯ
&DNB4DSJQUಠࣗͰܾΊΔΘ͚ʹߦ͚ͳͦ͞͏ͳ͕ࢁ
w αϙʔτ͢Δจࣈͦͷιʔτʁ
w αϙʔτ͢ΔλΠϜκʔϯ
w ݴޠʹΑΔจ๏ࣄ߲ ෳܗͳͲʜ
ͷྨͬͯʁ
w Ҭݴޠ໊Ͳ͏ͬͯཧ͢Δʁ
ˠ*OUMࠃࡍԽػೳͱ͍͏ੑ্࣭ɺଞͷඪ४༷Λࢀর͢Δ෦͕ଟ͍
Slide 69
Slide 69 text
*OUMͱͷؔ࿈༷શମ૾
*OUM
*&5'
#$1
*"/"
5JNF[POF
*40
௨՟ίʔυ
6OJDPEF
-%.-
$-%3
Slide 70
Slide 70 text
*OUMͱͷؔ࿈༷6OJDPEF
ҎԼ6OJDPEFͷ༷ʹ४ڌ͍ͯ͠Δ
w จࣈηοτ
w จࣈྻͷ۠Γʹؔ͢Δ༷
w 6OJDPEF4UBOEBSE"OOFY6OJDPEF5FYU4FHNFOUBUJPO
w จࣈࣗମͷൺֱɾฒͼସ͑ʹؔ͢Δ༷
w 6OJDPEF5FDIOJDBM4UBOEBSE6OJDPEF$PMMBUJPO"MHPSJUIN
Slide 71
Slide 71 text
*OUMͱͷؔ࿈༷ͦͦ-%.-$-%3ͱ
-%.- 6OJDPEF-PDBMF%BUB.BSLVQ-BOHVBHF
w ߏԽ͞ΕͨϩέʔϧσʔλΛަ͢ΔͨΊͷ9.-ϑΥʔϚοτ
$-%3 $PNNPO-PDBMF%BUB3FQPTJUPSZ
w ੈք֤ͷݴޠʹ͓͚Δ༷ʑͳϩέʔϧɾσʔλΛ·ͱΊͨϨϙδτϦ
w -%.-ͷܗࣜʹͦͬͯهड़͞Ε͍ͯΔ
Slide 72
Slide 72 text
*OUMͱͷؔ࿈༷-%.-$-%3ͱ*OUM
*OUM༷ͷ֤ॴͰ-%.-४ڌͰ͋Δ͜ͱ͕໌ه͞Ε͍ͯΔ
Intl.PluralRules
w ෳܗͷύλʔϯɾϧʔϧ-%.-ͷݴޠෳϧʔϧʹ४ڌ
Intl.ListFormat
w ෦తͳσʔλͷܗࣜͱͯ͠-%.-ͷ-JTU1BUUFSOʹ४ڌ͢Δ͜ͱ
-%.- ༷
ʹ४ڌ͢Δ͜ͱͰ$-%3 ϩέʔϧσʔλ
Λ׆༻͘͢͠ͳΔ
w ʮ࣮ʹ͓͍ͯ$-%3Λར༻͢Δ͜ͱʯΛ֤ॴͰਪ͍ͯ͠Δ
Slide 73
Slide 73 text
*OUMͱͷؔ࿈༷*&5' #$1
*&5'ͷ#$1ݴޠλάͷ༷
*OUM͕αϙʔτ͢Δϩέʔϧจࣈྻͷ#$1ʹ४ڌ͍ͯ͠Δ
#$1Ͱఆٛ͞Ε͍ͯΔ֦ுγʔέϯε*OUMͰར༻͢Δ
w #$1֦ுγʔέϯε<จࣈ><dจࣈ><dจࣈ ҙ
>ͷܗͰλάΛ֦
ுͰ͖Δ༷
w ݱࡏ*OUMͰղऍ͢ΔͷͦͷதͷV 6OJDPEF
֦ு
w ྫ
ja-JP-u-ca-japanese u-ca-japaneseͷ෦
Slide 74
Slide 74 text
*OUMͱͷؔ࿈༷*"/"*40
*"/"ͱͷؔ࿈
w Intl.DateTimeFormatͰtimeZoneΦϓγϣϯʹࢦఆͰ͖Δ
w *"/"λΠϜκʔϯσʔλϕʔεͷλΠϜκʔϯ໊
*40ͱͷؔ࿈
w Intl.NumberFormatͰcurrencyΦϓγϣϯʹࢦఆͰ͖Δ
w *40ͷ௨՟ίʔυ
Slide 75
Slide 75 text
*OUMͷ͜Ε͔Β
Slide 76
Slide 76 text
طʹ͋ΔϓϩύςΟͷൃలɾॆ࣮
Intl.NumberFormatW ઌड़
w ͷؙΊΛத৺ʹΦϓγϣϯΛେ෯ʹՃͨ͠ɻ
Intl.SegmenterW 4UBHF
w จࣈɾ୯ޠɾจʹՃ͑ͯվߦ۠ΓͷαϙʔτΛఏҊ͍ͯ͠Δ
Slide 77
Slide 77 text
ఏҊ͞Ε͍ͯΔ৽͍͠ػೳͷ1SPQPTBM Ұ෦
ࠓճհ͢Δͷ
w Intl Local Info API 4UBHF
w Intl.DurationFormat 4UBHF
w Intl.MessageFormat 4UBHF
Slide 78
Slide 78 text
*OUM-PDBMF*OGP"1* 4UBHF
ϩέʔϧใΛอ࣋͢ΔIntl.LocaleΦϒδΣΫτʹର༷ͯ͠ʑͳσʔλΛऔ
ಘͰ͖ΔϝιουΛՃ͢ΔఏҊ
w ྫ
ʮจࣈΛॻ͘ํʯʮि࢝·Γʹ͍ͭͯͷใʯͳͲ
const enGB = new Intl.Locale('en-GB');
enGB.getWeekInfo();
// {firstDay: 1, weekend: [6, 7], minimalDays: 4}
let tl = enGB.getTextInfo();
// { direction: "rtl" }
Slide 79
Slide 79 text
*OUM%VSBUJPO'PSNBU
࣌ؒͷִؒදهΛϑΥʔϚοτ͢ΔػೳͷఏҊ
w ྫ
࣌ؒIPVSNJOVUFT
new Intl.DurationFormat("fr-FR", {
style: "long",
}).format({
hours: 1,
minutes: 46,
seconds: 40,
});
// => "1 heure, 46 minutes et 40 secondes"
Slide 80
Slide 80 text
*OUM.FTTBHF'PSNBUલఏࣝ
*$6 *OUFSOBUJPOBM$PNQPOFOUTGPS6OJDPEF
ͱ
w 6OJDPEF͕ϝϯςφϯε͍ͯ͠ΔࠃࡍԽͱҬԽʹؔ͢ΔϥΠϒϥϦ
w ϑΥʔϚοτʹݶΒͣଟ͘ͷࠃࡍԽʹඞཁͳػೳΛଂ͍ͯ͠Δ
*$6.FTTBHF'PSNBUʹ͍ͭͯ
w *$6Ͱར༻͞Ε͍ͯΔϝοηʔδࠃࡍԽͷͨΊͷ'PSNBU
w ϝοηʔδͷϓϨΠεϗϧμʔจ๏ʹΑΔ݅ذͳͲΛදݱՄೳ
Slide 81
Slide 81 text
*OUM.FTTBHF'PSNBU
*$6.FTTBHF'PSNBUΛղऍ͠ɺͦΕʹ४ڌͯ͠ϑΥʔϚοτ͢ΔػೳͷఏҊ
ݱঢ়ಠࣗͷϝοηʔδϑΥʔϚοτ༷͕ଟ͍
w 👎ΞϓϦέʔγϣϯଆͰಠࣗͷղੳॲཧ͕ඞཁʹͳΔ
*$6.FTTBHF'PSNBUΛαϙʔτ͢Δͱʜ
w 👍ΞϓϦέʔγϣϯຖʹϑΥʔϚοτͷղੳॲཧ͍Βͳ͘ͳΔ
w 👍ۀքඪ४ͷπʔϧϓϩηεΛ༻ͨ͠ϩʔΧϥΠζ͕༰қʹͳΔ
Slide 82
Slide 82 text
*OUM.FTTBHF'PSNBUྫ
const source = ... // ্ͷϑΥʔϚοτจࣈྻ
const mf = new Intl.MessageFormat(source, 'en');
const notifications = mf.format({ count: 1 });
// 'You have 1 new notification'
match {$count :number}
when 0 {You have no new notifications}
when one {You have {$count} new notification}
when * {You have {$count} new notifications}
*$6ͷϑΥʔϚοτจࣈྻ .FTTBHF'PSNBUW
Slide 83
Slide 83 text
ଞͷ1SPQPTBMͱͷڠௐ
Slide 84
Slide 84 text
5FNQPSBMͱͷڠௐ5FNQPSBMͱ
Temporalͱ
w &$."4DSJQUͰ࣌Λૢ࡞͢ΔͨΊͷ৽͍͠"1*܈
w ݱࡏ4UBHFͷ1SPQPTBM
࣌ͷϑΥʔϚοταϙʔτ͢ΔΦϓγϣϯͳͲͰTemporalͱؔ࿈͢Δ
ˠTemporalଆͰ*OUMʹ४ڌ༷ͨ͠ࡦఆ͕ਐΊΒΕ͍ͯΔ
Slide 85
Slide 85 text
5FNQPSBMͱͷڠௐ
Temporal*OUMΛલఏͱͯ͠"1*Λઃܭ͍ͯ͠Δ
w TemporalͷtoLocaleString()Intl.DateTimeFormatͱಉ͡Ҿ
w Temporal.CalendarͰରԠ͢ΔΧϨϯμʔIntl.DateTimeFormatͰα
ϙʔτ͢ΔͷͱҰॹ
w ΧϨϯμʔͷղܾͳͲ*OUMଆͷ༷Λࢀর͍ͯ͠Δ
w Temporal.DurationIntl.DurationFormat TUBHF
ͱಉ͡0QUJPOʹ
ͳΔ༧ఆ
Slide 86
Slide 86 text
🤩ࠓޙΑΓศརʹ
Slide 87
Slide 87 text
·ͱΊ
Slide 88
Slide 88 text
·ͱΊ
w *OUM࣌ͷϑΥʔϚοτʹݶΒͣݴޠʹґଘ༷ͨ͠ʑͳػೳΛఏڙ͢Δ
w *OUMͷྺ࢙ݹۙ͘͘લ͔Β༷ͷࡦఆͱαϙʔτ͕ঃʑʹਐΜͰ͖ͨ
w ݱࡏɺجຊతͳػೳͷ΄ͱΜͲΛ֤ϒϥβ͕αϙʔτ͍ͯ͠Δ
w *OUM6OJDPEFΛ͡Ίͱ͢Δपล༷ͱͷ࿈ܞີʹ࣮ͯ͠͞Ε͍ͯΔ
w ࠓޙ৽͍͠ػೳ͕Ճ͞ΕΔ༧ఆͰ͋Γɺ5FNQPSBMͷΑ͏ͳ৽͍༷͠ͷ
ఏҊͱڠௐ͍ͯ͘͠
w ࠓͦ͜*OUMΛ͍͜ͳ࣌͢ʂ
Slide 89
Slide 89 text
3ZVTFJ4BKJLJ!TBKJLJY
͋Γ͕ͱ͏͍͟͝·ͨ͠