JavaScript勉強 1日目：まず「動かす」→「触る」→「わかる」

プロコム開発チーム

今日のゴール

ブラウザで Hello, JavaScript! が出る

ボタンをクリックして数字が増える（DOM操作）

つまずいたら自分で原因を見つけられる（DevTools/console）

Contents

1 0. 環境準備（5分）
2 1. とにかく動かす（最小のHTML + JS）
3 2. 今日覚える最低限の文法
4 3. DOMって何？（超ざっくり）
5 4. よくあるエラーと直し方（デバッグの基本）
6 5. 1日目の練習問題（解答はあなたの手で）
7 6. さらに学ぶ：今日は言葉だけ
8 7. よくある質問（1日目版）
9 8. 明日の予告（2日目）
- 9.1 最後に：チェックリスト ✅

0. 環境準備（5分）

ブラウザ：Chrome（Edge/Safari でもOK。この記事はChrome基準）
エディタ：VS Code（メニューは日本語化してOK）
フォルダを1つ作る：js-day1

1. とにかく動かす（最小のHTML + JS）

js-day1 の中に2つのファイルを作成します。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <title>JavaScript Day 1</title>
  <style>
    body { font-family: system-ui, sans-serif; max-width: 720px; margin: 40px auto; line-height: 1.8; }
    .btn { padding: 8px 12px; border: 1px solid #ddd; border-radius: 8px; cursor: pointer; }
    .counter { font-size: 1.2rem; font-weight: bold; }
    .card { background: #fafafa; border: 1px solid #eee; border-radius: 12px; padding: 16px; margin: 12px 0; }
  </style>
</head>
<body>
  <h1>JavaScript 勉強 1日目</h1>

  <div class="card">
    <h2>1) Hello, JavaScript!</h2>
    <p id="hello"></p>
  </div>

  <div class="card">
    <h2>2) クリックで数字が増える</h2>
    <p>今のカウント：<span class="counter" id="count">0</span></p>
    <button class="btn" id="inc">+1</button>
    <button class="btn" id="dec">-1</button>
    <button class="btn" id="reset">reset</button>
  </div>

  <div class="card">
    <h2>3) 入力から挨拶をつくる</h2>
    <input id="name" placeholder="あなたの名前" />
    <button class="btn" id="greet">挨拶する</button>
    <p id="message"></p>
  </div>

  <script src="./main.js"></script>
</body>
</html>

main.js

// 1) 画面にメッセージを出す
const hello = document.querySelector('#hello');
hello.textContent = 'Hello, JavaScript! 今日は「DOMを触る」までやるよ。';

// 2) クリックで数字が増える（状態 = state）
let count = 0;
const countEl = document.querySelector('#count');
const incBtn = document.querySelector('#inc');
const decBtn = document.querySelector('#dec');
const resetBtn = document.querySelector('#reset');

function render() {
  countEl.textContent = count;
}

incBtn.addEventListener('click', () => {
  count = count + 1; // もしくは count += 1;
  render();
});

decBtn.addEventListener('click', () => {
  count = count - 1;
  render();
});

resetBtn.addEventListener('click', () => {
  count = 0;
  render();
});

render(); // 初期表示

// 3) 入力から挨拶をつくる（テンプレートリテラル）
const nameInput = document.querySelector('#name');
const greetBtn = document.querySelector('#greet');
const message = document.querySelector('#message');

greetBtn.addEventListener('click', () => {
  const name = nameInput.value.trim();
  if (!name) {
    message.textContent = '名前を入れてね！';
    return;
  }
  const now = new Date();
  const hour = now.getHours();
  const timeWord = hour < 12 ? 'おはよう' : hour < 18 ? 'こんにちは' : 'こんばんは';
  message.textContent = `${timeWord}、${name}さん！ JavaScript 1日目がんばって！`;
});

// デバッグ：エラーにならないようにしてから console.log で中身を見る
console.log({ count, hourSample: new Date().getHours() });

index.html をブラウザで開いて動けばOK。
クリックで数字が増える／減る／リセットできたら、もうDOM操作の第一歩は完了です。

2. 今日覚える最低限の文法

変数（`let` / `const`）

let age = 20;     // あとで変える
const site = 'Procom'; // 基本は const を使う。変わるものだけ let

文字列の埋め込み（テンプレートリテラル）

const name = 'Hanako';
console.log(`ようこそ、${name}さん！`);

条件分岐（三項演算子も一例）

const hour = new Date().getHours();
const timeWord = hour < 12 ? 'おはよう' : hour < 18 ? 'こんにちは' : 'こんばんは';

配列とループ（for…of）

const fruits = ['apple', 'banana', 'orange'];
for (const f of fruits) {
  console.log(f);
}

3. DOMって何？（超ざっくり）

HTMLを木構造として扱えるオブジェクト＝DOM
JSから document.querySelector('CSSセレクタ') で要素を取る
textContent, value, classList.add/remove, style などで中身や見た目を変える
addEventListener('click', fn) でイベントに反応させる

今日は 「要素を取る → 値を変える → クリックに反応する」 まで押さえれば十分！

4. よくあるエラーと直し方（デバッグの基本）

要素が取れない (null)
→ セレクタの綴り/IDが合ってるか？ JS読み込みが <body> の最後か？
JavaScriptのエラーで止まる
→ Chromeで F12 → Console タブ。赤いメッセージを読む（行番号クリックで該当箇所へ）。
何も起きない
→ とりあえず console.log('ここまで来た') を入れて、コードが実行されているか確かめる。

デバッグは「仮説 → 観測 → 修正」。console.log は最強の虫眼鏡。

5. 1日目の練習問題（解答はあなたの手で）

2倍ボタン：現在の count を「×2」にするボタンを追加
下限ゼロ：count が0未満にならないようにする
Enterで挨拶：名前入力で Enter を押したらボタンと同じ動作
ボーナス（挑戦）：
- カウントが 10 のときだけ文字色を変える
- localStorage にカウントを保存して、ページ再読込しても続きから始める