ChatGPT と CoPilot をコーディングアシスタントとして使用した方法

元のリンク: https://notes.drdroid.io/how-i-use-ai-for-code-assistance

私は、プログラミングする際に多くの利便性をもたらす、高品質で機能的なコードを作成する際の AI の実用的なアプリケーションをいくつか検討してきました。私は仕事でChatGPT Web ツールとCopilot (両方とも同じコアテクノロジに基づいて構築されているため、Copilot は GPT のバリエーションと考えることができます) を使用してきました。

主要な概要

Github Copilot:自動コード補完の速度を向上させるために使用され、下級ソフトウェアエンジニアの就職面接の準備を十分に整えた候補者とみなされ、記述する必要のあるコードタスクをそれに渡すことができます。
- 私が高く評価している機能:
  - VSCode、IntelliJ、Sublime のプラグインを提供します
  - 私が何を書きたいのかをうまく予測してくれます。完璧ではありませんが、いくつかの一般的なコードスニペットをすばやく書くのにすでに役立っています。
ChatGPT : 問題を解決するためのエンドツーエンドの命令セットを取得するか、複数のクラスと関数にわたる完全なユースケースをカバーするコードを作成します。さらに、生成するコードも解釈しますが、オートコンプリートに関しては Copilot では提供できません。

次に、私がプログラミングで AI を活用する 6 つの方法を紹介します。

1. CSS生成（Github Copilot）

Dr Droidを構築する過程で、私は、reactjs アプリケーションを自分で作成し、新しいコンポーネントを作成するという目標を設定しました。Figma を使用してプロトタイプを作成しましたが、それをページデザインに埋め込むにはある程度のスキルが必要です。私は主にバックエンド開発を行っているため、グリッド、モバイル互換性、間隔を処理する CSS を書くのは少し難しかったです。HTML 要素を含むクラスを作成し、プロンプト内の Figma プロトタイプの要素を説明しました。Copilot はこのクラスに CSS を追加し、実際の測定値に基づいて予測を行います。これは後で調整できますが、どの CSS スタイルを使用するかについての混乱は解消されました。

入力：

