前回の記事はこちら

🌟制作するアプリ

タイトル：『ひとこと日記』
概要：ひとこと日記をつけるアプリ。継続して日記をつけていると、動物達の警戒心が解けて、少しずつ近寄ってきます。
機能：動物触れ合い機能、日記記録機能、日記確認機能、動物図鑑機能など

🌟メイン画面(仮)完成

音量注意です

GeminiCLIの手を借りながら、なんとかメイン画面が完成しました。作っているうちに機能を足したくなってしまい、左上に何か見えるのですが一旦は完成です。この画面では、ひとことを書くことができ、保存すると動物が懐いて近寄ってくる様子を確認できます。

工夫した点①：動物が段階的に懐く様子を計算で表現する

この画面の最大のポイントは、ひとことを書く度に動物が懐いて近寄ってくるところです。この機能の実装には以下の計算を用いています。

動物の懐き度＝（今までの日記の合計日数）ー（過去に仲間になった動物たちが必要とした日数の合計）

この計算式で出た数値に応じて、表示する動物の画像・大きさ・位置を変化させています。

１日目（懐き度０）：動物の画像サイズは小さく、画面の奥に表示される。
２日目（懐き度１）：少し大きく、解像度の高い画像を手前に表示。
３日目（懐き度２）：さらに大きい画像を、より手前に！

これを繰り返すことで、動物が少しずつ心を開いてくれるアニメーションを表現しました。警戒心が強い動物は、仲間になるまでに必要なひとことの数も多いので、根気強く話しかけましょう。

工夫した点②：カスタムフックでコードを整理する

当初、メイン画面のファイルには上記の計算ロジックやアニメーションの処理など、たくさんのコードが書かれていて複雑でした。
そこで、カスタムフックを用いて、動物の表示に関するロジックを専用の部品として別ファイルに分離しました。これにより、元のファイルはカスタムフックを呼び出すだけでよくなり、UIの表示に集中できる、すっきりしたコードになりました。ロジックが独立したことで、修正箇所が分かりやすく、将来メンテナンスする際にも便利だそうです。前回学んだコンポーネントの概念に似てますね！

工夫した点③：パフォーマンス最適化

メインとなる画面なので、動作の快適さには特にこだわりました。Reactには、アプリのパフォーマンスを向上させるための便利な機能がいくつかあります。

useMemo：計算結果の記憶を行う機能。一度計算した結果を覚えておき、必要がない限り再計算しないようにすることで、アプリの無駄な処理を減らしています。
useCallback：関数の記憶を行う機能。ボタンをタップした時の処理などを記憶しておくことで、画面が更新されるたびに新しい関数が作られることを防いでいます。

これらの機能を活用する他に、アプリ起動時に読み込む画像を最小限に抑えることや画像のサイズを小さくすることで、アプリがサクサク動作するようになりました。

工夫した点④：触って楽しめるアニメーション

ひとことを書くだけでは少し寂しいので、動物をタップしたら鳴くようにしました。いずれ音声もつける予定です。鳴き声を表示するアニメーションはreact-native-reanimatedというライブラリを使っていて、弾むようなアニメーションやフェードなどを動物によって使い分けています。

🌟まとめとちょっと感想

以上がメイン画面の紹介となります。次回以降は、他の画面を紹介していこうと思います。開発日記のつもりでしたが、これを開発日記と呼んで良いのかよく分かりません。

最近は昼夜が逆転する勢いでアプリ開発にハマっているのですが、ロジック部分のコードを書いているのは9割Geminiで、毎日APIの上限まで働いてもらっています。Geminiを使っていく上で、gitの重要性を強く強く実感しました。書いてもらったコードは自分でも調べて、なるべく理解するようにしているのですが、関数がゴチャゴチャしてるあたりは雰囲気でなんとなく分かった気になって、実行して、何度かアプリが動かなくなりました。gitが無かったら嫌になっていたと思います。UIは基本自力で頑張っているので、良かったら注目して見てください！