😊

宣言的なJSフレームワーク デモ解説(2)

2022/05/13に公開約3,100字

概要

data-x.jsに付属するデモ都道府県一覧(demo/prefectures)の解説

フレームワーク

https://github.com/mogera551/data-x.js/

デモ概要

都道府県一覧を表示する。
表示するデータは、都道府県名、県庁所在地、人口、人口割合、表示している人口の合計。
地方を選択することで、表示する都道府県変更できる。
データは、都道府県名、県庁所在地、地方、人口を持ち、人口割合は計算で求める。
人口100万未満は人口を青く、人口500万以上は人口を赤くする。

ソース解説

index.html

https://github.com/mogera551/data-x.js/blob/main/demo/prefectures/index.html

都道府県一覧(models/Prefectures.js)を読み込み、引数で渡してフレームワークを実行。

https://github.com/mogera551/data-x.js/blob/main/demo/prefectures/index.html#L8-L10

models/Prefectures.js

都道府県一覧データ

https://github.com/mogera551/data-x.js/blob/main/demo/prefectures/models/Prefectures.js

main.html

https://github.com/mogera551/data-x.js/blob/main/demo/prefectures/index-spa/html/main.html

繰り返す要素をtemplateタグで囲む

https://github.com/mogera551/data-x.js/blob/main/demo/prefectures/index-spa/html/main.html#L28-L36

main.js

https://github.com/mogera551/data-x.js/blob/main/demo/prefectures/index-spa/module/main.js

行インデックスを参照するので、コンテキストを利用する。

https://github.com/mogera551/data-x.js/blob/main/demo/prefectures/index-spa/module/main.js#L1-L1

地方名の配列。都道府県一覧から、地方名を取得し、重複を排除する。

https://github.com/mogera551/data-x.js/blob/main/demo/prefectures/index-spa/module/main.js#L3-L4

選択した地方を格納する。

https://github.com/mogera551/data-x.js/blob/main/demo/prefectures/index-spa/module/main.js#L6-L6

表示する都道府県一覧。選択した地方(this.region)に一致するものを表示する。選択した地方(this.region)がない場合、すべての都道府県を表示する。

https://github.com/mogera551/data-x.js/blob/main/demo/prefectures/index-spa/module/main.js#L8-L8

コンテキストからインデックス変数を取得して1加算したものを行番号とする。

https://github.com/mogera551/data-x.js/blob/main/demo/prefectures/index-spa/module/main.js#L9-L9

人口割合(%)の計算。人口÷総人口。アスタリスクを含むドット記法を使い簡単に定義できる。

https://github.com/mogera551/data-x.js/blob/main/demo/prefectures/index-spa/module/main.js#L13-L13

集計のタイトル。地方を選択した場合、地方名+「合計」。

https://github.com/mogera551/data-x.js/blob/main/demo/prefectures/index-spa/module/main.js#L15-L15

表示している都道府県の総人口。

https://github.com/mogera551/data-x.js/blob/main/demo/prefectures/index-spa/module/main.js#L16-L16

プロパティ間の依存関係を記述。
選択した地方(region)が変更になったら、表示する都道府県一覧(prefectures)をhtml要素へ反映。
選択した地方(region)が変更になったら、集計タイトル(sumTitle)をhtml要素へ反映。
表示する都道府県一覧(prefectures)が変更になったら、集計(sumPopulation)をhtml要素へ反映。

https://github.com/mogera551/data-x.js/blob/main/demo/prefectures/index-spa/module/main.js#L19-L23

main.bind.css

バインドルールの外部ファイル。

https://github.com/mogera551/data-x.js/blob/main/demo/prefectures/index-spa/css/main.bind.css

選択する地方の一覧の指定。optionのvalueとtextContentをバインド。

https://github.com/mogera551/data-x.js/blob/main/demo/prefectures/index-spa/css/main.bind.css#L1-L8

人口の表示。locale-stringでフォーマット。locale-stringはtoLocaleString()と同じ。
人口が1,000,000未満(lt:1000000)の場合、html要素のclassにunder-millionを追加。
人口が5,000,000以上(ge:5000000)の場合、html要素のclassにover-5millionを追加。

https://github.com/mogera551/data-x.js/blob/main/demo/prefectures/index-spa/css/main.bind.css#L26-L30

割合の表示。fix:2で小数点2桁まで表示。fix:2はtoFix(2)と同じ。

https://github.com/mogera551/data-x.js/blob/main/demo/prefectures/index-spa/css/main.bind.css#L32-L34

感想

  • アクセサプロパティ(@プロパティ#get)を使うと宣言的に記述しやすい。
  • 人口割合(@prefectures.*.share#get)のプロパティの書き方は、ちょっとかっこいい。

Discussion

ログインするとコメントできます