【個人開発】JISOU 課題3 学習記録アプリを完成させた上での苦労と気づき

はじめに

お疲れ様です、りつです。

以前から作成していたReactアプリが完成しました！

• 学習記録アプリ

• リポジトリ

今回は、作成したアプリのご紹介、および完成に至るまでの苦労や気づきを共有できればと思います。

ご参考までに、以下が課題1と課題2の記事です。

🎨 成果物について

課題1、課題2では主にReact × JavaScriptで学習記録アプリを作成しておりました。

今回は新規のプロジェクトとしてReact × TypeScriptを使用した学習記録アプリを作成しました。

使用技術

• Vite
• Chakra UI
• React
• React Hook Form
• TypeScript
• Jest / Testing Library (テスト)
• Supabase (DB)
• Firebase (ホスティング)
• GitHub Actions (CI/CD)

⤴️ 以前と比べてどのように成長したのか

今回実装した学習記録アプリでは、課題2と比べて以下が異なります。

• リンターやフォーマッターの導入
• JavaScriptではなくTypeScriptを利用
• Chakra UIによるレイアウト実装
• 学習記録の編集機能の追加
• モックを用いたテスト実装

ひとつずつ簡単に解説します。

リンターやフォーマッターの導入

リンターとしてESLint、フォーマッターとしてPrettierを導入しました。

また、リンターはMake lintコマンドで実行できるようにしています。
フォーマッターはファイル保存時にコード整形を行うように設定したので、快適に実装を行うことができたと思います。

Typescriptによる実装

今回の学習記録アプリで、初めてTypeScriptを使用しました。

型の指定方法やエラーなど最初は不慣れな中での実装でしたが、GitHub Copilotがある程度型を推測して提案してくれるので助かりました。

また、Classを用いた型定義なども活用しています。

Chakra UIによるレイアウト実装

学習記録アプリのUI・レイアウトの調整などは、Chakra UIというライブラリを使用しています。

Chakra UIでは、あらかじめよく使う機能のコンポーネントが用意されているため、1からCSSを書かなくとも一貫性を持ったUIを実装することができます。

以下は、課題2で作成した学習記録アプリと、今回作成した課題3の学習記録アプリの画面です。

• 課題2の学習記録アプリ
  

• 課題3の学習記録アプリ
  

後者の方が、レイアウトがスッキリ整っているのがご覧いただけるかと思います。

Webアプリケーションを使ってもらうためには見た目も重要な要素だと思いますので、

• 視覚的に分かりやすいUIかどうか
• スマホで見た場合にレイアウトが崩れていないか

なども意識しつつ調整を行いました。

とはいえ、自分自身まだまだUIの知識は多くないため、より良いUIを学んでいくことも今後の課題だと思っています。

学習記録の編集機能の追加

以前の学習記録は登録と削除機能はありましたが、編集機能はありませんでした。

今回の学習記録アプリでは編集ボタンを追加し、モーダルで対象の学習記録の編集を行えるようにしました。

学習記録の新規登録についても、モーダルにて登録を行うように調整しています。

また、登録・更新・削除完了時にはトースト（学習記録の更新が完了しましたなどのメッセージ）が表示されるようにしています。

• 新規登録モーダル
  

モックを用いたテスト実装

学習記録アプリでは、DBとしてSupabaseというBaaSのサービスを使用しています。

前回までの学習記録アプリではテスト実行時にSupabaseに直接接続していたため、登録や削除の際は実データも登録・削除されてしまっていました。

今回はSupabaseと通信を行っているメソッドをモック化しているため、実データに影響を与えずにテストを行うことができるようになりました。

💦 大変だったところ

いくつかピックアップしてご紹介します。

大変だったところ1：型エラーの対応

TypeScriptを用いることで、当然ですが型起因のエラーに対処する機会が増えました。

とはいえ、

• VSCode上で対象の変数にカーソルを当てると表示される情報
• エラー情報

などを確認することで、どんな型を指定しなければならないかのヒントを得ることができます。

そのため、実装時はその情報から原因を推測しながら修正を行いました。

大変だったところ2：Chakra UI v3情報が少ない問題

今回、学習記録アプリのレイアウトなどはChakra UIを利用しました。

事前にUdemyで勉強した際にはChakra UIのバージョンが1だったのですが、2024年秋にバージョン3がリリースされましたので、せっかくならと、最新バージョンを使用して実装を進めました。

しかし、バージョン1とバージョン3では書き方が異なり、更にバージョン3の情報はWeb上に多くなかったため、思い通りに動かないことも多く苦労しました。

基本的には公式ドキュメントを活用しつつ実装を進めました。

大変だったところ3：Chakra UIとJestの相性悪い問題？

JestとReact Testing Libraryでテストを動かそうとした際、Chakra UI起因(主にスニペットの型起因)と思われるエラーが多発しました。

