おはようございます！株式会社ファストコーディングの働くおかんです。
先日、子どもに「ママの仕事って何してるの？」と聞かれたので、張り切って「Webサイトのコーディングっていうのをやっていてね、HTMLとCSSっていうプログラミング言語でね……」と説明し始めたら、3秒で「ふーん、おなかすいた」って言われました。最近は小学校でもプログラミング教育が必修化されてますし、「もしかして我が子に教えられるのでは！？」と意気込んでいたのですが、まだ早かったみたいです。
でもこれ、大人相手でも似たようなことが起きるんですよね。社内の打ち合わせでエンジニアが「INPが〜」「Cascade Layersで〜」「Partial Hydrationが〜」って話しているとき、周りの何人かは心の中で「おなかすいた」と同じ顔をしている気がします。文脈でなんとなくわかるけど、正確に説明しろと言われたら自信がない。でも、いまさら「それ何ですか？」とも聞きにくい。
ディレクターやPMの方からも「エンジニアの話についていけないときがある」という声をよく聞きます。そこで今回、いまさら人には聞けないけど実は知っておきたいフロントエンド用語を、私なりにまとめてみました。
今回は、現場で飛び交う中〜上級レベルのフロントエンド用語を、なるべくかみ砕いて解説します。「HTML」「CSS」「レスポンシブ」のような基本用語は省いて、もう一段上のワードに絞りました。打ち合わせの前にサッと目を通しておくと、エンジニアとの会話がグッとスムーズになるはずです。
HTML/CSSコーディング関連
Container Queries
画面全体の幅ではなく、親要素の幅に応じてスタイルを切り替える仕組みです。従来のメディアクエリは「ブラウザの幅が何px以下なら〜」という指定でしたが、Container Queriesは「このカードの幅が300px以下なら〜」のように、コンポーネント単位で制御できます。
現場ではこう使う： サイドバーにもメインエリアにも置けるカードUIを作るとき、「Container Queriesで対応できるので、配置場所ごとにCSS書き分けなくて大丈夫です」とエンジニアが提案してきたりします。
CSS Nesting
SassやLessで書いていた入れ子構造のスタイル指定が、素のCSSだけで書けるようになった機能です。.card { .title { color: red; } } のように、セレクタの中にセレクタを書けます。
現場ではこう使う： 「Sassのビルド環境なしで開発できるので、Nesting対応のブラウザだけなら、ビルドツールの導入コストを減らせます」という文脈で出てきます。
Cascade Layers
CSSの優先順位（カスケード）を、レイヤーという単位で明示的に制御する仕組みです。@layer を使って「リセットCSS → ベーススタイル → コンポーネント → ユーティリティ」のように優先順を宣言できます。
現場ではこう使う： 外部ライブラリのCSSと自社CSSが競合してスタイルが崩れる問題に対して、「Cascade Layersでレイヤー分けすれば、!importantの乱用を避けられます」と提案される場面があります。
:has() セレクタ
「子要素や隣接要素の状態に応じて、親要素のスタイルを変える」ことができるCSSセレクタです。これまでCSSでは「親から子」への指定しかできなかったのが、逆方向の制御が可能になりました。
現場ではこう使う： フォームでエラーがある入力欄の親ブロック全体を赤くしたいとき、「:has()を使えばJavaScriptなしでいけます」と言われたら、この機能のことです。
Subgrid
CSS Gridのレイアウトで、子要素が親のグリッド線をそのまま引き継ぐ機能です。カード一覧で「タイトル・画像・説明文の高さを全カードで揃えたい」というとき、Subgridを使うと自然に揃います。
現場ではこう使う： 「カード内の要素の高さが揃わない」問題に対して、「Subgridで親のグリッドラインを継承すれば、JavaScriptでの高さ揃えが不要になります」という提案に登場します。
パフォーマンス・最適化
Core Web Vitals
Googleが定めたWebページのユーザー体験を測る3つの指標です。ページの読み込み速度（LCP）、操作への応答性（INP）、視覚的な安定性（CLS）の3つで構成されます。SEOにも影響するため、ディレクターにとっても無視できない指標です。
現場ではこう使う： 「Core Web Vitalsのスコアが落ちているので、画像の最適化とINPの改善を優先しましょう」という形で、パフォーマンス改善の議論に出てきます。
INP
ユーザーがクリックやタップをしてから、画面が実際に反応するまでの時間を測る指標です。2024年にFID（First Input Delay）に代わってCore Web Vitalsの正式指標になりました。ボタンを押してから反応が遅いと、このスコアが悪くなります。
現場ではこう使う： 「フォーム送信ボタンのINPが遅いので、クリック時の重い処理を非同期にしたい」というような改善提案で使われます。
Critical Rendering Path
ブラウザがHTMLを受け取ってから最初の画面を描画するまでに通る処理の流れのことです。HTML解析 → CSS解析 → レンダーツリー構築 → 描画、という一連の過程を指します。この経路にあるリソースを最小化することで、表示速度が改善されます。
現場ではこう使う： 「ファーストビューの表示が遅いので、クリティカルレンダリングパスを見直して、不要なCSSやJSのロードを後回しにしましょう」という改善提案に出てきます。
Tree Shaking
JavaScriptのバンドル時に、実際には使われていないコードを自動的に除去する仕組みです。「木を揺さぶって枯れ葉を落とす」というイメージから名付けられました。ファイルサイズを小さくしてページの読み込みを速くする効果があります。
現場ではこう使う： 「このライブラリ、全機能を読み込んでいるのでバンドルサイズが大きいです。Tree Shakingが効くようにimport方法を変えましょう」とエンジニアが言っていたら、この最適化のことです。
アクセシビリティ
WAI-ARIA
Webコンテンツをスクリーンリーダーなどの支援技術に正しく伝えるための属性セットです。HTMLだけでは伝えきれない「このボタンは今開いている状態」「この領域はナビゲーション」といった情報を、role や aria-* 属性で補足します。
現場ではこう使う： アクセシビリティ対応の要件が出たとき、「タブUIにはWAI-ARIAの role="tablist" と aria-selected を付ける必要があります」のように、具体的な実装指示に登場します。
WCAG 2.2
Webアクセシビリティの国際的な基準で、W3Cが策定しています。レベルA・AA・AAAの3段階があり、多くの案件ではレベルAAへの準拠が求められます。2023年にバージョン2.2が勧告され、ドラッグ操作の代替手段提供などの新基準が追加されました。
現場ではこう使う： 「今回の案件はWCAG 2.2のレベルAA準拠が要件です。コントラスト比やフォーカス表示の基準を満たしているか確認してください」と、要件定義や検収で出てきます。
prefers-reduced-motion
ユーザーがOSの設定で「アニメーションを減らす」を有効にしているかどうかを検知するCSSメディア特性です。前庭障害のある方や、動きの多い画面が苦手な方への配慮として使います。
現場ではこう使う： 「派手なアニメーションを入れるなら、prefers-reduced-motion でアニメーションをオフにできるようにしておいてください」という形で、アクセシビリティレビューのときに指摘されます。
focus-visible
キーボード操作のときだけフォーカスリング（青い枠線）を表示するCSSの擬似クラスです。マウスクリック時にはフォーカスリングが出ず、Tabキーで移動したときだけ出るので、デザインとアクセシビリティの両立ができます。
現場ではこう使う： 「ボタンをクリックしたとき青い枠が出るのが気になる」というデザイナーからの要望に、「:focus-visible に変更すれば、キーボード操作時だけ表示されるようにできます」と返答できます。
ビルド・開発環境
Vite
フランス語で「速い」を意味する、次世代のフロントエンドビルドツールです。開発時にはブラウザのネイティブESモジュールを使い、本番ビルドにはRollupを使います。webpackと比べて開発サーバーの起動が非常に速いのが特徴です。
現場ではこう使う： 「新規案件のビルド環境はViteで構築します。webpackより起動が速いので、開発効率が上がります」と、技術選定の会話で出てきます。
Module Federation
複数の独立したアプリケーション間で、JavaScriptのモジュールを実行時に共有する仕組みです。大規模なサイトをチームごとに独立して開発・デプロイしつつ、一つのサイトとして統合できます。
現場ではこう使う： マイクロフロントエンド構成の案件で、「ヘッダーとフッターは共通チーム、商品一覧は別チームで開発して、Module Federationで結合します」という設計方針に登場します。
CSS-in-JS と Utility-first CSS
スタイリング手法の2大潮流です。CSS-in-JSはJavaScriptの中にCSSを書く手法（styled-componentsなど）。Utility-first CSSは、text-center p-4 のような小さなクラスを組み合わせてスタイルを作る手法（Tailwind CSSが代表）。どちらが良いかは案件の特性で判断します。
現場ではこう使う： 技術選定で「コンポーネント数が多い案件なのでCSS-in-JSが管理しやすい」「静的ページ中心ならTailwindのほうが速く書ける」といった比較に使われます。
Turbopack
Next.jsの開発元であるVercelが開発している、Rust製の高速バンドラーです。webpackの後継として位置づけられており、Next.js 15以降で開発サーバーのデフォルトとして採用されています。大規模プロジェクトでのビルド速度改善が期待されています。
現場ではこう使う： Next.jsの案件で「Turbopackを有効にすると開発サーバーの起動が速くなります。ただし、まだ一部のプラグインが非対応なので事前確認が必要です」と案内されることがあります。
2026年注目のブラウザ新機能
View Transitions API
ページ遷移やDOM変更時に、ブラウザネイティブでスムーズなアニメーション遷移を実現するAPIです。これまでJavaScriptで複雑に実装していたページ間のフェードやスライドを、CSSとAPIの組み合わせで簡潔に書けます。
現場ではこう使う： 「ページ遷移時にふわっとしたアニメーションを入れたいです」という要望に対して、「View Transitions APIで対応できます。SPAでもMPAでも使えます」と提案されます。
Server Components
React 19で正式導入された、サーバー側だけで実行されるコンポーネントです。データベースアクセスやAPIコールをコンポーネント内で直接書けて、クライアントに送るJavaScriptの量が減ります。Next.jsのApp Routerで標準的に使われています。
現場ではこう使う： 「このページはServer Componentsで作るので、クライアントに送るJSが減ってページが軽くなります。ただし、ボタンのクリック処理など対話的な部分はClient Componentにする必要があります」と説明されます。
Partial Hydration
サーバーで生成したHTMLのうち、対話的な操作が必要な部分だけにJavaScriptを後から適用する手法です。ページ全体をハイドレーション（JSで動かせる状態にすること）するのではなく、必要な箇所だけに絞ることで、初期ロードを高速化します。
現場ではこう使う： 「この LP はほぼ静的コンテンツなので、Partial Hydrationでお問い合わせフォーム部分だけにJSを適用すれば、表示速度がかなり改善できます」という提案に登場します。
Scroll-driven Animations
スクロール位置に連動してCSSアニメーションを制御する仕組みです。これまでJavaScriptのScroll Eventで実装していたパララックス効果や、スクロール進捗バーなどを、CSSだけで実現できます。
現場ではこう使う： 「スクロールに合わせてフェードインする演出を入れたいのですが」「Scroll-driven AnimationsならCSSだけでできるので、JSのスクロールイベント監視が不要になります。パフォーマンス的にも有利です」。
Popover API
HTMLネイティブでポップオーバー（吹き出し・ツールチップ的なUI）を作れるAPIです。popover 属性と popovertarget 属性だけで、JavaScriptなしでも開閉の制御ができます。z-indexの管理やフォーカストラップも自動で処理してくれます。
現場ではこう使う： 「ツールチップやドロップダウンメニューの実装に、Popover APIを使えばJSライブラリへの依存を減らせます。ブラウザ標準の機能なので、メンテナンスも楽です」と提案されます。
まとめ
今回は、打ち合わせやコードレビューで飛び交う中〜上級レベルのフロントエンド用語を20個ピックアップして解説しました。
こういった用語は、知っているか知らないかで打ち合わせでの理解度がまったく違ってきます。特にContainer QueriesやView Transitions APIなど、2026年現在で本格的に使われ始めた機能は、これからの案件で頻繁に登場するはずです。
押さえておきたいポイントは以下の3つです。
- CSS単体でできることが増えている：Container Queries、:has()、CSS Nesting、Scroll-driven Animationsなど、以前はJavaScriptが必要だった機能がCSSだけで実現できるようになっています
- パフォーマンス指標はSEOに直結する：Core Web Vitals（LCP・INP・CLS）はGoogleの検索評価にも影響するため、ディレクターやPMにとっても重要な知識です
- アクセシビリティは「オプション」ではなくなっている：WCAG 2.2への準拠が案件の要件に入ることが増えており、WAI-ARIAやfocus-visibleの理解は必須になりつつあります
全部を一度に覚える必要はありません。まずは次の打ち合わせで出てきそうな用語からチェックしてみてください。
株式会社ファストコーディングでは、こうした最新のフロントエンド技術を使ったコーディングやUI/UX改善をお手伝いしています。「この用語、うちの案件ではどう活かせるの？」といった疑問も含めて、お気軽にお問い合わせフォームからご相談ください！
