システム全体

index.html、index.jsを下記に変更しましょう

index.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>
sample
</title>
<script id="fs-js" src="http://localhost:8000/js/fairysupport.min.js" data-page-root="http://localhost:8000/page"></script>
</head>
<body>
    <div data-obj="obj"></div>
    <div><button data-name="sample">sample</button></div>
</body>
</html>

index.js

export class Index {

    constructor() {
    }

    sample_click(event) {
        alert($f.envValue("key1") + ' ' + $f.envValue("key2") + ' ' + $f.envValue("key3"));
    }

}

src/js/env/envValue.json、src/js/env/envValue.local.jsonを作成しましょう

envValue.json

{
     "key1" : "value1"
    ,"key2" : "value2"
}

envValue.local.json

{
     "key2" : "value2_local"
    ,"key3" : "value3_local"
}

実行してsampleボタンをクリックしてみましょう
value1 value2_local value3_localとalertが出力されます
index.js内で実行している$f.envValue("key1")は
$fがこのフレームワークのオブジェクトです
envValueメソッドはsrc/js/env配下のjsonの値を返すメソッドです
定数を定義したい場合は、envValue.jsonに定義し、envValueメソッドで取得します
envValue.jsonはjsonなのでキー、値はダブルクォートで囲います。シングルクォートではありません
envValue.jsonはsrc/js/env配下に作成します。これはフレームワークの規則です
また、envValue.jsonだけでなく、envValue.{環境}.jsonを用意できます
環境はpackage.jsonのscriptsでfairysupport_jsの引数として定義します
package.jsonのscriptsのwatch_localを見てみましょう
"watch_local": "watch \"npm run build_local\" ./src"となっており、build_localを実行しているのがわかります
"build_local": "fairysupport_js local"ここで環境を引数で渡しています。ここではlocalが渡されています
したがって、envValue.jsonだけでなく、envValue.local.jsonも使われます
envValue.json、envValue.local.json両方に同じキーがある場合、envValue.local.jsonが優先されます
環境は$f.getEnv()で取得できます

ページ固有

src/page/sub/index.html、src/js/modules/sub/index.jsを作成しましょう

src/page/sub/index.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>
sample
</title>
<script id="fs-js" src="http://localhost:8000/js/fairysupport.min.js" data-page-root="http://localhost:8000/page"></script>
</head>
<body>
    <div><button data-name="sample">sample</button></div>
</body>
</html>

src/js/modules/sub/index.js

export class Index {

    constructor() {
    }

    sample_click(event) {
        alert($f.envValue("key1") + ' ' + $f.envValue("sub_key") + ' ' + $f.envValue("sub_index_key"));
    }

}

src/js/env/sub/envValue.json、src/js/env/sub/envValue.local.json、src/js/env/sub/index/envValue.json、src/js/env/sub/index/envValue.local.jsonを作成しましょう

src/js/env/sub/envValue.json

{
     "sub_key" : "sub_value"
}

src/js/env/sub/envValue.local.json

{
     "sub_key" : "sub_value_local"
}

src/js/env/sub/index/envValue.json

{
     "sub_index_key" : "sub_index_value"
}

src/js/env/sub/index/envValue.local.json

{
     "sub_index_key" : "sub_index_value_local"
}

実行してsampleボタンをクリックしてみましょう
value1 sub_value_local sub_index_value_localとalertが出力されます
src/js/env/sub配下に作成したenvValue.jsonは、webページに対応するjsファイルがsrc/js/modules/sub配下または、src/js/modules/sub.jsである場合にのみ使用できます
src/js/env/sub/index配下に作成したenvValue.jsonは、webページに対応するjsファイルがsrc/js/modules/sub/index配下または、src/js/modules/sub/index.jsである場合にのみ使用できます

次ページメッセージ

目次