やったこと

GitHub Copilot ChatがGAしたということで年始から2月中旬ごろまでにかけてフロントの開発をやってみることにしました。

私のステータスとしては次の感じ

SE3年目(春から4年目)
業務経験はバックエンドがメイン
フロントはほぼ触ったことはないが、Reactの存在は知っている
開発は業後にちまちま進めた(仕事は残業月20時間くらい)

完成したもの

趣味が競馬です。netkeiba等でレースの出馬表が見れますが、どのサイトを見てもUIに不満があったり、表示する内容を自分好みにしたいという思いがありました。というわけで自分用の出馬表を作ってみました。完成したのはこんな感じ

以前、競馬AIを作ろうとDBにある程度データを入れていたので、フロント部分の開発がメインになりました。 (netkeibaのページからスクレイピングでデータを取得しています。データの利用は規約を見る限り自己利用なら大丈夫なはずです...)

まずは環境構築

React,TypeScriptを使うことは決めていたのでここはネットで適当に記事を探しました。

React & TypeScriptのプロジェクト作成 - TypeScript Deep Dive 日本語版

↑の記事ではWebpackを使っているんですが、最初なんだかわからなくて苦戦しました...

そもそもwebpackってなんぞ？の私は「うまく質問ができなくて求める答えを得られない...」を無限に繰り返していました。特に環境の設定みたいなところはCopilotに聞くより自分でちゃんと調べるのがいい気がしました。この辺りは適切な質問をするのが難しいです。（個人的にはですが...）

Reactのコーディングを始めてみる

競馬新聞を作るにあたってエクセルのグリッドみたいな感じで並べたらいけるかな～とふわっとしたイメージがあったのでそのまま質問してみました。

実際に完成したアプリではTableコンポーネントを利用していますが、質問が悪くて引き出せていないですね。グリッドと聞いてしまっているのでそのままGridを使われてしまっています。「なんかちがうな...」だったので質問を変えてみました。

イメージをちょっと具体的にしたらいい感じの答えが返ってきました。この時点でふわっとしてると適切な答え（というより求めてる答え）は返ってこない＆自分である程度答えの形を持っていることが必要なんだな、と悟りました。

というわけでもっと細かく聞いてみます。

かなりそれっぽくなりました。

何もないところからひな形みたいなのを作ろうとする場合はできるだけ具体化した方がいいのかもな...と思っています。

DBと接続してみる

データはDBにあるのでDBとの接続を考えてみます。まずフォルダ構成どうしたらいいのか聞いてみました。どうフォルダを切ればいいのかはいつも難しいな...と思っていた（趣味の開発だといつもぐちゃぐちゃになる）のでありがたいです。

DBのアクセスするコードとかはCopilotが書いてくれるので楽でした。ただ、例外処理とかちゃんとする場合は気を使ってあげる必要があります。「ただコピペだけしていると実は考慮できていないところがある...」みたいなことは結構ありありそうです。

そんなこんなでDBアクセスするコードを書いて動かそうとすると事件発生しました。

サーバーサイドと分けなくてもいけるんじゃ？と思ってやってたらダメって言われました。(先に教えてよ...と思ったものの相手はAIなのでしょうがない)

ただ、聞けばすぐに解決するのもいいことろです。

Expressはしらないのでこちらの記事も読みました。環境のところでもそうでしたが、こういうのはAI頼りではなく自分で勉強したほうがいいですね。 React(Typescript) + Typescript(Express) + MySQLでTodoリスト作成

0から始めるときはAI頼りだけだと躓くことが多いですが、どこでつまずきやすいのかを認識できてくると学習する時間が絞れそうだなと感じます。 (コードはノリとCopilotの力で書けてしまうので、システムの構成みたいなところの学習に時間を割くのが正しそうだという認識を現状持っています。)

その他気を付けた点

実装をすすめるにあたって、いきなり全部の機能をAIに伝えるのではなく、一個ずつエンハンスしていくのを意識しました。機能が山盛りの際に全部正しく伝えるのはしんどい & 答えも怪しくなる、といった理由です。

モーダルウインドウの機能をつくるときは「まずモーダルウインドウを出す」→「表示したいものを足していく」みたいな感じで進めました。

例えば、「サーバーからJSONでデータを受け取るときのデータが内部で配列を持つとき」などは複数に質問を分けました。

自然言語で適切に質問すればいい感じのコードが返ってきます。長文を投げるよりは分解して伝えたほうが楽です。

SQLとかはすべてCopilotに書いてもらいました。joinもちゃんと伝えると適切にやってくれるのでかなり楽です。（もう自力で書けないかも...）

その他はまりポイント

CORSで引っ掛かったときはAIに聞いてもあまりわからなかったのでネットでCORSってなんぞ？っていうのを調べました。知識がある状態だとAIの答えでフムフムとなるものも、初めてだとわからないものなのでちゃんと自分で学習するのも大事です。(n回目)

やはり、AIはサポートとして使うのが適切であって、すべてを頼り切るのは難しい気がします。

Webpackも同様でCopilotに聞いてもよくわからない(現在進行形)なので公式ドキュメント等を読もうかと思っています...

まとめ

フロント初心者ながら割と短い時間で動くアプリを作れたと思う
システム構成とかはAIに頼らず自分で学習するのが大事そう
何もないところからひな形のコードを作ろうとすると、具体的に伝えないと出力はいまいち
AIへの伝え方も大事
コードの修正やSQLとかはAIはかなり強力
自分としては今後学習に時間を割くのはコーディングよりはシステム構成とかそのあたりをメインにしたいかも

まとまりはないですが、もし読んでくださった方がいればありがとうございました。

ssssuuuuummmm’s blog

フロント開発初心者がCopilotに頼ってアプリを作ってみた話