JavaScript初心者は何から始める？HTML/CSSの次に学ぶ独学手順

学習ロードマップ
2026.06.21

HTMLとCSSを学んだあと、次に学ぶものとしてJavaScriptがあります。

HTMLはページの文章や画像を作るためのものです。CSSは見た目を整えるためのものです。JavaScriptは、ページに動きをつけるためのものです。

たとえば、JavaScriptを使うと次のようなことができます。

  • ボタンを押したら文字を変える
  • ボタンを押したら背景色を変える
  • メニューを開いたり閉じたりする
  • 入力フォームの内容をチェックする
  • 数字をカウントする
  • タブを切り替える

この記事では、JavaScriptを初めて学ぶ人向けに、作業用フォルダを作るところから順番に説明します。

最初に作るのは、「ボタンを押したら文字が変わるページ」です。そのあと、カウントアプリとフォームチェックも作ります。

この記事には広告が含まれます。

今回使うファイル

今回の練習では、次の3つのファイルを使います。

index.html
style.css
script.js

それぞれの役割は次の通りです。

  • index.html：ページの内容を書くファイル
  • style.css：見た目を整えるファイル
  • script.js：JavaScriptを書くファイル

HTML、CSS、JavaScriptを別々のファイルに分けることで、それぞれの役割が分かりやすくなります。

作業用フォルダを作る

まず、JavaScriptの練習用フォルダを作ります。

デスクトップやドキュメントなど、自分が分かりやすい場所にフォルダを作ってください。

フォルダ名は、たとえば次のようにします。

js-practice

このフォルダの中に、HTML、CSS、JavaScriptのファイルを作っていきます。

最終的には、次のような構成になります。

js-practice
├── index.html
├── style.css
└── script.js

Visual Studio Codeでフォルダを開く

次に、Visual Studio Codeを開きます。

Visual Studio Codeを開いたら、先ほど作ったjs-practiceフォルダを開きます。

  1. Visual Studio Codeを開く
  2. 「ファイル」をクリックする
  3. 「フォルダーを開く」をクリックする
  4. js-practiceフォルダを選ぶ

フォルダを開くと、左側にファイル一覧が表示されます。

まだファイルを作っていない場合は、空の状態で問題ありません。

index.htmlを作る

まず、HTMLファイルを作ります。

Visual Studio Codeの左側で、js-practiceフォルダの中に新しいファイルを作ります。

ファイル名は次のようにします。

index.html

index.htmlを作ったら、次のコードを書きます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JavaScript練習</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <h1>JavaScript練習</h1>

  <p class="message">まだボタンは押されていません。</p>

  <button class="change-button">文字を変える</button>

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

このHTMLでは、画面に次の3つを表示します。

  • 見出し
  • 文章
  • ボタン

ポイントは、次の1行です。

<script src="script.js"></script>

この行で、JavaScriptファイルを読み込んでいます。

最初のうちは、</body>の直前に書くと分かりやすいです。

style.cssを作る

次に、CSSファイルを作ります。

js-practiceフォルダの中に、新しいファイルを作ります。

ファイル名は次のようにします。

style.css

style.cssには、次のコードを書きます。

body {
  font-family: sans-serif;
  padding: 40px;
  background-color: #f5f5f5;
}

h1 {
  font-size: 28px;
}

.message {
  font-size: 18px;
  margin-bottom: 20px;
}

.change-button {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}

これで、ページに見た目がつきます。

script.jsを作る

次に、JavaScriptを書くファイルを作ります。

js-practiceフォルダの中に、新しいファイルを作ります。

ファイル名は次のようにします。

script.js

まずは、次のコードを書きます。

console.log("JavaScriptが読み込まれました");

これで、HTMLからJavaScriptファイルが読み込まれているか確認できます。

画面を確認する

ここまでできたら、画面を確認します。

まず、作成した3つのファイルを保存してください。

  • index.htmlを保存する
  • style.cssを保存する
  • script.jsを保存する

保存できたら、index.htmlをブラウザで開きます。

  1. js-practiceフォルダを開く
  2. index.htmlをダブルクリックする
  3. Google Chromeでページを開く

画面に次のように表示されればOKです。

