<p>現在は神アップデートによりプロンプトを打ち込む欄の上に表示される<code>Continue generating</code>により簡単に続きのコードや文章等が出力できるようになっています。そのボタンを押すことにより過去に質問した内容についても正常に続きが出力されます。</p><h2 style="text-align: start" id="ha4cdf671a6"><strong>発端：コードが途切れた後上手く繋がらないことが多いな...</strong></h2><p style="text-align: start">ChatGPTでオセロを作ろうとしたのですが、見た目はできたけど動かなくてJSのコードが途切れてうまくいかないことが多発。でもなんとなく出来るのではないか？と何の根拠もない状態でスタート。</p><h5 style="text-align: start" id="h78d5d35990"><strong>質問：HTML,CSS,JavaScriptでオセロのゲームができるコードを示してください</strong></h5><p></p><p><strong>!  </strong>大変申し訳ございませんが、この記事の中でも綺麗に続きが出てくるような方法は出てきません。ゴリ押しです</p><p style="text-align: start"></p><h2 style="text-align: start" id="hf723748435"><strong>課題1：コードが途中で途切れてしまう</strong></h2><p style="text-align: start">早速タイトルですが、そもそも途切れなければ一発でコードを提示してくれて凄いなあとなって終わる感じでした。下記のようにCSSを書いている途中で続きを促してもJavaScriptを書き始めてしまうように明らかに虫食いのような箇所が現れてしましいます。</p><h2 style="text-align: start" id="hd8e9a9d0f9"><strong>課題１に対して試したこと</strong></h2><h4 style="text-align: start" id="h2ed1d58b6d"><strong>1.「続き」や「続き」を含まれる言葉を送信したり、最後の文字を送る、途切れる前の文章を送った上で続きを促す方法</strong></h4><p style="text-align: start">文章などに対しては確度が高い感じを受けましたが、いざコードとなると不確実性が高いなというのが印象でした。確実に綺麗に解決されるものは見つけられませんでした。</p><h4 style="text-align: start" id="hbed9407765"><strong>2.途切れる直前のコードをコピペして貼り付けるという方法</strong></h4><p style="text-align: start">正直続きのコードを得ることのみを考えた場合の確実性という点では最も良い方法かと思います。<br>ですがデメリットとしては、前のコードや回答文章との連続性が失われやすいことになります。あくまで最初のプロンプトではなく、そのコードの続きに対する回答の重きが高くなりやすいかと思いますので説明文にはあまり重きを置いていない下記のような場合はとても良い方法かと思います。</p><p style="text-align: start">・後少しでコードが終わりそうで、そのコードさえあれば良い。<br>・次の回答の内には収まりそうな場合。</p><h4 style="text-align: start" id="hfb576293ff"><strong>3.ただひたすらに何回も正しく表示されるまで粘る</strong></h4><p style="text-align: start">上記のように正しく少し手前から表示してくれる場合もあります。私の場合は綺麗に続かなことが多かったですが、質問の内容や続きの促しかたによっては精度を高められるかもしれません。この場合ですと、まさに考えている通りのきれいに続きが出力されて連続性も担保されたものになる確率が非常に高いように感じました。</p><h2 style="text-align: start" id="h8ff8f6024f"><strong>課題２：全くあなじ文章で出力を求めても毎回違うコードが出力される。</strong></h2><p style="text-align: start">そもそも途切れてしまうなら各言語ごとに聞いていけばいいや！と最初は考えました。<br>当然途切れてしまうなら、一つ一つの出力を短くしようと考えますが、そうは問屋が卸しませんでした😭</p><p style="text-align: start">新しく質問をする事にクラス名や関数自体が異なるので繋がらない、独立したものになってしまいます。なので一つの質問で完結させなくてはいけませんでした<br><s>１つ１つの関数の名前をこちらで定義してどういう関数で、引数の名前から全て与えて細分化すれば少しづつ質問をして繋げて完成できるかもしれませんが、それなら自分で書くよってなりそうなので…</s></p><h2 style="text-align: start" id="h22bc97167f"><strong>課題２に対して試したこと</strong></h2><p style="text-align: start">HTMLを出力してもらった後に、そのままCSSを質問するのではなくHTMLのコードをコピペしてCSSを訪ねて、同じ手順でJavaScriptのコードも質問する。<br>→見た目のみ正しく出力されるが、JavaScriptのコードが途切れて課題１と同じことになる。<br>→各言語の繋がりがない時もあった。</p><p><strong>!</strong></p><p>質問の仕方によっては正しく出力される可能性もあります</p><h2 style="text-align: start" id="hba116ed8ef"><strong>オセロゲーム完成までにとった方法</strong></h2><h4 style="text-align: start" id="h9d9fa51e8a"><strong>・ただひたすらにちょうどいいところで途切れるのを待つ</strong></h4><h4 style="text-align: start" id="h59fe5eee61"><strong>・上手くいくまで質問し続ける</strong></h4><p style="text-align: start">上記の二点でなんとか動くオセロのコードが出力されました。</p><div style="left: 0; width: 100%; height: 300px; position: relative;"><iframe src="https://codepen.io/o_jaga_o/embed/preview/RwebbrJ?default-tabs=js%2Cresult&amp;height=300&amp;host=https%3A%2F%2Fcodepen.io&amp;slug-hash=RwebbrJ" style="top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;" allowfullscreen></iframe></div><p style="text-align: start">どちらの手番なのかがわかりにくいのが難点ですが、とりあえず満足です。</p><h2 style="text-align: start" id="h5ad485b4ce"><strong>条件の難しいボードゲームも作れるかな</strong></h2><p style="text-align: start">こちらがルールを提示して作ってもらおうとした場合にはコードが冗長になり、あまり上手くいかない傾向があるような気がします。こちらのルール提示がヘタクソなだけな気がしますけども…。例えば、QUARTO（クアルト）というボードゲームをルールを提示して作ってもらおうとしたのですが何度やってもうまくいきそうな感じがしませんでした。そもそも二次元上に２パターンある４要素を含む１６パターンの駒を描写するのが難しい気がしますが。クアルトのルールは<a href="https://www.play-departmentstore.com/fs/castjapan/gc001" target="_blank" rel="noopener noreferrer nofollow">こちら</a>にあります。<br>QUARTO（クアルト）を作ってと言うふうに質問すると、まとまりのあるコードが出力されるので独自に考えたゲームを作成してもらうのは余程条件を上手に定義しない限り難しい気がしました。</p><p style="text-align: start">なんとなく惜しそうな感じはしますよね…、それぞれのコマの持つ特徴を二次元上でもうまく描写できるように定義し直してあげれば上手くいくかもしれませんね。</p><h2 style="text-align: start" id="ha214098e44"><strong>まとめ</strong></h2><p style="text-align: start">最初の質問でうまくいかなかったとしても、何度か繰り返せば行けそうなのか難しそうなのかの判断は上記のようにコードが途切れてしまっているのか、それとも続きを促しても繋がりのないコードになるのかなどは分かりやすい指標になりそうです。いずれにしても、丸々全部クオリティの高いものを作ってもらうには少々難しい気がしました。ですので使用する際には関数をいかに小さくするかや、中々アイデアが浮かばない場合のスパイスや参考として使うのがよいなというのが個人的な感想です。</p><p style="text-align: start">どうしてもしっかりと毎回全文が欲しいという場合は有料で提供してくれているサービスを利用するか、自分でOpenAI APIを使用して自分で自分用のサービスを作るのが確実かと思います。APIの使用にはお金がかかりますので、利用の際には気をつけていただければと存じます。</p>

