ここちゃん

たけさん、JavaScriptってよく聞くんですけど、HTMLやCSSとは何が違うんですか？

たけ

HTMLが骨組み、CSSが見た目だとしたら、JavaScriptは「動き」を担当するんだよ。俺が初めてボタンクリックでアラートを出した時、「Webページってこうやって動くのか！」って衝撃だった。

ここちゃん

なるほど、動きをつける言語なんですね。難しそうなイメージがあるんですけど…

たけ

最初はちょっと戸惑うかもしれないけど、基礎さえ押さえれば大丈夫。Web開発には必須の言語だから、しっかり解説していくね。

JavaScript入門｜Web開発に必須のプログラミング言語

Webサイトに動きをつけるJavaScriptの基礎を解説します。

JavaScriptとは

• ブラウザで動くプログラミング言語
• Webページに動的な機能を追加
• フロントエンドからバックエンドまで対応

できること

• ボタンクリックの処理
• フォームの入力チェック
• アニメーション
• 非同期通信（Ajax）
• サーバーサイド開発（Node.js）

基本文法

変数

let name = "田中";
const age = 25;

条件分岐

if (age >= 20) {
    console.log("成人です");
} else {
    console.log("未成年です");
}

繰り返し

for (let i = 0; i < 5; i++) {
    console.log(i);
}

関数

function greet(name) {
    return `こんにちは、${name}さん`;
}

// アロー関数
const greet = (name) => `こんにちは、${name}さん`;

DOM操作

// 要素の取得
const element = document.getElementById("myId");

// テキストの変更
element.textContent = "新しいテキスト";

// イベント追加
element.addEventListener("click", () => {
    alert("クリックされました");
});

モダンJavaScript

ES6以降の機能

• let/const
• アロー関数
• テンプレートリテラル
• 分割代入
• スプレッド構文

フレームワーク

• React
• Vue.js
• Angular

学習ロードマップ

1. 基礎文法
2. DOM操作
3. 非同期処理
4. フレームワーク

まとめ

JavaScriptはWeb開発に必須。基礎を固めてからフレームワークに進みましょう。