Javascript MEMO

copy

const story = {
  ja: {
    d1: `
こんにちは
`,
    d2: `
おや、どうしたんだい？
`,
    d3: `
お腹へっちゃって
`,
    d4: `
野菜はどう？
`,
    d5: `
それは、ちょっと
`,
    d6: `
あぁ、そういえばこれ拾ったんだった。<br>
（どんぐりを差し出す）
`,
    d7: `
いいの？<br>
ありがとう
`,
    d8: `
どういたしまして<br>
(こうしてくまさん森へ帰っていきました。)
`
  },
  en: {
    d1: `
Hello
`,
    d2: `
Hey, what's wrong?
`,
    d3: `
I'm hungry
`,
    d4: `
What about vegetables?
`,
    d5: `
That's a bit
`,
    d6: `
Ah, that reminds me, I picked this up. <br>
 (Hands over the acorn)
`,
    d7: `
Is that okay?<br>
Thank you
`,
    d8: `
You're welcome.<br>
(And so the bear returned to the forest.)
`
  }
};
const text = {
  ja: {
n1:"戻る",
n2:"言語切替",
n3:"日本語と英語の切り替えサンプル",
n4:"[サンプル]",
n5:"戻る",
  },
  en: {
n1:"back",
n2:"change language",
n3:"change japanese and english sample",
n4:"[sample]",
n5:"back",
  }
};

// まとめて反映したいとき
function applyStoryAll(lang, divIds) {
  divIds.forEach((id) => applyStory(lang, id));
}
function applyTextAll(lang, divIds) {
  divIds.forEach((id) => applyText(lang, id));
}

// (1) 取得：langとdivのidを渡してHTML文字列を返す
function getStory(lang, divId) {
  // 言語がなければ日本語にフォールバック、該当idがなければ空文字
  return (story[lang] && story[lang][divId]) ?? (story.ja && story.ja[divId]) ?? '';
}

// (2) 反映：langとdivのidを渡してDOMに流し込む
function applyStory(lang, divId) {
  const el = document.getElementById(divId);
  if (!el) return;
  el.innerHTML = getStory(lang, divId);
}

// (1) 取得：langとdivのidを渡してHTML文字列を返す
function getText(lang, divId) {
  // 言語がなければ日本語にフォールバック、該当idがなければ空文字
  return (text[lang] && text[lang][divId]) ?? (text.ja && text.ja[divId]) ?? '';
}
// (2) 反映：langとdivのidを渡してDOMに流し込む
function applyText(lang, divId) {
  const el = document.getElementById(divId);
  if (!el) return;
  el.innerText = getText(lang, divId);
}
//ストーリー
const ary = ["d1", "d2", "d3", "d4", "d5", "d6", "d7", "d8"];
//各説明
const ary2 = ["n1", "n2", "n3", "n4", "n5"];

copy

const story = {
  ja: {
    d1: `
こんにちは
`,
    d2: `
おや、どうしたんだい？
`,
    d3: `
お腹へっちゃって
`,
    d4: `
野菜はどう？
`,
    d5: `
それは、ちょっと
`,
    d6: `
あぁ、そういえばこれ拾ったんだった。<br>
（どんぐりを差し出す）
`,
    d7: `
いいの？<br>
ありがとう
`,
    d8: `
どういたしまして<br>
(こうしてくまさん森へ帰っていきました。)
`
  },
  en: {
    d1: `
Hello
`,
    d2: `
Hey, what's wrong?
`,
    d3: `
I'm hungry
`,
    d4: `
What about vegetables?
`,
    d5: `
That's a bit
`,
    d6: `
Ah, that reminds me, I picked this up. <br>
 (Hands over the acorn)
`,
    d7: `
Is that okay?<br>
Thank you
`,
    d8: `
You're welcome.<br>
(And so the bear returned to the forest.)
`
  }
};
const text = {
  ja: {
n1:"戻る",
n2:"言語切替",
n3:"日本語と英語の切り替えサンプル",
n4:"[サンプル]",
v5:"戻る",
  },
  en: {
n1:"back",
n2:"change language",
n3:"change japanese and english sample",
n4:"[sample]",
n5:"back",
  }
};

