diff --git a/beta/src/components/MDX/Challenges/Challenges.tsx b/beta/src/components/MDX/Challenges/Challenges.tsx index 9934de66a..8f6c57e9b 100644 --- a/beta/src/components/MDX/Challenges/Challenges.tsx +++ b/beta/src/components/MDX/Challenges/Challenges.tsx @@ -117,7 +117,7 @@ export function Challenges({children, isRecipes}: ChallengesProps) { 'text-3xl mb-2 leading-10 relative', isRecipes ? 'text-purple-50 dark:text-purple-30' : 'text-link' )}> - {isRecipes ? 'Try out some recipes' : 'Try out some challenges'} + {isRecipes ? 'レシピを試す' : 'チャレンジ問題'} {challenges.length > 1 && (

- {isRecipes ? 'Recipe' : 'Challenge'} {currentChallenge?.order}{' '} - of {challenges.length} + {isRecipes ? 'レシピ' : '問題'} {currentChallenge?.order}/ + {challenges.length} :
{currentChallenge?.name} @@ -145,14 +145,14 @@ export function Challenges({children, isRecipes}: ChallengesProps) {
) : ( @@ -162,7 +162,7 @@ export function Challenges({children, isRecipes}: ChallengesProps) { onClick={toggleSolution} active={showSolution}> {' '} - {showSolution ? 'Hide solution' : 'Show solution'} + {showSolution ? '答えを隠す' : '答えを見る'} ) )} @@ -179,7 +179,7 @@ export function Challenges({children, isRecipes}: ChallengesProps) { setShowSolution(false); }} active> - Next {isRecipes ? 'Recipe' : 'Challenge'} + 次の {isRecipes ? 'レシピ' : '問題'}

- Solution + 答え