JavaScript練習
まだボタンは押されていません。
文字を変える

次に、Google Chromeの開発者ツールを開きます。

  • Windows：F12キー または Ctrl + Shift + I
  • Mac：command + option + I

開発者ツールを開いたら、Consoleをクリックします。

Consoleに次の文字が表示されていれば、JavaScriptファイルは読み込まれています。

JavaScriptが読み込まれました

表示されない場合は、次の点を確認してください。

  • script.jsというファイル名になっているか
  • index.htmlとscript.jsが同じフォルダにあるか
  • index.htmlに<script src="script.js"></script>が書かれているか
  • ファイルを保存してからブラウザを更新したか

ボタンをJavaScriptで取得する

次に、ボタンをJavaScriptで操作していきます。

script.jsの中身を、次のコードに書き換えてください。

const button = document.querySelector(".change-button");

console.log(button);

このコードでは、HTMLにあるボタンをJavaScriptで取得しています。

HTMLでは、ボタンに次のclass名をつけていました。

<button class="change-button">文字を変える</button>

JavaScriptでは、このclass名を使ってボタンを取得します。

document.querySelector(".change-button");

class名を指定するときは、先頭に.をつけます。

  • HTMLのclass名：change-button
  • JavaScriptで指定：.change-button

画面で確認する

script.jsを書き換えたら、ファイルを保存します。

そのあと、ブラウザを更新してください。

  • Windows：Ctrl + R
  • Mac：command + R

開発者ツールのConsoleに、次のようなボタンの情報が表示されていればOKです。

<button class="change-button">文字を変える</button>

文章をJavaScriptで取得する

次に、文章部分もJavaScriptで取得します。

script.jsの中身を、次のコードに書き換えてください。

const button = document.querySelector(".change-button");
const message = document.querySelector(".message");

console.log(button);
console.log(message);

HTMLでは、文章に次のclass名をつけていました。

<p class="message">まだボタンは押されていません。</p>

JavaScriptでは、次のように取得します。

const message = document.querySelector(".message");

画面で確認する

script.jsを書き換えたら、ファイルを保存します。

ブラウザを更新して、Consoleを確認してください。

ボタンと文章の情報が表示されていればOKです。

<button class="change-button">文字を変える</button>
<p class="message">まだボタンは押されていません。</p>

ボタンを押したら文字を変える

次に、ボタンを押したときの処理を書きます。

script.jsの中身を、次のコードに書き換えてください。

const button = document.querySelector(".change-button");
const message = document.querySelector(".message");

button.addEventListener("click", function () {
  message.textContent = "ボタンが押されました。";
});

このコードでやっていることは次の通りです。

  1. ボタンを取得する
  2. 文章を取得する
  3. ボタンがクリックされたときの処理を書く
  4. 文章の中身を変更する

クリックしたときの処理は、次の部分です。

button.addEventListener("click", function () {
  message.textContent = "ボタンが押されました。";
});

clickは、クリックされたときという意味です。

textContentは、HTML要素の文字を変更するときに使います。

画面で確認する

script.jsを書き換えたら、ファイルを保存します。

ブラウザを更新してから、「文字を変える」ボタンをクリックしてください。

クリックしたあと、画面の文章が次のように変わればOKです。

ボタンが押されました。

変わらない場合は、開発者ツールのConsoleにエラーが出ていないか確認してください。

背景色も変えてみる

次に、ボタンを押したら背景色も変わるようにします。

script.jsの中身を、次のコードに書き換えてください。

const button = document.querySelector(".change-button");
const message = document.querySelector(".message");

button.addEventListener("click", function () {
  message.textContent = "ボタンが押されました。";
  document.body.style.backgroundColor = "#dff0ff";
});

追加したのは、次の1行です。

document.body.style.backgroundColor = "#dff0ff";

このコードで、ページ全体の背景色を変えています。

画面で確認する

script.jsを書き換えたら、ファイルを保存します。

ブラウザを更新してから、「文字を変える」ボタンをクリックしてください。

文章が変わり、背景色も変わればOKです。

もう一つボタンを追加する

次は、ボタンをもう一つ追加して、別の動きを作ります。

