目次
ChatGPTで編集とプレビュー機能の追加
本日からChatGPTのアップデートにより、編集とプレビューがChatGPTのWebサイト上で実行可能になりました。
このアップデートで気軽にWebサイトやWebアプリを作成して、コードの編集やプレビューが可能になりました。
しかし、コードの編集やプレビューの機能には4つの注意点があるので、ChatGPTでWebサイトやWebアプリを作成する方は事前に注意点を知っておいたほうが良いです。
1. アプリ版ではコードの編集およびプレビュー不可
アプリ版ではコードの右上に表示されるアイコンからコードの編集およびプレビューすることができません。
コードの編集およびプレビューが生成されたコードの右上のアイコンからクリックしてできるようになったのは、Web版の方なので注意が必要です。
2. 複数ページだと編集とプレビュー不可
「トップページ、採用情報、お問い合わせのページがあるWebサイトを作成して」のように複数ページのWebサイトはコードだけが生成されてコード編集およびプレビューが不可になります。
これはプレビュー機能が主にWebサイトではなく、Webアプリでのプレビューを目的としているからです。
プレビューで表示したい場合は「サンプル株式会社というWebサイトをトップページのみHTMLで作成して」のようなプロンプトを書いて1ページのみ生成されるようにする必要があります。
3. WebアプリをHTMLで生成すると時間がかかる
Webアプリを「おみくじのWebアプリを作成して」のようなプロンプトで生成すると、ライブラリを使用しないためコード量が多くなり、生成に時間がかかります。
また、ライブラリを使用せずに「HTML + CSS + JavaScript」で生成すると、コード量が多いだけでなく、可読性や保守性が低下して編集しにくくなってしまいます。
この問題は『おみくじのWebアプリを「React + Tailwind CSS + tailwind-merge + clsx + shadcn」で作成して（生成したものはプレビューできるようにして）』のように使用するライブラリを具体的に書けば解決できます。
「（生成したものはプレビューできるようにして）」を追記していないと、ChatGPTはWebアプリのコードを生成する際にコードの表示を分割してプレビューできない状態で生成してしまうことがあるので、このプロンプトは必須です。
「ライブラリなし」と「ライブラリあり」で実行結果を比べると、ライブラリありのほうが生成完了までの時間とコード量が半分以下になることが確認できます。
| ライブラリなし | ライブラリあり | |
|---|---|---|
| 生成時間 | 長い | 短い |
| コード量 | 長い | 短い |
| 行数 | 495行 | 324行 |
| 可読性 | 見づらい | 見やすい |
| 保守性 | 悪い | 良い |
以上の理由により、ChatGPTでのWebアプリ生成の際はプロンプトには必ずライブラリを使用することを書くことをオススメします。
4. ライブラリありだと共有リンクで確認できない
ライブラリありだと共有リンクにして相手に渡した場合は以下のような表示となり、コードが表示されず、コードの編集およびプレビューができません。
そのため、相手に共有リンクを渡す際は注意が必要です。
