基礎から学ぶJavaScript 90日コース | JavaScriptを動かして慣れる－ Day 1：JavaScriptとは何か

90日で身につけるJavaScript

2026.08.24

Day 1：JavaScriptとは何か（前半）
JavaScriptでできること
1. Webページに「動き」と「反応」を与える言語
HTML・CSS・JavaScriptの役割
1. 3つで1つの「Webページ」を作る
ブラウザでJavaScriptを実行する方法
1. いちばんシンプルな「実行環境」を作る
console.log() と開発者ツールの使い方
1. 「中身をのぞく窓」としてのコンソール
2. console.log() の基本
実践1：「Hello JavaScript」を表示する
1. Step 1：scriptタグの中にコードを書く
2. Step 2：ブラウザとコンソールで確認する
実践2：名前や好きな言葉をコンソールに表示する
1. 自分の情報をコードにしてみる
JavaScript実行環境という「成果物」
1. 「動かせる場所」を作れたことが大きな一歩
Day 1前半のまとめ
Day 1：JavaScriptとは何か（後半）
JavaScriptでできることを、もう少し具体的にイメージする
1. 「静的なページ」から「動くページ」へ
HTML・CSS・JavaScriptの役割を、コードで再確認する
1. シンプルな構成で役割を見てみる
ブラウザでJavaScriptを実行する方法の「感覚」を固める
1. 「ブラウザがコードを読む順番」を意識する
console.log() を「デバッグの相棒」として使う
1. 単なるおまけではなく「必須の道具」
開発者ツールの使い方を一歩進める
1. エラーを「怖がらずに読む」練習
実践：「Hello JavaScript」と自己紹介をまとめて書く
1. Day 1後半の仕上げコード
2. このコードで確認してほしいこと
JavaScript実行環境という「土台」を意識する
1. これからの90日間の「練習場」
Day 1後半のまとめ

Day 1：JavaScriptとは何か（前半）

Day 1前半では、「JavaScriptとは何か」を、できるだけ手触りのある形で理解していきます。単なる用語説明ではなく、「ブラウザで実際に動かしてみる」ことを通して、JavaScriptがどんな役割を持つ言語なのかを体感してもらうことを目標にします。最終的には、「Hello JavaScript」を表示し、名前や好きな言葉をコンソールに出せるところまで進みます。

JavaScriptでできること

Webページに「動き」と「反応」を与える言語

JavaScriptは、主にWebブラウザ上で動くプログラミング言語です。 HTMLとCSSだけでは「静的なページ」しか作れませんが、JavaScriptを組み合わせることで、次のような「動き」や「反応」を持つページにできます。

ボタンを押したらメッセージが表示される
入力フォームに間違いがあれば、その場でエラーを表示する
スクロールに合わせてアニメーションが動く
サーバーと通信して、最新のデータを画面に反映する

つまり、JavaScriptはユーザーの操作に応じてページを変化させるための言語だと考えると分かりやすいです。

HTML・CSS・JavaScriptの役割

3つで1つの「Webページ」を作る

Webページは、主に次の3つの要素で構成されています。

HTML：構造（なにがあるか） 見出し、段落、画像、リンクなど、「ページの骨組み」を作ります。
CSS：見た目（どう見えるか） 文字の色、背景色、余白、レイアウトなど、「デザイン」を担当します。
JavaScript：動き（どう動くか） ボタンを押したときの処理、入力チェック、アニメーション、データの更新など、「振る舞い」を担当します。

イメージとしては、次のように考えると分かりやすいです。

HTML：家の間取り図
CSS：インテリアや壁紙
JavaScript：電気・家電・自動ドアなどの仕組み

Day 1では、この3つのうち「JavaScript」がどこにどう関わるのかを、実際にコードを書きながら確認していきます。

ブラウザでJavaScriptを実行する方法

いちばんシンプルな「実行環境」を作る

まずは、ブラウザでJavaScriptを動かすための、最もシンプルな環境を作ります。ここでは、ファイルを1つだけ用意して、その中にHTMLとJavaScriptを一緒に書く方法を使います。

Step 1：ファイルを作る

任意のフォルダに day1 という名前のフォルダを作ります。
その中に index.html というファイルを作ります。

Step 2：基本のHTMLテンプレートを書く

index.html に、次のコードを書きます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 1：JavaScriptとは何か</title>
</head>
<body>
  <h1>Day 1：JavaScriptとは何か（前半）</h1>

  <!-- ここに JavaScript を書いていきます -->
  <script>
    // ここに JavaScript のコードを書きます
    // ブラウザがこの <script> タグの中身を読み込んで実行します
  </script>
</body>
</html>

