田口和裕の「ChatGPTの使い方！」 第27回

ChatGPT「canvas」使い方と、Claude「Artifacts」との違いを解説　文章作成やコーディングがスイスイできます

テキストとは異なるツール群

　canvasでプログラムコードを生成した場合、画面の右下にはテキストの場合と同様に5つのツールを表示するアイコンが表示されるが、ツールの内容はテキストとは異なっている。

コードレビュー

　まずは「コードレビュー」、これはテキストの「編集を提案する」と同様に、改善点や修正点を指摘してくれるツールだ。

　クリックするとコード内の問題のある部分にアンダーラインが引かれ、右側に修正案が表示される。

　テキストの場合と同様、内容が妥当だと思えば「適用する」をクリック。無視したい時は右上の「x」をクリックしよう。

　なお、テキストと異なり英語で表示されてしまっているが、これもチャットウィンドウで「日本語でレビューして」とでも頼めば日本語に直してくれる。

言語に移植する

　これは生成されたコードを別のプログラム言語に移植・翻訳するツールだ。

　移植可能な言語は「PHP」「C++」「Python」「JavaScript」「TypeScript」「Java」の6つ。ここでは「JavaScript」を選んでみよう。

　PythonコードがJavaScriptコードに書き換えられた（ここでは動作検証はしていません）。

　なお、このツールで候補として出される言語は上記の6つだが、GPT-4oに質問すると他にもたくさんの言語に対応している。

　とは言え、すべての言語間で移植・翻訳が可能なわけではない。 文法・パラダイムの違い、標準ライブラリと機能の違い、サードパーティライブラリなど様々な問題があるため、簡単なアルゴリズムや数学的処理などは比較的簡単に言語間で翻訳できるが、複雑なシステムやフレームワークに依存するコードの翻訳には相応の時間と労力が必要なようだ。

バグを修正する

　「バグを修正する」ツールは名前のとおりクリックするとコードのバグを探し修正してくれる。

　修正した内容はチャットウィンドウで詳しく説明してくれる。

　前述の「コードレビュー」が可読性や保守性などコードの品質を向上させることが主な目的なのに対し、こちらの「バグを修正する」は特定のバグや不具合を修正することが目的だ。

ログを追加する

　「ログを追加する」をクリックすると、コード内の各所にデバッグに役立つ標準出力の処理などを挿入してくれる。

　下図の赤で囲んだ部分が標準出力の処理だ。「print()」関数を使ってプログラムの進行状況をターミナルなどの標準出力に表示するようになっている。

コメントを追加する

「コメントを追加する」をクリックすると、コード全体に対して複数のコメントを自動で挿入してくれる。コメントを追加することにより、コードを読む際に内容が理解しやすくなる。

　赤で囲まれた部分が追加されたコメントだ。Pythonの場合、文頭に「#」の付いた行はコメント扱いとなる。

　コメントを日本語にしたい場合も簡単。チャットでお願いすればいいだけだ。