初級編 第1章:JavaScriptの世界へようこそ!

プログラミングの世界へようこそ!記念すべき第1章では、JavaScript(以下JS)がどんなものかを知り、実際に自分の手で最初のコードを動かしてみましょう。

1. JavaScriptって何?

Webサイトには「3つの層」があります。

  1. HTML:骨組み(見出しや画像など)
  2. CSS:見た目(色や配置など)
  3. JavaScript動きと対話(ボタンを押したら画面が変わる、アニメーションなど)

JavaScriptは、Webブラウザ(ChromeやEdgeなど)の中で動くプログラミング言語です。特別なソフトをインストールしなくても、ブラウザさえあれば誰でもすぐに開発を始められるのが最大の魅力です!

2. まずはコードを動かしてみよう(コンソール)

いきなり難しい設定をする必要はありません。今すぐ使えるブラウザの「開発者ツール(コンソール)」を使ってみましょう。

  1. パソコンでWebブラウザ(Chrome推奨)を開きます。
  2. キーボードの F12 キーを押す(または右クリック→「検証」を選択)。
  3. 出てきたパネルの上部にある「Console(コンソール)」というタブをクリックしてください。
  4. そこに以下のコードを入力して Enter キーを押します。

JavaScript

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

すると、画面に Hello, World! と表示されたはずです。おめでとうございます!これがあなたのJavaScriptデビューです。

3. なぜ console.log なのか?

console.log() は、プログラミングにおいて「画面に情報を表示する」ための最も基本的なコマンドです。

  • デバッグ(不具合修正):プログラムが意図通り動いているか確認するために、常に使います。
  • 学習の第一歩:まずは画面に何かしらを出力して、データが正しく渡っているかを確認する癖をつけることが、上達の近道です。

4. プログラムをHTMLファイルに埋め込む

実際のWebページで動かすときは、HTMLファイルの中に書きます。

HTML

<!DOCTYPE html>
<html>
<body>
    <h1>JavaScript入門</h1>
    
    <!-- ここに書く! -->
    <script>
        console.log("HTMLファイルから実行中!");
    </script>
</body>
</html>

これを .html という名前で保存してブラウザで開くと、同じようにコンソールにメッセージが表示されます。

第1章のまとめ

  • JavaScriptは「動き」を作る言語。
  • ブラウザさえあれば「コンソール」ですぐに練習できる。
  • console.log() でプログラムの結果を確認しよう。

第1章は以上です。まずは「動いた!」という感覚をつかむことが大切です。 準備ができたら、次は第2章「変数とデータ型」に進みましょう。変数を使いこなすと、プログラムに「記憶」を持たせることができるようになります。