javascript internationalization API

EcmascriptのInternationalization APIについて

Transcript

1. Javascript Internationalization API
   

   View Slide

2. Name
   !CSO 5BLFUPTIJ"POP੨໺݈ར
   
   Occupation
   'SPOUFOE%FWFMPQFS1SPEVDU0XOFS
   Company
   $ZCFSBHFOU"EUFDI4UVEJP"*.FTTFOHFS
   OSS
   $POUSJCVUPSPG7
   About
   IUUQJOGPCODI
   

   View Slide

3. &DNB
   &DNB͕&DNBͱͯ͠*OUFSOBUJPOBMJ[BUJPO"1*ͷ࢓༷ࡦఆΛߦ͍ͬͯΔ
   &DNBͰ͋Δ&DNBTDSJQU +BWBTDSJQU
   ͕&DNBΛ಺แ͓ͯ͠Γ
   &DNBTDSJQUଆʹJOͷ࣮૷͕ఏڙ͞ΕΔ
   ͪͳΈʹ+40/΋&DNBͰఆٛ͞Ε͓ͯΓɺ&DNBʹ಺แ͞Ε͍ͯΔ
   

   View Slide

4. *OUM
   *OUFSOBMJ[BUJPO"1*͸*OUMͱ͍͏άϩʔόϧΦϒδΣΫτΛެ։͓ͯ͠Γ
   ͦͷΦϒδΣΫτܦ༝Ͱ֤छ"1*ʹΞΫηε͢Δ͜ͱ͕Ͱ͖Δ
   ࠓ೔͸ͦͷத͔Β୅දతͳͭͷ"1*Λ঺հ
   

   View Slide

5. *OUM$PMMBUPS
   

   View Slide

6. *OUM$PMMBUPS
   *OUM$PMMBUPS͸ओʹจࣈྻൺֱΛߦ͏ͨΊͷ"1*
   ֤MPDBMFΛؾʹ͠ͳ͕Β6OJDPEFʹجͮ͘ෳࡶͳจࣈൺֱΛߦͬͯ͘ΕΔ
   

   View Slide

7. console.log(new Intl.Collator().compare('a', ‘c'));
   // → a negative value
   console.log(new Intl.Collator().compare('c', 'a'));
   // → a positive value
   console.log(new Intl.Collator().compare('a', 'a'));
   // → 0
   

   View Slide

8. new Intl.Collator('gr',{sensitivity: ‘base'})
   .compare(‘ς', 'σ')
   // → 0
   // ΪϦγϟޠͷγάϚ͸จ຤ͱจதͰจࣈίʔυ͕ҟͳΔ
   // CollatorΛ࢖͏ͱɺsensitivityͷࢦఆͰൺֱͷৄࡉ
   ౓Λઃఆͯ͜͠ͷΑ͏ͳෳࡶͳൺֱ͕Ͱ͖Δ
   

   View Slide

9. *OUM/VNCFS'PSNBU
   

   View Slide

10. *OUM/VNCFS'PSNBU
    *OUM/VNCFS'PSNBU͸MPDBMFʹԠͨ͡਺஋ͷॲཧΛߦ͏"1*
    EFDJNBMͱDVSSFODZʢ͓ۚʣͷͭʹରԠ
    

    View Slide

11. var number = 123456.789;
    // υΠπͰ͸ΧϯϚΛখ਺ɺϐϦΦυΛઍ୯Ґͷ۠੾Γʹ༻͍Δ
    console.log(new Intl.NumberFormat('de-DE').format(number));
    // → 123.456,789
    // ΠϯυͰ͸thousands/lakh/crore۠੾Γ͕༻͍Δ
    console.log(new Intl.NumberFormat('en-IN').format(number));
    // → 1,23,456.789
    // nu֦ுΩʔʹΑΓ׽਺ࣈͳͲͷ൪߸ํ͕ࣜ࢖͑Δ
    console.log(new Intl.NumberFormat(‘zh-Hans-CN-u-nu-hanidec')
    .format(number));
    // → Ұೋࡾ,࢛ޒ࿡.ࣣീ۝
    

    View Slide

12. var number = 123456.789;
    // ௨՟ϑΥʔϚοτΛ༻͍Δ
    console.log(new Intl.NumberFormat(‘de-DE',
    { style: 'currency', currency: 'EUR' }
    ).format(number));
    // → 123.456,79 €
    console.log(new Intl.NumberFormat(‘ja-JP',
    { style: 'currency', currency: 'JPY' }
    ).format(number));
    // → ˇ123,457
    

    View Slide

13. *OUM1MVSBM3VMFT
    

    View Slide

14. *OUM/VNCFS'PSNBU
    ୯ޠͷෳ਺ܗ౳ͷॲཧΛߦ͏"1*
    

    View Slide

15. var pr = new Intl.PluralRules('en-US');
    pr.select(0);
    // → ‘other’ ෳ਺ܗ
    pr.select(1);
    // → ‘one' ୯਺ܗ
    pr.select(2);
    // → ‘other' ෳ਺ܗ
    

    View Slide

16. const type = pr.select(count);
    const wordIndices = {'other': 'dogs', 'one': 'dog'};
    const verbIndices = {'other': 'are', 'one': 'is'};
    console.log(
    `Your ${indices[type]} ${verbIndices[type]} cute.`
    )
    // count === 1 Your dog is cute.
    // count === 0 || count > 1 Your dogs are cute.
    

    View Slide

17. const ordIndices = {
    'one': 'st',
    'two': 'nd',
    'few': 'rd',
    'other': 'th'
    }
    const pr = new Intl.PluralRules('en-US',
    {type: ‘ordinal'}
    );
    const ord = pr.select(3);
    // → few
    console.log(`3${ordIndices[ord]}`);
    // → 3rd
    

    View Slide

18. *OUM%BUFUJNF'PSNBU
    

    View Slide

19. *OUM%BUFUJNF'PSNBU
    MPDBMFʹԠͨ͡೔෇ͱ࣌ࠁͷॲཧΛߦ͏"1*
    

    View Slide

20. new Intl.DateTimeFormat('ja-JP', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    hour: 'numeric',
    minute: 'numeric',
    second: 'numeric',
    hour12: false}
    ).format(new Date())
    // → 2019೥8݄27೔ 16:47:50
    

    View Slide

21. new Intl.DateTimeFormat('ja-JP', {
    month: 'long',
    day: 'numeric',
    hour: 'numeric',
    hour12: false}
    ).format(new Date())
    // → 8݄27೔ 16࣌
    

    View Slide

22. *OUM%BUFUJNF'PSNBU
    GPSNBU5P1BSUTͱ͍͏ϝιουΛ࢖͏͜ͱͰಠࣗͷϑΥʔϚοτ΋࣮ݱͰ͖
    Δ
    

    View Slide

23. new Intl.DateTimeFormat('ja-JP', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    hour: 'numeric',
    minute: 'numeric',
    second: 'numeric',
    hour12: false}
    ).formatToParts(new Date())
    

    View Slide

24. [
    {
    "type": "year",
    "value": "2019"
    },
    {
    "type": "literal",
    "value": "೥"
    },
    {
    "type": "month",
    "value": "8"
    },
    {
    "type": "literal",
    "value": "݄"
    },
    {
    "type": "day",
    "value": "27"
    },
    {
    "type": "literal",
    "value": "೔ "
    },
    {
    "type": "hour",
    "value": "16"
    },
    {
    "type": "literal",
    "value": ":"
    },
    {
    "type": "minute",
    "value": "57"
    },
    {
    "type": "literal",
    "value": ":"
    },
    {
    "type": "second",
    "value": "38"
    }
    ]
    

    View Slide

25. ·ͱΊ
    *&͔Β࢖͑ΔͷͰੋඇ͓ࢼ͠Λ
    

    View Slide