// When you want to reflect all at once
function applyStoryAll(lang, divIds) {
  divIds.forEach((id) => applyStory(lang, id));
}
function applyTextAll(lang, divIds) {
  divIds.forEach((id) => applyText(lang, id));
}

// (1) Get: Pass lang and div id to return HTML string
function getStory(lang, divId) {
  // If no language is available, it will fall back to Japanese. If no corresponding ID is available, it will be empty.
  return (story[lang] && story[lang][divId]) ?? (story.ja && story.ja[divId]) ?? '';
}

// (2) Reflect: Pass lang and div id and insert into DOM
function applyStory(lang, divId) {
  const el = document.getElementById(divId);
  if (!el) return;
  el.innerHTML = getStory(lang, divId);
}

// (1) Get: Pass lang and div id to return HTML string
function getText(lang, divId) {
  // If no language is available, it will fall back to Japanese. If no corresponding ID is available, it will be empty.
  return (text[lang] && text[lang][divId]) ?? (text.ja && text.ja[divId]) ?? '';
}
// (2) Reflect: Pass lang and div id and insert into DOM
function applyText(lang, divId) {
  const el = document.getElementById(divId);
  if (!el) return;
  el.innerText = getText(lang, divId);
}
//story
const ary = ["d1", "d2", "d3", "d4", "d5", "d6", "d7", "d8"];
//Each explanation
const ary2 = ["n1", "n2", "n3", "n4", "n5"];

言語別としてjpとenで分類し、その内部で各データをd1からd8までにわけています。
このd1からd8はdivタグのidに対応させています。

function getStory(lang, divId) {
  // 言語がなければ日本語にフォールバック、該当idがなければ空文字
  return (story[lang] && story[lang][divId]) ?? (story.ja && story.ja[divId]) ?? '';
}
function applyStory(lang, divId) {
  const el = document.getElementById(divId);
  if (!el) return;
  el.innerHTML = getStory(lang, divId);
}

The data is categorized by language (jp or en), and each data item is then divided into d1 to d8.
These d1 to d8 correspond to the div tag IDs.

function getStory(lang, divId) {
  // If no language is available, it will fall back to Japanese. If no corresponding ID is available, it will be empty.
  return (story[lang] && story[lang][divId]) ?? (story.ja && story.ja[divId]) ?? '';
}
function applyStory(lang, divId) {
  const el = document.getElementById(divId);
  if (!el) return;
  el.innerHTML = getStory(lang, divId);
}

このサンプルではonloadイベントで
チェックボックスから判定した言語を
applyStoryAll(lang, divIds)メソッドで実行しています。

引数の配列全てに対して
applyStoryメソッドを実行することで各divに表示したいデータを
クラス配列から受け取って表示する仕組みとなっています。

applyStory(lang, divId)メソッドで指定のdivに表示するコントロールを

const el = document.getElementById(divId);

で宣言しています。
次にdivに設定する内容をgetStoryから受け取ります。
getStory(lang, divId)メソッドのlangに取得したい言語jpもしくはenが入ります。
指定した言語に一致するクラス配列のデータを受け取ります。
この言語に一致するものが存在しない場合は、日本語をデフォルトとして返します。

In this sample, the onload event executes the applyStoryAll(lang, divIds) method, using the language determined from the checkbox.

By executing the applyStory method for the entire argument array, the data to be displayed in each div is retrieved from the class array and displayed.

The applyStory(lang, divId) method declares the control to be displayed in the specified div:

const el = document.getElementById(divId);

Next, the content to be set in the div is retrieved from getStory.
The lang parameter of the getStory(lang, divId) method is set to the desired language, either jp or en.
The data in the class array that matches the specified language is received.
If no match for this language exists, Japanese will be returned as the default.

[URL]イラスト：農民イラスト
URL[https://nawmin.stores.jp][クリックすると開きます])

[URL]illustration by nawmin.com
URL[https://nawmin.stores.jp][click to open the homepage])