JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：JavaScript文法の基礎－ Day1：JavaScriptとは・環境構築

JavaScript

2026.05.11

JavaScript学習カリキュラム（30日完全基礎ロードマップ）
1. カリキュラム全体像
Day1 前半のゴール
JavaScriptとは何か
1. JavaScriptは「Webページを動かすための言語」
2. 例えでイメージしてみる
ブラウザで動く仕組み
1. ブラウザの中で何が起きているか
2. セキュリティの視点で一言
HTMLとの関係
1. HTMLが「土台」、JavaScriptが「動き」
2. HTMLとJavaScriptは「役割分担」している
VS Code導入
1. なぜVS Codeを使うのか
2. VS Codeを入れたらまずやること
scriptタグとは何か
1. scriptタグの役割
実践：Hello World をブラウザで動かす
1. 最小構成のHTML＋JavaScript
2. 開発者ツールで結果を確認する
重点理解：「コードを書く → ブラウザで動く」を体験する
1. 今日いちばん大事なこと
2. セキュリティスペシャリスト視点の小さな意識づけ
この後半でやることの予告

JavaScript学習カリキュラム（30日完全基礎ロードマップ）

カリキュラム全体像

このカリキュラムは、プログラミング未経験者が
「JavaScriptの基礎を理解し、自力で小さなWebアプリを作れる状態」
まで到達することを目的にしています。

JavaScriptは「文法理解」だけでは不十分です。
実際には以下の3つを同時に理解する必要があります。

JavaScriptで重要な3要素

JavaScript文法
ブラウザ操作（DOM）
イベント処理

この3つを段階的に積み上げます。

Day1 前半のゴール

JavaScript をまったく触ったことがない人が、
「自分でコードを書いて、ブラウザで動かす」
という最初の一歩を、ちゃんと自分の力でできるようになることがゴールです。

ここでは次の流れで進めます。

JavaScript とは何か
ブラウザでどう動いているのか（ざっくりイメージ）
HTML と JavaScript の関係
VS Code を入れて、実際にコードを書く準備をする
<script> タグで JavaScript を読み込む

この前半では、特に「仕組みのイメージ」と「最初の一行を書く体験」を大事にします。

JavaScriptとは何か

JavaScriptは「Webページを動かすための言語」

HTML は「骨組み」、CSS は「見た目」、そして JavaScript は「動き・頭脳」を担当します。

ボタンを押したらメッセージが出る
入力フォームの内容をチェックする
スクロールしたらアニメーションする

こういった「動き」や「反応」を作るのが JavaScript です。

プログラミング言語はたくさんありますが、
「ブラウザの中で標準的に動く言語」は、ほぼ JavaScript 一択です。
だからこそ、Web 系をやるなら避けて通れない、超メジャー言語です。

例えでイメージしてみる

HTML：家の「柱・壁・部屋の配置」
CSS：壁紙・床・家具の「デザイン」
JavaScript：人が住んで「電気をつける」「ドアを開ける」「エアコンを操作する」などの「行動」

JavaScript がないと、Web ページは「きれいだけど動かないポスター」のような状態です。
JavaScript が入ると、「触ると反応してくれるアプリ」になります。

ブラウザで動く仕組み

ブラウザの中で何が起きているか

Chrome や Edge、Firefox、Safari などのブラウザは、
「HTML」「CSS」「JavaScript」を読み込んで、画面に表示したり、動かしたりしています。

ざっくり流れはこうです。

ブラウザが HTML ファイルを読む
HTML の中に書かれた <script> タグを見つける
その中の JavaScript コードを実行する
実行結果に応じて、画面の表示や動きを変える

ここで大事なのは、「JavaScript はブラウザの中で実行される」というイメージです。
あなたが書いたコードは、ブラウザが読んで、解釈して、動かしてくれます。

セキュリティの視点で一言

JavaScript は「ブラウザの中で動く」という性質上、
ユーザーの画面上でいろいろなことができます。

入力された情報を扱う
画面の内容を書き換える
サーバーと通信する

だからこそ、本格的な開発では「安全に書くこと」がとても重要になります。
Day1 ではまだそこまで踏み込みませんが、
「JavaScript は強力だからこそ、使い方を間違えると危険にもなりうる」
ということだけ、頭の片隅に置いておいてください。

HTMLとの関係

HTMLが「土台」、JavaScriptが「動き」

HTML は Web ページの「構造」を表す言語です。
たとえば、こんな HTML があったとします。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>はじめてのページ</title>
  </head>
  <body>
    <h1>はじめてのJavaScript</h1>
    <p>ここに文章が表示されます。</p>
  </body>
</html>

この時点では、ただの静的なページです。
ここに JavaScript を足すことで、「動き」を与えられます。

HTMLとJavaScriptは「役割分担」している

HTML：何がどこにあるか（見出し、段落、ボタン、画像など）
JavaScript：それらがどう動くか（クリックしたら？入力されたら？時間が経ったら？）

たとえば、ボタンを押したらメッセージを出したい場合、
ボタン自体は HTML で作り、そのボタンが押されたときの動きは JavaScript で書きます。

<button id="helloButton">あいさつする</button>

<script>
  const button = document.getElementById("helloButton");
  button.addEventListener("click", function() {
    alert("こんにちは！JavaScriptの世界へようこそ！");
  });
</script>

今は細かい文法はわからなくて大丈夫です。
「HTMLで部品を置いて、JavaScriptでその部品に動きをつける」
この関係性だけ、しっかりイメージできればOKです。

VS Code導入

なぜVS Codeを使うのか

JavaScript は、極端に言えば「メモ帳」でも書けます。
でも、プログラミングを続けるなら、専用のエディタを使った方が圧倒的に楽です。

Visual Studio Code（VS Code）は、今もっとも人気のあるコードエディタの一つで、

コードに色がついて読みやすい
カッコの対応やインデントを自動で整えてくれる
拡張機能で JavaScript 開発がとてもやりやすくなる

といったメリットがあります。

「プロも使っている道具を、最初から使ってみる」
これはモチベーション的にもかなり大きいです。

VS Codeを入れたらまずやること

新しいフォルダを作る（例：javascript-30days）
VS Code でそのフォルダを開く
index.html というファイルを作る
その中に HTML と JavaScript を書いていく

Day1 の時点では、「VS Code を開いて、ファイルを作って、保存する」
この一連の流れに慣れることが大事です。

scriptタグとは何か

scriptタグの役割

<script> タグは、「ここに JavaScript のコードがありますよ」とブラウザに教えるためのタグです。

書き方は大きく2パターンあります。

1. HTMLの中に直接JavaScriptを書くパターン

<script>
  console.log("Hello World");
</script>

このように <script> と </script> の間に、直接 JavaScript のコードを書きます。

2. 別ファイルのJavaScriptを読み込むパターン

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

この場合、main.js という別ファイルに JavaScript を書いておき、
HTML からそれを読み込んで実行します。

Day1 では、まずは「1. HTML の中に直接書く」パターンから始めるとわかりやすいです。

実践：Hello World をブラウザで動かす

最小構成のHTML＋JavaScript

まずは、次のような index.html を作ってみてください。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello JavaScript</title>
  </head>
  <body>
    <h1>はじめてのJavaScript</h1>

    <script>
      console.log("Hello World");
    </script>
  </body>
</html>

このファイルを保存して、ブラウザ（Chrome など）で開きます。

画面上には「はじめてのJavaScript」という文字しか出てきません。
「Hello World」はどこに出ているのでしょうか？