先生と生徒の会話形式で理解しよう

生徒

「先生、JavaScriptってよく聞きますけど、そもそも何なんですか？」

先生

「JavaScriptは、ウェブサイトに動きをつけるためのプログラミング言語です。ボタンをクリックしたときに表示が変わるなど、画面の中で『動くこと』を実現できます。」

生徒

「へえ、HTMLやCSSとは違うんですね？」

先生

「そのとおり！HTMLは『文章の骨組み』、CSSは『見た目のデザイン』、そしてJavaScriptは『動きや仕組み』を担当する役割です。」

1. JavaScriptとは？

JavaScript（ジャバスクリプト）は、ウェブページに動きをつけるための言語です。ボタンを押すと画像が切り替わったり、文字が変わったり、フォームに入力した内容をチェックしたりできます。

たとえば、電気のスイッチを想像してください。HTMLが電球、CSSが色付きの電球カバー、JavaScriptがスイッチのような役割です。スイッチを押すと電球がつくように、JavaScriptで「クリックされたらこうする」と動きを設定できるのです。

2. JavaScriptでできること

JavaScriptを使うと、以下のようなことができます：

ボタンを押したときに画像や文字が変わる
入力された情報をその場でチェックする
アニメーション（スライド・フェード）をつける
現在の時間や日付を表示する
計算機やゲームなどの簡単なツールを作る

つまり、動くウェブページを作るために欠かせない言語がJavaScriptなのです。

3. JavaScriptの特徴

JavaScriptには以下のような特徴があります：

ウェブブラウザだけで動く（特別なソフトなしでOK）
HTMLやCSSと組み合わせて使える
すぐに試せる（ブラウザに標準で入っている）
リアルタイムで動きが見える

パソコンに何もインストールしなくても、Google ChromeやMicrosoft Edgeなどのウェブブラウザで、すぐにJavaScriptを使い始められるのが大きな魅力です。

4. JavaScriptの書き方（基本の例）

まずは簡単な例として、JavaScriptで「こんにちは！」というメッセージを画面に表示してみましょう。


console.log("こんにちは！");

これは、console.logという命令で、メッセージをコンソール（開発者ツール）に表示するという意味です。

このコードは、Google Chromeなどのブラウザの「検証ツール」から簡単に試せます。

5. JavaScriptの実行方法（超基本）

JavaScriptは、ブラウザだけで実行できるという点が最大のメリットです。以下のように、HTMLファイルの中にJavaScriptのコードを書いて実行します。


<!DOCTYPE html>
<html>
  <head>
    <title>JavaScriptテスト</title>
  </head>
  <body>
    <script>
      alert("JavaScriptが動きました！");
    </script>
  </body>
</html>

alert（アラート）とは、ポップアップでメッセージを表示する命令です。上の例では、画面に「JavaScriptが動きました！」と表示されます。

6. JavaScriptを試すための準備（インストールは不要）

JavaScriptを始めるのに、特別なソフトをインストールする必要はありません。次の2つがあればすぐに始められます：

ブラウザ（Google Chromeなど）
テキストエディタ（メモ帳など）

たとえば、以下の手順でJavaScriptを試せます：

メモ帳を開く
上のHTMLの例をコピペして保存（例：sample.html）
保存したファイルをブラウザで開く

これだけで、JavaScriptが動いているのを自分のパソコンで体験できます。

7. JavaScriptを学ぶメリット

JavaScriptを学ぶと、次のような良いことがあります：

自分だけのオリジナルサイトを作れる
ウェブ制作の仕事に役立つ
ゲームやツールも作れる
多くの人が使っているから情報が多い

プログラミング未経験でも、はじめの一歩にぴったりの言語です。

まとめ

JavaScriptの基本理解の振り返り

JavaScriptは、ウェブページに動きをつけるためのプログラミング言語であり、HTMLやCSSと組み合わせることで、ボタンのクリックや入力チェック、アニメーション表示、計算ツールの作成など、動的なウェブサイトを簡単に実現できます。特徴としては、ブラウザだけで実行できること、リアルタイムで動作を確認できること、特別なソフトをインストールする必要がないことが挙げられます。

基本的な書き方と実行方法

JavaScriptの基本的なコードの書き方には、コンソールにメッセージを表示するconsole.logや、ポップアップで通知を出す0alert0があります。HTMLファイルに直接記述することで、ブラウザで即座に実行可能です。また、コードの見た目を整えるためにインデントや空行を入れ、変数名は意味が分かるように命名することが重要です。

初心者が注意すべきポイント

コードの終わりにはセミコロンを付け、予期せぬバグを防ぐ
変数名や関数名はキャメルケースで読みやすくする
コメントを使い、コードの意図や処理内容を明確にする
空行やスペースで処理のまとまりを分かりやすく整理する

簡単なサンプルプログラム


// ユーザーに挨拶する関数
function greetUser(userName) {
    if (userName) {
        console.log("こんにちは、" + userName + "さん！");
    } else {
        console.log("こんにちは！");
    }
}

greetUser("太郎");
greetUser();

先生と生徒の振り返り会話

生徒

「先生、今日の内容をまとめると、JavaScriptはウェブページを動かすための言語で、HTMLやCSSと一緒に使えるんですね？」

先生

「そのとおりです。ボタンの操作や入力チェック、アニメーションなど、動的な機能を簡単に実装できます。」

生徒

「基本的な書き方としては、console.logや0alert0を使うことが多いんですね。」

先生

「そうです。そしてコードを読みやすくするために、インデントや変数名、コメント、空行を意識すると良いでしょう。」

生徒

「なるほど、これで自分でも簡単な動くウェブページを作れるようになりそうです。」

先生