【Vite x React】学習記録アプリ作成からデプロイ・テストまでを実施

はじめに

ViteとReactを使用して、簡単アプリを作成しました。

作成したアプリ

概要

学習した時間や学習した内容を簡単に記録できるアプリ

使用言語

React, Javascript

DB

Supabase

テスト

Jest

React Testing Library

その他

FireBase

Github

実装機能

学習内容と学習時間を入力できます

入力した内容を同時反映して確認ができます

登録

登録ボタンを押すと画面上に記録が追加されます（DBのSupabaseの方にも同時追加されます）

この部分の実装はまずDBのSupabaseに入力された内容を追加します。
その後、追加されたSupabaseの内容をgetAllメソッドで取得してきて、画面に反映をさせることで実現しています。
以下実装の抜粋です。

    try {
      await addContent(content, time);
      const suparecords = await getAll();

      setSRecords(suparecords);

      setContent("");
      setTime("");
    } catch (error) {
      console.error("Error registering content:", error);
      setError(true);
    }
  };

また記録が追加されると自動的に合計時間の部分に加算された結果が反映される仕組みになっています。
この部分はuseEffectを用いて、記録が更新されるたびにuseEffect内の関数が実行されるようにしています。
計算部分はreduceメソッドを利用して、初期値をゼロに設定し、記録の時間部分を抜き出して使用しています。
以下が実装の抜粋です。

  useEffect(() => {
    const total = srecords.reduce(
      (sum, record) => parseInt(sum + record.time),
      0
    );
    setTotalTime(total);
  }, [srecords]);

削除機能

削除ボタンを押すと記録からなくなります（DBのSupabaseの方も同時に削除されます）

この部分の実装はまずDBのSupabaseに記録された内容に割り振られた固有のIDを使って削除処理を行います。
その後、最新のSupabaseの内容をgetAllメソッドで取得してきて、画面に反映をさせることで実現しています。
以下実装の抜粋です。

  const handleDelete = async (id) => {
    await deleteContent(id);
    const suparecords = await getAll();
    setSRecords(suparecords);
  };

今回学んだこと

今まで簡単なアプリの作成までを経験をしたことはありましたが、その時は作って終わりという感じでした。

今回は作成したアプリを作成するだけではなく、リリースをしてCDCIまでを整えました。

正直CDやCIのプロセスは初めてで躓くことが多かったですが、ここを準備しておくことで今後個人開発やチーム開発をしていく際に生産性を向上させたりプロダクト品質の向上に繋げることができるのだと実感できました。

おわりに

次はTypescriptを学んでさらにアプリの作成を続けます。

JISOUのメンバー募集中！

プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
実践的なカリキュラムで、あなたのエンジニアとしてのキャリアを最短で飛躍させましょう！
興味のある方は、ぜひホームページからお気軽にカウンセリングをお申し込みください！
▼▼▼