はじめに
React学習を始めて、２か月立ちました。
今回はデジタル名刺アプリを開発しました。
アプリの詳細とどのような技術を使用したかなどを紹介していきたいと思います。
デジタル名刺アプリ
今回開発したデジタルアプリの説明を簡単にしたいと思います。
このアプリはデジタル名刺を作成、表示できるアプリです。
まず、新規登録はこちらをクリックし、名刺を登録します。
新規登録で検索用の英単語（ID）や自分の名前、自己紹介、好きな技術、各種アカウントIDを入力していきます。
登録が完了すると、トップページに戻るので、先ほど登録したIDを検索IDに入力し、名刺検索を行います。
検索したIDのデジタル名刺が表示されます。
外部リンクをクリックすると、それぞれのIDのアカウントに飛ぶことができます。
使用技術
以下が使用した技術です。
| 名前 | 説明 |
|---|---|
| 使用言語 | React, TypeScript |
| UI | ChaKra UI |
| データベース | Supabase |
| サーバーサイド | Firebase |
| CICD構築 | GithubActions |
今回のアプリ開発で成長したと実感したこと
今回のアプリ開発で以下の2つが主に成長したと実感しました。
- react-router-domのuseNavigate
- Github Actionsの使用方法
react-router-domのuseNavigateを多用し、登録したらトップページ、検索ボタンを押したら詳細ページと、ページ遷移の処理の理解が深まりました。
複数のページの相互関係を構築するには、useNavigateは重要な機能なので押さえておきたいですね。
また、前日のデータを削除する処理を入れました。
データの削除にはGithubActionsのscheduleを使用しました。
毎朝6時になると、バッチ処理が動き、前日作成した名刺情報を削除してくれます。
今まで使用したことがないものでしたが、比較的簡単にymlファイルの記述は作成することができました。
ここに詰まってしまった
Github Actionsのymlの記述自体はすぐにできましたが、バッチ処理のtsファイル実行時に環境変数エラーがでてうまく実行できないことがありました。
エラー記事を調べたり、gptに聞いてみたりしなんとか解決することができました。
次にtsファイルを実行するときはいくつかやり方も学べたので、うまくできると思います。
また、GithubActionsのscheduleはタイムラグがあるようで、実行してほしい時刻になっても実行されず、5分遅れで実行されたりということがありました。
どこか記述が悪いのかと焦りました、、
補足ですが、scheduleの時刻はUTCタイムなので、日本時間で指定してしまうとまったく違う時間になります。
意外とエラーの解決記事はある
見たことないエラーに遭遇して、エラーを調べてみてもヒットしないということがあると思います。
でも、意外と調べ方を変えて、エラーの一部を検索、エラーに関係ありそうな単語で検索等するとヒットします。
詰まってしまったと悩んでいることは、ほかの誰かもある程度経験しています。
もし、エラーの原因が分からないという方がいたら、調べ方を変えてみるのを意識するといいかもしれないです！
終わりに
ここ最近思ったのですが、昔の自分だったら技術書を読んでそこから何のアプリ開発しようかと考えてと、実際に手を動かすまで時間がかなりかかっていたと思います。
今は、アプトプット中心に変えて、振り返った時に「これができるようになった」ということが増えました。
基礎の段階では技術書を読むことは大事だと思います。
ただ、実際に学んでいくにはやはり手を動かすのはすごく大事だと感じています。
さらにReactを習熟できるように学習を進めていきます。
JISOUのメンバー募集中
プログラミングコーチングJISOUではメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
気になる方はぜひHPからお願いします👇