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

作ったもの

背景

化粧品のヘビーユーザーの知り合いから次の話があった。

「材料に使われる成分には経皮毒というのがあって、人の肌を傷つけたり、発がん性があったりする。自然由来のオーガニック成分はその点が安心で、今後そういった製品を選んでいきたい」と。
市販の○王や資○堂は、意外と害のある成分も含んでいると。
また、市販されている製品には、一応成分が書かれているが、字が細かく、また成分数も大量にあって、何が良くて、何が悪いのか判別できない。さらに、個別の成分では問題なくても、吸収力を上げる成分と危険度の高い成分を同時に取れば、相互作用で害が起きやすい。
今、以下の書籍で勉強を始めたところ、という。

そこで、今回、このデータブックをもとに、成分を身近な製品ごとに整理して一覧で見ることができれば、有用なんじゃないかと考えたのが発端。
（ちなみに、自分は、大手が出してる物なら大丈夫じゃない？というこだわりのないタイプです。）

課題

作成にあたり、以下の問題点が判明

化粧品の原材料一覧として、csvなどのデータで使えるものがない。（一部まとめたサイトもあったが、「データ」として取り出すことができず、個人アプリに導入できない。）
各成分ごとの有害性などのcsvなどのデータがない。（同上で、一つ一つの成分を調べていけば情報を見られるが、「データ」として使えるものがない。）
化粧品には種類が山ほどあり、同じ商品でもパッケージが違うなど、「商品の同一性」をどう判定するか？（「同一」が判別できれば、過去の商品データを持ってくることができるのに。）

考えた対応

商品の原材料情報　➡　ユーザーが任意入力できる形に。
成分の個別有害情報　➡　こちらで、とりあえず手入力で用意。その後、新しい成分入れたいならユーザーが任意入力できればいいのでは。
「商品の同一性」判定　➡　日本ならバーコード（JANコード）が使えないか。
ということで、アプリ開発に着手しました。

開発

環境

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

内容

最終的な全体像は、この図です。

全体的にユーザーがデータを登録・参照・更新できるような、ほぼ基本のCRUD機能に至りました。（削除は、せっかく作ったデータが万一消えると悲しいので、一旦無し。管理者ならできてもいいかも。）
Vercelは、Next.jsアプリを無料でホスティングでき、https化もでき、Github連携で自動デプロイもしてくれる利点から、早期開発ができると判断して選定。
Supabaseは、クラウド上のデータベースとして、ブラウザから直感操作がしやすいこと、（たぶん）freeプランで3プロジェクトまで無料だったことから選定。supabaseはユーザー認証機能も構築しやすいが、今回は個人情報系が少ないため、認証は無し。（セキュリティ知見不足なので、あんまり個人情報扱いたくないし。）
商品同一性判定のため、バーコードリーダーを実装したが、どうせならデータ登録に何か役立たたせようと、商品情報を取ってくるAPIがyahooshoppingAPIぐらいしかなかったので、これをAPIで検索させる仕様に。（ただし、yahooshoppingのデータも無いものが結構ある。無い場合は、「情報なし」と返して、ユーザーに登録してほしい旨お願いすることにした。）
データベースはシンプルで、商品テーブル（商品名、バーコード）と、成分テーブル（成分名、アレルギー有無、発がん性有無、危険度、...のプロパティ）の2つがメイン。あとは、それをつなぐ中間テーブル（商品-成分テーブル）で紐づけることにした。

まとめ

以上がアプリの概要です。
次回は、バーコードリーダーに使ったライブラリの内容を少しだけ書ければ。といっても、２つしか見つからなかったけど。