今週(4/27〜5/3)はWordPress 7.0の最終リリースまで残り2週間となり、準備を急ぐ声が増えてきた週でした。一方でCSSには「要素が自分の順番を知れる」という面白い新機能が加わり、Figma MakeのAI機能も地味に使いやすくなっています。
WordPress 7.0、RC3は5/8予定 — 現場の準備タイムリミット
WordPress 7.0の5月20日リリースまで残り約2週間。今週はRC3(Release Candidate 3)が5月8日に予定されており、いよいよ最終段階に入ります。
出典: WordPress.org News / developer.wordpress.org

今回の7.0で注目している機能をあらためて整理すると:
- リアルタイム共同編集: 複数ユーザーが同じ投稿を同時編集できる。WordPress初の本格的なコラボ機能
- 新ブロック(パンくず・アイコン): SEO用のパンくずがコアブロックとして追加
- グリッドブロックのレスポンシブ化: 手動調整なしでモバイル表示が整うように
- Web Client AI API: ブラウザ内AIと連携する新フックが追加され、プラグイン側での活用が広がる予定
クライアントサイトを持っていると「7.0に上げていいのか」という判断が必要になりますが、共同編集機能はキャッシュプラグインやセキュリティプラグインとの相性に要注意という声が出始めています。5月8日のRC3で大きな問題が出ないかをウォッチしてから、クライアントへの対応方針を決めるのが安全そうです。
💡 今すぐ試せる: 担当サイトのプラグイン一覧で「最終更新: 1年以上前」のものを確認し、7.0対応のアナウンスがあるかチェックする
Figma Make、音声入力とバージョン履歴が追加
Figmaの「Make」(AIチャットからプロトタイプを生成する機能)に、今週いくつかの実用的なアップデートが入りました。
主なアップデートは3点。まず使い始めるなら音声入力とバージョン履歴から試すのがおすすめです:
- 音声入力: Makeのチャット欄に直接話しかけてプロンプトを入力できるように。デスクトップで手を動かしながら指示を出す用途に便利
- バージョン履歴: ビルドの変更を全バージョンで追跡できるように。「3つ前の状態に戻したい」が簡単になった
- コンテキストのリセット: チャット履歴を1クリッククリアして新しい指示から始められる
あわせてFigmaのAI画像ツールにも改善が入り、Make ImageやEdit Imageで「参照画像」をキャンバス上のノードから直接追加できるようになりました。これまでファイルアップロードしかできなかったのが解消されています。
Make自体がまだ発展途上ですが、音声入力とバージョン履歴の追加で「実務で使える感」がじわじわ上がってきました。ためしに1案件のプロトタイプを音声だけで作ってみる価値があると思います。
💡 今すぐ試せる: Figmaのプロジェクトを開き、Makeパネルで音声入力ボタン(マイクアイコン)を試してみる
CSS sibling-index() / sibling-count() — JSゼロで「何番目か」を知れる
CSS Snapshot 2026に掲載され、注目を集めているのが sibling-index() と sibling-count() という2つの新関数です。
出典: W3C CSS Snapshot 2026 / LogRocket Blog
sibling-index() は現在の要素が親の中で何番目か(1始まり)を返し、sibling-count() は兄弟要素の総数を返します。これを使うと、これまでJavaScriptやCSSカスタムプロパティの手動設定が必要だった「N番目に応じたスタイル」がCSSだけで書けます。
例えばリストアイテムに順番に応じた色を付けるなら:
li {
background: hsl(
calc(sibling-index() / sibling-count() * 360)
65% 55%
);
}
これだけで、何個追加してもHTML側の修正なしにグラデーション色が自動適用されます。現時点ではChrome 125以降で対応、Firefox・Safariはまだ未対応のため、@supports not でのフォールバックが必須です。
See the Pen CSS sibling-index() / sibling-count() デモ by BaseKENT (@basekent) on CodePen.
今まで「インラインstyle=”–i:3″」みたいな書き方で苦肉の策をしていた場面がかなり消えそうです。2026年後半にはFirefoxとSafariのサポートも期待されています。
💡 今すぐ試せる: Chrome 最新版を開き、DevToolsのStylesパネルで sibling-index() を使ったスタイルを入力して動作を確認する
CSS @starting-style、全主要ブラウザで利用可能に
「エントリーアニメーション」を CSS だけで書くための @starting-style が、すべての主要ブラウザ(Chrome・Firefox・Safari)でクロスブラウザ対応となりました。
出典: CSS in 2026 – LogRocket Blog
これまで display: none から要素を表示するときのフェードイン等は、JavaScriptでのクラス付け替えタイミング管理が必要でした。@starting-style を使うと、CSSだけで「表示直後の初期状態」を定義してアニメーションできます:
dialog {
opacity: 1;
transition: opacity 0.3s;
}
@starting-style {
dialog {
opacity: 0; /* 表示直後はここから始まる */
}
}
display: none → block の切り替えでも、JavaScriptのタイミング調整なしにトランジションが動くのが便利なポイントです。
「CSSアニメーションはJSなしでここまでできる」という実感を強めてくれるアップデートで、ポップアップやモーダルの実装が一段シンプルになります。
💡 今すぐ試せる: dialog 要素や popover 属性を使った要素に @starting-style を追加し、フェードインが動作するかブラウザで確認する
TypeScript v7、mid-2026にGo製コンパイラへ移行予定
TypeScriptチームが、v7でGo言語製の新コンパイラへ切り替えることを正式に予告しました。目標はmid-2026(6〜8月あたり)です。現時点ではv6がリリース済みで、v7への移行準備リリースという位置付けです。
出典: Frontend Masters Blog — What to Know in JavaScript (2026 Edition)
現行のTypeScriptコンパイラはJavaScript(TypeScript)で書かれていますが、v7ではGoで書き直した新コンパイラに切り替わります。最大のメリットはビルド速度で、大規模プロジェクトでのコンパイル時間が大幅に短縮される見込みです。v6の段階で型定義まわりの整理が行われており、v7への移行がスムーズになるよう設計されています。
Web制作の現場でTypeScriptを使っているなら、v7移行後に一部の型定義やビルド設定の見直しが必要になる可能性があるため、v6のリリースノートは今から目を通しておくと安心です。
💡 今すぐ試せる: TypeScript公式ブログ(devblogs.microsoft.com/typescript)でv6のリリースノートを確認し、破壊的変更がプロジェクトに影響するかチェックする
Next.js v16、Turbopackがデフォルトビルドツールになったことのリアルな影響
Next.jsがv16でTurbopackを正式デフォルトビルドツールとして採用しました。
出典: DEV Community – JavaScript Frameworks 2026
TurbopackはwebpackのNextとしてVercelが開発しているRust製バンドラーです。v16のリリースで「next build が自動的にTurbopackを使う」状態になりました。
体感上の変化として報告されているのは開発サーバーの起動時間短縮(特に大規模プロジェクト)と、HMR(ホットモジュールリロード)の速度改善です。一方で、webpackプラグインを多用しているプロジェクトはそのままTurbopackに移行できないケースがあるという互換性の問題は引き続き注意が必要です。
まだwebpackカスタム設定が多いプロジェクトは移行前にNext.jsのドキュメントで互換性を確認するのをおすすめします。
💡 今すぐ試せる: Next.jsプロジェクトで next dev --turbo を実行して起動速度の差を体感し、既存のwebpackプラグインが動作するか確認する
今週のひとこと
WordPress 7.0の5/20リリースが近づく中、CSSは「JavaScriptを呼ばずにできること」がどんどん増えています。sibling-index() や @starting-style を見るたびに、Webの根っこが着実に進化しているのを感じます。来週は5/8のRC3とGoogle I/O(5/19〜20)の直前週として注目です。来週もよろしくお願いします。