ここでは、index.htmlとscript.jsの中身を書き換えます。

index.htmlを書き換える

index.htmlの中身を、次のコードに書き換えてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JavaScript練習</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <h1>JavaScript練習</h1>

  <p class="message">まだボタンは押されていません。</p>

  <button class="change-button">文字を変える</button>
  <button class="reset-button">元に戻す</button>

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

新しく追加したのは、このボタンです。

<button class="reset-button">元に戻す</button>

script.jsを書き換える

script.jsの中身を、次のコードに書き換えてください。

const changeButton = document.querySelector(".change-button");
const resetButton = document.querySelector(".reset-button");
const message = document.querySelector(".message");

changeButton.addEventListener("click", function () {
  message.textContent = "ボタンが押されました。";
  document.body.style.backgroundColor = "#dff0ff";
});

resetButton.addEventListener("click", function () {
  message.textContent = "まだボタンは押されていません。";
  document.body.style.backgroundColor = "#f5f5f5";
});

これで、2つのボタンを使えるようになりました。

  • 文字を変えるボタン：文章と背景色を変える
  • 元に戻すボタン：文章と背景色を戻す

画面で確認する

index.htmlとscript.jsを保存します。

ブラウザを更新して、次の操作をしてください。

  1. 「文字を変える」ボタンをクリックする
  2. 文章と背景色が変わることを確認する
  3. 「元に戻す」ボタンをクリックする
  4. 文章と背景色が元に戻ることを確認する

ここまでできれば、HTMLの要素をJavaScriptで操作する基本は確認できています。

カウントアプリを作る

次に、カウントアプリを作ります。

ここからは、先ほどのコードに追記するのではなく、3つのファイルの中身をすべて書き換えます。

作るものは、ボタンを押すと数字が増えたり減ったりするページです。

index.htmlを書き換える

index.htmlの中身を、次のコードに書き換えてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>カウントアプリ</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <h1>カウントアプリ</h1>

  <p class="count">0</p>

  <button class="plus-button">増やす</button>
  <button class="minus-button">減らす</button>
  <button class="reset-button">リセット</button>

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

style.cssを書き換える

style.cssの中身を、次のコードに書き換えてください。

body {
  font-family: sans-serif;
  padding: 40px;
  background-color: #f5f5f5;
}

h1 {
  font-size: 28px;
}

.count {
  font-size: 40px;
  font-weight: bold;
}

button {
  padding: 10px 20px;
  margin-right: 8px;
  font-size: 16px;
  cursor: pointer;
}

script.jsを書き換える

script.jsの中身を、次のコードに書き換えてください。

let count = 0;

const countText = document.querySelector(".count");
const plusButton = document.querySelector(".plus-button");
const minusButton = document.querySelector(".minus-button");
const resetButton = document.querySelector(".reset-button");

plusButton.addEventListener("click", function () {
  count = count + 1;
  countText.textContent = count;
});

minusButton.addEventListener("click", function () {
  count = count - 1;
  countText.textContent = count;
});

resetButton.addEventListener("click", function () {
  count = 0;
  countText.textContent = count;
});

ここで出てくる重要な部分は、次のコードです。

let count = 0;

countという変数に、最初の数字として0を入れています。

次のコードで、数字を1増やしています。

count = count + 1;

次のコードで、画面の数字を更新しています。

countText.textContent = count;

画面で確認する

3つのファイルを保存します。

ブラウザを更新して、画面に次の内容が表示されるか確認してください。

カウントアプリ
0
増やす
減らす
リセット

次に、ボタンをクリックして動作を確認します。

  1. 「増やす」をクリックして、数字が1ずつ増えるか確認する
  2. 「減らす」をクリックして、数字が1ずつ減るか確認する
  3. 「リセット」をクリックして、数字が0に戻るか確認する

数字が画面上で変わればOKです。

条件分岐を追加する

次に、条件分岐を追加します。

今のカウントアプリでは、「減らす」を押し続けると数字がマイナスになります。

ここでは、数字が0より小さくならないようにします。

script.jsの中身を、次の完成版に書き換えてください。

let count = 0;