この状態でブラウザ（ChromeやEdgeなど）で index.html を開くと、「Day 1：JavaScriptとは何か（前半）」という見出しだけが表示されます。まだJavaScriptの中身は空ですが、すでに「JavaScriptを実行できる場所」は用意できている状態です。

console.log() と開発者ツールの使い方

「中身をのぞく窓」としてのコンソール

JavaScriptのコードが正しく動いているか、どんな値が入っているかを確認するために、コンソールという機能を使います。コンソールは、ブラウザの「開発者ツール」の一部として提供されています。

開発者ツールを開く方法（例：Chrome）

ブラウザで index.html を開きます。
キーボードで F12 を押すか、右クリックして「検証」を選びます。
開発者ツールが表示されたら、「Console」タブをクリックします。

この「Console」タブに、console.log() で出力したメッセージが表示されます。

console.log() の基本

console.log() は、コンソールにメッセージや値を表示するための関数です。コードの動きを確認したり、変数の中身をチェックしたりするときに、非常によく使います。

console.log('Hello JavaScript'); // コンソールに「Hello JavaScript」と表示されます

console.log('Hello JavaScript'); // コンソールに「Hello JavaScript」と表示されます

JavaScript

実践1：「Hello JavaScript」を表示する

Step 1：scriptタグの中にコードを書く

先ほど作った index.html の <script> タグの中に、次のコードを書きます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 1：JavaScriptとは何か</title>
</head>
<body>
  <h1>Day 1：JavaScriptとは何か（前半）</h1>

  <script>
    // JavaScript が正しく動いているか確認するために、
    // コンソールに「Hello JavaScript」と表示してみます。
    console.log('Hello JavaScript');
  </script>
</body>
</html>

Step 2：ブラウザとコンソールで確認する

ブラウザで index.html を開きます。
開発者ツールを開き、「Console」タブを表示します。
コンソールに Hello JavaScript と表示されていれば成功です。

ここまでできると、「ブラウザでJavaScriptを実行できている」「コンソールに出力できている」という、Day 1の最初のゴールに到達しています。

実践2：名前や好きな言葉をコンソールに表示する

自分の情報をコードにしてみる

次は、少しだけ自分の情報をコードにしてみます。名前や好きな言葉をコンソールに表示することで、「JavaScriptで文字を扱う感覚」をつかんでいきます。

例：名前と好きな言葉を表示する

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 1：JavaScriptとは何か</title>
</head>
<body>
  <h1>Day 1：JavaScriptとは何か（前半）</h1>

  <script>
    // 「Hello JavaScript」を表示します
    console.log('Hello JavaScript');

    // 自分の名前をコンソールに表示します
    // 文字列は '（シングルクォート）か "（ダブルクォート）で囲みます
    console.log('名前：山田太郎');

    // 好きな言葉をコンソールに表示します
    console.log('好きな言葉：継続は力なり');

    // もう少し遊んでみたい場合は、複数行に分けて表示しても構いません
    console.log('--- 自己紹介ここまで ---');
  </script>
</body>
</html>

ここで意識したいポイント

文字列（テキスト）は '...' または "..." で囲みます。
console.log() は、「今なにが起きているか」を確認するための強力な味方です。
エラーが出たときも、コンソールにメッセージが表示されるので、原因を探す手がかりになります。

JavaScript実行環境という「成果物」

「動かせる場所」を作れたことが大きな一歩

Day 1前半の成果物は、「JavaScript実行環境」です。ここでいう実行環境とは、難しい意味ではなく、次のような状態を指します。

index.html ファイルがあり、ブラウザで開ける
<script> タグの中にJavaScriptを書ける
コンソールに console.log() の結果が表示される
開発者ツールを開いて、エラーやログを確認できる

この状態まで来ていると、今後90日間の学習で書くあらゆるJavaScriptコードを、同じようにブラウザで試すことができます。つまり、「練習場」が整ったということです。

Day 1前半のまとめ

Day 1前半では、次のようなポイントを押さえました。

JavaScriptは、Webページに「動き」と「反応」を与える言語であること
HTMLが構造、CSSが見た目、JavaScriptが動きを担当すること
ブラウザでJavaScriptを実行するための、最もシンプルな index.html を作ったこと
開発者ツールのコンソールを使って、console.log() の結果を確認したこと
「Hello JavaScript」を表示し、名前や好きな言葉をコンソールに出すコードを書いたこと
JavaScriptを試せる「実行環境」という成果物を手に入れたこと

ここまでできていると、「JavaScriptをどこに書き、どうやって動かすか」という最初のハードルはクリアできています。

Day 1：JavaScriptとは何か（後半）

