docs-writer-blog

ブログ記事の作成

ペルソナ

文体： React チーム公式の文体
トーン： 正確で、プロフェッショナル、未来志向

文体とスタイル

トーン、大文字と小文字の使い分け、専門用語、文章のパターンについては、/docs-voice を呼び出してください。

---

フロントマターのスキーマ

すべてのブログ記事で、次の YAML フロントマター構造を使用します。

---
title: "Title in Quotes"
author: Author Name(s)
date: YYYY/MM/DD
description: One or two sentence summary.
---

フィールドの詳細

フィールド	形式	例
title	引用符で囲んだ文字列	"React v19"、"React Conf 2024 Recap"
author	引用符なし。複数の場合はカンマと「and」で区切る	The React Team、Dan Abramov and Lauren Tan
date	スラッシュ区切りの YYYY/MM/DD	2024/12/05
description	1～2文。多くの場合、導入文を反映します	発表や内容を要約します

投稿タイプ別のタイトルパターン

タイプ	パターン	例
リリース	"React vX.Y" または "React X.Y"	"React v19"
アップグレード	"React [VERSION] Upgrade Guide"	"How to Upgrade to React 18"
Labs	"React Labs: [Topic] – [Month Year]"	"React Labs: What We've Been Working On – February 2024"
カンファレンス	"React Conf [YEAR] Recap"	"React Conf 2024 Recap"
機能	"Introducing [Feature]" または説明的なタイトル	"Introducing react.dev"
セキュリティ	"[Severity] Security Vulnerability in [Component]"	"Critical Security Vulnerability in React Server Components"

---

著者表記

フロントマターの直後に、著者表記を追加します。

---

Month DD, YYYY by [Author Name](social-link)

---

規則

• 日付は省略せずに記載します：December 05, 2024
• チームの投稿では /community/team にリンクします：[The React Team](/community/team)
• 個人の著者は Twitter/X または Bluesky にリンクします
• 著者が複数の場合は、「and」の前にオックスフォードコンマを付けます
• その後に水平線 --- を置きます

例：

December 05, 2024 by [The React Team](/community/team)

---

