デバッグ

さて前回までやったこととしては 全データのベクトル化(途中で断念) 画面の作成(Next.jsのインストールと起動) というところまでやってみました。今回は 質疑応答画面の作成 というところまでやってみます。Next.jsは初めて触るので進みが遅々としていますがご了承ください。 さてインストールするタイミングでこのようなことを聞かれました。 Would you like to use TypeScript? » No / Yes Would you like to use ESLint? » No / Yes Would you like to use src/ directory? » No / Yes 他にもいくつか聞かれたので一応Claudeにどんな意味があって導入することのメリットデメリットを聞きながら質問に答えました。大体Yesにしましたが… さて前回の画面表示まで行けたのでここからどう作業を進めればいいのかわかってなかったので聞いてみました。 ということで質疑応答画面を作っていきます。本格的なデザインは気にせずに簡易的なものを作っていきます。 と言ってもからコード書くのは大変ですし、学ぶのにも時間がかかるので今回もClaudeに手伝ってもらおうと思います。それで最初書いてもらったコードがこちら page.jsx import QuestionForm from './components/QuestionForm'; const HomePage = () => { return ( <div> <h1>RAGシステム</h1> <QuestionForm /> </div> ) } export default HomePage; QuestionForm.jsx import { useState } from 'react'; const QuestionForm = () => { const [question, setQuestion] = useState(''); const handleSubmit = (e) => { e.preventDefault(); // 質問をサブミットする処理をここに書く console.log('Submitted question:', question); setQuestion(''); } return ( <form onSubmit={handleSubmit}> <textarea value={question} onChange={(e) => setQuestion(e.target.value)} placeholder="質問を入力してください" rows={5} /> <button type="submit">送信</button> </form> ) } export default QuestionForm; ちなみに上記の書いてる内容はよくわかってないのでこっちはChat-GPTに解説してもらってました。新卒の時の研修で書いたHTMLやJSを思い出します。 ...