const countText = document.querySelector(".count");
const plusButton = document.querySelector(".plus-button");
const minusButton = document.querySelector(".minus-button");
const resetButton = document.querySelector(".reset-button");

plusButton.addEventListener("click", function () {
  count = count + 1;
  countText.textContent = count;
});

minusButton.addEventListener("click", function () {
  if (count > 0) {
    count = count - 1;
    countText.textContent = count;
  }
});

resetButton.addEventListener("click", function () {
  count = 0;
  countText.textContent = count;
});

追加した条件分岐は、次の部分です。

if (count > 0) {
  count = count - 1;
  countText.textContent = count;
}

ifは、条件によって処理を分けるときに使います。

このコードでは、countが0より大きいときだけ、数字を減らします。

画面で確認する

script.jsを保存します。

ブラウザを更新して、次の操作をしてください。

  1. 「減らす」をクリックする
  2. 数字が0のまま変わらないことを確認する
  3. 「増やす」を何回かクリックする
  4. 「減らす」をクリックして、0まで戻ることを確認する
  5. 0より下の数字にならないことを確認する

0より下に進まなければOKです。

入力フォームのチェックを作る

次に、フォームの入力チェックを作ります。

ここからは、カウントアプリのコードに追記するのではなく、3つのファイルの中身をすべて書き換えます。

今回は、名前が空欄ならメッセージを表示する簡単なフォームを作ります。

index.htmlを書き換える

index.htmlの中身を、次のコードに書き換えてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>フォームチェック</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <h1>フォームチェック</h1>

  <label>
    名前：
    <input type="text" class="name-input">
  </label>

  <button class="check-button">確認する</button>

  <p class="result"></p>

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

style.cssを書き換える

style.cssの中身を、次のコードに書き換えてください。

body {
  font-family: sans-serif;
  padding: 40px;
  background-color: #f5f5f5;
}

input {
  padding: 8px;
  font-size: 16px;
}

button {
  padding: 8px 16px;
  margin-left: 8px;
  font-size: 16px;
  cursor: pointer;
}

.result {
  margin-top: 20px;
  font-size: 18px;
  font-weight: bold;
}

script.jsを書き換える

script.jsの中身を、次のコードに書き換えてください。

const nameInput = document.querySelector(".name-input");
const checkButton = document.querySelector(".check-button");
const result = document.querySelector(".result");

checkButton.addEventListener("click", function () {
  if (nameInput.value === "") {
    result.textContent = "名前を入力してください。";
  } else {
    result.textContent = nameInput.value + "さん、こんにちは。";
  }
});

このコードでは、入力欄が空かどうかを確認しています。

入力欄の中身は、次のように取得できます。

nameInput.value

空欄かどうかを確認しているのは、次の部分です。

if (nameInput.value === "") {
  result.textContent = "名前を入力してください。";
}

elseは、それ以外の場合の処理です。

else {
  result.textContent = nameInput.value + "さん、こんにちは。";
}

画面で確認する

3つのファイルを保存します。

ブラウザを更新して、画面に次の内容が表示されるか確認してください。

フォームチェック
名前：
確認する

次に、フォームの動きを確認します。

  1. 入力欄を空のまま「確認する」をクリックする
  2. 「名前を入力してください。」と表示されるか確認する
  3. 入力欄に名前を入力する
  4. もう一度「確認する」をクリックする
  5. 「〇〇さん、こんにちは。」と表示されるか確認する

入力内容によって表示される文章が変わればOKです。

JavaScriptが動かないときに確認するところ

JavaScriptが動かないときは、まず次の部分を確認します。

  • ファイルを保存してからブラウザを更新したか
  • script.jsのファイル名が間違っていないか
  • index.htmlとscript.jsが同じフォルダにあるか
  • HTMLでscript.jsを読み込んでいるか
  • class名がHTMLとJavaScriptで同じか
  • Consoleにエラーが出ていないか
  • 記号の書き忘れがないか

特に多いのは、class名の間違いです。

HTMLで次のように書いている場合、

<button class="plus-button">増やす</button>

JavaScriptでは次のように書きます。

const plusButton = document.querySelector(".plus-button");

HTMLではplus-buttonなのに、JavaScriptで別の名前を書いていると、正しく取得できません。

