JavaScript入門✨

JavaScript (JS) は、Web開発において**「動き」と「対話性」を与えるプログラミング言語です。HTMLがページの構造を作り、CSSが見た目を整えるのに対し、JavaScriptはユーザーの操作に応じた処理や動的なコンテンツの変更**を実現します。

今やJavaScriptはWebブラウザだけでなく、サーバーサイド（Node.js）、モバイルアプリ、デスクトップアプリ開発まで、幅広い分野で使われる、最も重要な言語の一つです。

この記事では、JavaScriptの役割と基本的な文法をわかりやすく解説します。

1. JavaScriptの役割：Webの「脳」

JavaScriptの主な役割は、静的（動かない）なWebページを動的（変化する）にする点にあります。

要素	役割	JavaScriptでの実現例
HTML	構造	ボタンを配置する
CSS	装飾	ボタンの色や大きさを決める
JavaScript	動作	ボタンがクリックされたら、画面にメッセージを表示する

主な活用例

DOM操作：ボタンクリックでテキストを書き換えたり、画像を入れ替えたりする。
非同期通信（Ajax/Fetch）：ページを再読み込みせずに、サーバーから新しい情報を取得し、表示を更新する（例：SNSの「いいね！」カウンターの更新）。
フォームの検証：ユーザーが入力したメールアドレスが正しい形式かチェックする。
ゲーム開発：ブラウザベースのゲームを制作する。

2. JavaScriptの導入方法

JavaScriptのコードをHTMLに組み込む方法はいくつかありますが、通常は外部ファイルとして読み込みます。

外部ファイルとして読み込む (推奨)

script.jsといった外部ファイルにJavaScriptを記述し、HTMLの**<body>タグの閉じタグ（</body>）の直前**で読み込むのがベストプラクティスです。これにより、HTML要素の読み込みが完了してからスクリプトが実行されるため、表示速度が速くなります。

HTML

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

`<script>`タグ内に直接記述

簡単な処理であれば、HTMLファイル内の<script>タグ内に直接記述することもできます。

HTML

<script>
    console.log("Hello, JavaScript!");
</script>

3. JavaScriptの基本文法 📝

ここでは、JSの基本的な書き方を見ていきましょう。

1. 出力とデバッグ

開発中に値を確認したり、簡単なメッセージを出力したりするには、主にconsole.log()を使います。これは、ブラウザの開発者ツールの「Console（コンソール）」タブに出力されます。

JavaScript

// コンソールにメッセージを出力
console.log("JavaScriptの世界へようこそ！");

// 警告メッセージを出力
console.warn("この処理は非推奨です。");

2. 変数とデータ型

JavaScriptで変数を宣言するには、主にletまたはconstを使います。

let：後から値の再代入が可能な変数を宣言します。
const：一度値を代入したら**変更ができない（定数）**を宣言します。

JavaScript

// 変更する可能性がある値には let を使う
let userAge = 30;
userAge = 31; // 再代入が可能

// 変更されない定数には const を使う（常に推奨される）
const userName = "Kenji";
// userName = "Taro"; // エラーになる

// データ型
const num = 10;        // 数値 (Number)
const text = "Hello";  // 文字列 (String)
const isTrue = true;   // 真偽値 (Boolean: true/false)

3. 関数（Functions）

特定の処理をひとまとめにし、名前を付けて再利用可能にしたものが関数です。

JavaScript

// 関数を定義する
function greet(name) {
    // 処理ブロック
    console.log("こんにちは、" + name + "さん！");
}

// 関数を実行する（呼び出す）
greet("Sato"); // 出力: こんにちは、Satoさん！
greet("Tanaka"); // 出力: こんにちは、Tanakaさん！

4. 条件分岐 (`if`文)

指定した条件によって、実行する処理を切り替えます。

JavaScript

const hour = 15;

if (hour < 12) {
    console.log("おはようございます。");
} else if (hour < 18) {
    // hour が 12以上 18未満の場合
    console.log("こんにちは。");
} else {
    // 上記のいずれの条件にも当てはまらない場合
    console.log("こんばんは。");
}
// 出力: こんにちは。

5. DOM操作の基本

Webサイトに動きをつける上で最も重要なのがDOM (Document Object Model) 操作です。これは、HTMLドキュメントのすべての要素をオブジェクト（JavaScriptから操作可能なデータ）として扱い、その内容やスタイルを変更する手法です。

要素の取得と変更

特定のIDを持つHTML要素を取得し、その内容を書き換える例です。

HTML

<p id="message">初期のテキスト</p>

JavaScript

// 1. IDを使って要素を取得
const targetElement = document.getElementById("message");

// 2. 要素の内容（テキスト）を変更
targetElement.textContent = "JavaScriptで書き換えられました！";

// 3. 要素のスタイルを変更
targetElement.style.color = "red";

4. 次のステップ：イベント処理

JavaScriptが真価を発揮するのは、ユーザーの操作に応じて動作するときです。これをイベント処理と呼びます。

ユーザーがボタンをクリックしたり、キーボードを押したりしたときに、特定の関数を実行する処理を設定します。

HTML

<button id="myButton">クリックして！</button>

JavaScript

// 1. ボタン要素を取得
const button = document.getElementById("myButton");

// 2. イベントリスナーを設定（「クリック」イベントを監視する）
button.addEventListener('click', function() {
    // クリックされたときに実行される処理
    console.log("ボタンがクリックされました！");
    alert("ありがとう！"); // ポップアップを表示
});

このイベント処理をマスターすることが、動的なWebサイト開発の鍵となります。

JavaScriptは非常に奥深く、そして楽しい言語です。まずは簡単なDOM操作から始めて、Webサイトが自分の書いたコードで変化する感動を体験してみてください！

JavaScript入門✨

1. JavaScriptの役割：Webの「脳」

主な活用例

2. JavaScriptの導入方法

外部ファイルとして読み込む (推奨)

`<script>`タグ内に直接記述

3. JavaScriptの基本文法 📝

1. 出力とデバッグ

2. 変数とデータ型

3. 関数（Functions）

4. 条件分岐 (`if`文)

5. DOM操作の基本

要素の取得と変更

4. 次のステップ：イベント処理

最近の投稿

カテゴリー

JavaScript入門✨

1. JavaScriptの役割：Webの「脳」

主な活用例

2. JavaScriptの導入方法

外部ファイルとして読み込む (推奨)

<script>タグ内に直接記述

3. JavaScriptの基本文法 📝

1. 出力とデバッグ

2. 変数とデータ型

3. 関数（Functions）

4. 条件分岐 (if文)

5. DOM操作の基本

要素の取得と変更

4. 次のステップ：イベント処理

最近の投稿

カテゴリー

`<script>`タグ内に直接記述

4. 条件分岐 (`if`文)