レッスン1：JavaScriptをはじめよう——HTMLに動きを与える第一歩

このレッスンで学ぶこと

JavaScriptが何を担う言語かを説明できる
HTMLにJavaScriptを埋め込む方法を理解する
外部スクリプトファイルを読み込めるようになる
ブラウザのDevToolsでコンソールを開いて結果を確認できる
console.logで自分の書いたJavaScriptを動かせる

JavaScriptとは何か

JavaScriptは、Webページに「動き」と「対話」を加えるためのプログラミング言語です。ボタンを押すと数字が変わる、入力した名前がその場で表示される、画像をクリックすると拡大される——こうした動的な振る舞いはほとんどがJavaScriptで実現されています。

HTMLはページの骨格、CSSは見た目の装飾を担当します。JavaScriptは、それらと並ぶWebの3本柱の3つ目で、「振る舞い」を担当します。HTMLとCSSが「静的なページ」を作るのに対し、JavaScriptは「動的なページ」、つまり利用者の操作や時間の経過で変化するページを作ります。

💡 ポイント Web制作の3本柱と役割分担を整理しておきます。HTML＝構造、CSS＝装飾、JavaScript＝振る舞い。この3つが組み合わさって、現代のWebページが成り立っています。

JavaScriptは「ブラウザで動く」とは限らない

JavaScriptはブラウザ上で動く言語として知られていますが、実は最近ではブラウザの外でも広く使われています。サーバー側のプログラム、デスクトップアプリ、スマートフォンアプリなど、活躍の場は大きく広がっています。本コースの最終レッスン（レッスン8）で簡単に紹介します。

ただし入門段階ではブラウザの中だけに集中するのが学びやすいので、レッスン1〜7はブラウザJavaScriptに絞って進めます。

前提：HTML・CSSコースで作ったフォルダを使う

本コースは「HTML・CSS入門」の続編です。HTML・CSSコースで作った my-website フォルダを引き続き使い、そこへJavaScriptを足していきます。HTML・CSSコースを終えていない方も、ご自身で my-website フォルダと簡単なHTML・CSSを用意していれば、このコースから始められます。

参考までに、HTML・CSSコース最終レッスン時点のフォルダ構成は次のようになっています。

my-website/
├── index.html
├── works.html
├── contact.html
└── assets/
    ├── css/
    │   └── style.css
    └── img/
        └── profile.jpg

このコースでは、ここに assets/js/main.js を新しく追加します。

ステップ1：jsフォルダとmain.jsを作る

VSCodeで my-website フォルダを開いてください。assets フォルダの中に、新たに js フォルダを作ります。サイドバーで assets にカーソルを当てると表示される「新しいフォルダー」アイコンをクリックし、フォルダ名に js と入力してEnterを押します。

続いて js フォルダの中に main.js というファイルを作ります。js フォルダにカーソルを当てて「新しいファイル」アイコンをクリックし、main.js と入力してEnterを押してください。

main.js は空のファイルとして作成されます。最初の動作確認のため、次の1行を書いてみましょう。

console.log("Hello, JavaScript!");

書けたら保存（Ctrl + S または Command + S）してください。

📝 補足 JavaScriptのファイル名は半角英数字で付けます。本コースでは main.js を使いますが、script.js や app.js といった名前もよく使われます。重要なのは、HTMLから読み込むときのパスと一致していることです。

ステップ2：HTMLからJavaScriptを読み込む

main.js を作っただけでは、HTMLから呼び出されないのでブラウザでは動きません。index.html の <head> 内、</head> の直前に、次の1行を追加します。

<script src="assets/js/main.js" defer></script>

これは「assets/js/main.js を読み込んで実行してください」という指示です。<link> でCSSを読み込むのと似ていますが、JavaScriptは <script> タグを使います。

`defer` の意味

defer は「ページのHTMLの読み込みが終わってから、このスクリプトを実行する」という指示です。これがないと、JavaScriptがHTMLより先に動こうとして、まだ存在しない要素を操作しようとしてエラーになることがあります。レッスン6でDOMを操作するときに効いてきます。

入門の段階では「<head> 内に <script> を書くときは必ず defer を付ける」と覚えておけば十分です。

💡 ポイント defer 属性を付けたスクリプトは、HTMLの解析が完了してから順番に実行されます。これにより、JavaScriptがHTMLの要素を確実に見つけられる状態で動き始められます。

ステップ3：DevToolsのコンソールを開く

