diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index 7e4f6d2f2..b27122c24 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -1,11 +1,13 @@ diff --git a/.github/workflows/site_lint.yml b/.github/workflows/site_lint.yml index 81a04601c..26d7ed583 100644 --- a/.github/workflows/site_lint.yml +++ b/.github/workflows/site_lint.yml @@ -35,3 +35,6 @@ jobs: - name: Lint codebase run: yarn ci-check + + - name: Textlint (Japanese) + run: yarn textlint \ No newline at end of file diff --git a/README.md b/README.md index 182192cb5..fc38243c4 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,8 @@ This repo contains the source code and documentation powering [react.dev](https://react.dev/). +> 以下はオリジナル（英語版）リポジトリの README です。日本語版 React ドキュメントへの貢献（翻訳・修正など）に興味がある方は[こちらの Wiki ページ](https://github.com/reactjs/ja.react.dev/wiki)を参照してください。 + ## Getting started ### Prerequisites @@ -60,4 +62,4 @@ The documentation is divided into several sections with a different tone and pur If you are interested in translating `react.dev`, please see the current translation efforts [here](https://github.com/reactjs/react.dev/issues/4135). ## License -Content submitted to [react.dev](https://react.dev/) is CC-BY-4.0 licensed, as found in the [LICENSE-DOCS.md](https://github.com/reactjs/react.dev/blob/main/LICENSE-DOCS.md) file. +Content submitted to [react.dev](https://react.dev/) is CC-BY-4.0 licensed, as found in the [LICENSE-DOCS.md](https://github.com/reactjs/react.dev/blob/main/LICENSE-DOCS.md) file. \ No newline at end of file diff --git a/package.json b/package.json index 6d6b53f92..e48f4cac5 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,9 @@ "start": "next start", "postinstall": "is-ci || husky install .husky", "check-all": "npm-run-all prettier lint:fix tsc rss", - "rss": "node scripts/generateRss.js" + "rss": "node scripts/generateRss.js", + "textlint": "cd textlint && yarn --frozen-lockfile && yarn textlint", + "textlint-staged": "cd textlint && yarn --frozen-lockfile && yarn textlint-staged --" }, "dependencies": { "@codesandbox/sandpack-react": "2.13.5", @@ -109,7 +111,7 @@ }, "lint-staged": { "*.{js,ts,jsx,tsx,css}": "yarn prettier", - "src/**/*.md": "yarn fix-headings" + "src/**/*.md": ["yarn fix-headings", "yarn textlint-staged --"] }, "packageManager": "yarn@1.22.22" } diff --git a/plugins/gatsby-remark-japanese-fix/index.js b/plugins/gatsby-remark-japanese-fix/index.js new file mode 100644 index 000000000..8bc5cf4d9 --- /dev/null +++ b/plugins/gatsby-remark-japanese-fix/index.js @@ -0,0 +1,26 @@ +const toString = require('mdast-util-to-string'); +const visit = require('unist-util-visit'); + +const hasJapaneseCharacter = (str) => { + // Detects katakana, hiragana, iteration marks, and CJK unified ideographs + return /[\u30a0-\u30ff\u3040-\u309f\u3005-\u3006\u4e00-\u9fea。、]/.test(str); +}; + +/** + * Iterates over emphases ('s) within the AST created by remark. + * Applies 'em-ja' class only when it contains a Japanese character, + * so that it can be displayed with a different style. + */ + +module.exports = ({markdownAST}, options) => { + visit(markdownAST, 'emphasis', (node) => { + const nodeStr = toString(node); + if (hasJapaneseCharacter(nodeStr)) { + // Patch AST + node.data = node.data || {}; + node.data.hProperties = node.data.hProperties || {}; + node.data.hProperties.class = 'em-ja'; + } + }); + return markdownAST; +}; diff --git a/plugins/gatsby-remark-japanese-fix/package.json b/plugins/gatsby-remark-japanese-fix/package.json new file mode 100644 index 000000000..d3eb061f4 --- /dev/null +++ b/plugins/gatsby-remark-japanese-fix/package.json @@ -0,0 +1,4 @@ +{ + "name": "gatsby-remark-japanese-fix", + "version": "0.0.1" +} diff --git a/public/images/og-blog.png b/public/images/og-blog.png index fbc8dd10b..77bbc9abc 100644 Binary files a/public/images/og-blog.png and b/public/images/og-blog.png differ diff --git a/public/images/og-community.png b/public/images/og-community.png index 6b4e0d491..aa1c82257 100644 Binary files a/public/images/og-community.png and b/public/images/og-community.png differ diff --git a/public/images/og-learn.png b/public/images/og-learn.png index 8e329db0a..0e4a755dc 100644 Binary files a/public/images/og-learn.png and b/public/images/og-learn.png differ diff --git a/public/images/og-reference.png b/public/images/og-reference.png index 3ce656e8d..c3c4ca50d 100644 Binary files a/public/images/og-reference.png and b/public/images/og-reference.png differ diff --git a/src/components/Layout/HomeContent.js b/src/components/Layout/HomeContent.js index 22b75016b..cc48166db 100644 --- a/src/components/Layout/HomeContent.js +++ b/src/components/Layout/HomeContent.js @@ -51,8 +51,9 @@ function Section({children, background = null}) { } function Header({children}) { + // "lg:max-w-xl" has been removed in Japanese version return ( -

+

{children}

); @@ -136,7 +137,7 @@ export function HomeContent() { React

- The library for web and native user interfaces + Web とネイティブユーザインターフェースのためのライブラリ

- Learn React + label="React を学ぶ"> + React を学ぶ - API Reference + label="API リファレンス"> + API リファレンス
-
Create user interfaces from components
+
+ コンポーネントから +
+ ユーザインターフェースを作成 +
- React lets you build user interfaces out of individual pieces - called components. Create your own React components like{' '} - Thumbnail, LikeButton, and{' '} - Video. Then combine them into entire screens, pages, - and apps. + React ではユーザインターフェースを、{} + コンポーネントと呼ばれる部品を使って構築できます。 + Thumbnail、LikeButton、 + Video + といった React コンポーネントを書き、{} + それらを組み合わせて画面やページやアプリの全体を組み立てましょう。
@@ -174,22 +180,27 @@ export function HomeContent() {
- Whether you work on your own or with thousands of other - developers, using React feels the same. It is designed to let you - seamlessly combine components written by independent people, - teams, and organizations. + 独りで開発していても、数千の開発者と共同開発していても、{} + React の開発体験は同じです。個人、チーム、大規模な組織によって{} + 書かれさまざまなコンポーネントを、シームレスに組み合わせながら{} + 開発できる。それが React の設計理念です。
-
Write components with code and markup
+
+ マークアップとコードから +
+ コンポーネントを作成 +
- React components are JavaScript functions. Want to show some - content conditionally? Use an if statement. - Displaying a list? Try array map(). Learning React is - learning programming. + React コンポーネントは単なる JavaScript の関数です。{} + 条件によってコンテンツの表示を変えたければ if{' '} + 文を使いましょう！ リストを表示したいなら配列の map(){' '} + を使いましょう！ React + を学ぶということは、プログラミングを学ぶということなのです。
@@ -197,22 +208,27 @@ export function HomeContent() {
- This markup syntax is called JSX. It is a JavaScript syntax - extension popularized by React. Putting JSX markup close to - related rendering logic makes React components easy to create, - maintain, and delete. + このマークアップ構文は JSX と呼ばれます。React が普及させた + JavaScript の構文拡張です。JSX マークアップは関連する{} + レンダリングロジックのすぐそばに配置できるので、React + コンポーネントは簡単に作成、保守、削除ができます。
-
Add interactivity wherever you need it
+
+ インタラクティブ機能を +
+ どこでも必要な場所に +
- React components receive data and return what should appear on the - screen. You can pass them new data in response to an interaction, - like when the user types into an input. React will then update the - screen to match the new data. + React + コンポーネントはデータを受け取り、画面に表示するものを返します。{} + 入力フィールドへのタイピングなどのユーザ操作によって{} + 新しいデータができたら、コンポーネントにそれを渡します。{} + React が新しいデータに基づいて画面を更新します。
@@ -220,16 +236,16 @@ export function HomeContent() {
- You don’t have to build your whole page in React. Add React to - your existing HTML page, and render interactive React components - anywhere on it. + ページ全体を React で構築する必要はありません。既存の HTML + ページに React を追加すれば、どんな場所にでもインタラクティブな + React コンポーネントを表示できます。
- Add React to your page + 既存のページに React を追加する
@@ -238,15 +254,18 @@ export function HomeContent() {
- Go full-stack
- with a framework + フレームワークで +
+ フルスタックな開発を
- React is a library. It lets you put components together, but it - doesn’t prescribe how to do routing and data fetching. To build an - entire app with React, we recommend a full-stack React framework - like Next.js or{' '} - Remix. + React はライブラリです。{} + コンポーネントを組み合わせることはできますが、{} + ルーティングやデータフェッチの方法までは指定しません。{} + React でアプリ全体を構築する場合は、{} + Next.js や{' '} + Remix{' '} + のようなフルスタックのフレームワークをお勧めします。
@@ -254,17 +273,18 @@ export function HomeContent() {
- React is also an architecture. Frameworks that implement it let - you fetch data in asynchronous components that run on the server - or even during the build. Read data from a file or a database, and - pass it down to your interactive components. + React とはアーキテクチャでもあります。{} + フレームワークでは、サーバやビルド時に動作する{} + 非同期コンポーネントを使ってデータの取得が可能です。{} + ファイルやデータベースからデータを読み込んで、{} + インタラクティブなコンポーネントに渡しましょう。
- Get started with a framework + フレームワークで始める
@@ -272,12 +292,19 @@ export function HomeContent() {
-
Use the best from every platform
+
+ あらゆるプラットフォームの +
+ 能力を最大限に活用 +
- People love web and native apps for different reasons. React - lets you build both web apps and native apps using the same - skills. It leans upon each platform’s unique strengths to let - your interfaces feel just right on every platform. + 人々はウェブを愛し、そしてネイティブアプリを愛しています。{} + その理由は様々です。{} + React + を使えば、同じスキルを使ってウェブアプリとネイティブアプリの{} + 両方を構築できます。{} + 各プラットフォームが持つ独自の強みを活かし、{} + どんなプラットフォームにおいても自然なインターフェースを実現します。
@@ -291,15 +318,17 @@ export function HomeContent() {

- Stay true to the web + ウェブの本質に忠実に

- People expect web app pages to load fast. On the server, - React lets you start streaming HTML while you’re still - fetching data, progressively filling in the remaining - content before any JavaScript code loads. On the client, - React can use standard web APIs to keep your UI - responsive even in the middle of rendering. + 人々はウェブアプリが素早く読み込まれることを期待します。 + {} + React を使用すれば、サーバ上でデータが取得中でも HTML + のストリーミングを開始でき、JavaScript + コードが読み込まれる前に{} + コンテンツを段階的にロードすることができます。{} + クライアント側では、React は標準的な Web API + を使用して、レンダーの最中でも UI の応答性を保ちます。

@@ -377,21 +406,23 @@ export function HomeContent() {

- Go truly native + 真にネイティブな体験を実現

- People expect native apps to look and feel like their - platform.{' '} + 人々はネイティブアプリがそのプラットフォームに見合った + {} + ルック＆フィールを持つことを期待します。 React Native {' '} - and{' '} + や{' '} Expo{' '} - let you build apps in React for Android, iOS, and - more. They look and feel native because their UIs{' '} - are truly native. It’s not a web view—your - React components render real Android and iOS views - provided by the platform. + を使えば、React で Android、iOS + などのアプリを構築できます。{} + ネイティブアプリのように感じるのは、{} + ウェブビューではなく真のネイティブ UI だからです。{} + React コンポーネントは、プラットフォーム固有の、{} + 本物の Android や iOS のビューを表示できます。

@@ -401,14 +432,16 @@ export function HomeContent() {
- With React, you can be a web and a native developer. Your - team can ship to many platforms without sacrificing the user - experience. Your organization can bridge the platform silos, and - form teams that own entire features end-to-end. + React を使えば、{} + ウェブ開発者にもネイティブアプリ開発者にもなれるのです。{} + ユーザー体験を犠牲にすることなく、{} + 多くのプラットフォームでリリースを行えます。{} + ひとつのプラットフォームに縛られることなく、{} + すべての機能をエンドツーエンドで担当するチームを作れます。
- Build for native platforms + ネイティブプラットフォーム向けに開発する
@@ -419,23 +452,29 @@ export function HomeContent() {
-
Upgrade when the future is ready
+
+ 完成した機能だけが +
+ リリースされる +
- React approaches changes with care. Every React commit is - tested on business-critical surfaces with over a billion - users. Over 100,000 React components at Meta help validate - every migration strategy. + React は開発アプローチの変更に慎重に取り組みます。{} + すべてのコミットは 10 億人以上のユーザによる{} + ビジネスクリティカルな環境においてテストされます。{} + Meta にある 10 万以上の React コンポーネントが、{} + すべての移行戦略の検証を支援します。
- The React team is always researching how to improve React. - Some research takes years to pay off. React has a high bar - for taking a research idea into production. Only proven - approaches become a part of React. + React チームは、常に React + を改善する方法を模索していますが、{} + 研究によっては成果が出るまでに何年もかかることもあります。{} + 研究のアイデアをリリースするまでの高いハードルを越えた、{} + 実証済みのアプローチだけが React の一部となるのです。
- Read more React news + React のニュースを読む
@@ -443,7 +482,7 @@ export function HomeContent() {

- Latest React News + 最新の React ニュース

@@ -474,13 +513,14 @@ export function HomeContent() {
- Join a community
- of millions + 数百万人の +
+ コミュニティに参加しよう
- You’re not alone. Two million developers from all over the - world visit the React docs every month. React is something - that people and teams can agree on. + あなたは 1 人ではありません。世界中から毎月 200 万人の開発者が + React ドキュメントに訪れています。{} + 人々とチームが共感できる技術、それが React なのです。
@@ -488,13 +528,14 @@ export function HomeContent() {
- This is why React is more than a library, an architecture, or - even an ecosystem. React is a community. It’s a place where - you can ask for help, find opportunities, and meet new - friends. You will meet both developers and designers, - beginners and experts, researchers and artists, teachers and - students. Our backgrounds may be very different, but React - lets us all create user interfaces together. + React は単なるライブラリやアーキテクチャ、{} + あるいはエコシステムという以上の存在です。{} + React とはコミュニティです。{} + ヘルプを求め、チャンスを見つけ、新しい友人に会える場所です。{} + 開発者やデザイナ、初心者やエキスパート、{} + 研究者やアーティスト、教師や学生と出会える場所です。{} + 私たちのバックグラウンドはさまざまですが、React を通じて皆で{} + ユーザーインターフェースの創造に取り組んでいるのです。
@@ -511,15 +552,16 @@ export function HomeContent() {
- Welcome to the
- React community + React コミュニティに +
+ ようこそ！
- Get Started + はじめる
diff --git a/src/components/Layout/Toc.tsx b/src/components/Layout/Toc.tsx index 5308c602c..4d37081f3 100644 --- a/src/components/Layout/Toc.tsx +++ b/src/components/Layout/Toc.tsx @@ -16,7 +16,7 @@ export function Toc({headings}: {headings: Toc}) {