ChatGPT と Copilot: Web開発でのAIコーディングアシスタント

単なる無意味なツール、それとも便利なツールですか？ Heise Online の Web 開発チームは、アシスタントにそれらを見てもらい、どれが優れているかを判断しました。

ChatGPT はリリースされてから、皆の注目を集めています。このハイプがどれだけ沈静化するかは、公開テスト段階が終わり、OpenAI がこの機能に価格を設定する時に明らかになるでしょう。それでも、この技術とそれに関連する技術が提供するソフトウェア開発の日常における可能性を考える価値はあります。

ChatGPT による「聖杯レイアウト」についての応答

「聖杯レイアウトとは何ですか？」という質問に対するChatGPTの回答を見てみましょう（図1）。ChatGPTは現在、OpenAIアカウントを通じて無料で使用可能です。これは、できる限り自然な対話を目指して最適化されたGPT-3.5言語モデルのチャットインターフェースです。話題は特に指定されていませんが、同社はインターネット上で可能な限り多くのことを試し始めました。ChatGPTは2021年のインターネットでトレーニングされたため、それ以降の開発については認識していません。それでも、質問の仕方が適切であれば、非常に役立つツールになることがあります。テストとして、小さなフロントエンドタスクを実施しました。

「聖杯レイアウト」は、UIやWeb開発について詳しく説明することなく、ChatGPTには既に知られていました（図1を参照）。

その結果、全てをコードに直接実装し、スタイリングにはTailwindを使用しました。クラス宣言も、要求されることなく追加されました（図2を参照）。ChatGPTは応答性については既に知っていましたが、コード例ではそれが十分に実装されていませんでした。ナビゲーション列の幅は固定されており、スマートフォンでは問題となります。フッターとヘッダーの高さも固定されています。それとは別に、この例は出発点として役立ちます。

Flexboxを使用するのはあまり適切ではないと感じました。CSSグリッドを使用して実装する方がより適切だと思います。それはできますか？もちろんです（図3を参照）。ヘッダーとフッターの高さは固定のままですが、コンテンツエリアとナビゲーションの幅は変わります。これが理想的なソリューションであるかどうかは分かりませんが、応答性の高い動作という点では、以前のFlexbox実装よりも便利です。

最近では多くのことがReactで行われているため、全てをシンプルなReactコンポーネントにまとめたいと考えています。以前の静的な内容もパラメータとして渡すことができるはずです（図4参照）。

質問せずとも、先頭には適応されたコードの使用例があり、このトピックを初めて使う場合に役立ちます。ChatGPTの例には小さなエラーが混入しています。 <nav> タグは属性に渡され、属性値を出力するためにレイアウト自体に再設定されるので、二回出力されます。しかし、エラーは簡単に発見でき、修正も容易です。

最終的に、ChatGPTを改修したいと考えています。ナビゲーションは、順序無しリストとして直接出力され、オブジェクトで埋める必要があります（図5参照）。これも使用例を含めて期待通りに機能します。

このタスクに対するChatGPTからの回答：ナビゲーションは順序無しリストとして表示されるべきであり、ReactコンポーネントはURLとリンク名で構成されるオブジェクトを反復処理する必要があります。目標を達成するためにChatGPTを使用した対話を繰り返す必要はありませんが、代わりに、すべての条件を指定してより長いリクエストを行うことができます。ただし、ChatGPTが常に同じ結果になるとは限らず、この場合も誤った結果が生成されることも明らかです。答えのReact部分が機能する場合、レイアウト部分では状況が全く異なります。ChatGPTの実装では、垂直方向のスペースを4つの行に単純に分割し、そのうちの3つは幅全体に広がります。これは聖杯レイアウトとは何の関係もなく、魅力的なWebサイトレイアウトにつながることはほとんどありません。さらに、前の例では意味的に適切なHTMLタグが使用されていましたが、ここでは<div>スープのみが示されています（図6参照）。

Copilot

CopilotはGitHubの製品で、当初は無料トライアル段階にありました。これはOpenAIのCodexに基づいており、GitHub上のパブリックコードでトレーニングされています。現在試用期間は終了しており、GitHubでは使用料として月額10ドルまたは年間100ドルを請求しています。

