ChatGPTのリリースは、信じられないほどのコード スニペットを思いつく可能性があるため、プログラミング コミュニティに波紋を送りました。

昨年リリースされたGitHub Copilotと比べてどうですか? AIはあなたの仕事の後に来ますか? 確認してみましょう。

GitHub Copilotに関する以前の記事をまだ読んでいない場合は、こちらからチェックできます。

ChatGPT のテスト

GitHub Copilotで実行したのと同じテストを簡単に見てみましょう。

テスト 1: 株価フェッチ

悲しいことに、初めて間違ったコードが生成されました。

関数が として定義されておらずasync、promisesが適切に処理されませんでした。

次の試みはより良かった

奇妙なことに、API キーがなくても機能します(クエリapikeyパラメータにランダムな値を持つキーが含まれている限り)。

結果: GitHub CopilotはChatGPTを置き去りにします。

テスト 2: BFS トラバーサル

今回は、ChatGPTが一気に成功させました。悲しいことに、長すぎてスクリーンショットが画面に収まらなかったため、生成されたコードは次のとおりです。

class Node:
  def __init__(self, value):
    self.value = value
    self.left = None
    self.right = None

class BinarySearchTree:
  def __init__(self):
    self.root = None

  def insert(self, value):
    new_node = Node(value)

    if self.root is None:
      self.root = new_node
      return

    current_node = self.root
    while True:
      if value < current_node.value:
        if current_node.left is None:
          current_node.left = new_node
          return
        current_node = current_node.left
      else:
        if current_node.right is None:
          current_node.right = new_node
          return
        current_node = current_node.right

  def inorder_traversal(self, node, numbers):
    if node is None:
      return
    self.inorder_traversal(node.left, numbers)
    numbers.append(node.value)
    self.inorder_traversal(node.right, numbers)

  def get_numbers(self):
    numbers = []
    self.inorder_traversal(self.root, numbers)
    return numbers

bst = BinarySearchTree()
bst.insert(10)
bst.insert(5)
bst.insert(15)
bst.insert(3)
bst.insert(7)
bst.insert(13)
bst.insert(17)

numbers = bst.get_numbers()
print(numbers)  # [3, 5, 7, 10, 13, 15, 17]

結果: ChatGPTがこれに勝ちました。

テスト 3: 100 個の配列

ChatGPTは、これに対して複数の提案を生成しました

GitHub Copilotが起動されたとき、少し不安定な提案が生成されましたが、現在はChatGPTと同じコードが生成されます。

結果: 同点 (比較するソフトウェアのバージョンによって異なります)

完全な TODO プロジェクトの作成

テストをさらに進めるために、両方のソフトウェアを使用して完全なTODOプロジェクトを作成することにしました。

チャットGPT

1. TODOプロジェクトの作成方法は?

ChatGPTで言及されている手順は非常に包括的です

2.Reactプロジェクトの作成方法は?

3. Todo コンポーネントを作成する

これは私が気に入らなかった部分です。生成されたコードは、従来のクラス コンポーネント構文を使用していました。todosの追加も処理していませんでした

4. Todo コンポーネントを最適化して、Todo の追加と削除を処理し、完了としてマークします。

生成されたコードは次のとおりです (スクリーンショットには長すぎます)。

import React from "react";

// TodoItem component
const TodoItem = ({
 item,
 onDelete,
 onComplete,
}) => (
 <li>
   {item.text}
   <button onClick={onDelete}>Delete</button>
   <button onClick={onComplete}>
     {item.isComplete ? "Undo" : "Complete"}
   </button>
 </li>
);

// TodoApp component
class TodoApp extends React.Component {
 // Define the initial state of the component
 state = {
   todoItems: [],
 };

 // Method to handle adding new items to the todo list
 addTodo = (text) => {
   // Add the new item to the todo list
   this.setState({
     todoItems: [
       ...this.state.todoItems,
       { text, isComplete: false },
     ],
   });
 };

 // Method to handle deleting items from the todo list
 deleteTodo = (index) => {
   // Delete the item at the given index
   this.setState({
     todoItems: this.state.todoItems.filter(
       (_, i) => i !== index
     ),
   });
 };

 // Method to handle completing/undoing a todo item
 completeTodo = (index) => {
   // Update the "isComplete" property of the item at the given index
   this.setState((state) => {
     const todoItems = [...state.todoItems];
     todoItems[index].isComplete =
       !todoItems[index].isComplete;
     return { todoItems };
   });
 };

 // Method to render the component
 render() {
   return (
     <div>
       {/* Form to add new items to the todo list */}
       <form>
         <input
           type="text"
           placeholder="Add a todo item"
         />
         <button type="submit">Add</button>
       </form>

       {/* List of todo items */}
       <ul>
         {this.state.todoItems.map(
           (item, index) => (
             <TodoItem
               key={index}
               item={item}
               onDelete={() =>
                 this.deleteTodo(index)
               }
               onComplete={() =>
                 this.completeTodo(index)
               }
             />
           )
         )}
       </ul>
     </div>
   );
 }
}

5. 最後に、機能コンポーネントを作成し、todo の追加、削除、および完了を処理することについて言及します。

import React from "react";

