概要
ディレクティブ (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++ |