はじめての“動くアプリ”を1本作る｜メモ帳をステップバイステップで【入門4】

ここまでは準備運動。この記事で、あなたは初めて“自分で動くアプリ”を1本完成させる。題材は、ブラウザで動く小さなメモ帳。コードは1行も書かない。AIに頼んで、出てきた物を動かすだけ。10分後、あなたの画面には「自分が作ったアプリ」が表示されているはずだ。

今日のゴール：ブラウザで動く「ミニメモ帳」

作るのは、こんな道具だ。文字を打って「追加」を押すと、下にメモが並ぶ。たったこれだけ。でも、これが立派な「動くアプリ」の第一号になる。なぜメモ帳かというと、①作りやすく、②動いたのが一目で分かり、③自分で毎日使えるからだ。最初の成功体験には、これ以上ない題材だ。

準備は【入門2】で作った AIチャット（Claude・ChatGPT・Gemini など）だけ。では始めよう。

ステップ1：AIに「いちばん小さい形」を頼む

チャットに、こう打ち込む。

「プログラミング未経験です。ブラウザで動く小さなメモ帳を作りたいです。テキスト入力欄と『追加』ボタンがあり、押すと下にメモが一覧表示されるだけの、いちばん小さい形を、1つの HTML ファイルだけで作ってください。コピーして使えるよう全文を出してください。」

ポイントは「1つのHTMLファイルだけで」と指定すること。こうするとファイルが1個で済み、初心者でも動かすのがぐっと簡単になる。

ステップ2：出てきたコードを「ファイル」にする

AIが <html>…</html> で始まる長い文字（コード）を出してくれる。これを保存して動かす。怖くない、手順はこれだけだ。

AIの出したコードの全文をコピーする（多くの場合、コード枠の右上に「コピー」ボタンがある）。
パソコンの「メモ帳」（Windows）や「テキストエディット」（Mac）を開く。
貼り付ける。
「名前を付けて保存」で、ファイル名を memo.html にして保存する（拡張子を .txt でなく .html にするのがコツ）。

保存場所は、デスクトップに myapps のようなフォルダを1つ作って、そこにまとめるのがおすすめだ。2本目・3本目と増えてきたとき、自分の作品をひと目で見渡せる「作品棚」になる。

ステップ3：ダブルクリックして、動かす

保存した memo.html をダブルクリックする。すると、いつものブラウザ（Chrome など）が開いて、あなたのメモ帳が表示される。文字を打って「追加」を押してみよう。下にメモが並んだら、おめでとう。あなたは今、自分で作ったアプリを動かした。

この「打つ→押す→並ぶ」が動いた瞬間の感覚を、よく覚えておいてほしい。これがバイブコーディングの“効いた”瞬間だ。

ブラウザで動くミニメモ帳。入力欄と追加ボタンの下に、追加したメモが並んでいる — ステップ3まで進んだ状態。文字を打って「追加」を押すと、下にメモが並ぶ。これが最初の「動くアプリ」だ。

