はじめに
ここで試験内容が公開されてたので、お題のサイトを SolidJS で作ってみた。
実際に試験を受けるわけじゃないので、制約は以下のように改ざんした。
React/Vue.jsのいずれかを用いてSPAを構築すること
→ SolidJS を使う
グラフは Highcharts や Rechart.js などのサードパーティ製のグラフライブラリを用いて描画すること
→ グラフライブラリは使わず、無理やり描画する（後述）
PC/スマートフォン表示に対応すること
→ スマホ対応はやらない（PC 版を作って満足してしまった）
作ったもの
我ながらダサい。
技術スタック
- TypeScript
- SolidJS
- Jest
- ESLint
- Prettier
SolidJS
tsx で書けるので、React と書き味は似ている。
ただコンポーネントにリアクティビティを持たせるのにちょっと癖がある感じがした。
例えば親から受け取った Props を加工して表示する場合、一旦シグナル（React で言うステート）を作って Effect でセットしないといけない。
（試行錯誤しながら実装したからもっといいやり方があるかも）
ダメな例
const Counter: Component = () => {
const [count, setCount] = createSignal<number>(0)
return (
<div>
<p>count: {count}</p>
<p>twice: <Twice n={count()}/></p>
<button onClick={() => { setCount(c => c + 1) }}>add</button>
</div>
)
}
const Twice: Component<{n: number}> = (props) => {
const twice = props.n * 2
// 最初に渡された n = 0 で計算された値が更新されない
return <>{twice}</>
}
add ボタンを押しても twice が更新されない。
createEffect で、n の更新のたびに Effect をかけると動く。
const Twice: Component<{n: number}> = (props) => {
const [twice, setTwice] = createSignal<number>(0)
createEffect(() => {
setTwice(props.n * 2)
})
return <>{twice}</>
}
return の中で props.n * 2 を計算しても動くけど、props から複雑な値だったり、複数の値を導出してから使いたい時は向いてないと思う。
const Twice: Component<{n: number}> = (props) => {
return <>{props.n * 2}</>
}
{} の中に式を入れても動く。正直あんまり良くわかってない。
const Twice: Component<{n: number}> = (props) => {
const twice = () => props.n * 2
return <>{twice}</>
}
グラフ
簡単な描画ならライブラリ要らないかなーと思ってやってみたけど結構大変だった。
やり方としては div で箱を作って、そこにグラデーションを掛けて斜線を模すようにした。
const Bar: Component = () => {
const style = `
width: 100px;
height: 200px;
background-image: linear-gradient(to right bottom, transparent 48%, black 48%, black 52%, transparent 52%);
`
return <div style={style}></div>
}
この height とかをコンポーネント内で計算して、それを並べてグラフにした。
（大変な見た目になったけど、実装していたらなんとなく味があるようなこれはこれでアリなような気がしてきた）
API キー
RESAS(地域経済分析システム) の API を使って人口データを取得すると言う指定があった。
RESAS は無料で利用登録することで API キーを発行してくれて、それを使って API を叩くことができる。
API キーをリポジトリに置いておくと全世界に公開されてしまうので、今回は人口データは事前に全て手元で取得しておき、それをリポジトリに置くことにした。
取得した人口データはダイナミックインポートするようにして、非同期 API 呼び出しを模すようにした。
興味本位で他にもこのお題を実装してる人がいないかググってみたけど、API キーを公開してる人もいたりして、それはやめた方が良いんじゃないかと思った。
あと「API キーをいかに見えないようにするか。隠すか。」みたいな話も見かけたけど、そもそも自分が取得した API キーを使って他人が API を叩けること自体微妙な気がする。
終わりに
自分の css 力の無さを実感しました。