Reactの練習と、AI協業を勉強しようと思いまして、ページを1枚作りました。
https://samuraishockdo.com/app/life/
あなたの寿命は何日？の使い方
年齢と性別を選択し、寿命を表示するボタンを押すと、寿命の残り日数を表示します。
データは
からダウンロードし、利用しています。
感想
AIと協業するをサブテーマに
Reactを学習しようと思いまして、作りました。
今回はAIと人間の協業や学習というのをテーマにしてみようと思いつきまして、Reactについて検索エンジンでの情報収集をしないでやってみる、というのをやってみました。
とはいえ、もとよりReactのことは公式のドキュメントを読んでいたり、Vueを練習していたりとReactについて概念丸ごと知らない私、というのは当てはまっていません。
AIは、Github Copilot、Bard、ChatGPT、Bingを利用しました。
ステップを大きく分けると、目的、概要、データ、表示の仕方のように分けてAIに質問してゆきました。
仕様や概念の説明不足で、当初は近いが見当はずれなコードがたくさん提出されましたが、繰り返し、訂正と再提案していくうちに、精度が良くなっていくように感じました。
ChatGPTとBardはどちらが優れているとかは感じませんでした。
どちらか片方だけを選択するよりも、自分、ChatGPTとBardの3人で進めていく感覚のほうが優れていてかつ時間も短縮されるように感じました。
コンポーネントのコードは、99%がAIが書いたものです。
私はJSが得意ではないので、AI生成のコードが実用的なので助かりました
私は検索せずに、JSのコードをスラスラ書くことは出来ません。
しかし、読むこと、構造を理解することは出来ます。
このような場合、AI生成のコードを、私が目視で確認し、動かし、検品する方法は時間短縮になると思いました。AIを利用することで、典型的な処理などは、検索するよりも簡単にコードが手に入ると感じました。
例えば、「Arrayに対するmapの様々な典型的な処理など」で助かりました。
AIがいいところ、私がいいところ
今回のケースでは、AIの良いところはJSの細かい処理部分、典型的な処理部分を的確に書いたことでした。
しかし、Reatについてわかっていない自分にとって、どういう設計、どうデータを使うか？という点などを質問してみましたが、その点ではAIは図星をつくことが出来なかったように感じました。
（質問が悪いのかもしれませんが）
なので、データをどう持つか？などは私が決めました。
概念、設計などを自分が担当、コンポーネントをAIに書いてもらうという流れでした。
まとめ
Reactについておぼろな私でも、動くReactを検索せずに作ることが出来ました。
しかし、Reactの全体像や妙味などは全然理解していません、おそらく応用力もなく、他人へのアドバイスも出来ないです。
AIと知らないジャンルの課題について、動くものを作ることは出来ましたが、私のReactへの理解が深まることはないのだな、と思いました。
一からReactの本や公式ドキュメント、検索エンジンで学びながら作るのよりも、圧倒的に学習せず、疲労せず、短時間で作れたと思います。
使い捨てツールや、自社内ユーティリティみたいなのは、AIと協業でササっと済ませばよい。
ということが勉強できました。