まずはこちらをごらんください。（スマホ非対応です）
ここ最近JavaScriptの勉強をやってまして、基本文法を一通りやってごく簡単なアプリケーションを作成するところまでできるようになりました。ふと思い立ちチュートリアル で作成した単語帳をめくるミニアプリに機能追加をChatGPTと一緒にやってみました。ChatGPTと一緒に書いたのは以下の機能です。
主な機能
- LocalStorageの活用 難易度 ☆☆☆★★
- ユーザーが登録した単語をブラウザに保存できるようにしました。アプリを再起動しても登録した単語を保持します。
- デフォルトで用意していた配列と切り離しが上手くいった時、すごいうれしかった...。
- 登録単語のテーブル表示 難易度 ☆☆☆☆★
- 登録した単語を表形式で見ることができるようになりました。
- trとtdと...という感じでたくさんの変数を用意しないといけないのが面倒。実装自体はまあまあぐらいの難易度だったけど、ふとした瞬間によく壊れた。
- 単語削除機能 難易度 ☆☆☆☆☆
- 不要になった単語を削除できるようにしました。
- これが一番難しかった...。消せなかったり、消しても戻ってきたりして何度も何度も書き直しました。
- 英語・日本語の区別 難易度 ☆☆☆★★
- 空白の登録防止 難易度 ☆★★★★
- 空の単語が登録されないようにする機能を実装しました。
- 意外に簡単。
- 単語の重複防止 難易度 ☆☆☆☆★
- 同じ単語が連続して出題されないようにしました。
- 思ったより難しい。前回のindexと今回のindexと...と変数が一気に増えて意味がわからなかったし、正直あんまりよくわからないまま書いた。
- 正解・不正解の記録 難易度 ☆☆★★★
- 学習者が単語の意味を正しく答えたかどうかを記録して表に反映させました。
- 難しそうで身構えていたけど、表さえ出来上がっていれば追加するだけなので意外に簡単。
feat.ChatGPT
ChatGPTのサポートを得て上の機能たちを実装しました。コードの提案からエラーの解消、さらにはリファクタリングのアドバイスまで、開発プロセス全体を通じていい感じの活躍をしてくれてます。私はどんどん質問してコードを吐き出させて読みながら写し書きして、動かしてみるみたいな感じで使ってました。 上手くやるコツは細かくコミュニケーションを取ることな気がします。コードをコピペしてこれをどうしたらいいですか？リファクタリングしてください。という感じでとにかく具体的に指示していくと精度高くやってもらえるな〜という印象です。ぶっちゃけ書いたものすべてをきちんと理解してかけてるわけではないけど、他のもの勉強してる時もそんなもんかとも思う...。
このエントリも50%ぐらいChatGPTに書いてもらいました。文章の硬さがやっぱりあるなとおもうけど、まあ何度か使えば馴染んでくるかな。これで味を占めたのでこれからもっとどんどん頼っていきたい。
コードに興味のある方はこちらへどうぞ。遠慮なくご意見をお聞かせください。GitHub - tymikii/ankikun