Copilotは、可能な限り賢い提案を行う自動提案のように機能します。したがって、最初にコードの入力を始めると、Copilotが次に何が起こるかを提案します。エディターでグレー表示された内容が気に入った場合は、その提案を確認し、それがエディターに表示されます。あるいは、機能の説明を含むコメントをエディターに入力すると、Copilotがそこから提案を導き出すこともできます。

提案には、小さなコードスニペットを指定することも、完全な関数を含めることもできます。GitHubによると、Copilotは、プロジェクトが全体的によく整理されており、関数とパラメータに意味のある名前があり、適切に定式化されたdocstringがある場合に最も効果的に機能します。

現在の使用状況

部門内のいくつかの同僚は、すでにテスト段階でCopilotを使用しており、特に定型コードの生成に役立つと感じています。特定のコードを自分で入力する必要がなくなるため、作業が迅速に進むのです。これは、「ボイラープレートや繰り返しのコードパターンの生成に費やす時間を削減し、より重要な作業に多くの時間を割ける」というGitHubの宣伝文句に沿っています。

しかし、原則として自分自身でコードを理解していない場合、提案されたコードは役に立たないことがあります。第一に、Copilotは「のみ」コードを完成させるものですから、自分自身でコードを書いていなければ、何も完成させる必要はありません。しかし、Copilotが意図した通りに機能したとしても、提案が常に有用であるとは限りません。提案は、「完全に失敗する」、「現状維持で問題ない」、そしておそらく最も一般的な「何らかの調整が必要」という三つに分かれます。もちろん、後者の場合は、コードを自分で理解する必要があります。

つまり、Copilotは、プログラミングの知識がない人がいきなりプログラミングできるツールではありません。しかし、GitHubの製品名が示すように、それは単なる「副操縦士」であり、依然として「操縦士」が必要です。

ChatGPTの場合

状況はChatGPTで異なります。プログラミングの知識がない人でも、ChatGPTを使って書かれた例がオンラインに存在します。エラーが発生すると、エラーメッセージがChatGPTに送り返され、原因についての情報を得ることができます。しかし、プログラミングの知識がない場合、返されたコードの品質を評価することはほとんど不可能です。結局のところ、「機能するかどうか」になります。

これまでのところ、ChatGPTを生産的な用途に使用していません。これは、後でどれだけのコストがかかるか、またそのメリットがまだ十分であるかどうかがまだ明確ではないためです。

さらに、システムには制限があることに留意する必要があります。Copilotは、GitHubの公開コードベースが主に英語であり、英語でトレーニングされているため、英語で最も効果的に動作するとされています。また、新しいフレームワークやその新バージョンの公開コードはほとんどないため、長期にわたって古いバージョンの提案しか得られないことがあります。

前述したように、ChatGPTは2021年にトレーニングされたため、その後にリリースされたコードに基づいて提案を行うことはできません。また、ChatGPTは、そのトピックに関する自分の知識レベルがどれだけ広範であるか、何が（まだ）分からないかにかかわらず、ほぼすべての質問に完全な自信を持って答える、典型的な過信気味のプログラマーのように振る舞います。ChatGPTは実際には内容を理解しておらず、学習したパターンに従って回答を構築しているだけなので、ChatGPTの回答は批判的に疑問視されるべきです。

展望

CopilotやChatGPT、およびこの種の他の製品は非常に便利であり、将来的には、最良の回答を得るためにプロンプトを適切に作成することが重要になるでしょう。

考えられる応用例としては、フレームワークを初めて使用する際や、プロトタイプが初めて必要な場合に、ChatGPTが最初のセットアップをサポートすることがあります。その後、自身でプログラミングを続け、支援ツールとしてCopilotを使用することが考えられます。さらに、独自のコードベースでトレーニングされたモデルは、リファクタリングをサポートしたり、知らないかもしれない類似のコードがすでに存在するかどうかを指摘したりするのに役立つかもしれません。

いずれにせよ、私たちは新しい展開に興奮しており、まだ自分たちの仕事が危機に瀕しているとは思っていません。この話題についてどう思いますか？あなたの経験はすでにありますか？または、この方向で他のツールに関するヒントがあれば、フォーラムでの活発な議論を楽しみにしています。

 

BLOG