解消のためにChatGptも活用しましたが、なかなかピンポイントで回答が得られることは少なく、推測を立てソースコードを修正して動かすことを繰り返しました。

そのため、今回の実装時には一番解消に時間がかかった部分でもあります。

大変だったところ4：モック化されていない問題

テスト実装ではSupabaseと接続している部分をモック化したのですが、実は自分の実装内容に誤りがあり、正常にモック化がされていませんでした。

最終的に以下の記事で解消できましたが、この記事にたどり着くまで解決に時間がかかりました。

そもそもモック化されていないことに気づけなかった要因として以下があげられます。

• 一覧表示のテスト
  • テーブルに対してテストIDを付与し、そのテストIDが表示されていることのみ確認しており、画面に描画される想定の文言（今回でいうと、学習内容や学習時間の値）を確認できていなかった
• 登録・編集・削除のテスト
  • 登録・編集・削除前後のテーブル列の増減のみ確認しており、追加された列の学習内容や学習時間の値まではテストできていなかった

今後は上記観点でもテスト実装を行うべきだと感じました。

なお、モック化については最初、そもそもどのようなテストコードを書くべきかがイメージができず、そこも躓きポイントでしたね。

JISOUメンバーの方の記事がイメージの助けとなりました。

🪄 工夫したところ

こちらも何点かピックアップしてご紹介します。

工夫したところ1：react-iconsの利用

今回UIを実装するにあたり、主にボタン部分にreact-iconsを利用しました。

アイコンを用いることで、視覚的にわかりやすく、直感的に利用しやすくなることを目指しました。

工夫したところ2：プロジェクト作成からデプロイまでの手順作成

これはどちらかというと次回に向けての対応になります。

今回GitHubで新規リポジトリを作成し、テストの実行環境の用意〜デプロイまで再度一連の手順を踏んできましたが、思いの外手順などを忘れており、各種資料や自分の過去のリポジトリの実装やQiita記事を探すことになりました。

そのため、次回以降同じことにならないよう、GitHubのプロジェクト作成〜デプロイまでの一連の手順やよく使うライブラリの導入方法をNotionにまとめました（以下はNotionの該当ページの目次。とても長くなってしまいました）

上記手順を確認することで、次回以降スムーズに作業（主に実装に入る前の環境構築部分）を行えると思います。

💡 気づき

今回の実装での気づきは2点あります。

気づき1：アウトプットの重要性

人は忘れる生き物

今回、過去に自分が書いたQiita記事に救われることが多くありました(もちろん他の方が書いてくださった記事にも大変助けられました！)

人間は忘れる生き物なので、当初は忘れないだろうと思っていても必ず忘れます。

過去遭遇したエラーは、同じ手順と技術を使う以上、再現します。

そんな時に、ググって自分の記事が出たり、「そういえばこのケースは記事で書いたな」と気づいたりして、本来ならハマってしまう時間を短縮できた時には、過去の自分へ感謝したい気持ちになりました。

(特に以下のようなHowTo記事は、自分自身でも内容を完全に覚えきれていないため、役立ちました)

記事を書いている時は、「同じエラーに遭遇した人や実装方法に悩んでいる人」に向けて書いていましたが、巡り巡って自分自身の助けになりました。

エラーも積極的にアウトプットできるとGood

エラーが多いと気が滅入りそうになりますが、エラーをアウトプットしながら対処することで

1. アウトプットが増える
2. 積み重ねが目で見える
3. モチベーションアップ

という副次効果もありました。

多くアウトプットすることで、未来の自分を救うことになりますし、同じエラーに遭遇した方の助けにもなれる可能性があります。

自分自身では些細なエラーだと感じても、調べてすぐに解消方法が出てこなければアウトプットとして記事にすることは大事だと感じました。

気づき2：最新バージョンの導入については慎重に

「Chakra UIとJestの相性悪い問題？」の時に思ったことですが、最新バージョンは思いの外情報が少ないです。

今回は個人開発だったため、エラー解決の修行(という名の勉強)と思い、時間をかけてエラーの解消に努めました。

エラーの解消方法も判明し、調査力も少し上がったと思いますので、結果的にはやってよかったと思いますが、これが実務であればChakra UI v2の利用も選択の1つだったと思います。

もちろん、最新バージョンを利用するメリットもあると思うので、導入やアップグレードの際はそこら辺のバランスも考慮する必要がありますね。

実際に導入する際は、想定外のエラーが発生する前提で、ある程度時間をかける想定で挑んだ方が良いと感じました。

おわりに

長い記事でしたが、ここまでご覧いただきありがとうございます！

今後も更にReactやTypeScript、およびその周りの関連技術の理解に努めたいと思います。

参考

JISOUのメンバー募集中！

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