Next.js+supabaseで商品成分サーチアプリを作ってみた話４（CSS）

※初心者のため、間違いや何かご存じの方がいましたら、教えていただけると助かります。

作ったもの

概要

取得データから、テーブルセルに値が表示されるが、値だけではユーザーがわかりにくいため、以下のように、値によって色付けするようにした。

環境

windows11
docker-desktop
Next.js(app routerを使用)
supabase
ホスティング：Vercel

内容

１. cssファイルに以下のclassを用意。

.pink {
    background-color: pink !important;
}

.red {
    background-color: palevioletred !important;
}

.light-green {
    background-color: rgb(178, 235, 178) !important;
}

.green {
    background-color: greenyellow !important;
}

２. page.tsxで、上記cssをimport

３. page.tsxに以下のgetClassName(名前はなんでもよい。)を追記。なお、'light-green'はハイフン（-）が含まれているため、styles['light-green']としている。

const getClassName = (value: string) => {
        switch (value) {
            case '2':
                return styles.pink;
            case '3':
                return styles.red;
            case '-2':
                return styles['light-green'];
            case '-3':
                return styles.green;
            default:
                return '';
        }
    };

４. データセルのclassNameから、上記のgetClassNameを呼び出す。このとき、引数にセルに入るデータ値を渡すことで、３.の条件分岐にあったclassNameが適用されるようになる。

<tr key={ingredient.id}>
    <td className={getClassName(ingredient.absorp)} >{ingredient.absorp}</td>
    <td className={getClassName(ingredient.risk)} >{ingredient.risk}</td>
    <td className={getClassName(ingredient.environmental)} >
        {ingredient.environmental}
    </td>
</tr>

まとめ

MySQLやPostgreSQLなどのデータベースは、データ値を扱うことはできるが、エクセルやスプレッドシートと違って、そのままブラウザに表示してもユーザーには見にくい。（比較するものではないと思うが。エクセルなどでは、「条件付き書式」があり、セルを見やすくするのは簡単。）
そこで、CSSでセルに色付けをすることとした。
データを表示する際は、値だけではなく、「ユーザーが直感的に見やすいか」を軸に表示するように努めていきたい。

この４回までで、アプリ作成の詳細は省くが、今回アプリを作るうちに今後使えそうな機能をまとめた。

今回データベースとしてsupabaseを用いたが、このアプリを「非エンジニア」に渡したとしても、データの管理がしにくいと思われる。
そこで、次はgoogleスプレッドシートをデータベースみたいに使うアプリを考えている。（まだ構想段階。）
スプレッドシートであれば、「非エンジニア」であっても、データ操作が比較的管理しやすいはず。
これから勉強するため、しばし投稿をお待ちください。