3日でメモ帳アプリを作ろう！（Day1）

AI
2025.08.02

ふと、アプリ作ってみようと思いました。(制作過程 Day1, Day2, Day3)

ChatGPTを利用して、メモのwebアプリを作成～公開まで行います。

1.ChatGPTにスケジュールを組んでもらう

最初に、chatGPTに下記の文章で聞いてみました。

目的:メモ帳webアプリの作成 
補足:初めて作成を行います。最小限の機能を付けたメモアプリを公開まで行いたいです。 
3日で作成する方法を初学者にもわかりやすく丁寧に教えてください。
条件:最後に各日のタスクを3項目でまとめてください。

chatGPTの返答

わかりました！「3日間で最小限の機能を持つメモ帳Webアプリを作って公開する」ための具体的な手順を、初学者向けに丁寧に説明します。

目標：

ブラウザで動くシンプルなメモ帳Webアプリを作成し、インターネットに公開する

必要なもの（すべて無料）：

  1. パソコン（Windows/MacどちらでもOK）
  2. インターネットブラウザ（Google Chrome推奨）
  3. Visual Studio Code (VSCode)（無料のコードエディタ）
  4. GitHubアカウント（無料）
  5. Netlifyアカウント（無料のWeb公開サービス）

Day 1 — 「環境準備 & HTML/CSSで見た目を作る」

やること：

  1. 開発環境の準備
    • VSCodeをインストール
    • GitHubアカウント作成
    • 作業フォルダを用意する（例：Desktopに「memo-app」フォルダ）
  2. HTMLでメモ帳の基本画面を作る
    • メモを書くテキストエリア
    • 「保存」ボタン
    • シンプルなタイトル
  3. CSSで簡単なデザインを付ける
    • テキストエリアの大きさ調整
    • ボタンの見た目を整える
    • 全体レイアウトを見やすくする

Day 2 — 「JavaScriptでメモを保存できるようにする」

やること：

  1. JavaScriptで「保存ボタン」を動かす
    • ボタンをクリックすると、メモ内容を「ブラウザに保存」する（localStorageを使う）
  2. ページを再読み込みしてもメモが残るようにする
    • ページが読み込まれた時、保存したメモを自動で表示する
  3. 動作確認をする
    • メモを書いて保存 → ページをリロード → メモが残っているか確認
    • 問題があれば修正する

Day 3 — 「GitHubにコードをアップ & Netlifyで公開する」

やること：

  1. GitHubにコードをアップロード
    • GitHubで新しいリポジトリを作成
    • VSCodeからファイルをアップロード（GitHubの画面から直接でもOK）
  2. Netlifyにデプロイ（公開）する
    • NetlifyにGitHubリポジトリを連携
    • 数クリックでWeb公開（URLがもらえます）
  3. 動作確認と仕上げ
    • 自分のスマホや別のPCでURLにアクセスし、動作を確認
    • 必要なら微調整

各日のタスクまとめ（3項目ずつ）

Day 1

  1. VSCodeとGitHubの準備
  2. HTMLでメモ帳の画面作成
  3. CSSで見た目を整える

Day 2

  1. JavaScriptで「保存ボタン」を動かす
  2. メモの保存と読み込み機能を作る
  3. 動作確認して修正する

Day 3

  1. GitHubにコードをアップロード
  2. NetlifyでWeb公開
  3. スマホや別PCで動作確認＆仕上げ

次は Day 1の具体的なコード例と操作手順 を一緒に作っていきましょうか？

2.Day1の作業を行う

次に、何も考えずにchatGPTに続きを教えてもらいます。

Day 1の具体的なコード例と操作手順を教えてください。

cahtGPTの返答

よし、では Day 1の具体的な手順とコード例 を「超初心者でもそのままマネできる」ように説明します！

【Day 1】環境準備 & HTML/CSSで見た目を作る

① VSCodeと作業フォルダの準備

  1. Visual Studio Code (VSCode) をインストール
  2. デスクトップに「memo-app」という名前のフォルダを作成
  3. VSCodeを開いて、「memo-app」フォルダをドラッグしてVSCodeに読み込む

② ファイルを作成する

  1. memo-appフォルダ内に 「index.html」 という名前のファイルを作る
  2. 同じ場所に 「style.css」 という名前のファイルも作る

③ HTMLコードを書く（index.html）

以下のコードを「index.html」にコピペしてください：

HTMLコード(長いので省略)

④ CSSコードを書く（style.css）

以下のコードを「style.css」にコピペしてください：

CSSコード(長いので省略)

⑤ ブラウザで表示確認

  1. 「index.html」をダブルクリックしてブラウザで開く
  2. シンプルな「メモ帳画面」が表示されればOK！
    • タイトル
    • 大きなメモ入力欄（テキストエリア）
    • 「保存する」ボタン

Day 1 進捗チェックポイント

✅ VSCodeでファイルを作成した
✅ メモ帳の見た目（HTML & CSS）が完成
✅ ブラウザで表示して形が整っている

次回（Day 2）は「この保存ボタンを押したらメモがブラウザに保存される仕組み（JavaScript）」を作っていきます。

「Day 2のコードと手順」もこのまま説明しますか？

①VSCodeと作業フォルダの準備

1.VScodeは「https://code.visualstudio.com/」からダウンロードしてなんやかんやしました。

2.作業フォルダの準備は、デスクトップに「memo-app」フォルダを作成します。

3.VSCodeを開いて、左上のFile→OpenFolderで「memo-app」フォルダを開きます。

②ファイルを作成する

フォルダ(MEMO-APP)の上で右クリックして、NewFileを押してindex.htmlとstyle.cssを作成します。

③HTMLコードを書く（index.html）

コードはchatGPTに教えてもらったものをそのまま張ります。

④CSSコードを書く（style.css）

ペタッ

⑤ブラウザで表示確認

最後に、デスクトップの「memo-app」フォルダから「index.html」をクリックして開くと

できた！

今日はおわりっ

コメント

タイトルとURLをコピーしました