ChatGPTを利用して、メモのwebアプリを作成～公開まで行う2日目です。
1.ChatGPTに昨日の続きを聞く
最初に、chatGPTに下記の文章で１日目の続きを聞いてみました。
「Day 2のコードと手順」も説明してchatGPTの返答
OK！では次は Day 2：「メモを保存できる機能を追加する」 をやっていきましょう。
【Day 2】JavaScriptでメモを保存する機能を作る
① JavaScriptファイルを作る
- memo-appフォルダ内に 「script.js」 という名前のファイルを作成
② HTMLにJavaScriptを読み込むようにする
「index.html」の最後の方に次の1行を追加します：
<script src="script.js"></script>
</body>
</html>※ これは 「script.jsというファイルを読み込むよ！」 という意味です。
③ JavaScriptのコードを書く（script.js）
以下のコードを「script.js」にコピペしてください：
JavaScriptのコード(長いので省略)
④ 動作確認をする
- ブラウザで「index.html」を開く
- メモ欄に適当に文字を書く
- 「保存する」ボタンをクリック
- 「メモを保存しました！」とアラートが出る
- ページを再読み込みしても、メモが残っている（消えない）ことを確認！
⑤ 補足：「localStorage」とは？
- localStorage は「ブラウザの中にデータを保存しておける場所」です。
- サーバーは使わず「このPCのブラウザ内に保存」するので、初心者でも簡単に使えます。
- 保存容量は5MB程度ですが「メモ帳」なら十分です。
Day 2 進捗チェックポイント
✅ 「保存する」ボタンを押したらメモが保存される
✅ ページを再読み込みしてもメモが残る
✅ コードがシンプルで動作確認できた
これでアプリ自体はほぼ完成です。
次回（Day 3）は「GitHubにコードをアップ → Netlifyで公開」して、誰でもアクセスできるWebアプリに仕上げます。→ 「Day 3の手順」も説明しますか？
（公開用の超初心者向け手順で解説します）
2.Day2の作業を行う
①JavaScriptファイルを作る
まずはVSCodeを開いて、左上のFile→OpenFolderで「memo-app」フォルダを開きます。
フォルダ(MEMO-APP)の上で右クリックして、NewFileを押してscript.jsを作成します。
②HTMLにJavaScriptを読み込むようにする
「index.html」の最後の方にjsを読み込むためのコードを追加します。
③JavaScriptのコードを書く（script.js）
コードはchatGPTに教えてもらったものをそのままペタッとします。
④動作確認をする
最後に、ちゃんと動くか確認します。
1.ブラウザで「index.html」を開く
2.メモ欄に適当に文字を書く
3.「保存する」ボタンをクリック
4.「メモを保存しました！」とアラートが出る
5.ページを再読み込みしても、メモが残っている（消えない）ことを確認！
できた！けど使い道ないなこのアプリ…
ばいちゃ
コメント