こんな感じ
https://ahya-test.ahyaemon.com
なにこれ
9 つの質問に回答すると性格が分かる、みたいな良くあるアレ。
なぜ作ったか
- css grid を使って何か作りたかった
- SolidJS を使って何か作りたかった
技術スタック
詳しくは GitHub リポジトリを参照
https://github.com/ahyaemon/ahya-test
SolidJS 周り
ページの構成は大きく分けると「質問ページ」と「結果ページ」の二つに分かれているため、その間を遷移させるために solid-router を使用した。
あとトーストも出したいなーと思っていたら solid-toast というものがあったので使わせていただいた。
React を使うと再レンダリングを防ぐためにテクニックが必要だけど、SolidJS の場合は再レンダリングさせるためにテクニックが必要になることがあり、この差は結構好き。
サイト周り
回答中に誰かに後ろから覗かれるのって嫌だよなー、と思って、まさにそれを実現させるためにおじさんのトーストを用意した。
こういう相槌打たれたらウザイな、というセリフを盛り込んだ。
また、結果ページではまず第一印象を大事にした。
さらに名言を入れることで、診断アプリ感を出した。
終わりに
主に css の学習のために作ったけど、思ってたよりそれっぽいサイトができた。
診断結果は結構あってると思う。
なぜなら質問の回答を適当に言い換えただけだから。