システム全体

src/js/components/sample/controller.jsを修正しましょう

src/js/components/sample/controller.js

export class Sample {

    constructor() {
    }

    sample_click(event) {
        alert(
            $f.componentMsg(this, 'key1', {'replace1': 'val1', 'replace2': 'val2', 'replace3': 'val3'}) + "\n" +
            $f.componentMsg(this, 'key2', {'replace1': 'val1', 'replace2': 'val2', 'replace3': 'val3'})
        );
    }

}

src/js/components/msg.json、src/js/components/msg.ja.json、src/js/components/msg.ja-JP.json、src/js/components/msg.en.json、src/js/components/msg.en-US.jsonを作成しましょう

msg.json

{
     "key1" : "key1 => ${replace1}--\\${replace1}--${replace1}--${replace2}--${replace3}"
    ,"key2" : "key2 => ${replace1}--\\${replace1}--${replace1}--${replace2}--${replace3}"
}

msg.ja.json

{
     "key1" : "key1 => ja ${replace1}--\\${replace1}--${replace1}--${replace2}--${replace3}"
    ,"key2" : "key2 => ja ${replace1}--\\${replace1}--${replace1}--${replace2}--${replace3}"
}

msg.ja-JP.json

{
     "key1" : "key1 => ja-JP ${replace1}--\\${replace1}--${replace1}--${replace2}--${replace3}"
    ,"key2" : "key2 => ja-JP ${replace1}--\\${replace1}--${replace1}--${replace2}--${replace3}"
}

msg.en.json

{
     "key1" : "key1 => en ${replace1}--\\${replace1}--${replace1}--${replace2}--${replace3}"
    ,"key2" : "key2 => en ${replace1}--\\${replace1}--${replace1}--${replace2}--${replace3}"
}

msg.en-US.json

{
     "key1" : "key1 => en-US ${replace1}--\\${replace1}--${replace1}--${replace2}--${replace3}"
    ,"key2" : "key2 => en-US ${replace1}--\\${replace1}--${replace1}--${replace2}--${replace3}"
}

実行してsampleボタンをクリック後、component sampleボタンをクリックしてみましょう
src/js/components配下に作成したjsonファイル内の値が出力されます
controller.js内で実行している$f.componentMsgは
src/js/components配下に作成したmsg.json内の値を返すメソッドです
componentMsgは第一引数にコンポーネントインスタンス、第二引数にmsg.jsonのキーを受け取ります
componentMsgメソッドの第三引数はjson内の${}で囲われた箇所を置換する値です。置換したくない場合は\を付けてください
msg.jsonはjsonなのでキー、値はダブルクォートで囲います。シングルクォートではありません
コンポーネントで使うmsg.jsonはsrc/js/components配下に作成します。これはフレームワークの規則です
また、msg.jsonだけでなく、msg.{使用する言語}.jsonを用意できます
使用する言語はクエリパラメーターlangの値、navigator.languageの値の優先順で適用されます
したがって、URLに?lang=enを付けてアクセスするとmsg.en.jsonに定義した値が出力されます
msg.{使用する言語}.jsonが存在しない場合、msg.jsonが適用されます
したがって、msg.ja.json、msg.ja-JP.json、msg.en.json、msg.en-US.jsonを削除してアクセスするとmsg.jsonに定義した値が出力されます

コンポーネント固有

src/js/components/sample/msg.json、src/js/components/sample/msg.ja.json、src/js/components/sample/msg.ja-JP.json、src/js/components/sample/msg.en.json、src/js/components/sample/msg.en-US.jsonを作成しましょう

src/js/components/sample/msg.json

{
     "key1" : "key1 => component ${replace1}--\\${replace1}--${replace1}--${replace2}--${replace3}"
    ,"key2" : "key2 => component ${replace1}--\\${replace1}--${replace1}--${replace2}--${replace3}"
}

src/js/components/sample/msg.ja.json

{
     "key1" : "key1 => component ja ${replace1}--\\${replace1}--${replace1}--${replace2}--${replace3}"
    ,"key2" : "key2 => component ja ${replace1}--\\${replace1}--${replace1}--${replace2}--${replace3}"
}

src/js/components/sample/msg.ja-JP.json

{
     "key1" : "key1 => component ja-JP ${replace1}--\\${replace1}--${replace1}--${replace2}--${replace3}"
    ,"key2" : "key2 => component ja-JP ${replace1}--\\${replace1}--${replace1}--${replace2}--${replace3}"
}

src/js/components/sample/msg.en.json

{
     "key1" : "key1 => component en ${replace1}--\\${replace1}--${replace1}--${replace2}--${replace3}"
    ,"key2" : "key2 => component en ${replace1}--\\${replace1}--${replace1}--${replace2}--${replace3}"
}

src/js/components/sample/msg.en-US.json

{
     "key1" : "key1 => component en-US ${replace1}--\\${replace1}--${replace1}--${replace2}--${replace3}"
    ,"key2" : "key2 => component en-US ${replace1}--\\${replace1}--${replace1}--${replace2}--${replace3}"
}

実行してsampleボタンをクリック後、component sampleボタンをクリックしてみましょう
src/js/components/sample配下に作成したjsonファイル内の値が出力されます
src/js/components/sample配下に作成したmsg.jsonは、第一引数がsrc/js/components/sample/controller.jsのインスタンスである場合にのみ使用できます

次ページコンポーネントに渡す値をサーバーから受け取る

目次