GMO DevelopersDay
GMO DevelopersDay
2024.11.29Fri - 11.30Sat YouTube Live
イベント開催まであと16

WebコーダーのGitHub Copilot活用術

こんにちは。
GMOインターネットグループ株式会社 クリエイティブ部 フロントエンドエンジニアの山名です。

Webコーダーとして業務レベルでどのようにGitHub Copilotを活用しているかご紹介します!

はじめに

現在GMOインターネットグループは全社的にAI活用に取り組んでいます。

私が所属するクリエイティブ部フロントエンドチームでもGitHub Copilotが導入されて約3ヶ月が経ちますが、もう使う前には戻れないくらいその便利さを実感しています。

そんなGitHub Copilotですが、一通り業務内で活用してみて、なんとなく便利な使い方やパターンが見えてきましたので、「WebコーダーのGitHub Copilot活用術」としていくつかご紹介していきます!

前提:GitHub Copilotとは

GitHub CopilotはAIを用いてコーディング作業を支援する有料サービスです。
具体的にできることを、実際にCopilotに聞いてみました。

GitHub Copilotを活用すると何ができるのか教えてください。

Copilot

GitHub CopilotはAIプログラミングアシスタントで、以下のようなことが可能です:

・コードの自動補完:GitHub Copilotは、あなたがタイプするにつれてコードを自動的に補完します。これにより、新しいAPIを学んだり、既存のコードを早く理解したりするのが容易になります。

・コードの生成:GitHub Copilotは、あなたが書き始めたコードから意図を推測し、必要なコードを生成します。これにより、新しい機能の開発やバグの修正が効率的になります。

・コードの学習:GitHub Copilotは、あなたが書いたコードから学習します。これにより、あなたのコーディングスタイルやプロジェクトの特定のパターンを理解し、それに基づいて提案を行います。

・コードのレビュー:GitHub Copilotは、あなたが書いたコードをレビューし、潜在的な問題を指摘します。これにより、コードの品質を向上させることができます。

ただし、GitHub Copilotはあくまでアシスタントであり、全てのコードを自動的に生成したり、全てのバグを見つけ出したりするわけではありません。あなた自身の判断と経験が重要です。

とのことです。

他にも、チャット機能から様々な質問をすることもできるため、本当に優秀なアシスタントが常にいるような感覚になります。

ちなみに、

GitHub CopilotGPT-3.5 Turbo
GitHub Copilot ChatGPT-4

が使われているそうです。

ある程度のコードの叩き台を生成するときは通常のGitHub Copilot、ライブラリの使い方や詳細な回答が欲しい場合はGitHub Copilot Chatを使うなどの使い分けもできますね。

GitHub Copilot活用例

基本のスタイル生成

作りたい形などのイメージをテキストで入力することで、即座にそれっぽいコードを生成してくれます。

特に「吹き出し」や「リボン」など擬似要素を含めた形の長めなスタイリングは、書き慣れていたとしても生成した方が早かったりすることもしばしばあります。

実際にコメント部分とクラス名のみを入力して生成した例です。

コードがサジェストされるまでは0.5秒程度ですが、その後修正する時間を考えてもかなり早くなっています。

羅列データの変換

エクセルから持ってきたような羅列されたデータに対しては、HTMLのリスト要素や配列などの形式を指定すれば一括で変換したコードを生成してくれます。

地味といえば地味なんですが、データの数が多くてしかもツールとか使えない状況だと本当に助かります。

コメントにクラスの追加や○個目の要素に〜などの指示を入れることで、ほぼ修正も必要なく生成できるのも便利です。

CSSからSCSSへの書き換え

リファクタリングなどでCSSのコードをSCSS表記に移管するのはなかなかに面倒な作業ですが、変換したい部分を選択して「SCSS形式に変換」とするだけで、クラス名やネストをしっかり守ったコードに変換してくれます。

正規表現のサポート

正規表現も条件や目的が明確であれば、ある程度の精度でコードを生成してくれます。

複雑な正規表現の例として、メールアドレスバリデーションのための正規表現をCopilot Chatに聞いてみました。

検証は別途必要だとしても、説明付きでここまでの正規表現を生成してくれるのはありがたいですね。

まとめ

個人的な視点で便利な使い方などをいくつかご紹介しましたが、コード生成の精度が上がってきたり使用者のAI活用スキルが向上することでまだまだ便利な活用方法が出てくるのではないかと思っています!

ただ、やはり現状では生成したコードが本当に正しい挙動をするのか。Webコーダー視点で言えば、デザイン的に問題ないスタイリングがされているかなど、人の目が必要な部分があるのも事実です。

AIは積極的に活用しつつ、あくまで補助としてこれまでの制作に組み込みながらうまく付き合っていくのが必要ですね。

ブログの著者欄

山名 流聖

GMOインターネットグループ株式会社

2022年度新卒入社 / ドメイン・ホスティング事業本部 クリエイティブ部 フロントエンドチーム 商材サイトやコーポレートサイトの保守・運営に携わっています。

採用情報

関連記事

KEYWORD

採用情報

SNS FOLLOW

GMOインターネットグループのSNSをフォローして最新情報をチェック