ディレクティブ（ディレクティブ）
コンパイラ・プリプロセッサ・フレームワークへの命令文。C 言語の #include、Vue.js の v-if、Angular の *ngFor 等が代表例。
概要
ディレクティブ (Directive) はコンパイラ・プリプロセッサ・テンプレートエンジン・フレームワークに対する命令文の総称。「指令・指示」を意味する英語で、プログラム本体の処理ロジックではなく、ツールやランタイムへの「こう振る舞え」という宣言的な指示を行う。
代表例として C/C++ の #include / #define / #ifdef (プリプロセッサディレクティブ)、Vue.js の v-if / v-for / v-bind / v-on (テンプレートディレクティブ)、Angular の **ngFor / ngIf (構造ディレクティブ)、React Server Components の 'use client' / 'use server' (Module Directive、2023年9月導入)、Pragma (#pragma once / #pragma omp) などがある。
2025-2026年のフロントエンド界の主要トピックは React Server Components の Module Directive 普及。Next.js 16 (2026年4月)、Remix v3、Astro 5 等の主要フレームワークが対応し、サーバ/クライアント境界を 'use client' 1行で宣言する設計が標準化した。Server Actions も 'use server' でマーク、フォーム処理が Hono/Express レス API レス で実装可能に。
主な特徴・仕組み
- C/C++ プリプロセッサ: #include / #define / #ifdef / #ifndef / #pragma / #error / #warning
- Vue.js: v-if / v-else / v-for / v-bind (
:) / v-on (@) / v-model / v-show / v-html / v-slot - Angular: *ngIf / *ngFor / *ngSwitch / [(ngModel)] / @Input / @Output / @ViewChild
- React 2024+: 'use client' / 'use server' / 'use cache' (実験的) / 'use no memo' (React Compiler)
- Svelte 5: $derived / $effect / $state (Runes と呼ばれる、ディレクティブの一種)
- HTML カスタム属性: data-* / aria-* / hx-* (htmx) / x-* (Alpine.js)
- CSS @rule: @media / @keyframes / @supports / @container / @scope (CSS 2024)
- TypeScript: /// <reference path="..." /> / @ts-ignore / @ts-expect-error / @deprecated
- OpenMP/CUDA: #pragma omp parallel / #pragma omp simd / #pragma unroll
主要ディレクティブ系統比較表
| 言語/FW | ディレクティブ例 | 用途 | 処理タイミング |
|---|---|---|---|
| C/C++ | #include, #define | マクロ展開 | プリプロセス |
| Rust | #[derive(...)], #[cfg(...)] | アトリビュート | コンパイル |
| Vue.js | v-if, v-for | テンプレート制御 | ランタイム |
| Angular | *ngIf, *ngFor | 構造制御 | ランタイム |
| React 2024 | 'use client', 'use server' | 境界宣言 | バンドル時 |
| Astro | client:load, client:idle | 部分ハイドレーション | バンドル+ランタイム |
| HTML/CSS | @media, @keyframes | スタイル制御 | パース |
| TypeScript | /// <reference />, @ts-ignore | 型システム制御 | コンパイル |
自作PC でディレクティブを学ぶ環境
ディレクティブ多様な開発環境構築：
- CPU: Ryzen 7 7700X (8C16T, ¥48,800) — VS Code+Vue/React/Angular 並行開発
- メモリ: DDR5-5600 32GB (¥24,800) — TypeScript LSP+ESLint+Prettier+Browser
- ストレージ: NVMe Gen4 SSD 1TB (¥18,800) — node_modules×複数案件で 100GB+消費
- エディタ: VS Code (無料) / WebStorm ($149/年) / Cursor ($20/月、AI 補完強)
- テンプレート言語ハイライト: Vue Volar / Angular Language Service / Astro VS Code 拡張
- AI 支援: GitHub Copilot ($10/月) または Cursor / Claude Code でディレクティブ補完
ディレクティブと類似概念の違い
- ディレクティブ vs コメント: コメントは無視、ディレクティブはツールが解釈・実行
- ディレクティブ vs 関数: 関数はランタイム呼出、ディレクティブは宣言的設定
- ディレクティブ vs マクロ: マクロは展開、ディレクティブは設定指示 (重なる場合あり、C の #define はマクロ兼ディレクティブ)
- ディレクティブ vs アトリビュート: アトリビュート (Rust/C#) はディレクティブの一種、メタ情報注釈
よくある質問（FAQ）
Q1: React の 'use client' は何のため？ A: React Server Components で「このファイルはクライアントで動かせ」と宣言。デフォルトはサーバ実行 (RSC) で、useState/useEffect 等のフック使用時に必須。Next.js App Router で2023年9月導入、2026年4月時点で全主要フレームワーク対応済み。
Q2: Vue の v-if と v-show の違いは？ A: v-if は DOM から削除/再挿入 (条件変化頻度低い場合)、v-show は CSS display: none で表示切替 (頻繁切替)。パフォーマンスは v-show のほうが軽量、初期レンダリングは v-if のほうが軽い。
Q3: TypeScript の // @ts-ignore は使うべき？ A: 緊急時のみ。型エラーを抑制するが、本来は型を正しく定義すべき。@ts-expect-error の方が「将来エラーが消えたら警告」する分マシ、@ts-ignore は2026年に ESLint で警告対象 (typescript-eslint v8)。
まとめ
- ディレクティブ = ツールへの命令文、宣言的に振る舞いを指示
- C/C++/Vue/Angular/React/CSS/TypeScript 各分野で多様な構文
- 2024-2026 React の 'use client'/'use server' Module Directive が標準化
- 自作PC は Ryzen 7 + 32GB DDR5 + VS Code/Cursor が定番開発環境