【初心者】React, Supabase, Chakra UIで学習記録アプリを作ってみた感想

Posted at 2026-04-27

はじめに

以前作った学習記録アプリをTypeScript化し、Chakra UIで装飾しました！
以前の記事↓

今回作ったアプリのソースコード↓

TypeScript
今回初めてTypeScriptを学び、アプリに取り入れました！

型があるおかげで、propsで渡すプロパティの過不足にすぐ気づけたり、オブジェクトのプロパティの選択肢が出てきたりと効率よく開発することができました。便利ですね。

Jest
前回もJestは使用していたのですが、Qiitaの記事などを参考にしながら見様見真似でやっていました。（理解はできても自分でかけなかった、、、）

今回は、編集機能が増えたり、モーダルが追加されたりでテストの工程が増え、いろいろ試行錯誤しているうちに基本的な構文は自分で考えてかけるようになりました！

Chakra UI
CSSが書けない自分にとっては革命的なライブラリでした！
プロパティでいくつか指定するだけでいい感じのUIを構築することができます。CSSで一つひとつ調整するのは難しいし、時間がかかってしまうので、今後もライブラリを活用していこうと思います！

Chakra UIの不具合
以下の記事の内容です。Chakra UIの公式ドキュメントのサンプルコードだとエラーが出て動きませんでした。 すごい困った。
webで検索しても自分と全く同じところで困っている人はいませんでした。
ただ、同じ原因の解決方法を投稿している方がいて、その記事と自分の状況を照らし合わせながらなんとか動くようにすることができました！
記事を書くのは本当に大切ですね。

Jestのmock
概念は理解できてもどう書けばいいのか全く分からないという状態でしたが、いろんな書籍や記事を見ることでそれぞれのコードの共通点をなんとなく理解しました。
重要なのは、①mockしたい関数がどのように呼び出されているのかと②その関数の処理をどのように簡易的に再現するかということだと感じました。

今回のアプリの具体例を用いると、
①mockしたい関数がどのように呼び出されているのか
Supabase clientが取得、登録、更新、削除のメソッドをどのように呼び出されているのかを確認します。
登録：supabase.from('study-record').insert(record);
このsupabaseからfrom、insertという流れやそれぞれの引数をjest内でも再現します。
②その関数の処理をどのように簡易的に再現するか
今回は、学習記録の追加、削除を配列を使って再現しています。テストでは永続的に保持される必要はありません。

TypeScriptの型エラー
学習記録で使っていく学習内容title, 学習時間timeなどの型が統一されていませんでした。
データベース上ではnumber | nullなのにReactの処理で使っている変数はnumber | ""になっているみたいなことがあり、いろんなとこで型不一致のエラーが出てしまいました。
最終的には、ヌル値合体演算子 (??)で無理やり解決したり、条件分岐で潰したりみたいな無理やりな解決の仕方をしました。
型は最初にしっかり考えて統一しなければいけなかった、、

リファクタリング
ある程度アプリが形になってきたときにリファクタリングをしてみようと思いました。（それまではApp.tsxにすべて書いていた。）
この時は、ロジックとUIを切り離す、同じような機能はコンポーネントにするという思想は持っていました。なので、とりあえずなんでもかんでもこの考え方に従って書いたところ、あとから機能を追加するときにとんでもなくめんどくさいことになりました。さっきの型の不一致も相まって、この変数はどこから渡ってきていて、どこで型が変わってるのかみたいなのがわけわからなくなった。

慣れないうちは変にきれいにまとめようとせずに、一つのファイルから書いていくべきでした。

改めてアウトプットの重要性を実感しています。かけている時間は以前とたいして変わらないのに自分で実装する力が身についてきたのを感じるし、自分が作ったものが作品として残るのはとてもうれしいです！

また、このアプリを作る過程でたくさんの記事に救われました。これらの記事がなければエラーを解決することはできずそのままプログラミング勉強のやる気をなくしていたかもしれません。

今後もアプリ制作や記事投稿のアウトプットを続け、プログラミング学習者全員で成長していきたいです！

プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてください！
▼▼▼