JavaScript（ジャバスクリプト）

JavaScriptとは

JavaScript（略称：JS）は、1995年にネットスケープ社のブレンダン・アイクによって開発されたプログラミング言語です。当初は「LiveScript」という名前でしたが、当時人気だったJava言語にあやかって「JavaScript」と改名されました。

Web技術の三大要素

JavaScriptでできること

• ユーザーインタラクション - クリック、スクロール、マウスオーバーなどのイベント処理
• 動的なコンテンツ変更 - ページを再読み込みせずに内容を更新
• フォーム検証 - 入力内容のチェックとエラー表示
• アニメーション - スムーズなスライド、フェード効果
• Ajax通信 - サーバーと非同期でデータをやり取り
• ブラウザ操作 - Cookie、LocalStorage、履歴操作
• 外部APIの利用 - 地図、SNS連携、天気情報など

JavaScriptの基本

JavaScriptの書き方

JavaScriptは主に3つの方法でHTMLに組み込めます。

1. インラインJavaScript

HTML要素に直接記述（非推奨）

2. 内部JavaScript（<script>タグ）

<script>
document.addEventListener('DOMContentLoaded', function() {
    console.log('ページが読み込まれました');
});
</script>

3. 外部JavaScriptファイル（推奨）

別ファイルに記述し、HTMLから読み込む方法。最も一般的で保守性が高い。

基本的な文法

変数の宣言

// ES6以降（推奨）
let name = '太郎';
const age = 25;

// 古い書き方
var message = 'こんにちは';

関数

// 通常の関数
function greet(name) {
    return 'こんにちは、' + name + 'さん';
}

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

条件分岐

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

繰り返し

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

// forEach（配列）
const fruits = ['りんご', 'バナナ', 'オレンジ'];
fruits.forEach(fruit => {
    console.log(fruit);
});

DOM操作

JavaScriptでHTMLを操作する最も重要な機能です。

// 要素の取得
const element = document.getElementById('myId');
const elements = document.querySelectorAll('.myClass');

// 内容の変更
element.textContent = '新しいテキスト';
element.innerHTML = '<strong>太字</strong>';

// スタイルの変更
element.style.color = 'red';
element.style.display = 'none';

// クラスの追加・削除
element.classList.add('active');
element.classList.remove('hidden');
element.classList.toggle('open');

// イベントリスナー
element.addEventListener('click', function() {
    alert('クリックされました');
});

WordPressでのJavaScript

WordPressでJavaScriptを追加する方法

方法1: wp_enqueue_scriptを使用（推奨）

functions.phpに以下のコードを追加：

function my_custom_scripts() {
    wp_enqueue_script(
        'my-script',
        get_template_directory_uri() . '/js/script.js',
        array('jquery'),
        '1.0.0',
        true
    );
}
add_action('wp_enqueue_scripts', 'my_custom_scripts');

方法2: プラグインを使用

「Insert Headers and Footers」「Code Snippets」などのプラグインで簡単に追加できます。

WordPressで使えるJavaScriptライブラリ

jQuery

WordPressには標準でjQueryが含まれています。

jQuery(document).ready(function($) {
    $('.menu-toggle').click(function() {
        $('.menu').slideToggle();
    });
});

PHPからJavaScriptにデータを渡す

// PHPからJavaScriptにデータを渡す
wp_localize_script('my-script', 'myData', array(
    'ajaxurl' => admin_url('admin-ajax.php'),
    'nonce' => wp_create_nonce('my-nonce')
));

// JavaScript側で使用
console.log(myData.ajaxurl);

jQuery vs Vanilla JavaScript

jQueryとは

jQueryは、JavaScriptをより簡単に書けるようにしたライブラリです。かつてはWeb開発の標準でしたが、現代のJavaScript（ES6以降）では必要性が薄れています。

JavaScriptフレームワーク・ライブラリ

主要なフレームワーク

1. React

• Facebook開発のUIライブラリ
• コンポーネントベースの開発
• WordPress Block Editor（Gutenberg）で使用されている

2. Vue.js

• 学習曲線が緩やかで初心者に優しい
• 軽量で高速
• 日本語ドキュメントが充実

3. Angular

• Google開発のフルスタックフレームワーク
• 大規模アプリケーション向け
• TypeScriptが標準

便利なライブラリ

• Swiper - スライダー・カルーセル
• AOS - スクロールアニメーション
• Chart.js - グラフ・チャート作成
• Lightbox - 画像のポップアップ表示

よくある質問（FAQ）

まとめ

JavaScriptは、Webページに動的な機能を追加するための必須技術です。HTMLとCSSだけでは実現できないインタラクティブな体験を提供します。

WordPressでは、テーマやプラグインがJavaScriptを多用しているため、基礎知識があるとカスタマイズやトラブルシューティングが格段に楽になります。

関連用語