{"componentChunkName":"component---src-templates-example-page-js","path":"/tutorial-example13-i18n","result":{"data":{"examplePageJson":{"title":"13. Internationalization (i18n)","codeJs":"\n    <span class=\"token keyword\">let</span> grid<span class=\"token punctuation\">;</span>\n    <span class=\"token keyword\">const</span> columnMap <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n      <span class=\"token literal-property property\">en</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token literal-property property\">name</span><span class=\"token operator\">:</span> <span class=\"token string\">'Name'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">artist</span><span class=\"token operator\">:</span> <span class=\"token string\">'Artist'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">type</span><span class=\"token operator\">:</span> <span class=\"token string\">'Type'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">release</span><span class=\"token operator\">:</span> <span class=\"token string\">'Release'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">genre</span><span class=\"token operator\">:</span> <span class=\"token string\">'Genre'</span>\n      <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n      <span class=\"token literal-property property\">ko</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token literal-property property\">name</span><span class=\"token operator\">:</span> <span class=\"token string\">'제목'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">artist</span><span class=\"token operator\">:</span> <span class=\"token string\">'가수'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">type</span><span class=\"token operator\">:</span> <span class=\"token string\">'종류'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">release</span><span class=\"token operator\">:</span> <span class=\"token string\">'발매일'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">genre</span><span class=\"token operator\">:</span> <span class=\"token string\">'장르'</span>\n      <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n      <span class=\"token string-property property\">'ja-JP'</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token literal-property property\">name</span><span class=\"token operator\">:</span> <span class=\"token string\">'曲のタイトル'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">artist</span><span class=\"token operator\">:</span> <span class=\"token string\">'アーティスト名'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">type</span><span class=\"token operator\">:</span> <span class=\"token string\">'歌の種類'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">release</span><span class=\"token operator\">:</span> <span class=\"token string\">'発売日'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">genre</span><span class=\"token operator\">:</span> <span class=\"token string\">'ジャンル'</span>\n      <span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n    <span class=\"token keyword\">const</span> messageMap <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n      <span class=\"token string-property property\">'ja-JP'</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token literal-property property\">display</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n          <span class=\"token literal-property property\">noData</span><span class=\"token operator\">:</span> <span class=\"token string\">'データが存在していません。'</span>\n        <span class=\"token punctuation\">}</span>\n      <span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n\n    <span class=\"token keyword\">function</span> <span class=\"token function\">createGrid</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">localeCode</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n      <span class=\"token keyword\">return</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">tui<span class=\"token punctuation\">.</span>Grid</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n        <span class=\"token literal-property property\">el</span><span class=\"token operator\">:</span> document<span class=\"token punctuation\">.</span><span class=\"token function\">getElementById</span><span class=\"token punctuation\">(</span><span class=\"token string\">'grid'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">data</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">scrollX</span><span class=\"token operator\">:</span> <span class=\"token boolean\">false</span><span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">scrollY</span><span class=\"token operator\">:</span> <span class=\"token boolean\">false</span><span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">columns</span><span class=\"token operator\">:</span> <span class=\"token function\">createColumns</span><span class=\"token punctuation\">(</span>localeCode<span class=\"token punctuation\">)</span>\n      <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span>\n\n    <span class=\"token keyword\">function</span> <span class=\"token function\">createColumns</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">localeCode</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n      <span class=\"token keyword\">const</span> columnData <span class=\"token operator\">=</span> columnMap<span class=\"token punctuation\">[</span>localeCode<span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n      <span class=\"token keyword\">const</span> columns <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n\n      Object<span class=\"token punctuation\">.</span><span class=\"token function\">keys</span><span class=\"token punctuation\">(</span>columnData<span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">forEach</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">key</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n        columns<span class=\"token punctuation\">.</span><span class=\"token function\">push</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n          <span class=\"token literal-property property\">header</span><span class=\"token operator\">:</span> columnData<span class=\"token punctuation\">[</span>key<span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n          <span class=\"token literal-property property\">name</span><span class=\"token operator\">:</span> key\n        <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n      <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n      <span class=\"token keyword\">return</span> columns<span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span>\n\n    grid <span class=\"token operator\">=</span> <span class=\"token function\">createGrid</span><span class=\"token punctuation\">(</span><span class=\"token string\">'en'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// Set default language to English ('en')</span>\n\n    document<span class=\"token punctuation\">.</span><span class=\"token function\">getElementById</span><span class=\"token punctuation\">(</span><span class=\"token string\">'locale-code'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">addEventListener</span><span class=\"token punctuation\">(</span><span class=\"token string\">'change'</span><span class=\"token punctuation\">,</span> <span class=\"token parameter\">ev</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n      <span class=\"token keyword\">const</span> localeCode <span class=\"token operator\">=</span> ev<span class=\"token punctuation\">.</span>target<span class=\"token punctuation\">.</span>value<span class=\"token punctuation\">;</span>\n      <span class=\"token keyword\">const</span> messages <span class=\"token operator\">=</span> messageMap<span class=\"token punctuation\">[</span>localeCode<span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n\n      <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>grid<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        document<span class=\"token punctuation\">.</span><span class=\"token function\">getElementById</span><span class=\"token punctuation\">(</span><span class=\"token string\">'grid'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span>innerHTML <span class=\"token operator\">=</span> <span class=\"token string\">''</span><span class=\"token punctuation\">;</span>\n      <span class=\"token punctuation\">}</span>\n\n      tui<span class=\"token punctuation\">.</span>Grid<span class=\"token punctuation\">.</span><span class=\"token function\">setLanguage</span><span class=\"token punctuation\">(</span>localeCode<span class=\"token punctuation\">,</span> messages<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// Change language by locale code</span>\n\n      grid <span class=\"token operator\">=</span> <span class=\"token function\">createGrid</span><span class=\"token punctuation\">(</span>localeCode<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  ","codeHtml":"\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>grid<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">></span></span>\n      "},"file":{"relativePath":"examples/example13-i18n.html"}},"pageContext":{"id":"tutorial-example13-i18n","filename":"example13-i18n"}},"staticQueryHashes":["1348573739","1897965698","2583274425","4108157242"]}