また、JavaScriptファイルをHTMLで読み込んでいない場合も動きません。

<script src="script.js"></script>

この1行が入っているか確認してください。

JavaScript初心者が最初に学ぶ順番

ここまでの練習で、JavaScriptの基本的な使い方をいくつか扱いました。

最初は、次の順番で学ぶと進めやすいです。

  1. 作業用フォルダを作る
  2. index.html、style.css、script.jsを作る
  3. HTMLからCSSとJavaScriptを読み込む
  4. console.logで読み込み確認をする
  5. document.querySelectorでHTML要素を取得する
  6. addEventListenerでクリック処理を書く
  7. textContentで文字を変える
  8. 変数を使って数字を管理する
  9. if文で条件分岐を書く
  10. 入力フォームのvalueを取得する

この順番で学ぶと、HTML/CSSで作ったページにJavaScriptを追加できるようになります。

学習に使う教材について

JavaScriptを独学する場合、ネットの記事だけでも学習はできます。

ただ、HTML、CSS、JavaScriptを別々に調べていると、学ぶ順番が分かりにくくなることがあります。

そこで、HTML、CSS、JavaScriptをまとめて学びたい人には、『作りながら学ぶWebプログラミング実践入門』のような本を使うのも一つの方法です。

この本では、HTML、CSS、JavaScriptだけでなく、Node.js、Express、SQLite3まで扱っています。

最初にHTMLとCSSでWebページの基本を学び、そのあとJavaScriptでページに動きをつける流れになっています。さらに、Node.jsやExpressを使ったサーバー側の処理、SQLiteを使ったデータベースの基本にも進みます。

最後には、ログイン管理やタスクの作成・取得・更新・削除ができるTodo管理アプリケーションを作る内容になっています。

そのため、JavaScriptだけを少し試したい人よりも、HTML/CSSの次にJavaScriptを学び、その先でWebアプリケーション作成まで見ておきたい人に向いています。

この記事で作ったような、ボタンを押して画面の表示を変える練習から始めて、いずれNode.jsやデータベースにも進みたい場合は、手元に置いておくと学習の流れをつかみやすいです。

作りながら学ぶWebプログラミング実践入門 一冊で理解するHTML、CSS、JavaScript、Node.js

作りながら学ぶWebプログラミング実践入門 一冊で理解するHTML、CSS、JavaScript、Node.js [ 掌田津耶乃 ]

価格:2948円
(2026/6/21 10:27時点)
感想(0件)

JavaScriptの基本だけで終わらず、サーバー側の処理やデータベースまでつなげて学びたい人は、このような本を使って流れを確認しておくと進めやすいです。

JavaScriptで最初に作る練習課題

最初の練習課題としては、次のようなものが作りやすいです。

  • ボタンを押したら文字が変わるページ
  • ボタンを押したら背景色が変わるページ
  • 数字が増えるカウントアプリ
  • 名前を入力するとメッセージが出るフォーム
  • Q&Aを開いたり閉じたりするアコーディオン
  • タブをクリックすると内容が切り替わるページ

まずは、1つの機能だけを作るところから始めると進めやすいです。

HTML/CSSで作った練習サイトに、次のようなJavaScriptを足すこともできます。

  • よくある質問をクリックで開閉する
  • メニューをクリックで表示する
  • トップへ戻るボタンを作る
  • お問い合わせフォームの空欄チェックをする

まとめ

HTML/CSSの次にJavaScriptを学ぶなら、まずは作業用フォルダを作り、次の3つのファイルを用意します。

  • index.html
  • style.css
  • script.js

そのうえで、次の順番で練習します。

  1. HTMLでボタンや文章を用意する
  2. CSSで見た目を整える
  3. JavaScriptファイルを読み込む
  4. console.logで読み込み確認をする
  5. document.querySelectorでHTML要素を取得する
  6. addEventListenerでクリック処理を書く
  7. textContentで画面の文字を変える
  8. 変数やif文を使って処理を増やす

最初に作るものは、ボタンを押したら文字が変わるページで十分です。

そこから、カウントアプリやフォームチェックなどに進むと、JavaScriptでWebページを動かす基本を練習できます。

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