「ChatGPT Canvas」で生産性爆上げ！文章作成＆コーディングが超快適に！

この記事の内容

• ChatGPT Canvasは、左側でチャット、右側で成果物を編集できる2ペイン構成の新機能です
• 文章作成では、既存のテキストを保持しながら見出し追加や部分更新が可能です
• コーディングでは、モデル変更・コメント追加・コードレビューなどを会話で指示できます
• コードレビュー結果は「適用する」「バッテンで却下」と選択でき、差分管理が直感的です
• 言語移植・バグ修正・ログ追加など、よく使う操作はショートカットボタンとして用意されています

ChatGPT Canvasとは

ChatGPT Canvasは、ChatGPT上で文章やコードを作成する際に、左側でチャット、右側で成果物という2ペイン形式で作業できる機能です。執筆時点ではベータ版として提供されています。

従来は、ChatGPTに文章やコードを生成してもらうたびに、出力結果をコピー＆ペーストしながら編集するという手順が必要でした。Canvasを使うと、右側の成果物をチャットの指示で直接更新できるため、作業フローが大幅にシンプルになります。

利用するには、モデル選択画面で「ChatGPT 4 with Canvas」を選択します。

文章作成での使い方

ブログ記事を作成する

まずは文章作成の例として、ブログエントリーを作ってみましょう。

トピックを指定しない場合、ChatGPTがテーマを確認してきます。「ChatGPTについてのブログでお願いします」と返すと、本文が右側のパネルに表示されます。

成果物を部分的に更新する

右側に文章が表示された状態で、チャットに追加の指示を送ります。

従来であれば文章全体が再生成されていましたが、Canvasでは既存の文章をそのまま保持しつつ、見出しだけが追加されます。

続けて、具体的な内容の追加も同様に行えます。

指定した箇所だけが更新され、それ以外の部分は変更されません。完成した文章は右側からコピーして、他のツールに貼り付けることができます。

コーディングでの使い方

コードを生成する

コード作成も同じ操作感で行えます。たとえば、PythonでChatGPTとコンソール会話するプログラムを作成する場合は次のように指示します。

右側にコードが生成されます。

生成済みのコードを更新する

生成されたコードに対して、チャットで変更を指示できます。

該当箇所だけが書き換わります。コメントを充実させたい場合も同様です。

処理内容を変えずに、コメントだけが追加されます。

ショートカットボタンの活用

Canvasの右下には、よく使う操作がボタンとして用意されています。

コードレビューを使う

「コードレビュー」ボタンをクリックすると、改善提案がリスト形式で表示されます。たとえば、エラーハンドリングの追加が提案された場合、「適用する」をクリックすると自動的にコードが修正されます。

# 適用前
api_key = os.getenv("OPENAI_API_KEY")

# 適用後（エラーハンドリング追加例）
api_key = os.getenv("OPENAI_API_KEY")
if not api_key:
    raise ValueError("APIキーが設定されていません")

不要な提案は「×」ボタンで却下できます。

言語移植を使う

「言語に移植」ボタンから対象言語（例：TypeScript）を選ぶと、右側のコードがそのまま選択した言語に変換されます。

まとめ

ChatGPT Canvasは、文章作成・コーディングの両方で「生成→コピペ→編集」という従来の繰り返し作業を解消してくれる機能です。左側のチャットで指示を送るだけで、右側の成果物が部分的に更新されるため、効率よく仕上げることができます。

コードレビューや言語移植などのショートカットボタンも充実しており、初心者から上級者まで幅広く活用できます。まだ試していない方は、ぜひ一度使ってみてください。