ChatGPT コードが途切れてしまう 対処法

<h2 style="text-align: start" id="h98cb4a8e66"><strong>発端：既存のサイトに組み込めるの便利だな…</strong></h2><p style="text-align: start">過去に既に完成しているサイトをお知らせ機能などを使いたいからWordpress化してくれという個人的な仕事の際にすこーしだけ更新したいのにわざわざWordpress化するのめんどくさいな〜お知らせのところだけCMSにできないかと考えたことがありました。（その時から世にheadlessCMSは既にあったのですが…）色々調べて情報収集しているとheadlessCMSというものの存在を知り、日本で開発されているmicroCMSというものの存在を知りました。なので実際に今後使ってみたいと思い上記の記事に書いてある詳しい手順を参考に作成してみました。</p><p><strong>!</strong></p><p>本記事は手順を説明するものではなく、上記の記事の中だけの情報だと分からない方に向けた<br>ChatGPTの活用方法や、自分が引っかかった点を他の方の一助になればと言うものです。</p><h2 style="text-align: start" id="h2317b9032a"><strong>始めた時の状況</strong></h2><p style="text-align: start">・TypeScript未経験<br>・Next.js未経験<br>・module.css未知<br>・Reactなら分かる<br>・API微経験</p><p style="text-align: start">と言うレベル感です。こんな私でもできたのでChatGPTすごい…</p><h2 style="text-align: start" id="h553e19c63e"><strong>進める中で引っかかったこと</strong></h2><p style="text-align: start">基本的には記事の通りに進めていけば上手く行きます</p><p style="text-align: start"><strong>大まかに言うと3点でした。</strong><br>1.記事とは違うTypeScriptを採用した為、型指定にひっかかってしまう。<br>→TypeScriptが出来れば問題なさそう</p><p style="text-align: start">2.Vercelでビルドする際のエラーへの対処<br>→node_moduleの中身への変更が反映されないことが分からなかった。都度型指定すれば◯</p><p style="text-align: start"><a href="http://3.Next">3.Next</a>.jsやmodule.cssへの基礎知識不足<br>→基礎知識があれば良い問題ないと思います</p><h2 style="text-align: start" id="h747565810c"><strong>今回つまづいた際にとった方針</strong></h2><h4 style="text-align: start" id="h940db2880a"><strong>ChatGPTに聞き、情報の正確性の裏どりと周辺知識の補強</strong></h4><h2 style="text-align: start" id="hd00ffeb9b4"><strong>実際の流れ</strong></h2><p style="text-align: start">記事を読みながら、そのとおり進めてみる。<br>↓<br>エラーメッセージを読み自己解決を目指す<br>|<br>（そもそもの構文等が分からなさそう）<br>↓<br>ChatGPTに聞いてみる（エラー当該箇所をエラーメッセージを送信）<br>↓<br>こう書くと解決されると思うよと提示されたコードをコピペ<br>↓ ↑<br>解決されない。自分が問題点だと思う点を再度聞いてみる<br>↓<br>正しい場合はコードから、何がなぜ正しいのかを含めて落とし込む</p><h2 style="text-align: start" id="h522baa2d1d"><strong>具体的な引っかかった点と解決策</strong></h2><h5 style="text-align: start" id="hf3bde8ee0b"><strong>1.APIから取得したデータの深い階層の型定義(TSの知識不足…)</strong></h5><pre><code class="language-tsx">&lt;Image src={blog.thumbnail.url} alt=&quot;サムネイル&quot; /&gt;
</code></pre><p style="text-align: start">となった際に</p><pre><code class="language-tsx">interface HomeProps {
  blog: Array&lt;{ 
    id: string;
    title: string;
    thumbnail: string ;
    comment: string;
    url: string;
  }&gt;;
}
</code></pre><p style="text-align: start">と言う型指定を行なっていたのですが、これだとurlの型指定を正しく行えていないので</p><pre><code class="language-tsx">interface HomeProps {
  blog: Array&lt;{ 
    id: string;
    title: string;
    thumbnail: { url: string };
    comment: string;
  }&gt;;
}
</code></pre><p style="text-align: start">と言う風にしてくださいと言う指示が来たので、確かにデータに向かう途中のthumbnailの値を一々指定するんじゃなくて、thumbnailの先のurlに格納されている値の型指定が欲しいよなとコードを見たら納得しました。ここで納得できない場合には、他の方が書いてくれている記事などを調べに行って落とし込むと言う流れでした。</p><h5 style="text-align: start" id="h868f9ee234"><strong>2.Vercelでビルドする際のエラーへの対処</strong></h5><pre><code class="language-tsx">// libs/client.js
import { createClient } from &apos;microcms-js-sdk&apos;;