{currentChallenge?.solution}
{nextChallenge && (

@@ -69,7 +69,7 @@ function ExpandableExample({ - {isExpanded ? 'Hide Details' : 'Show Details'} + {isExpanded ? '詳細を隠す' : '詳細を開く'}
{children}; + return {children}; } // TODO: typing. diff --git a/beta/src/components/MDX/Recap.tsx b/beta/src/components/MDX/Recap.tsx index d91ed48b4..57dc1f694 100644 --- a/beta/src/components/MDX/Recap.tsx +++ b/beta/src/components/MDX/Recap.tsx @@ -13,7 +13,7 @@ function Recap({children}: RecapProps) { return (

- Recap + まとめ

{children}
diff --git a/beta/src/pages/learn/importing-and-exporting-components.md b/beta/src/pages/learn/importing-and-exporting-components.md index 1583eab6e..c01b150fa 100644 --- a/beta/src/pages/learn/importing-and-exporting-components.md +++ b/beta/src/pages/learn/importing-and-exporting-components.md @@ -1,26 +1,26 @@ --- -title: Importing and Exporting Components +title: コンポーネントのインポートとエクスポート --- -The magic of components lies in their reusability: you can create components that are composed of other components. But as you nest more and more components, it often makes sense to start splitting them into different files. This lets you keep your files easy to scan and reuse components in more places. +コンポーネントの魅力は再利用のしやすさにあります。他のコンポーネントを組み合わせて新しいコンポーネントを作ることができるのです。しかし、コンポーネントのネストが増えてくると、それらを別のファイルに分割したくなってきます。これにより、欲しいファイルを簡単に見つけ出し、より多くの場所でコンポーネントを再利用できるようになります。 -* What a root component file is -* How to import and export a component -* When to use default and named imports and exports -* How to import and export multiple components from one file -* How to split components into multiple files +* ルートコンポーネントファイルとは何か +* コンポーネントのインポート・エクスポートの方法 +* デフォルトインポート/エクスポートと名前付きインポート/エクスポートの使い分け +* 1 つのファイルから複数のコンポーネントをインポート・エクスポートする方法 +* コンポーネントを複数のファイルに分割する方法 -## The root component file {/*the-root-component-file*/} +## ルートコンポーネントファイル {/*the-root-component-file*/} -In [Your First Component](/learn/your-first-component), you made a `Profile` component and a `Gallery` component that renders it: +[初めてのコンポーネント](/learn/your-first-component) では、`Profile` コンポーネントと、それをレンダーする `Gallery` コンポーネントを作成しました。 @@ -52,17 +52,17 @@ img { margin: 0 10px 10px 0; height: 90px; } -These currently live in a **root component file,** named `App.js` in this example. In [Create React App](https://create-react-app.dev/), your app lives in `src/App.js`. Depending on your setup, your root component could be in another file, though. If you use a framework with file-based routing, such as Next.js, your root component will be different for every page. +これらのコンポーネントは今のところ、**ルートコンポーネントファイル**（この例では `App.js` という名前）に置かれています。[Create React App](https://create-react-app.dev/) を使うとアプリは `src/App.js` に置かれます。セットアップによっては、ルートコンポーネントは別のファイルに存在するかもしれません。Next.js のようなファイルベースのルーティングがあるフレームワークを使っている場合、ルートコンポーネントはページごとに異なるものになります。 -## Exporting and importing a component {/*exporting-and-importing-a-component*/} +## コンポーネントのエクスポートとインポート {/*exporting-and-importing-a-component*/} -What if you want to change the landing screen in the future and put a list of science books there? Or place all the profiles somewhere else? It makes sense to move `Gallery` and `Profile` out of the root component file. This will make them more modular and reusable in other files. You can move a component in three steps: +もし将来ランディングページを変更して科学書のリストを表示したくなった場合はどうでしょうか。あるいはプロフィールを別の場所に表示したくなった場合は？ `Gallery` や `Profile` はルートコンポーネントファイル以外の場所に置きたくなるでしょう。これによりコンポーネントはよりモジュール化され、他のファイルから再利用可能になります。コンポーネントの移動は以下の 3 ステップで行えます： -1. **Make** a new JS file to put the components in. -2. **Export** your function component from that file (using either [default](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_the_default_export) or [named](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_named_exports) exports). -3. **Import** it in the file where you’ll use the component (using the corresponding technique for importing [default](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#importing_defaults) or [named](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#import_a_single_export_from_a_module) exports). +1. コンポーネントを置くための新しい JS ファイルを**作成する**。 +2. [デフォルト](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_the_default_export)エクスポートあるいは[名前付き](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_named_exports)エクスポートのいずれかを使い、関数コンポーネントをそのファイルから**エクスポートする**。 +3. 当該コンポーネントを利用するファイルで**インポート**する。[デフォルト](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#importing_defaults)エクスポートされたか[名前付き](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#import_a_single_export_from_a_module)エクスポートされたかに応じて対応するインポート手法を使う。 -Here both `Profile` and `Gallery` have been moved out of `App.js` into a new file called `Gallery.js`. Now you can change `App.js` to import `Gallery` from `Gallery.js`: +以下の例では、`Profile` と `Gallery` の両方が `App.js` から `Gallery.js` という新しいファイルへと移動しています。`App.js` を書きかえて、`Gallery.js` から `Gallery` をインポートするようにできます： @@ -104,54 +104,54 @@ img { margin: 0 10px 10px 0; height: 90px; } -Notice how this example is broken down into two component files now: +元の例がどのようにして 2 つのコンポーネントファイルに分割されたか確認しましょう： -1. `Gallery.js`: - - Defines the `Profile` component which is only used within the same file and is not exported. - - Exports the `Gallery` component as a **default export**. -2. `App.js`: - - Imports `Gallery` as a **default import** from `Gallery.js`. - - Exports the root `App` component as a **default export**. +1. `Gallery.js` は： + - `Profile` を定義しているが同じファイルでしか使われていないのでエクスポートされていない。 + - **デフォルトエクスポート** として `Gallery` コンポーネントをエクスポートしている。 +2. `App.js` は： + - `Gallery.js` から `Gallery` を**デフォルトインポート**している。 + - ルートの `App` コンポーネントを**デフォルトエクスポート**している。 -You may encounter files that leave off the `.js` file extension like so: +`.js` というファイル拡張子が省略された、以下のようなファイルを見ることがあるかもしれません： ```js import Gallery from './Gallery'; ``` -Either `'./Gallery.js'` or `'./Gallery'` will work with React, though the former is closer to how [native ES Modules](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Modules) work. +React では `'./Gallery.js'` でも `'./Gallery'` でも動作しますが、前者の方が[ネイティブ ES モジュール](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Modules)の動作により近い方法です。 - + -There are two primary ways to export values with JavaScript: default exports and named exports. So far, our examples have only used default exports. But you can use one or both of them in the same file. **A file can have no more than one _default_ export, but it can have as many _named_ exports as you like.** +JavaScript には値をエクスポートする主な方法が 2 つあります。デフォルトエクスポートと名前付きエクスポートです。これまで、我々の例ではデフォルトエクスポートのみを使ってきました。しかし同じファイルで両方使うことも、あるいはどちらか片方だけを使うことも可能です。**ファイルには*デフォルト*エクスポートは 1 つまでしか置けませんが、*名前付き*エクスポートは好きなだけ置くことができます。** -![Default and named exports](/images/docs/illustrations/i_import-export.svg) +![デフォルトエクスポートと名前付きエクスポート](/images/docs/illustrations/i_import-export.svg) -How you export your component dictates how you must import it. You will get an error if you try to import a default export the same way you would a named export! This chart can help you keep track: +どのようにコンポーネントをエクスポートするかによって、それをどのようにインポートするのかが決まります。デフォルトエクスポートされたものを名前付きエクスポートのようにインポートしようとするとエラーになります！ 以下の表が参考になるでしょう： -| Syntax | Export statement | Import statement | +| 構文 | Export 文 | Import 文 | | ----------- | ----------- | ----------- | | Default | `export default function Button() {}` | `import Button from './button.js';` | | Named | `export function Button() {}` | `import { Button } from './button.js';` | -When you write a _default_ import, you can put any name you want after `import`. For example, you could write `import Banana from './button.js'` instead and it would still provide you with the same default export. In contrast, with named imports, the name has to match on both sides. That's why they are called _named_ imports! +*デフォルト*インポート書く場合、`import` の後には好きな名前を書くことができます。例えば `import Banana from './button.js'` と書いたとしても、同じデフォルトエクスポートされたものを得ることができます。一方で、名前付きエクスポートでは、エクスポート側とインポート側で名前が合致していなければなりません。だからこそ*名前付き*エクスポートと呼ばれるわけですね。 -**People often use default exports if the file exports only one component, and use named exports if it exports multiple components and values.** Regardless of which coding style you prefer, always give meaningful names to your component functions and the files that contain them. Components without names, like `export default () => {}`, are discouraged because they make debugging harder. +**ファイルがコンポーネントを 1 つだけエクスポートする場合はデフォルトエクスポートが、複数のコンポーネントや値をエクスポートする場合は名前付きエクスポートがよく使われます。**どちらのコーディングスタイルが好みの場合でも、コンポーネントやそれが入るファイルには、常に意味の通った名前を付けるようにしてください。`export default () => {}` のような名前のないコンポーネントは、デバッグが困難になるため推奨されません。 -## Exporting and importing multiple components from the same file {/*exporting-and-importing-multiple-components-from-the-same-file*/} +## 同じファイルから複数のコンポーネントをエクスポート・インポートする {/*exporting-and-importing-multiple-components-from-the-same-file*/} -What if you want to show just one `Profile` instead of a gallery? You can export the `Profile` component, too. But `Gallery.js` already has a *default* export, and you can't have _two_ default exports. You could create a new file with a default export, or you could add a *named* export for `Profile`. **A file can only have one default export, but it can have numerous named exports!** +ギャラリーではなく、`Profile` を 1 つだけを表示したい場合はどうでしょう。`Profile` コンポーネントもエクスポートすればいいのです。しかし、`Gallery.js` にはすでにデフォルトエクスポートがあり、デフォルトエクスポートは 2 つ以上存在できません。デフォルトエクスポートを持つ新しいファイルを作成するか、または `Profile` 用の*名前付き*エクスポートを追加することができます。**1 つのファイルはデフォルトエクスポートを 1 つしか持つことができませんが、名前付きエクスポートはたくさんあっても構いません！**。 -> To reduce the potential confusion between default and named exports, some teams choose to only stick to one style (default or named), or avoid mixing them in a single file. It's a matter of preference. Do what works best for you! +> デフォルトエクスポートと名前付きエクスポートとで混乱する可能性を減らすために、チームによっては 1 つのスタイル（デフォルトまたは名前付き）に統一したり、1 つのファイルでこれらを混在させないようにしています。これは好みの問題です。自分たちに合った方法を選んでください！ -First, **export** `Profile` from `Gallery.js` using a named export (no `default` keyword): +まずは `Gallery.js` の `Profile` を名前付きで**エクスポート**します（`default` キーワードは付けない）： ```js export function Profile() { @@ -159,13 +159,13 @@ export function Profile() { } ``` -Then, **import** `Profile` from `Gallery.js` to `App.js` using a named import (with the curly braces): +そして、`Gallery.js` の `Profile` を `App.js` に名前付きで**インポート**します（中括弧を使う）： ```js import { Profile } from './Gallery.js'; ``` -Finally, **render** `` from the `App` component: +最後に `App` コンポーネントで `` を**レンダー**します： ```js export default function App() { @@ -173,7 +173,7 @@ export default function App() { } ``` -Now `Gallery.js` contains two exports: a default `Gallery` export, and a named `Profile` export. `App.js` imports both of them. Try editing `` to `` and back in this example: +これで `Gallery.js` には、デフォルトの `Gallery` というエクスポートと、名前付きの `Profile` というエクスポートの 2 つが含まれるようになりました。`App.js` はその両方をインポートしています。この例の `` を `` と書きかえたり、元に戻したりしてみてください： @@ -216,24 +216,24 @@ img { margin: 0 10px 10px 0; height: 90px; } -Now you're using a mix of default and named exports: +これで、デフォルトと名前付きのエクスポートが混在するようになりました： -* `Gallery.js`: - - Exports the `Profile` component as a **named export called `Profile`**. - - Exports the `Gallery` component as a **default export**. -* `App.js`: - - Imports `Profile` as a **named import called `Profile`** from `Gallery.js`. - - Imports `Gallery` as a **default import** from `Gallery.js`. - - Exports the root `App` component as a **default export**. +* `Gallery.js` は： + - `Profile` コンポーネントを **`Profile` という名前付きでエクスポートしている**. + - `Gallery` コンポーネントを**デフォルトエクスポート**している。 +* `App.js` は： + - `Profile` コンポーネントを `Gallery.js` から **`Profile` という名前付きでインポートしている**。 + - `Gallery` コンポーネントを `Gallery.js` から**デフォルトインポート**している。 + - ルートの `App` コンポーネントを**デフォルトエクスポート**している。 -On this page you learned: +このページでは以下のことを学びました： -* What a root component file is -* How to import and export a component -* When and how to use default and named imports and exports -* How to export multiple components from the same file +* ルートコンポーネントファイルとは何か +* コンポーネントのインポート・エクスポートの方法 +* デフォルトインポート/エクスポートと名前付きインポート/エクスポートの使い分け +* 1 つのファイルから複数のコンポーネントをインポート・エクスポートする方法 @@ -241,22 +241,22 @@ On this page you learned: -### Split the components further {/*split-the-components-further*/} +### コンポーネントファイルをさらに分割する {/*split-the-components-further*/} -Currently, `Gallery.js` exports both `Profile` and `Gallery`, which is a bit confusing. +現在のところ `Gallery.js` は `Profile` と `Gallery` の両方をエクスポートしていますが、これはちょっと混乱の原因になりそうです。 -Move the `Profile` component to its own `Profile.js`, and then change the `App` component to render both `` and `` one after another. +`Profile` コンポーネントを `Profile.js` という別ファイルに移動し、その後で `App` コンポーネントも変更して `` と `` を並べてレンダーするようにしてください。 -You may use either a default or a named export for `Profile`, but make sure that you use the corresponding import syntax in both `App.js` and `Gallery.js`! You can refer to the table from the deep dive above: +`Profile` をエクスポートするのにデフォルトと名前付きのどちらの手法を使っても構いませんが、`App.js` と `Gallery.js` の両方で対応するインポート構文を使うようにしましょう！ 上記の詳細セクションで挙げたこちらの表を参照しても構いません： -| Syntax | Export statement | Import statement | +| 構文 | Export 文 | Import 文 | | ----------- | ----------- | ----------- | | Default | `export default function Button() {}` | `import Button from './button.js';` | | Named | `export function Button() {}` | `import { Button } from './button.js';` | -Don't forget to import your components where they are called. Doesn't `Gallery` use `Profile`, too? +コンポーネントを使っている場所ではインポートするのを忘れないようにしましょう。`Gallery` も `Profile` を使っていますよね。 @@ -307,11 +307,11 @@ img { margin: 0 10px 10px 0; height: 90px; } -After you get it working with one kind of exports, make it work with the other kind. +片方のエクスポート構文でうまく動かせたら、もう片方の構文でも動くようにしてみましょう。 -This is the solution with named exports: +名前付きエクスポートを使った解法： @@ -361,7 +361,7 @@ img { margin: 0 10px 10px 0; height: 90px; } -This is the solution with default exports: +デフォルトエクスポートを使った解法： diff --git a/beta/src/pages/learn/your-first-component.md b/beta/src/pages/learn/your-first-component.md index 1f0b271a6..e415fbf59 100644 --- a/beta/src/pages/learn/your-first-component.md +++ b/beta/src/pages/learn/your-first-component.md @@ -1,24 +1,24 @@ --- -title: Your First Component +title: 初めてのコンポーネント --- -Components are one of the core concepts of React. They are the foundation upon which you build user interfaces (UI), which makes them the perfect place to start your React journey! +コンポーネントは、React における最重要コンセプトのひとつです。皆さんがユーザインターフェース (UI) を構築するときの基盤となるものですので、React の旅路はコンポーネントから始めていくことにしましょう！ -* What a component is -* What role components play in a React application -* How to write your first React component +* コンポーネントとは何か +* React アプリでコンポーネントが果たす役割 +* 初めてのコンポーネントの書き方 -## Components: UI building blocks {/*components-ui-building-blocks*/} +## コンポーネント：UI の構成要素 {/*components-ui-building-blocks*/} -On the Web, HTML lets us create rich structured documents with its built-in set of tags like `

` and `
  • `: +Web の世界では、HTML で `

    ` や `
  • ` といった組み込みタグを使い、リッチで構造化されたドキュメントを作成することができます： ```html
    @@ -31,11 +31,11 @@ On the Web, HTML lets us create rich structured documents with its built-in set
    ``` -This markup represents this article `
    `, its heading `

    `, and an (abbreviated) table of contents as an ordered list `
      `. Markup like this, combined with CSS for style, and JavaScript for interactivity, lies behind every sidebar, avatar, modal, dropdown—every piece of UI you see on the Web. +このマークアップは、記事自身 (`
      `)、見出し (`

      `)、そして番号付きリスト (`
        `) による目次（一部省略しています）を表現しています。我々がウェブで目にするサイドバー、アバター、モーダル、ドロップダウンといったあらゆる UI パーツの裏側では、このようなマークアップが、スタイルのための CSS やユーザ対話のための JavaScript と組み合わさりながら働いています。 -React lets you combine your markup, CSS, and JavaScript into custom "components," **reusable UI elements for your app.** The table of contents code you saw above could be turned into a `` component you could render on every page. Under the hood, it still uses the same HTML tags like `
        `, `

        `, etc. +React では、あなたのマークアップと CSS と JavaScript を、カスタムの「コンポーネント」と呼ばれる、**アプリのための再利用可能な UI 要素**にまとめることができます。上記にある目次のためのコードを、`` と呼ばれるコンポーネントにすることができるのです。その裏では、やはり `` や `

        ` といった同じ HTML タグを使っています。 -Just like with HTML tags, you can compose, order and nest components to design whole pages. For example, the documentation page you're reading is made out of React components: +HTML タグを使う時と同様にして、コンポーネントを組み合わせたり、並び替えたり、ネストしたりして、ページ全体をデザインすることができます。例えばあなたが今読んでいるこのページは、以下のような React コンポーネントから作られています： ```js @@ -51,11 +51,11 @@ Just like with HTML tags, you can compose, order and nest components to design w ``` -As your project grows, you will notice that many of your designs can be composed by reusing components you already wrote, speeding up your development. Our table of contents above could be added to any screen with ``! You can even jumpstart your project with the thousands of components shared by the React open source community like [Chakra UI](https://chakra-ui.com/) and [Material UI](https://material-ui.com/). +プロジェクトが成長するとともに、設計・デザインのいろいろな部分を、既に書いたコンポーネントを再利用することで構築できるようになり、開発速度がアップすることに気付くでしょう。上記のような目次を、`` を書くことでどのページにでも加えることができるのです！ [Chakra UI](https://chakra-ui.com/) や [Material UI](https://material-ui.com/) のような、React オープンソースコミュニティーで共有されている何千ものコンポーネントを使い、プロジェクトを一気にスタートさせることも可能です。 -## Defining a component {/*defining-a-component*/} +## コンポーネントの定義 {/*defining-a-component*/} -Traditionally when creating web pages, web developers marked up their content and then added interaction by sprinkling on some JavaScript. This worked great when interaction was a nice-to-have on the web. Now it is expected for many sites and all apps. React puts interactivity first while still using the same technology: **a React component is a JavaScript function that you can _sprinkle with markup_**. Here's what that looks like (you can edit the example below): +伝統的なウェブページの作成のやり方は、ウェブ開発者が先にコンテンツをマークアップしてから、ユーザとのインタラクションを加えるために JavaScript をちょっと添える、というものでした。これはウェブにとってインタラクションが「あると嬉しい」レベルのものだった時代にはうまく機能していました。しかし今や、インタラクションはほぼすべてのサイトとあらゆるアプリで必要とされるものです。React は同じテクノロジを使っていますが、インタラクティビティ・ファーストになっています。すなわち **React コンポーネントとは、マークアップを添えることができる JavaScript 関数**です。コンポーネントは以下のような見た目をしています（以下のコードは編集できます）： @@ -76,33 +76,33 @@ img { height: 200px; } -And here's how to build a component: +コンポーネントは以下のようにして作成します： -### Step 1: Export the component {/*step-1-export-the-component*/} +### Step 1: コンポーネントをエクスポートする {/*step-1-export-the-component*/} -The `export default` prefix is a [standard JavaScript syntax](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (not specific to React). It lets you mark the main function in a file so that you can later import it from other files. (More on importing in [Importing and Exporting Components](/learn/importing-and-exporting-components)!) +頭にある `export default` は[標準的な JavaScript の構文](https://developer.mozilla.org/docs/web/javascript/reference/statements/export)です（React 特有のものではありません）。これでファイル内のメインの関数をマークし、後で他のファイルからそれをインポートできるようにします。（[コンポーネントのインポートとエクスポート](/learn/importing-and-exporting-components)に詳細があります！） -### Step 2: Define the function {/*step-2-define-the-function*/} +### Step 2: 関数を定義する {/*step-2-define-the-function*/} -With `function Profile() { }` you define a JavaScript function with the name `Profile`. +`function Profile() { }` のように書くことで、`Profile` という名前の JavaScript 関数を定義します。 -React components are regular JavaScript functions, but **their names must start with a capital letter** or they won't work! +React コンポーネントは普通の JavaScript 関数ですが、**名前は大文字から始める必要があります**。さもないと動作しません！ -### Step 3: Add markup {/*step-3-add-markup*/} +### Step 3: マークアップを加える {/*step-3-add-markup*/} -The component returns an `` tag with `src` and `alt` attributes. `` is written like HTML, but it is actually JavaScript under the hood! This syntax is called [JSX](/learn/writing-markup-with-jsx), and it lets you embed markup inside JavaScript. +このコンポーネントは `src` と `alt` という属性を有する `` タグを返しています。`` は まるで HTML のように書かれていますが、裏では実際には JavaScript です！ この構文は [JSX](/learn/writing-markup-with-jsx) と呼ばれるもので、これによりマークアップを JavaScript 内に埋め込めるようになります。 -Return statements can be written all on one line, as in this component: +return 文は、以下のように 1 行にまとめて書いても構いません： ```js return Katherine Johnson; ``` -But if your markup isn't all on the same line as the return statement, you must wrap it in a pair of parentheses like this: +しかし return と同じ行にマークアップ全体が収まらない場合は、括弧で囲んで以下のようにする必要があります： ```js return ( @@ -114,13 +114,13 @@ return ( -Without parentheses, any code on the lines after `return` [will be ignored](https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi)! +括弧がないと、`return` の後にあるコードはすべて[無視されてしまいます](https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi)！ -## Using a component {/*using-a-component*/} +## コンポーネントを使う {/*using-a-component*/} -Now that you've defined your `Profile` component, you can nest it inside other components. For example, you can export a `Gallery` component that uses multiple `Profile` components: +`Profile` コンポーネントが定義できたので、それをほかのコンポーネント内にネストさせることができます。例えば `Profile` コンポーネントを複数回使う `Gallery` というコンポーネントをエクスポートできます： @@ -152,14 +152,14 @@ img { margin: 0 10px 10px 0; height: 90px; } -### What the browser sees {/*what-the-browser-sees*/} +### ブラウザに見えるもの {/*what-the-browser-sees*/} -Notice the difference in casing: +大文字・小文字の違いに気をつけてください： -* `
        ` is lowercase, so React knows we refer to an HTML tag. -* `` starts with a capital `P`, so React knows that we want to use our component called `Profile`. +* `
        ` は小文字なので、React はこれが HTML タグを指しているのだと理解します。 +* `` は大文字の `P` で始まっているので、React は `Profile` という名前の独自コンポーネントを使いたいのだと理解します。 -And `Profile` contains even more HTML: ``. In the end, this is what the browser sees: +`Profile` の中には `` という HTML が更に含まれてます。最終的に、ブラウザに見えるのは以下ののようなものです。 ```html
        @@ -170,34 +170,34 @@ And `Profile` contains even more HTML: ``. In the end, this is what the b
        ``` -### Nesting and organizing components {/*nesting-and-organizing-components*/} +### コンポーネントのネストと整理方法 {/*nesting-and-organizing-components*/} -Components are regular JavaScript functions, so you can keep multiple components in the same file. This is convenient when components are relatively small or tightly related to each other. If this file gets crowded, you can always move `Profile` to a separate file. You will learn how to do this shortly on the [page about imports](/learn/importing-and-exporting-components). +コンポーネントは普通の JavaScript 関数ですので、同じファイルに複数のコンポーネントを書いておくこともできます。これはコンポーネントが比較的小さい場合や互いに密接に関連している場合には便利です。ファイルの中身が増えてきたら、いつでも `Profile` を別のファイルに移動できます。このやり方についてはすぐ後で、[インポートについてのページ](/learn/importing-and-exporting-components)で学びます。 -Because the `Profile` components are rendered inside `Gallery`—even several times!—we can say that `Gallery` is a **parent component,** rendering each `Profile` as a "child". This is part of the magic of React: you can define a component once, and then use it in as many places and as many times as you like. +`Profile` コンポーネントは `Gallery` コンポーネントの中でレンダーされています（しかも何回も）ので、`Gallery` は**親コンポーネント**であり、`Profile` を「子」としてレンダーしている、と言うことができます。これが React の魔法です。一度コンポーネントを定義したら、それを好きなだけ、どこでも何回でも使えるということです。 - + -Your React application begins at a "root" component. Usually, it is created automatically when you start a new project. For example, if you use [CodeSandbox](https://codesandbox.io/) or [Create React App](https://create-react-app.dev/), the root component is defined in `src/App.js`. If you use the framework [Next.js](https://nextjs.org/), the root component is defined in `pages/index.js`. In these examples, you've been exporting root components. +React アプリケーションは「ルート」コンポーネントから始まります。通常、これは新しいプロジェクトを開始したときに自動的に作成されます。例えば [CodeSandbox](https://codesandbox.io/) や [Create React App](https://create-react-app.dev/) を使う場合、ルートコンポーネントは `src/App.js` 内に定義されています。[Next.js](https://nextjs.org/) フレームワークを使っている場合はルートコンポーネントは `pages/index.js` に定義されています。ここまでの例でも、ルートコンポーネントをエクスポートしていたわけです。 -Most React apps use components all the way down. This means that you won't only use components for reusable pieces like buttons, but also for larger pieces like sidebars, lists, and ultimately, complete pages! Components are a handy way to organize UI code and markup, even if some of them are only used once. +ほとんどの React アプリでは端から端までコンポーネントを使います。つまり、ボタンのような再利用可能なところでのみ使うのではなく、サイドバーやリスト、最終的にはページ本体といった大きなパーツのためにも使うのです。コンポーネントは、1 回しか使わないような UI コードやマークアップであっても、それらを整理するための有用な手段です。 -Frameworks like Next.js take this a step further. Instead of using an empty HTML file and letting React "take over" managing the page with JavaScript, they *also* generate the HTML automatically from your React components. This allows your app to show some content before the JavaScript code loads. +Next.js のようなフレームワークではこれを更に 1 歩押し進めます。空の HTML ファイルから始めて JavaScript で React にページ内容の管理を引き継がせるのではなく、あなたの書いた React コンポーネントから HTML ファイル自体も自動生成するのです。これにより、JavaScript コードがロードされる前にコンテンツの一部をアプリが表示できるようになります。 -Still, many websites only use React to [add "sprinkles of interactivity"](/learn/add-react-to-a-website). They have many root components instead of a single one for the entire page. You can use as much—or as little—React as you need. +その一方で、多くのウェブサイトでは React を ["対話機能をちょっと添える"](/learn/add-react-to-a-website) ためにのみ使っています。そのようなサイトはページ全体のためのルートコンポーネントを 1 つだけ持つのではなく、たくさんのルートコンポーネントを持っています。必要しだいで、React を使う量は多くても少なくても構わないのです！ -You've just gotten your first taste of React! Let's recap some key points. +これで初めての React の体験は完了です。キーポイントをいくつかおさらいしておきましょう。 -* React lets you create components, **reusable UI elements for your app.** -* In a React app, every piece of UI is a component. -* React components are regular JavaScript functions except: +* React により**アプリのための再利用可能な部品**であるコンポーネントを作成できる。 +* React アプリでは UI のあらゆる部品はコンポーネントである。 +* React のコンポーネントとは普通の JavaScript 関数だが、以下の点が異なる： - 1. Their names always begin with a capital letter. - 2. They return JSX markup. + 1. 名前は常に大文字で始まる。 + 2. JSX マークアップを return する。 @@ -205,9 +205,9 @@ You've just gotten your first taste of React! Let's recap some key points. -### Export the component {/*export-the-component*/} +### コンポーネントのエクスポート {/*export-the-component*/} -This sandbox doesn't work because the root component is not exported: +このサンドボックスはルートコンポーネントがエクスポートされていないため動作しません： @@ -228,11 +228,11 @@ img { height: 181px; } -Try to fix it yourself before looking at the solution! +答えを見る前に自分で修正してみましょう！ -Add `export default` before the function definition like so: +以下のように関数の前に `export default` を付けてください： @@ -253,17 +253,17 @@ img { height: 181px; } -You might be wondering why writing `export` alone is not enough to fix this example. You can learn the difference between `export` and `export default` in [Importing and Exporting Components](/learn/importing-and-exporting-components). +これを修正するのに `export` とだけ書いたのではなぜ不十分なのか気になるかもしれません。`export` と `export default` の違いについては[コンポーネントのインポートとエクスポート](/learn/importing-and-exporting-components)で学ぶことができます。 -### Fix the return statement {/*fix-the-return-statement*/} +### return 文を直す {/*fix-the-return-statement*/} -Something isn't right about this `return` statement. Can you fix it? +この `return` 文はどうもおかしいようです。直せますか？ -You may get an "Unexpected token" error while trying to fix this. In that case, check the that semicolon appears *after* the closing parenthesis. Leaving a semicolon inside `return ( )` will cause an error. +もしかしたら修正途中で "Unexpected token" というエラーが出るかもしれません。その場合はセミコロンが閉じ括弧の*後*にあることを確認してください。`return ( )` の中にセミコロンが残っているとエラーになります。 @@ -285,7 +285,7 @@ img { height: 180px; } -You can fix this component by moving the return statement to one line like so: +このコンポーネントを修正するには、以下のように return 文を 1 行にします： @@ -301,7 +301,7 @@ img { height: 180px; } -Or by wrapping the returned JSX markup in parentheses that open right after `return`: +または、return する JSX マークアップを `return` の直後から括弧で囲んでも構いません： @@ -324,9 +324,9 @@ img { height: 180px; } -### Spot the mistake {/*spot-the-mistake*/} +### どこが間違い？ {/*spot-the-mistake*/} -Something's wrong with how the `Profile` component is declared and used. Can you spot the mistake? (Try to remember how React distinguishes components from the regular HTML tags!) +この `Profile` の宣言のしかたや使われ方は何か間違っています。間違いがどこか分かりますか？（React がどのようにしてコンポーネントと普通の HTML タグを区別するのか思い出してみましょう！） @@ -360,9 +360,9 @@ img { margin: 0 10px 10px 0; height: 90px; } -React component names must start with a capital letter. +React コンポーネントの名前は大文字で始めなければなりません。 -Change `function profile()` to `function Profile()`, and then change every `` to ``: +`function profile()` を `function Profile()` に、そして `` をすべて `` に書きかえましょう： @@ -396,9 +396,9 @@ img { margin: 0 10px 10px 0; } -### Your own component {/*your-own-component*/} +### 自分で書いてみる {/*your-own-component*/} -Write a component from scratch. You can give it any valid name and return any markup. If you're out of ideas, you can write a `Congratulations` component thats shows `

        Good job!

        `. Don't forget to export it! +ゼロからコンポーネントを書いてください。有効な名前ならどんな名前でも構いませんし、どんなマークアップを返しても構いません。何も思いつかないなら `

        Good job!

        ` と表示する `Congratulations` というコンポーネントを書いてみましょう。エクスポートするのを忘れずに！ diff --git a/beta/src/sidebarLearn.json b/beta/src/sidebarLearn.json index 25463d85c..7422c25cc 100644 --- a/beta/src/sidebarLearn.json +++ b/beta/src/sidebarLearn.json @@ -43,11 +43,11 @@ "path": "/learn/describing-the-ui", "routes": [ { - "title": "Your First Component", + "title": "初めてのコンポーネント", "path": "/learn/your-first-component" }, { - "title": "Importing and Exporting Components", + "title": "コンポーネントのインポートとエクスポート", "path": "/learn/importing-and-exporting-components" }, {