"""3 つのカテゴリの CSS を定義します。1 つは親 div、2 つは子 div、子 div は水平に配置され、内部テキストはそれぞれ左と右に配置されます。""

出力：

.parentDiv {
    
    
  flex-direction: 'inherit';
  display: 'flow-root';
  padding: '2px';
}

.leftDiv {
    
    
  width: '30%';
  height: '100%';
  background: 'white';
  float: 'left';
  border: '1px solid black';
    text-align: 'left';
}

.rightDiv {
    
    
  width: '70%';
  height: '100%';
  background: 'white';
  float: 'right';
  border: '1px solid black';
    text-align: 'right';
}

2. Copilot を使用して関数を作成する: 並べ替えとデータ操作に重点を置く

Dr Droid プラットフォームでは、さまざまな機能を実現するために多くのデータ変換を行う必要があります。私のテストによると、Copilot はヒントに基づいてこれらの変換関数を作成することに非常に優れていることがわかりました。また、古いフィールドを参照して新しいフィールドを記述し、2 つのデータオブジェクトを異なるスキーマを持つ 1 つのオブジェクトにマージする関数を記述することも得意です。

たとえば、2 つの文字列キーに基づいて配列内の JSON オブジェクトをマージし、3 番目の数値キーに個別の統計を与える関数が必要です。コパイロットは、変数の名前を変更せずにコード環境で作成でき、実行に使用するライブラリを指定できます。

入力：

"""配列内の JSON オブジェクトを 2 つの文字列キーにマージし、3 番目の数値キーの平均と中央値の統計を与える関数を作成します。"""

出力：

function mergeJsonArray(jsonArray, key1, key2, key3) {
    
    
  let mergedJson = {
    
    };
  let mergedJsonArray = [];

  jsonArray.forEach(item => {
    
    
    if (item[key1] in mergedJson) {
    
    
      if (item[key2] in mergedJson[item[key1]]) {
    
    
        mergedJson[item[key1]][item[key2]].push(item[key3]);
      } else {
    
    
        mergedJson[item[key1]][item[key2]] = [item[key3]];
      }
    } else {
    
    
      mergedJson[item[key1]] = {
    
    };
      mergedJson[item[key1]][item[key2]] = [item[key3]];
    }
  });

  for (const key1 in mergedJson) {
    
    
    for (const key2 in mergedJson[key1]) {
    
    
      let sum = 0.0;
      let median = 0.0;
      let mean = 0.0;
      let count = 0;
      let min = 0.0;
      let max = 0.0;

      mergedJson[key1][key2].forEach(item => {
    
    
        sum += item;
        count += 1;
      });

      mean = sum / count;

      mergedJson[key1][key2].sort((a, b) => a - b);
      median = mergedJson[key1][key2][Math.floor(mergedJson[key1][key2].length / 2)];

      min = mergedJson[key1][key2][0];
      max = mergedJson[key1][key2][mergedJson[key1][key2].length - 1];

      mergedJsonArray.push({
    
    
        [key1]: key1,
        [key2]: key2,
        'count': count,
        'sum': sum,
        'mean': mean,
        'median': median,
        'min': min,
        'max': max
      });
    }
  }
    return mergedJsonArray;
}

3. コパイロットコーディング: 繰り返しパターンを認識して使用する

複数のデータベーステーブルにわたって動作するテスト環境用のデータ削除スクリプトを作成しています。これらのテーブルにはすべてタイムスタンプ列がありますが、名前は異なります。コメントにすべてのテーブル名をカンマ区切りでリストし、最初のテーブルの削除 SQL クエリと、削除コマンド全体の結合カーソルの使用法を書きました。これが完了すると、コパイロットはこれらのテーブルの反復ごとにコードブロックを自動的に提案し始め、同時にテーブル内のタイムスタンプ列の名前に従って列名も変更します。ただし、削除の可能な順序は理解されず、モデルファイルに記述された順序で実行されるだけです。

私は IntelliJ と Sublime Text で Co-pilot プラグインを使用しています。IntelliJ プラグインは、特に他のファイルのクラス定義のコンテキストを扱う場合に、その推奨事項がより賢明であることがわかりました。

4. ChatGPT を使用して、要件を記述し、いくつかの変数を調整するだけで React.js コンポーネント全体を生成します。

React-flow という React.js ライブラリを使用するときに、いくつかのコンポーネントをカスタマイズして、ライブラリ内の元の部分を置き換えたいと考えています。私の目標は、カスタムの視覚効果と、コンポーネントの上に追加のテキストを追加することです。このドキュメントでは、既存のコンポーネントを新しいコンポーネントに置き換える方法について詳しく説明していますが、元の機能を保持したまま拡張する方法については明示的に言及されていません。

そこで、ChatGPT に質問をしました。

反応フローで、最後に大きな矢印が付いた太い紫色の線であるカスタムエッジを作成する方法

私が受け取った応答は次のとおりです。

import React from 'react';

const CustomEdge = ({ id, sourceX, sourceY, targetX, targetY, style = {} }) => {
  const edgePath = `M ${sourceX},${sourceY} L ${targetX},${targetY}`;

  // 计算箭头的角度
  const angle = Math.atan2(targetY - sourceY, targetX - sourceX);
  const arrowLength = 10;// 箭头的长度

// 计算箭头头部的点
  const arrowPoints = [
    [targetX - arrowLength * Math.cos(angle - Math.PI / 6), targetY - arrowLength * Math.sin(angle - Math.PI / 6)],
    [targetX, targetY],
    [targetX - arrowLength * Math.cos(angle + Math.PI / 6), targetY - arrowLength * Math.sin(angle + Math.PI / 6)],
  ];

  return (
    <>
      <path
        id={id}
        d={edgePath}
        style={
   
   {
          fill: 'none',
          strokeWidth: '4px',
          stroke: 'violet',
          ...style, // 允许覆盖样式
        }}
      />
      <polygon
        points={arrowPoints.map(p => p.join(',')).join(' ')}
        fill="violet"
        stroke="violet"
        strokeWidth="1"
      />
    </>
  );
};

export default CustomEdge;

// 在你的 React Flow 图中使用自定义边缘组件
import ReactFlow from 'react-flow-renderer';
import CustomEdge from './CustomEdge';

const elements = [
// ... 你的节点和边
];

const App = () => {
  return (
    <div style={
   
   { height: '500px' }}>
      <ReactFlow elements={elements} edgeTypes={
   
   { customEdge: CustomEdge }} />
    </div>
  );
};

export default App;

このコードでは、選択した CSS スタイルに若干の調整を加えるだけです。このコードにより、コーディング時間を約 30 分節約でき、コードは問題なく動作しました。

5. ChatGPT からコードスニペットをリクエストします。操作が失敗した場合は、エラーメッセージをフィードバックすると、ChatGPT は問題が解決するまでフィードバックに従って修正します。

ChatGPT は、徹底的なフィードバックに基づいて回答を改良することに優れています。ただし、フィードバックは単に再生成したり、より良い解決策を見つけたりするためのリクエストではなく、フィードバックでコンテキスト情報を提供することもできます。たとえば、react-flow グラフでノードの自動レイアウトを実装したいのですが、この目的を達成できる cola というレイアウトがあることがわかりました。インターネット上で特定の実装例を見つけるのは難しいため、ChatGPT に質問します。

反応フローとコーラレイアウトを使用してノードを配置する方法を示すサンプルコードを教えてください

出力：

import React from 'react';
import ReactFlow, { ReactFlowProvider, addEdge, removeElements, Controls } from 'react-flow-renderer';
import { ColaLayout } from 'react-flow-renderer/dist/layoutCola';

const MyFlowComponent = () => {
  const initialElements = [
    { id: '1', type: 'input', data: { label: 'Input Node' }, position: { x: 0, y: 0 } },
    { id: '2', data: { label: 'Node 2' }, position: { x: 200, y: 50 } },
    { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 } },
    { id: 'e1-2', source: '1', target: '2' },
    { id: 'e2-3', source: '2', target: '3' },

  ];

  const onLoad = (reactFlowInstance) => {
    reactFlowInstance.fitView();  // 使图形适应视口
  };

  const layout = {
    type: 'cola',
    edgeLength: 180,
    animate: true,
    randomize: false,
    maxSimulationTime: 1500,
  };

  return (
    <div style={
   
   { height: '500px' }}>
      <ReactFlowProvider>
        <ReactFlow elements={initialElements} onLoad={onLoad} layout={layout}>
          <Controls />
        </ReactFlow>
      </ReactFlowProvider>
    </div>
  );
};

export default MyFlowComponent;

// 使用 npm 安装 cola:
npm install react-flow react-flow-renderer

ただし、指示に従ってインストールした後でも、コードは動作せず、エラーが発生しました。

そこで、ChatGPT にもう一度尋ねました。

「モジュールが見つかりません: エラー: パッケージパス ./dist/layoutCola がパッケージからエクスポートされていません」のようなエラーが表示されます。

出力：

我为这个混淆道歉。看来 layoutCola 模块不再直接在 react-flow-renderer 包中可用。要在 React Flow 中使用 "cola" 布局算法，你可以安装 react-flow-dagre 包，它提供了包括 "cola" 布局在内的额外布局选项。

その後、ChatGPT が代替コードブロックを提供し、新しいライブラリをインストールするよう勧めてくれました。

# 使用 npm
npm install react-flow react-flow-renderer react-flow-dagre

しかし、今回はインストール中にエラーが発生しました。

npm ERR! 404 Not Found - GET <https://registry.npmjs.org/react-flow-dagre> - Not found

今では、ChatGPT は私のニーズを理解し、たとえ私が率先して質問しなかったとしても、ノードレイアウトの本来の意図を実現するように私を導くために他の提案をし始めました。最終的に、コーラレイアウトを使用していなかったにもかかわらず、目標を達成し、問題は解決されました。

近い将来、Kafka クラスターと OpenSearch サービスの間にメッセージ接続を確立する予定です。Kafka は対応するコネクタを提供していますが、私はそれについて十分に知りません。オンラインでいくつかの構成例を検索したところ、S3 バケットに接続するように Kafka を構成する詳細な例は見つかりましたが、OpenSearch をデータシンクとして使用する例は見つかりませんでした。そこで、ChatGPT に操作方法を尋ねたところ、この操作を完了するのに役立つ完全なガイド付き手順が提供されました。この回答を Web で検索し、ChatGPT によって自己生成されたものなのか、他の例に基づいて派生したものなのかを調べましたが、同様の記事は見つかりませんでした。

制限と課題

AI プログラミング支援によりプログラミング効率は大幅に向上しましたが、それが完璧ではないことも冷静に認識する必要があります。生成されるコードに完全に依存するのではなく、その出力を段階的に確認してテストする必要があります。

使用中に、いくつかの制限も見つかりました。

場合によっては、Copilot は現在のコードコンテキストに存在しない変数を生成します。これは、変数の命名ロジックはコーディング時に考慮されていますが、コードの正しい動作が保証されていないためと考えられます。
特定のツールまたはテクノロジーの操作ガイドを ChatGPT にクエリすると、トレーニングデータベースの適時性により、出力結果が古く見えることがあります。一部のツールは更新され、インターフェイスが変更され、ChatGPT によって提供される結果と一致しない可能性があります。AWS のいくつかのサービスを使用しているときにこの状況に遭遇しました。

職場でのプログラミングを支援するために AI をすでに使用していますか? あなたの見解や経験は何ですか?