React Native & ChatGPT モバイルアプリ開発(3)
ようやくコーディング？に復帰
自分がコードを書くわけではないのにコーディングというのかはさておき、デバッグとビルドのトラブルが解決できたので（いやしてない）引き続きインプリメントを行っていきたいと思います。ちなみにググってみたところ、AIに指示を出して画像を生成する人にはプロンプト・エンジニアなる称号があるらしいのですが、コードを生成する場合もこれでよいのではと思ったり。
板一覧
中二日も空いたらすっかり忘れてましたが、次はカテゴリ一名をタップして板一覧への移動のインプリメント。このとき右からのスライドインと板一覧画面での左から右へのフリックでのカテゴリ一覧画面への復帰を目指します。
- 添付ファイルは現在のソースコードです。カテゴリ名をタップしたら板一覧画面に右からスライドインアニメーションで遷移したいです。板一覧画面にはcategory_contentを渡し、配列の中のオブジェクトが持っているプロパティのboard_nameを、カテゴリ一覧と同じグリッド状に表示してください。
GPT-4の返事は、「これらのファイルをもとに、カテゴリ名をタップした際に板一覧画面へ右からスライドインするアニメーションで遷移し、category_content 内の board_name をグリッド状に表示する機能を実装する手順を説明します。」
きちんと理解してくれてるなと思ったのですが、ここからが長かったです。
- ナビゲーションライブラリ(@react-navigation/native、@react-navigation/stack)の導入
- スタックナビゲーターの設定
- カテゴリ一覧画面をCategoryListScreen.tsxとして分離
- 板一覧画面をBoardListScreen.tsxとして作成
- カテゴリ情報関連の型定義の更新(CategoryContent、CategoryItem)
そしてGTP-4が提示したコードではいくつかのESLintの警告が発生するのでそれを全部クリアしようとしてどんどんはまっていきました。このあたりは適当にやり過ごす手もあるのですが、Flutter版でもシンタックス関連の警告は全部消す！方針でやっているのでどこまで手間がかかるのかを見るためにもやってみました。
GPT-4にこのファイルのこの警告消してというと、他のファイルで警告が発生するように修正するし、他のファイルの警告を消そうとすると別の場所に警告が発生するしで、結局のところ、また全部のファイルをアップロードしてこれ全部が整合性が取れるようにして！でなんとかなりました。
そして最後はやはりビルドエラーになるわけですが、今回の解決策はこんな感じでした。gesture-handlerをインストールしてキャッシュをクリアしてiosで必要なものをインストールしてAndroidでクリーンアップしてXcodeでビルドフォルダを消して再ビルド。
npm install react-native-gesture-handler
npm start -- --reset-cache
cd ios
pod install
cd ../android
./gradlew clean
cd ..
機能をインプリメントするよりトラブル対応に時間を取られてしまいますね。今日は板一覧画面を表示するところまでに5時間以上かかりました。フリックでのカテゴリ一覧画面への復帰はインプリメントできませんでした。正直なところFlutterでのスムーズな開発にくらべるとReact Nativeは手間がかかりすぎるように思います。
ここまでのコードです。
続きはこちら。
Flutter版はこちら。
Discussion