テックブログ
#AI #GitHub Copilot #React.js

【AIペアプログラミング】GitHub CopilotのReact開発ユースケース

media thumbnail

こんにちは、株式会社Gizumoでエンジニアをしている田中です。

弊社の10分勉強会でCTOの坂田よりGitHub Copilotを紹介され、そのヤバさを体感してしまったため私もフロントエンド開発で利用してみることにしました。

今回はReact開発でのユースケースをもとにGitHub Copilotがどのように機能するのか見ていきたいと思います。

前提・対象とする読者

この記事は以下を前提として読み進めてください。

  • サンプルコードはReactとTypeScriptで記述
  • 実装の詳細の解説はしない

また、対象とする読者は以下のような方を想定しています。

  • プログラミングをしたことがある方
  • GitHub Copilotに興味がある方、触ったことがある方
  • フロントエンド開発でどのようにGitHub Copilotが機能するか知りたい方

GitHub Copilotとは

GitHub Copilotとは、GitHubが提供するAIペアプログラマーです。

GitHubにてサブスクリプション登録をして、対応エディターに拡張機能を入れるだけで使用できます。

※記事執筆時点でのサブスクリプション料金は月$10でした。詳しくはこちらをご確認ください。

AIペアプログラマー

AIペアプログラマーはコードの自動生成をさまざまなアプローチで行なってくれます。

それは、コメントで書きたいコードを伝える、変数宣言を行う、コードの文脈から生成等さまざまです。

GitHub Copilot について（公式）

GitHub Copilot では、コーディング時にオートコンプリート スタイルの候補を提示する AI ペア プログラマーです。 使用するコードを書き始めるか、そのコードに何をさせたいかを自然言語のコメントで記述することで、GitHub Copilot から候補を取り入れることができます。 GitHub Copilot は、編集中のファイルや関連ファイルのコンテキストを分析し、テキスト エディター内から候補の提示を行います。

GitHub Copilotを使うメリット

  1. 工数削減
  2. モチベーション維持

1. 工数削減

GitHub Copilotがコードを自動生成してくれるため、実装者は必要以上にコードを書く必要がありません。そうすると単純にコードを書く時間の工数が削減できます。

2. モチベーション維持

AIペアプログラミングは楽しいです。めんどくさいことをほとんど担当してくれるため、実装者は本質的な処理を考えることに専念できます。また、コーディングがサクサク進むため実装が楽しくなります。楽しいのでモチベーション維持に繋がります。

GitHub Copilotを使うデメリット

  1. エンジニアの仕事が減る

1. エンジニアの仕事が減る

ネタではなく、、、本当にエンジニアの仕事が減ると思います。後に紹介するテストのユースケースではコンポーネントの単体テストをほぼGitHub Copilotのみで完結させています。人間の担当する領域が減るということはとても喜ばしいことですが、その分仕事が減るということでもあると思います。

実装のユースケース

実装のユースケースとして、以下項目に絞って解説してみます。実際に私が使用して便利だと感じたものを抜粋してます。

stateに応じたコードの自動生成

以下のようにuseStateでstateを定義してそれを利用したハンドラーを定義する場面はかなり多くあります。

※ 本来Inputコンポーネント内でstateやハンドラーを定義するべきではありませんが、あくまで一例として今回は行なっています。

ハンドラーの自動生成

変数定義のconstを書くだけでファイル内で定義されているstateに応じたハンドラーを自動生成してくれます。tabキーを押下することでエディターに入力されます。

⇩ 処理の内部まで実装してくれます。

ハンドラーの自動生成（useCallback）

ReactのハンドラーなのでuseCallbackでメモ化したいですよね。そんな時はコメントを利用します。

HTML要素やコンポーネントへの適用

自動でハンドラーやstateの適用を行なってくれます。

カスタムhooks

構成がある程度決まっているカスタムhooksはGitHub Copilotに任せましょう。

Inputコンポーネント用のカスタムhooks

日本語で書いたコメントの内容をDeepLで翻訳しただけのものです。

日本語でも補完してくれますが、やはり英語の方が精度が高いです。

⇩ 足りないimportは後で足してあげます。

⇩ カスタムhooksから返す値まですべて自動生成してくれました。

API通信用のカスタムhooks

API通信用のカスタムhooksも良い感じに作ってくれます。
テスト用によく利用するJSONPlaceholderを利用しています。

⇩ パッケージにも対応しています。

⇩ 外部APIを叩きたい時、そのURLもGitHub Copilotが補完してくれます。useEffectを使用して初期表示時にstateへ値をセットしてくれています。

StoryBook

フロントエンドフレームワークを使った開発ではStoryBookを利用されている方も多いのではないでしょうか？

StoryBookの構成はテンプレート化されがちですが、コンポーネントごとにPropsが異なるため完全コピペというわけにもいきません。そんなときにGitHub Copilotが活躍します。

MyButton.stories.tsxは1行目のコメント以外、GitHub Copilotの自動生成によるものです。