console.log で出力した内容は、ブラウザの「コンソール」という場所に表示されます。コンソールはDevTools（開発者ツール）の中にあります。

ブラウザで index.html を開き、次のキーで開発者ツールを開いてください。

Windows：F12 キー
macOS：Option + Command + I

開発者ツールが画面の下または右に表示されたら、「Console」または「コンソール」というタブをクリックしてください。

「Hello, JavaScript!」という文字が表示されていれば成功です。これがあなたの最初のJavaScriptの実行結果です。

🔰 初学者の方へ コンソールは、JavaScriptの動きを確認するための重要な道具です。本コースでは何度も使います。最初は「コンソールがどこにあるか」だけ覚えればOK。慣れてくると、コードを書く時間と同じくらいコンソールを見る時間が増えていきます。

console.logの使い方

console.log() は、括弧の中に書いたものをコンソールに出力する命令です。文字列、数値、計算結果、変数の中身など、なんでも表示できます。

main.js の内容を、次のように書き換えて試してみてください。

console.log("Hello, JavaScript!");
console.log(123);
console.log(1 + 2);
console.log("今は" + 2026 + "年です");

保存してブラウザを再読み込みすると、コンソールに4行が表示されます。

Hello, JavaScript!
123
3
今は2026年です

3行目は計算結果が表示されていることに注目してください。JavaScriptは 1 + 2 を計算して 3 をコンソールに出します。4行目では文字列と数値を + でつないで、長い文字列を作っています。

💡 ポイント console.log は、入門段階で最もよく使うJavaScriptの命令です。「いま変数に何が入っているか」「処理がここまで動いたか」を確認するのに使います。少し書いては console.log で確認、というリズムが作れると、エラーで詰まる時間が減ります。

JavaScriptはどこに書いてもいい？

JavaScriptをHTMLに書く方法は、CSSと同じく3通りあります。

1つ目はインラインスクリプト：HTMLタグの属性に直接書く方法。onclick 属性などが該当します。今ではあまり推奨されません。

2つ目は内部スクリプト：<script> タグの中に直接JavaScriptを書く方法。

<script>
  console.log("内部スクリプトです");
</script>

3つ目は外部スクリプト：別の .js ファイルを <script src="..."> で読み込む方法。本コースで採用します。

実務でも入門学習でも、外部スクリプトが基本です。HTMLとJavaScriptをファイルで分けると、どちらの修正も楽になり、複数ページから同じJavaScriptを使い回せます。

📝 補足 CSSのレッスン3でも、内部スタイルではなく外部CSSを推奨しました。HTML・CSS・JavaScriptをそれぞれ別ファイルに分けて管理するのは、現代のWeb制作の基本姿勢です。

エラーが出たときの対処

書いたJavaScriptに間違いがあると、コンソールに赤い文字でエラーメッセージが表示されます。最初は怖く感じるかもしれませんが、エラーは「どこで・何が間違っているか」をブラウザが教えてくれているメッセージです。

例えば、文字列を囲むダブルクォーテーションを閉じ忘れると、こんなエラーが出ます。

Uncaught SyntaxError: Invalid or unexpected token

このメッセージの右側には、どのファイルの何行目で起きたかが書かれています。クリックするとエディタの該当行に飛べます。エラーは敵ではなく、デバッグの味方です。

⚠️ 注意 何もしていないのにJavaScriptが動かないときは、console.log("test") のように動作確認用の1行を追加して、それすら出力されないか確認しましょう。出力されない場合、<script> の src のパスが間違っているか、ファイル名のスペルが違うか、保存し忘れか、のいずれかであることがほとんどです。

まとめ

このレッスンでは、以下のことを学びました。

JavaScriptは、Webページに動きと対話を加えるためのプログラミング言語である
役割分担はHTML＝構造、CSS＝装飾、JavaScript＝振る舞いの3本柱
外部スクリプトを <script src="..." defer></script> で読み込むのが基本
defer は「HTMLの解析後にスクリプトを実行する」指示で、入門段階では必ず付ける
console.log() でコンソールに値を出力できる
DevToolsのコンソールは、JavaScriptの動きを確認するための重要な道具

次のレッスンでは、JavaScriptで値を扱う基本となる「変数とデータ型」を学びます。文字列・数値・真偽値といった主要なデータ型と、let ・ const による変数の宣言方法を身につけましょう。

確認クイズ

このレッスンの理解度をチェックしましょう。

JavaScriptをはじめよう——HTMLに動きを与える第一歩