export const client = createClient({
  serviceDomain: &apos;service-domain&apos;,
  apiKey: process.env.API_KEY,
});
</code></pre><p style="text-align: start">というコードがあった時に<code>serviceDomain</code>,<code>apiKey</code>はstring | undefined型なのにstring型で指定されていますよ。というエラーメッセージが出力されたのですがnode_moduleの中身のmicrocms-js-sdkの中身の型指定を直接いじってローカルでは解決しており、実際にVercelからデプロイする際にはgithubからインポートしてデプロイする為gitではpushされないnode_moduleの変更は適用されていないようでビルド時にエラーが出てしましました。<br>今回は様々な聞き方をChatGPTにして、出力された解決策を試しても解決されなかった為、あまりよくなさそうな雰囲気ではありましたが型アサーションというものをを用いて解決しました。<code>serviceDomain</code>,<code>apiKey</code>の二つがundefinedの時にはデータを取得できなくてブログのところが表示出来ないのだから条件分岐等を加えてデータを取得できていませんかブログの欄を丸々消すというような対処もできたのかなと思ったりもしました。</p><pre><code class="language-tsx">// libs/client.js
import { createClient } from &apos;microcms-js-sdk&apos;;

const serviceDomain = process.env.API_DOMAIN as string;
const apiKey = process.env.API_KEY as string;