Day 1後半では、前半で作った「JavaScript実行環境」を使いながら、もう一歩踏み込んでJavaScriptの感覚をつかんでいきます。すでに「Hello JavaScript」をコンソールに表示できていますので、ここからは「エラーの見え方」「HTMLとのつながり」「console.log()の使いどころ」「開発者ツールの使い方」を、初心者向けに丁寧に確認していきます。

JavaScriptでできることを、もう少し具体的にイメージする

「静的なページ」から「動くページ」へ

前半では、JavaScriptが「Webページに動きと反応を与える言語」であることを学びました。後半では、もう少し具体的なイメージを持ってもらうために、次のような場面を想像してみてください。

ボタンを押したらメッセージが変わる
入力した文字をその場で画面に表示する
時間に応じて表示内容が変わる（朝は「おはよう」、夜は「こんばんは」など）

これらはすべて、JavaScriptが「HTMLの内容を動的に書き換える」ことで実現されています。 Day 1の段階では、まだそこまでコードを書きませんが、「JavaScriptはHTMLを動かす力を持っている」というイメージを持っておくと、今後の学習がスムーズになります。

HTML・CSS・JavaScriptの役割を、コードで再確認する

シンプルな構成で役割を見てみる

ここでは、HTML・CSS・JavaScriptの役割を、実際のコードで確認してみます。

index.html（役割確認用テンプレート）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 1 後半：役割の確認</title>

  <!-- CSS：見た目を整えるためのスタイル -->
  <style>
    body {
      font-family: sans-serif;
      padding: 20px;
    }

    h1 {
      color: #007acc; /* 見出しの文字色を青にします */
    }

    p {
      margin-bottom: 8px;
    }

    .note {
      color: #555;
      font-size: 0.9rem;
    }
  </style>
</head>
<body>
  <!-- HTML：ページの構造（何があるか） -->
  <h1>Day 1：JavaScriptとは何か（後半）</h1>
  <p>これは HTML が作る「文章の構造」です。</p>
  <p class="note">CSS が文字の色や余白を調整しています。</p>

  <!-- JavaScript：動きやログを担当します -->
  <script>
    // JavaScript が読み込まれたことをコンソールに表示します
    console.log('JavaScript が読み込まれました');

    // ここに、今後「動き」を追加していくことができます
  </script>
</body>
</html>

このコードでは、

HTMLが「見出し」「段落」「クラス付きの段落」を定義しています。
CSSが「文字の色」「フォント」「余白」を調整しています。
JavaScriptが「コンソールへのログ出力」を担当しています。

このように、3つがそれぞれ違う役割を持ちながら、1つのページを作っていることが分かります。

ブラウザでJavaScriptを実行する方法の「感覚」を固める

「ブラウザがコードを読む順番」を意識する

ブラウザは、HTMLファイルを上から順番に読み込んでいきます。

<head> の中身（タイトルやCSSなど）
<body> の中身（見出しや文章など）
<script> の中身（JavaScript）

<script> タグの中に書かれたJavaScriptは、ブラウザがその場所に到達したタイミングで実行されます。

例：読み込み順を意識したコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 1 後半：読み込み順</title>
</head>
<body>
  <h1>読み込み順の確認</h1>

  <p>この文章は、JavaScript より先に表示されます。</p>

  <script>
    // このコードは、ブラウザが <script> タグに到達したときに実行されます
    console.log('ここまで HTML を読み込みました');
  </script>

  <p>この文章は、JavaScript のコードより後に書かれています。</p>
</body>
</html>

コンソールには ここまで HTML を読み込みました と表示されます。このように、「ブラウザがどのタイミングでJavaScriptを実行しているか」を意識すると、後でDOM操作（HTMLを書き換える処理）を学ぶときに理解しやすくなります。

console.log() を「デバッグの相棒」として使う

単なるおまけではなく「必須の道具」

console.log() は、初心者にとってもプロにとっても、非常に重要な道具です。コードが思った通りに動かないとき、まず最初に頼るのがコンソールです。

例：複数のログを使って流れを確認する

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 1 後半：console.log の使い方</title>
</head>
<body>
  <h1>console.log() でコードの流れを確認する</h1>

  <script>
    console.log('スクリプトの開始'); // 1. 最初に実行されます

    console.log('Hello JavaScript'); // 2. メッセージを表示します

    console.log('名前：山田太郎'); // 3. 名前を表示します
    console.log('好きな言葉：継続は力なり'); // 4. 好きな言葉を表示します

    console.log('スクリプトの終了'); // 5. 最後に実行されます
  </script>
</body>
</html>

コンソールには、上から順番にログが表示されます。これにより、「コードがどの順番で実行されているか」を視覚的に確認できます。

開発者ツールの使い方を一歩進める

エラーを「怖がらずに読む」練習

JavaScriptを書いていると、必ずエラーが出ます。エラーは「失敗」ではなく、「どこがおかしいかを教えてくれるメッセージ」です。

