【React】 #4 カラーパレットアプリを作成

はじめに

現在、Reactを習得するために、23種類のReactアプリ開発に取り組んでいます。
今回はその第４弾として、Reactでカラーパレットアプリを作成しました。

要件

今回は以下の要件を満たすことを目指しました。

• サーバから色情報を取得すること
• 取得した色情報をグリッド表示すること
• 特定の色を選択すると背景色が変わること

作成したアプリのイメージ

アプリ紹介動画

利用技術

• React
• TypeScript
• Vite
• Tailwind CSS
• json-server

意識したポイント

色情報はjson-serverを利用してダミー電文を取得

fetchColorData.tsx

const fetchColorData = async () => {
  const res = await fetch("http://localhost:3000/color");
  if (!res.ok) {
    throw new Error(`色彩情報の取得に失敗しました:${res.status}`);
  }
  const data = await res.json();
  return data;
};
export default fetchColorData;

色情報はjson-serverというAPIを利用してダミーのjsonデータを取得しています。
json-server(npm)

おわりに

今回はカラーパレットアプリの作成をしました。
useEffect、データフェッチの理解が深めて良かったです。

json-serverは初めて使いましたが、
簡単にサーバサイドをモック化できて便利ですね。

Github

GitHubにコードをアップロードしていますので、よかったら確認してみてください。