このアプリのHTMLコード全文を見る（読めなくても大丈夫）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>メモ帳</title>
<style>
  body{ font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
        max-width:460px; margin:40px auto; padding:0 16px; color:#222; }
  h1{ font-size:22px; }
  input{ font-size:16px; padding:8px; width:65%; }
  button{ font-size:16px; padding:8px 16px; }
  ul{ padding-left:20px; }
  li{ margin:8px 0; font-size:16px; }
</style>
</head>
<body>
  <h1>メモ帳</h1>
  <input id="text" type="text" placeholder="メモを入力">
  <button id="add">追加</button>
  <ul id="list"></ul>
<script>
  const input = document.getElementById('text');
  const list = document.getElementById('list');
  document.getElementById('add').onclick = function(){
    const v = input.value;
    if(v === '') return;
    const li = document.createElement('li');
    li.textContent = v;
    list.appendChild(li);
    input.value = '';
  };
</script>
</body>
</html>

いま何が起きたのか（30秒だけ仕組みの話）

魔法に見えるので、種明かしを少しだけ。memo.html の中身は、ブラウザへの指示書だ。「入力欄を置け」「ボタンを置け」「押されたら下に文字を並べろ」という指示が、HTMLとJavaScriptという言葉で書いてある。ダブルクリックすると、ブラウザがその指示書を上から読んで、画面を組み立てる。それだけのことが起きている。

例えるなら、AIが書いたのは「舞台の台本」で、ブラウザは「劇団」。あなたは台本を劇団に渡した（ダブルクリックした）だけだ。台本が読めなくても、舞台は上演される。この感覚が掴めると、「コードは分からないけど怖くない」に変わる。台本の中身が気になったら、ファイルを右クリック→メモ帳で開けば、いつでも眺められる。読めなくても、上演には何の支障もない。

ここでつまずく人が多い、3つの罠

ステップ2〜3は簡単そうに見えて、実は最初の脱落ポイントでもある。うまくいかないときは、たいていこの3つのどれかにはまっている。

ファイル名が memo.html.txt になっている　…　Windows は標準設定だと拡張子（.txt）を隠すので、見た目は memo.html でも中身は .txt のまま、ということが起きる。エクスプローラーの「表示」メニューで「ファイル名拡張子」にチェックを入れ、本当の名前を確かめる。
ダブルクリックしたらメモ帳が開いた　…　壊れていない。開くソフトの割り当てが違うだけだ。ファイルを右クリック→「プログラムから開く」→ Chrome などのブラウザを選べばいい。
日本語が文字化けした　…　保存時の文字コードが原因のことが多い。「名前を付けて保存」の画面で文字コードを「UTF-8」にして保存し直す。直らなければ、AIに「日本語が文字化けします」とそのまま伝えれば、対策入りのコードを出し直してくれる。

3つとも、あなたのせいでもコードのせいでもない。パソコン側の“初期設定の癖”だ。一度越えれば、次からは起きない。

もう1つ、AI側の癖も知っておくと慌てない。長いコードを頼むと、出力が途中で切れることがある。画面の最後が </html> で終わっていなければ切れているサインで、「続きを出してください」と打てば残りが出てくる。切れたまま貼ると、それこそ動かない原因になる。コピーの前に「最後まで出ているか」をひと目確認する。

動いたら、この3つだけ確かめる

「動いた気がする」で先へ進まず、30秒だけ触って確かめる癖を、最初の1本から付けておこう。

追加できるか　…　文字を打って「追加」を押すと、下に並ぶ。
連続で使えるか　…　2件目・3件目も同じように追加できる。空っぽのまま押したらどうなるかも見ておく。
再読み込みするとどうなるか　…　F5 を押すと、いまのメモは消えるはずだ。壊れたのではない。まだ「保存する仕組み」を足していないだけで、これは次に足す機能の最有力候補になる（入門6で扱う）。

この「触って確かめる30秒」が、後の入門6で出てくる「1つ足したら動かして確かめる」の原型になる。

ステップ4：小さく1つだけ、機能を足してみる

動いたら、欲が出てくる。それでいい。ただし一度に1つだけ足すのが鉄則だ。AIにこう続ける。

「いいですね。次は、各メモの右に『削除』ボタンを足して、押したらそのメモだけ消えるようにしてください。さっきのコードを全部書き直して、全文を出してください。」

新しいコードをまた memo.html に貼り直して保存し、ブラウザを更新（F5）すれば反映される。「1つ足す→動かす→また1つ」。この小さな往復が、未経験者を完成まで運ぶ唯一の道だ。

各メモの右に削除ボタンが付き、背景がクリーム色・ボタンが深緑に変わったメモ帳 — ステップ4で「削除ボタン」を足し、さらに背景をクリーム色・ボタンを深緑にした“自分仕様”のメモ帳。機能は同じでも、色と名前が変わると愛着がまるで違う。

このアプリのHTMLコード全文を見る（読めなくても大丈夫）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>わたしのメモ帳</title>
<style>
  :root{ --cream:#fbf6e9; --green:#1f5c3d; --green-dark:#17492f; }
  *{ box-sizing:border-box; }
  body{ margin:0; font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
        background:var(--cream); color:#2b2b2b; display:flex; justify-content:center;
        padding:48px 16px; min-height:100vh; }
  .app{ width:100%; max-width:460px; }
  h1{ font-size:26px; margin:0 0 22px; text-align:center; color:var(--green); }
  .row{ display:flex; gap:8px; margin-bottom:22px; }
  #text{ flex:1; padding:13px 14px; font-size:16px; border:2px solid #e3dcc4;
         border-radius:10px; background:#fff; }
  #text:focus{ outline:none; border-color:var(--green); }
  button.add{ padding:13px 22px; font-size:16px; font-weight:bold; color:#fff;
        background:var(--green); border:none; border-radius:10px; cursor:pointer; }
  button.add:hover{ background:var(--green-dark); }
  ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
  li{ display:flex; align-items:center; gap:10px; background:#fff; padding:15px 16px;
      border-radius:10px; box-shadow:0 1px 3px rgba(0,0,0,.08); }
  li span{ flex:1; word-break:break-word; }
  button.del{ border:none; background:#f2e9cf; color:var(--green); border-radius:8px;
      padding:7px 13px; font-size:14px; cursor:pointer; }
  button.del:hover{ background:#e7dab0; }
  .empty{ text-align:center; color:#a99f7d; padding:24px 0; }
</style>
</head>
<body>
  <div class="app">
    <h1>わたしのメモ帳</h1>
    <div class="row">
      <input id="text" type="text" placeholder="メモを入力…" />
      <button class="add" id="add">追加</button>
    </div>
    <ul id="list"></ul>
  </div>
<script>
  const KEY = 'watashi-no-memo';
  const input = document.getElementById('text');
  const list = document.getElementById('list');
  let memos = JSON.parse(localStorage.getItem(KEY) || '[]');
  function save(){ localStorage.setItem(KEY, JSON.stringify(memos)); }
  function render(){
    list.innerHTML = '';
    if(memos.length === 0){
      const p = document.createElement('li');
      p.className = 'empty'; p.textContent = 'まだメモはありません';
      list.appendChild(p); return;
    }
    memos.forEach((m, i) => {
      const li = document.createElement('li');
      const span = document.createElement('span'); span.textContent = m;
      const del = document.createElement('button');
      del.className = 'del'; del.textContent = '削除';
      del.onclick = () => { memos.splice(i,1); save(); render(); };
      li.appendChild(span); li.appendChild(del);
      list.appendChild(li);
    });
  }
  function add(){
    const v = input.value.trim();
    if(!v) return;
    memos.push(v); save(); input.value=''; render(); input.focus();
  }
  document.getElementById('add').onclick = add;
  input.addEventListener('keydown', e => { if(e.key==='Enter') add(); });
  render();
</script>
</body>
</html>

2個目・3個目の「足す」の実例

削除ボタンの次に何を足すか。定番の進化ルートを2つ挙げておく。頼み方ごと真似してほしい。

「閉じても消えないようにする」　…　いまのメモ帳は、ブラウザを閉じるとメモが消える。「ページを閉じてもメモが残るように、ブラウザに保存する仕組みを足してください。全文を出してください」と頼む。ブラウザには localStorage という小さな保存箱があり、AIはそれを使ったコードを返してくる。名前は覚えなくていい。「閉じても残る」が実現することだけ確かめる。
「見た目を自分の物にする」　…　「タイトルを『◯◯のメモ帳』にして、背景をクリーム色、ボタンを深緑にしてください」。機能が同じでも、色と名前が自分仕様になると、道具への愛着がまるで違ってくる。

どちらも「1つ足したら動かして確かめる」は同じ。3回この往復をやれば、頼む→貼る→確かめるのリズムが手に馴染む。

メモ帳の次は、あなたの生活から選ぶ

この記事の型は、題材を差し替えてもそのまま使える。例えば「今日やること3つだけを書くToDoリスト」「飲んだ水の回数を数えるカウンター」「子どもの寝た時間を記録するメモ」。どれも作りは今日のメモ帳とほぼ同じで、入力して・押して・並ぶ、の変形だ。頼み方の冒頭を「ブラウザで動く小さな◯◯を、1つのHTMLファイルだけで」に差し替えれば、2本目が始まる。

コツは、メモ帳より少しだけ複雑な物を選ぶこと。同じ物を作り直しても学びは薄く、いきなり大物だと折れる。「半歩だけ先」が一番伸びる。