May 3, 2023 by [Dan Abramov](https://bsky.app/profile/danabra.mov), [Sophie Alpert](https://twitter.com/sophiebits), and [Andrew Clark](https://twitter.com/acdlite)

---

---

すべての投稿に共通する構成

すべてのブログ記事は次の構成に従います。

1. フロントマター（YAML）
2. 日付を含む著者表記
3. 水平線（---）
4. <Intro> コンポーネント（1～3文）
5. 水平線（---）（任意）
6. 本文のセクション（ID 付きの H2）
7. 締めくくりのセクション（変更履歴、謝辞など）

---

投稿タイプ別のテンプレート

メジャーリリースのお知らせ

---
title: "React vX.Y"
author: The React Team
date: YYYY/MM/DD
description: React X.Y is now available on npm! In this post, we'll give an overview of the new features.
---

Month DD, YYYY by [The React Team](/community/team)

---

<Intro>

React vX.Y is now available on npm!

</Intro>

In our [Upgrade Guide](/blog/YYYY/MM/DD/react-xy-upgrade-guide), we shared step-by-step instructions for upgrading. In this post, we'll give an overview of what's new.

- [What's new in React X.Y](#whats-new)
- [Improvements](#improvements)
- [How to upgrade](#how-to-upgrade)

---

## What's new in React X.Y {/*whats-new*/}

### Feature Name {/*feature-name*/}

[Problem this solves. Before/after code examples.]

For more information, see the docs for [`Feature`](/reference/react/Feature).

---

## Improvements in React X.Y {/*improvements*/}

### Improvement Name {/*improvement-name*/}

[Description of improvement.]

---

## How to upgrade {/*how-to-upgrade*/}

See [How to Upgrade to React X.Y](/blog/YYYY/MM/DD/react-xy-upgrade-guide) for step-by-step instructions.

---

## Changelog {/*changelog*/}

### React {/*react*/}

* Add `useNewHook` for [purpose]. ([#12345](https://github.com/react/react/pull/12345) by [@contributor](https://github.com/contributor))

---

_Thanks to [Name](url) for reviewing this post._

アップグレードガイド

---
title: "React [VERSION] Upgrade Guide"
author: Author Name
date: YYYY/MM/DD
description: Step-by-step instructions for upgrading to React [VERSION].
---

Month DD, YYYY by [Author Name](social-url)

---

<Intro>

[Summary of upgrade and what this guide covers.]

</Intro>

<Note>

#### Stepping stone version {/*stepping-stone*/}

[If applicable, describe intermediate upgrade steps.]

</Note>

In this post, we will guide you through the steps for upgrading:

- [Installing](#installing)
- [Codemods](#codemods)
- [Breaking changes](#breaking-changes)
- [New deprecations](#new-deprecations)

---

## Installing {/*installing*/}

```bash
npm install --save-exact react@^X.Y.Z react-dom@^X.Y.Z

Codemod {/codemods/}

React [VERSION] のすべての codemod を実行 {/run-all-codemods/}

npx codemod@latest react/[VERSION]/migration-recipe

破壊的変更 {/breaking-changes/}

削除：apiName {/removed-api-name/}

apiName は Month YYYY (vX.X.X) に非推奨となりました。

// Before
[old code]

// After
[new code]

Codemod [説明]：

npx codemod@latest react/[VERSION]/codemod-name

新たな非推奨項目 {/new-deprecations/}

非推奨：apiName {/deprecated-api-name/}

[説明と移行方法。]

---

この記事をレビューしてくださった Contributor に感謝します。

### React Labs Research Update

```markdown
---
title: "React Labs: What We've Been Working On – [Month Year]"
author: Author1, Author2, and Author3
date: YYYY/MM/DD
description: In React Labs posts, we write about projects in active research and development.
---

Month DD, YYYY by [Author1](url), [Author2](url), and [Author3](url)

---

<Intro>

In React Labs posts, we write about projects in active research and development. We've made significant progress since our [last update](/blog/previous-labs-post), and we'd like to share our progress.

</Intro>

[Optional: Roadmap disclaimer about timelines]

---

## Feature Name {/*feature-name*/}

<Note>

`<FeatureName />` is now available in React's Canary channel.

</Note>

[Description of feature, motivation, current status.]

### Subsection {/*subsection*/}

[Details, examples, use cases.]

---

## Research Area {/*research-area*/}

[Problem space description. Status communication.]

This research is still early. We'll share more when we're further along.

---

_Thanks to [Reviewer](url) for reviewing this post._

Thanks for reading, and see you in the next update!

React Conf の振り返り

---
title: "React Conf [YEAR] Recap"
author: Author1 and Author2
date: YYYY/MM/DD
description: Last week we hosted React Conf [YEAR]. In this post, we'll summarize the talks and announcements.
---

Month DD, YYYY by [Author1](url) and [Author2](url)

---

<Intro>

Last week we hosted React Conf [YEAR] [where we announced [key announcements]].

</Intro>

---

The entire [day 1](youtube-url) and [day 2](youtube-url) streams are available online.

## Day 1 {/*day-1*/}

_[Watch the full day 1 stream here.](youtube-url)_

[Description of day 1 opening and keynote highlights.]

Watch the full day 1 keynote here:

<YouTubeIframe src="https://www.youtube.com/embed/VIDEO_ID" />

## Day 2 {/*day-2*/}

_[Watch the full day 2 stream here.](youtube-url)_

[Day 2 summary.]

<YouTubeIframe src="https://www.youtube.com/embed/VIDEO_ID" />

## Q&A {/*q-and-a*/}

* [Q&A Title](youtube-url) hosted by [Host](url)

## And more... {/*and-more*/}

We also heard talks including:
* [Talk Title](youtube-url) by [Speaker](url)

## Thank you {/*thank-you*/}

Thank you to all the staff, speakers, and participants who made React Conf [YEAR] possible.

See you next time!

機能／ツールのお知らせ

---
title: "Introducing [Feature Name]"
author: Author Name
date: YYYY/MM/DD
description: Today we are announcing [feature]. In this post, we'll explain [what this post covers].
---

Month DD, YYYY by [Author Name](url)

---

<Intro>

Today we are [excited/thrilled] to announce [feature]. [What this means for users.]

</Intro>

---

## tl;dr {/*tldr*/}

* Key announcement point with [relevant link](/path).
* What users can do now.
* Availability or adoption information.

## What is [Feature]? {/*what-is-feature*/}

[Explanation of the feature/tool.]

## Why we built this {/*why-we-built-this*/}

[Motivation, history, problem being solved.]

## Getting started {/*getting-started*/}

To install [feature]:

<TerminalBlock>
npm install package-name
</TerminalBlock>

[You can find more documentation here.](/path/to/docs)

## What's next {/*whats-next*/}

[Future plans and next steps.]

## Thank you {/*thank-you*/}

[Acknowledgments to contributors.]

---

Thanks to [Reviewer](url) for reviewing this post.

セキュリティのお知らせ

---
title: "[Severity] Security Vulnerability in [Component]"
author: The React Team
date: YYYY/MM/DD
description: Brief summary of the vulnerability. A fix has been published. We recommend upgrading immediately.

---

Month DD, YYYY by [The React Team](/community/team)

---

<Intro>

[One or two sentences summarizing the vulnerability.]

We recommend upgrading immediately.

</Intro>

---

On [date], [researcher] reported a security vulnerability that allows [description].

This vulnerability was disclosed as [CVE-YYYY-NNNNN](https://www.cve.org/CVERecord?id=CVE-YYYY-NNNNN) and is rated CVSS [score].

The vulnerability is present in versions [list] of:

* [package-name](https://www.npmjs.com/package/package-name)

## Immediate Action Required {/*immediate-action-required*/}

A fix was introduced in versions [linked versions]. Upgrade immediately.

### Affected frameworks {/*affected-frameworks*/}

[List of affected frameworks with npm links.]

### Vulnerability overview {/*vulnerability-overview*/}

[Technical explanation of the vulnerability.]

## Update Instructions {/*update-instructions*/}

### Framework Name {/*update-framework-name*/}

```bash
npm install package@version

タイムライン {/timeline/}

• November 29th：[Researcher] が脆弱性を報告しました。
• December 1st：修正が作成され、検証されました。
• December 3rd：修正が公開され、CVE が開示されました。

謝辞 {/attribution/}

この脆弱性を発見し、報告してくださった Researcher Name に感謝します。

---

## Heading Conventions

### ID Syntax

All headings require IDs using CSS comment syntax:

```markdown
## Heading Text {/*heading-id*/}

ID の規則

• 小文字を使用する
• ケバブケースを使用する（単語間をハイフンで区切る）
• 特殊文字（アポストロフィ、コロン、バッククォート）を削除する
• 簡潔でありながら、内容が伝わるものにする

見出しのパターン

コンテキスト	例
機能のセクション	## New Feature: Automatic Batching {/*new-feature-automatic-batching*/}
新しいフック	### New hook: \useActionState` {/new-hook-useactionstate/}`
バッククォートで囲んだ API	### \` {/activity/}`
削除された API	#### Removed: \propTypes` {/removed-proptypes/}`
tl;dr セクション	## tl;dr {/*tldr*/}

---

コンポーネント使用ガイド

ブログに適したコンポーネント

コンポーネント	ブログでの用途
<Intro>	必須 - 著者表記の後に置く冒頭の概要
<Note>	補足、注意事項、重要な説明
<Pitfall>	よくある間違いへの警告
<DeepDive>	技術的な詳細解説（任意。控えめに使用）
<TerminalBlock>	CLI／インストールコマンド
<ConsoleBlock>	コンソールのエラー／警告出力
<ConsoleBlockMulti>	複数行のコンソール出力
<YouTubeIframe>	カンファレンス動画の埋め込み
<Diagram>	視覚的な説明
<InlineToc />	自動生成される目次

<Intro> のパターン

冒頭の段落は必ず次のように囲みます：

<Intro>

React 19 is now available on npm!

</Intro>

<Note> のパターン

シンプルな注記：

<Note>

For React Native users, React 18 ships with the New Architecture.

</Note>

タイトル付きの注記（内部にH4）：

<Note>

#### React 18.3 has also been published {/*react-18-3*/}

To help with the upgrade, we've published `[email protected]`...

</Note>

<TerminalBlock> のパターン

<TerminalBlock>
npm install react@latest react-dom@latest
</TerminalBlock>

<YouTubeIframe> のパターン

<YouTubeIframe src="https://www.youtube.com/embed/VIDEO_ID" />

---

リンクのパターン

内部リンク

種類	パターン	例
ブログ記事	/blog/YYYY/MM/DD/slug	/blog/2024/12/05/react-19
API リファレンス	/reference/react/HookName	/reference/react/useState
学習セクション	/learn/topic-name	/learn/react-compiler
コミュニティ	/community/team	/community/team

外部リンク

種類	パターン
GitHub PR	[#12345](https://github.com/react/react/pull/12345)
GitHub ユーザー	[@username](https://github.com/username)
Twitter/X	[@username](https://x.com/username)
Bluesky	[Name](https://bsky.app/profile/handle)
CVE	[CVE-YYYY-NNNNN](https://www.cve.org/CVERecord?id=CVE-YYYY-NNNNN)
npm パッケージ	[package](https://www.npmjs.com/package/package)

「ドキュメントを参照」パターン

For more information, see the docs for [`useActionState`](/reference/react/useActionState).

---

変更履歴の形式

箇条書きのパターン

* Add `useTransition` for concurrent rendering. ([#10426](https://github.com/react/react/pull/10426) by [@acdlite](https://github.com/acdlite))
* Fix `useReducer` observing incorrect props. ([#22445](https://github.com/react/react/pull/22445) by [@josephsavona](https://github.com/josephsavona))

構成： 動詞 + バッククォートで囲んだAPI + 説明 + ([#PR](url) by [@user](url))

動詞： Add、Fix、Remove、Make、Improve、Allow、Deprecate

セクションの構成

## Changelog {/*changelog*/}

### React {/*react*/}

* [changes]

### React DOM {/*react-dom*/}

* [changes]

---

謝辞の形式

締めくくりの後に置く謝辞

---

Thanks to [Name](url), [Name](url), and [Name](url) for reviewing this post.

または、斜体で記載します：

_Thanks to [Name](url) for reviewing this post._

更新に関する注記

公開後に更新する場合：

<Note>

[Updated content]

-----

_Updated January 26, 2026._

</Note>

---

投稿の種類ごとのトーンと長さ

種類	トーン	長さ	主な要素
リリース	祝意を込めた、情報提供的	中〜長	機能の概要、アップグレードリンク、変更履歴
アップグレード	手順を示す、正確	長	ステップごとの説明、codemods、破壊的変更
Labs	透明性のある、模索的	中	状況報告、ロードマップに関する免責事項
Conf	熱意があり、コミュニティ重視	中	YouTube 埋め込み、登壇者のクレジット
機能	期待感を高める、解説的	中	tl;dr、「理由」、利用開始方法
セキュリティ	緊急性のある、事実に基づいた	短〜中	即時の対応、タイムライン、CVE

---

推奨事項と禁止事項

推奨事項：

• マーケティングより事実に重点を置く
• 未リリースの機能については、「今後提供予定」と明示する
• 重要な発表にはFAQセクションを含める
• 貢献者に謝意を示し、GitHub へのリンクを付ける
• チームの投稿では「私たち」の視点を使う
• リリース記事からアップグレードガイドにリンクする
• 長い記事には目次を含める
• 謝辞で締めくくる

禁止事項：

• まだ利用できない機能を約束する
• 過去を書き換える（代わりに更新に関する注記を追加する）
• 既存のURLを変更する
• 大げさな表現（「革命的」「ゲームチェンジャー」など）を使う
• <Intro> コンポーネントを省略する
• 見出し ID を忘れる
• ブログ内でコンポーネントを過度に入れ子にする
• 所要時間の見積もりや予測を行う

---

古い記事の更新

• 既存のURLは変更せず、URLを変更する場合はリダイレクトを追加する
• 過去を書き換えず、代わりに更新に関する注記を追加する：

  <Note>
  
  [Updated information]
  
  -----
  
  _Updated Month Year._
  
  </Note>
  

---

重要なルール

1. 見出し ID は必須： ## Title {/*title-id*/}
2. <Intro> は必須： すべての記事は <Intro> コンポーネントで始める
3. 著者表記は必須： フロントマターの後に日付とリンク付きの著者名を記載する
4. 日付の形式： フロントマターでは YYYY/MM/DD、著者表記では Month DD, YYYY を使用する
5. ドキュメントへのリンク： 新しい API にはリファレンスドキュメントへのリンクを付ける
6. セキュリティ記事： 必ず「直ちにアップグレードすることを推奨します」と記載する

---

コンポーネントリファレンス

MDX コンポーネントのパターン全般については、/docs-components を呼び出してください。

ブログ記事では、次のコンポーネントがよく使われます：<Intro>、<Note>、<Pitfall>、<TerminalBlock>、<ConsoleBlock>、<YouTubeIframe>、<DeepDive>、<Diagram>。

コンポーネントを多用するより、説明を本文にインラインで記述することを優先してください。