よくあるエラー例：カッコの閉じ忘れ

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 1 後半：エラーの例</title>
</head>
<body>
  <h1>エラーを体験してみる</h1>

  <script>
    // これはわざと間違えたコードです
    // カッコを閉じ忘れています
    console.log('これはエラーになります';
  </script>
</body>
</html>

このコードをブラウザで開くと、コンソールに赤い文字でエラーが表示されます。

メッセージ例：Uncaught SyntaxError: missing ) after argument list
行番号も表示されるので、「どこで問題が起きているか」を特定できます。

ここで大事なのは、

エラーが出てもページは壊れない（ブラウザは落ちない）
コンソールが「どこがおかしいか」を教えてくれる
エラーを読むこと自体が、プログラミングの重要なスキルである

ということです。

実践：「Hello JavaScript」と自己紹介をまとめて書く

Day 1後半の仕上げコード

ここまでの内容をまとめて、「Hello JavaScript」と自己紹介をコンソールに表示するコードを、コメント付きで整理してみます。

index.html（Day 1後半・まとめ）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 1：JavaScriptとは何か（後半まとめ）</title>
  <style>
    /* 画面の見た目を少し整えます */
    body {
      font-family: sans-serif;
      padding: 20px;
    }

    h1 {
      color: #007acc;
      margin-bottom: 10px;
    }

    p {
      margin-bottom: 6px;
    }

    .note {
      color: #555;
      font-size: 0.9rem;
    }
  </style>
</head>
<body>
  <h1>Day 1：JavaScriptとは何か（後半）</h1>

  <p>このページは、JavaScript の基本的な動作確認用のページです。</p>
  <p class="note">コンソールを開いて、ログの内容を確認してみてください。</p>

  <script>
    // ここから JavaScript のコードが始まります

    // 1. JavaScript が読み込まれたことを確認するログ
    console.log('JavaScript が正常に読み込まれました');

    // 2. 「Hello JavaScript」を表示します
    console.log('Hello JavaScript');

    // 3. 自己紹介の情報を表示します
    console.log('--- 自己紹介 ---');
    console.log('名前：山田太郎');
    console.log('好きな言葉：継続は力なり');
    console.log('--- 自己紹介ここまで ---');

    // 4. ここまでのコードが問題なく実行されたことを示すログ
    console.log('Day 1 後半のスクリプトは最後まで実行されました');
  </script>
</body>
</html>

このコードで確認してほしいこと

コンソールにログが順番に表示されているか
エラーが出ていないか
自分の名前や好きな言葉に書き換えても問題なく動くか

もし途中でタイプミスをしてエラーが出ても、コンソールがヒントをくれます。それを見ながら修正すること自体が、プログラミングの大事な練習になります。

JavaScript実行環境という「土台」を意識する

これからの90日間の「練習場」

Day 1後半までで、次のような「土台」ができています。

index.html を作り、ブラウザで開ける
<script> タグの中にJavaScriptを書ける
console.log() でログを出し、コンソールで確認できる
開発者ツールを開いて、エラーやログを読める

この土台があることで、今後90日間の学習で書くあらゆるJavaScriptコードを、同じようにブラウザで試すことができます。つまり、「安全に失敗できる練習場」が整ったということです。

Day 1後半のまとめ

Day 1後半では、次のようなポイントを押さえました。

JavaScriptが「HTMLに動きを与える言語」であることを、コードを通して再確認したこと
HTML・CSS・JavaScriptの役割を、1つのページの中で見比べたこと
ブラウザがHTMLとJavaScriptを「上から順番に読む」ことを意識したこと
console.log() を「デバッグの相棒」として使う感覚をつかんだこと
開発者ツールのコンソールで、ログとエラーを読む練習をしたこと
「Hello JavaScript」と自己紹介をまとめて表示するコードを書いたこと
JavaScriptを試せる「実行環境」という成果物を、より確かなものにしたこと

ここまでできていると、「JavaScriptを書く場所」「動かし方」「確認の仕方」がひと通り身についています。

@lifehacker

挫折しないで楽しく学べるプログラミング。プログラミングを学ぶなら基礎から学べるMONO365 -LifeHack-。「覚える」ではなく「使える」ようになるプログラミング学習。

これから IT 関連の知識を学ばれる方を対象に、色々な言語でのプログラミング方法や関連する技術、Web制作、例題や多くのサンプルコードで実践的な使い方などを、日本一詳しくわかりやすく解説するサイト。
更には、中級者や上級者が実務で使うプログラミングコードや考え方、設計手法、チーム開発、コードレビューなどの実践的な内容も学ぶことができます。

月	火	水	木	金	土	日
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31