export const client = createClient({
  serviceDomain: &apos;service-domain&apos;,
  apiKey: process.env.API_KEY,
});
</code></pre><h5 style="text-align: start" id="h8d35d15b11"><strong>3.知識的な側面</strong></h5><p style="text-align: start">これに関してはゼロベースから知識をChatGPTに尋ねて鵜呑みにするのではなく別視点からの裏どりをした方が良いです。よく言われていることですが間違った情報を納得感のある補足で示してくることもあるので、ある程度周りの知識が固まっていて自分で判断できないようであれば有識者様方のありがたい記事を見に行きます。</p><p style="text-align: start">TypeScriptに関する知識が足りなかったので今回はすごい時間がかかってしまいました。</p><h2 style="text-align: start" id="hfc4125fcc3"><strong>完成品</strong></h2><p style="text-align: start">過去に、HTML,CSSの練習として作成したページのNews欄をmicroCMSで更新できるようにしたので実際に、最初に書いた一部だけCMS化するというのを意識しました。少し該当部分まで遠いですが下の方にスクロールしていただくと3つの記事がクリックして記事に飛べるようになっています。<br>記事のページはスタイリングしていない元の状態なのでわかりやすいかと思います。</p><p style="text-align: start"></p><h2 style="text-align: start" id="ha214098e44"><strong>まとめ</strong></h2><p style="text-align: start">今回私がなかなか自分で解決できなかったのはTypeScriptに関する知識が足りなかったというのが問題点だったのですが、実際にデプロイして動くことが確認できたのは間違いなくChatGPTのお陰であり、そう考えるとよく聞く学習の加速というのを実感しました。</p><p style="text-align: start">今回は確かにNext.jsについてやheadlessCMS,TypeScriptについても勉強になったのですが、それよりもChatGPTを用いた学習方法や解決方法、向き合い方というのが個人的に有意義だったなと感じています。今後は更にAIを学習に活かすと共に精度の高いプロンプトやAIごとの癖等を学ぶことが全ての学びの加速につながると思ったのでAIを学習に取り入れている方は学んでおくとよいのではないでしょうか。</p>

ChatGPT コードが途切れてしまう対処法

知識不足すぎるのでNext.js×microCMSをChatGPTに手伝ってもらいました

ChatGPT コードが途切れてしまう 対処法

知識不足すぎるのでNext.js×microCMSをChatGPTに 手伝ってもらいました

ChatGPT コードが途切れてしまう対処法

知識不足すぎるのでNext.js×microCMSをChatGPTに手伝ってもらいました