文章だけでなく、プログラミングコードの生成もできるなど、使いどころがとても多いAIとなっています。今回はそんなChatGPTを使って、Monacaで使えるアプリを作ってみました。色々なパターンで試してみたので、参考にしてください。作ったアプリ今回作ったのはQiitaのAPIを使ってJSONを取得し、その結果を画面に一覧表示するというアプリです。成功パターンまず成功したパターンです。UIを使ってリスト表示を行う入力したプロンプトは以下のようになります。APIChatGPTは日本語も使えますが、英語でプロンプトを書いた方が情報が多い傾向があります。この結果として得られたHTMLは以下の通りです。</ons-navigator></body></html>そしてJavaScript(app.js)は以下の通りです。}}アプリを表示すると、まずボタンだけが表示されます。ボタンをクリックすると、記事が読み込まれます。プロフィール画像が表示されている辺りがポイント高いです。UIを使ってリスト表示を行う続いてプロンプトに日本語を使った場合です。テキストは以下の通りです。APIで記事を取得してリスト表示するコードを書いてくださいこの場合のHTMLは以下の通りです。</body></html>そしてJavaScriptは以下の通りです。いったエラーが出たりして動きませんでした。そこで以下のように書いて、Vueを外しました。Vueは使わない形にしてください結果として出力されたHTMLは以下の通りです。</body></html>そしてJavaScriptは以下の通りです。});}結果は次の通りです。アプリを表示するといきなり一覧が表示されます。英語版と異なり、画像はありません。使って欲しかったです。後、出力された内容ではUTF-8指定がなかったので、ヘッダーの文字列が文字化けしてしまいました。これは別途追記しています。うまくいかなったパターン続いてうまくいかなかったパターンです。これはFramework7を使ったプロンプトです。APIで取得して一覧表示するプログラムを書いてくださいこれの実行結果として出力されたのが以下のHTMLです。いうファイル名で保存するように指示されます。いうファイルを以下の内容で作成します。以下の関数を追加します。f7.htmlというFramework7専用の書き方に沿っていることです。いうのを使っていますが、これは存在しないように思います。Vue辺りの使い方が混ざっているように見えます。利用時の注意点ChatGPTの現状のデータが2021年9月あたりまでとなっている点に注意が必要です。その後に出てきた技術や、バージョンアップには追従していない可能性が高いです。CDNの最新版JavaScriptやCSSを読み込む形では動かない可能性が高いです。これはReactやVueなど、バージョンアップが頻繁なライブラリでも同様のことが言えそうです。UIの書き方は長く変わっていませんので、ChatGPTの提示するコードは問題なく動作するようです。プロンプトを英語で書くか、日本語で書くかはどちらでも良さそうです。今回は日本語の場合は英語ほどリッチなUIにはなりませんでしたが、別な時に実行すればまた違う結果が得られるでしょう。ChatGPT3.5と4については、確実に4を使った方が良いです。結果の優秀さは確実に上がっていますので、3.5よりも適切なコードが得られるはずです。そのコードが望んだとおりの動きになっているかは要確認です。まとめChatGPTの出力するコードは、ネットで探してから自分の望んだ形にするというステップを省略してくれます。その出力結果の精査は個人にかかってきますが、最初のたたき台になるコードを手軽に手に入るのはありがたいです。したデモアプリやサンプルレベルのコードであればChatGPTでも十分というケースは多そうです。中津川篤司プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。2004年、まだ情報が少なかったオープンソースソフトの技術ブログ『MOONGIFT』を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶエバンジェリスト業「DevRel」活動をスタートした。アプリ申請のスクリーンショ...MonacaのAndroidバージョンコードについてMonaca×ホットペッパーAPI。(JavaScript基礎構文)iOS16から導入された「デベロッパモード」についてhtmx:JavaScriptなしでサーバーとの通信を実現する見やすい、メンテナンスしやすいJavaScriptのために。