※ StoryBookのコード行数が多いため画像ではなくコードでの解説としています。

import clsx from 'clsx';
import { ComponentPropsWithoutRef, FC, ReactNode } from 'react';

export type MyButtonProps = {
  btnType: 'info' | 'error' | 'success' | 'warning' | 'primary' | 'secondary';
  children: ReactNode;
} & ComponentPropsWithoutRef<'button'>;

export const MyButton: FC<MyButtonProps> = ({
  btnType,
  children,
  className,
  onClick,
  ...props
}) => {
  return (
    <button
      className={clsx('btn', `btn-${btnType}`, className)}
      onClick={onClick}
      {...props}
    >
      {children}
    </button>
  );
};
// MyButton Component Story

import { Story, Meta } from '@storybook/react';
import { MyButton, MyButtonProps } from './MyButton';

export default {
  title: 'MyButton',
  component: MyButton,
  argTypes: {
    btnType: {
      control: {
        type: 'select',
        options: ['info', 'error', 'success', 'warning', 'primary', 'secondary'],
      },
    },
  },
} as Meta;

const Template: Story<MyButtonProps> = (args) => <MyButton {...args} />;
export const Primary = Template.bind({});
Primary.args = {
  btnType: 'primary',
  children: 'Primary',
};

...省略

export const Warning = Template.bind({});
Warning.args = {
  btnType: 'warning',
  children: 'Warning',
};

コードを組み合わせる

GitHub Copilotはプロジェクトないしはファイル内に定義したコードを組み合わせて文脈からコードを生成してくれます。以下は複数のラジオボタンをコンポーネントを用いて表示する例です。

まず、複数のラジオボタン用にオブジェクトを定義します。

const radioObj = {
  name: 'animal',
  group: [
    {
      label: '犬',
      id: 'dog',
      value: 'dog',
      isDisabled: false,
    },
    {
      label: '猫',
      id: 'cat',
      value: 'cat',
      isDisabled: false,
    },
    {
      label: '鳥（非活性）',
      id: 'bird',
      value: 'bird',
      isDisabled: true,
    },
  ] as const,
};

その後同じファイル内の表示したい箇所に{}と打ち込むだけで以下のような補完を出してくれます。

⇩ プロジェクト内で定義済みのコンポーネントを使用してくれます。

⇩ … Propsもすべて補完してくれました。isDisabledは存在しないPropsなのでリントエラーが出ています。

上記はisDisabledの部分を正規のProps名に修正すれば実装完了です。

テストのユースケース

テストのユースケースは単純ですが一番インパクトが強いです。

テストケースからコードを生成

テストケースの内容からコードを自動生成してくれます。（なんならテストケースまで自動生成してくれる・・・）

describe('MyInput', () => {
  test.todo('画面に表示されること')
  test.todo('文字を入力できること')
  test.todo('placeholderに「ex. example@email.com」')
})

上記コードから.todoを消していくだけでテストがほぼ完成します。

⇩

⇩ … GitHub Copilotが自動生成できない部分は後で足してあげます。（ex.以降）

モックの自動生成

API通信が絡む処理のテストはMSW等のライブラリを使用してモックサーバーを準備することが多いと思います。

モックサーバーにはテストデータが必要ですが、「内容を考えて実装する」工程には多少のコストがかかります。また、単純作業からモチベーションの低下にもつながります。GitHub Copilotを使うことでそのコストを抑えつつモチベーションを維持しましょう。

モックのためのコメントを書く

モック生成のために必要なコメントは以下2つです。

  1. エンドポイント
  2. レスポンス型

これらをコメントで教えてあげることであとは自動生成してくれます。

⇩ posttypeの型からレスポンスを自動生成してくれています。

⇩ すべて自動生成してくれました。「// get detail …」はGitHub Copilotが文脈から予測して候補で提示してくれているものです。

最後に

ここまで読んでいただきありがとうございました！
GitHub Copilotはいかがだったでしょうか？使い方の幅はまだまだたくさんあると思いますがAIペアプログラミングとは何かを知っていただけたのではないでしょうか。

この記事を読んでGitHub Copilotを今まで知らなかった・使ったことなかった人が少しでも使ってみようと思っていただけたなら幸いです。

個人的な感想として、
GitHub Copilot最大限の力を発揮するにはどうしたら良いのだろうと自然と考えることから、GitHub CopilotのようなAIがプログラミングしやすいように設計・開発を行うAI駆動開発も今後主流になっていきそうだなと感じています。

皆さんもぜひ導入して使ってみてください！

Ranking

人気の記事

人気のタグ

#DX化 #ITスキル #IT人材不足 #IT業務 #IT運用 #アウトソーシング #キッティング #セキュリティ対策 #テレワーク #情シス #業務効率化 #業務改善

関連記事

少しでも開発にお困りの方は
相談しやすいスペシャリストにお問い合わせください

お問い合わせ
  1. breadcrumb-logo
  2. メディア
  3. 【AIペアプログラミング】GitHub Copilo...