// TodoItem component
const TodoItem = ({ item, onDelete, onComplete }) => (
  <li>
    {item.text}
    <button onClick={onDelete}>Delete</button>
    <button onClick={onComplete}>
      {item.isComplete ? "Undo" : "Complete"}
    </button>
  </li>
);

// TodoApp component
const TodoApp = () => {
  // Define the initial state of the component
  const [todoItems, setTodoItems] = React.useState([]);
  // Method to handle adding new items to the todo list
  const addTodo = (text) => {
    // Add the new item to the todo list
    setTodoItems([
      ...todoItems,
      { text, isComplete: false },
    ]);
  };
  // Method to handle deleting items from the todo list
  const deleteTodo = (index) => {
    // Delete the item at the given index
    setTodoItems(
      todoItems.filter((_, i) => i !== index)
    );
  };
  // Method to handle completing/undoing a todo item
  const completeTodo = (index) => {
    // Update the "isComplete" property of the item at the given index
    setTodoItems((state) => {
      const todoItems = [...state];
      todoItems[index].isComplete =
        !todoItems[index].isComplete;
      return todoItems;
    });
  };
  // Return the component
  return (
    <div>
      {/* Form to add new items to the todo list */}
      <form>
        <input
          type="text"
          placeholder="Add a todo item"
        />
        <button type="submit">Add</button>
      </form>
      {/* List of todo items */}
      <ul>
        {todoItems.map((item, index) => (
          <TodoItem
            key={index}
            item={item}
            onDelete={() => deleteTodo(index)}
            onComplete={() => completeTodo(index)}
          />
        ))}
      </ul>
    </div>
  );
};

GitHub コパイロット

悲しいことに、 Copilotは React プロジェクトを生成できません。特定のコンテキストでのみコードスニペットを提案できるので、自分で反応アプリを作成することから始めましょう。

1.Reactプロジェクトを作成する

npx create-react-app react-copilot

3. 最後に、座ってモヒートを飲みながら、Copilotが魔法を働かせる時間です。

ファイルの先頭に、実行するタスクに関するコメントが追加されました

トドアイテム

// Functional TodoItem component which takes onDelete,
// onComplete, and item ({ todo: string; completed: boolean })
// as props

// Functional TodoApp component which handles addition,
// deletion & completion of todos. The TodoItem component
// is used to render each todo item

export default function TodoItem({
 onDelete,
 onComplete,
 item,
}) {
 return (
   <div>
     <input
       type="checkbox"
       checked={item.completed}
       onChange={() => onComplete(item)}
     />
     <span
       style={{
         textDecoration: item.completed
           ? "line-through"
           : "none",
       }}
     >
       {item.todo}
     </span>
     <button onClick={() => onDelete(item)}>
       Delete
     </button>
   </div>
 );
}

5.生成TodoApp

import React, { useState } from "react";
import TodoItem from "./TodoItem";

export default function TodoApp() {
 const [todos, setTodos] = useState([]);
 const [todo, setTodo] = useState("");

 const addTodo = () => {
   setTodos([...todos, { todo, completed: false }]);
   setTodo("");
 };

 const deleteTodo = (item) => {
   setTodos(todos.filter((todo) => todo !== item));
 };

 const completeTodo = (item) => {
   setTodos(
     todos.map((todo) =>
       todo === item
         ? { ...todo, completed: !todo.completed }
         : todo
     )
   );
 };

 return (
   <div>
     <h1>Todo App</h1>
     <input
       type="text"
       value={todo}
       onChange={(e) => setTodo(e.target.value)}
     />
     <button onClick={addTodo}>Add</button>
     {todos.map((item, index) => (
       <TodoItem
         key={index}
         onDelete={deleteTodo}
         onComplete={completeTodo}
         item={item}
       />
     ))}
   </div>
 );
}

プロジェクトをセットアップするために追加の作業を行う必要がありましたが、CopilotはChatGPTよりも優れたTodo アプリのコードを生成することができました。

結局のところ、Copilotは開発者がコードをより速く記述できるようにするためのツールであると考えられていますが、ChatGPTは汎用chatbotでありながら開発プロセスを合理化することができますが、タスクがコーディングに集中している場合はGitHub Copilotが圧倒されます! これは私たちに質問をもたらします...

誰があなたの仕事を引き受けますか?

(あなたの心の中で) AIの開発者: *邪悪な笑い声*

ピッチフォークを取り出してGitHub HQを焼き払う前に、一歩下がって全体像を見てみましょう。これらは開発プロセスを合理化するためのツールであり、開発者に取って代わるものではありません。

コードを書くにはまだ開発者が必要です。確かに、これらのツールはコーディングを高速化するのに役立ちますが、人間の入力がなければ、すべてを独自に考え出すことはできません。

不況で人員削減が猛威を振るうニュースはとても怖いと思うかもしれませんが、スキルを磨き続ければ大丈夫です！

風邪薬を飲んで、楽しくスキルアップ！

技術分野の隔週の新しい情報については、私に従ってください!

開発の問題を解決するために、最高評価のフロントエンド開発フリーランサーが必要ですか? Upworkで私に連絡してください

私が取り組んでいるものを見たいですか？私の個人ウェブサイトとGitHubをチェックしてください

接続したいですか？LinkedInで私に連絡してください

私はデジタル遊牧民で、時々旅行します。Instagramで私をフォローして、私が何をしているかをチェックしてください。