Zenn
🧠

ChatGPTを使った開発体験記

2024/08/12に公開
Chrome
JavaScript
Tailwind CSS
Firefox
ChatGPT
idea

ChatGPTを使った開発体験記

最近、いくつかのプロジェクトでChatGPTをサポート役として活用してきました。その中で、Tailwind CSSの挑戦、Chrome拡張の移植、そしてクラス名の並び替えなど、さまざまな経験をしました。今回はその詳細をお届けします。

Tailwind CSSにチャレンジ

転職先でTailwind CSSを使っていたので、勉強がてら自分のプロジェクトにも導入してみました。Tailwind CSSのユーティリティクラスは、デザインの一貫性を保ちながら、開発のスピードを上げるのに非常に便利です。しかし、最初はクラス名の覚え方や、どこにどのクラスを使うべきかに悩むこともありました。それでも、公式ドキュメントや他の参考資料を見ながら、少しずつ使いこなせるようになってきました。

Live PreviewとTailwind CSSのWatch

VSCodeのLive PreviewとTailwind CSSのwatch機能の組み合わせが非常に便利でした。Live Previewを使うことで、コードの変更が即座にブラウザで確認できるため、デザインの調整やスタイリングがスムーズに行えます。Tailwind CSSのwatch機能と合わせて使うことで、スタイルの変更を即座に反映させることができ、開発効率が大幅に向上しました。これにより、リアルタイムでのフィードバックが得られるため、開発中のストレスが軽減されました。

Chrome拡張からFirefoxへの移植

Chrome拡張がセキュリティ制限により非公開になってしまうことを受けて、Firefoxに移植することに決めました。ChromeのManifest V3では、拡張の公開が難しくなっており、Firefoxならばその制限が緩やかだったためです。移植作業は、APIの違いなどに戸惑いながらも、なんとか無事に完了しました。

クラス名の並び替え

HTMLのクラス名の並び替えに関しては、ChatGPTに大変お世話になりました。ChatGPTを使って、クラス名を一貫性のある順序に並べ替えるスクリプトを作成し、整理整頓がスムーズに進みました。これにより、コードの可読性が向上し、メンテナンスが容易になりました。

関数名や変数名のリファクタリング

関数名や変数名に悩んだときも、ChatGPTに頼ることが多かったです。適当に名前をつけてから、ChatGPTにリファクタリングと良い名前を提案してもらうことで、コードの可読性を大幅に向上させることができました。

APIの使い方

拡張系のAPIの使い方についても、ChatGPTに調べながら進めました。公式ドキュメントだけでは不明瞭な部分もあったため、ChatGPTで追加の情報を得ることで、問題をスムーズに解決しました。一部、間違った情報が返ってきたこともありましたが、それも一つの学びとして受け止めています。

ChatGPTは、開発作業を効率化するための強力なツールであると実感しました。今後もさまざまな場面で活用していきたいと思います。これからもより良い開発を目指して、頑張っていきたいです！

この記事が参考になれば幸いです。

ChatGPTを使って開発した感想

実はこの記事もChatGPTの書いてもらいました😋
このセクションの上はすべてChatGPTの結果
コードの相談してたChatで記事書いてもらうとコードも出てきちゃうのと長かったのでやめた
この記事は別のChat起こして書いてほしいことを箇条書きで指示した結果

ざっくり感想

  • 思ったより精度が高く優秀なサポートメンバーであった
  • コードの修正は優秀、関数コメントの追加は便利。
  • eslint, tailwindcss, prettier つかって StandardJS形式の開発環境構築のサポートはあまり良い結果が返ってこなかった
  • 開発環境整えるために使ったが、情報が古いこともあって動かないプラグインの組み合わせ設定があったのでそこは不満
  • リファクタリングは結構便利、ただちょっと動かない修正することあるので確認は必須。HTMLのID変えてきた時はびっくりした。
  • 変えるなと指示したところは変更しないで返ってきたが、怖いので前後の比較はキチンとした。支持したらちゃんと変更していないっぽい。
  • ちょっと知りたいことを聞くとめっちゃ返してくるので情報探すのに疲れる場合も、聞き方に気をつけないと返ってメンドくさいのでちょい調べには指示のテクニックが必要かも
  • また使いたいと思った。これからはプライベートの開発では必ず使うだろうな。
  • GitHub Copilotが気になってきた。。。

いまいちChatGPTを完全には信じきれないけど優秀だなとは感じた、
優秀だけどちょいちょいポカする部下として扱うといい？一生懸命私のために働いてくれてありがとう🧠

Discussion