diff --git a/src/content/learn/describing-the-ui.md b/src/content/learn/describing-the-ui.md index 560dde0f2..679a1aac3 100644 --- a/src/content/learn/describing-the-ui.md +++ b/src/content/learn/describing-the-ui.md @@ -524,25 +524,25 @@ export default function TeaSet() { -## Your UI as a tree {/*your-ui-as-a-tree*/} +## UI をツリーとして理解する {/*your-ui-as-a-tree*/} -React uses trees to model the relationships between components and modules. +React はコンポーネント間あるいはモジュール間の関係性をモデル化するために、ツリー構造を使用します。 -A React render tree is a representation of the parent and child relationship between components. +React レンダーツリーとはコンポーネントの親子関係を表現したものです。 -An example React render tree. +React のレンダーツリーの例 -Components near the top of the tree, near the root component, are considered top-level components. Components with no child components are leaf components. This categorization of components is useful for understanding data flow and rendering performance. +ツリーの上側、つまりルートに近いコンポーネントはトップレベルコンポーネントです。子を持たないコンポーネントはリーフ（葉）コンポーネントです。このようなコンポーネントの分類は、データの流れやレンダーパフォーマンスを理解する際に有用です。 -Modelling the relationship between JavaScript modules is another useful way to understand your app. We refer to it as a module dependency tree. +アプリを理解する上では、JavaScript のモジュール間の関係性をモデルすることも重要です。このようなものをモジュール依存関係ツリーと呼びます。 -An example module dependency tree. +モジュール依存関係ツリーの例 -A dependency tree is often used by build tools to bundle all the relevant JavaScript code for the client to download and render. A large bundle size regresses user experience for React apps. Understanding the module dependency tree is helpful to debug such issues. +依存関係ツリーは、関連する JavaScript コードをすべてバンドルしてクライアントがダウンロード・レンダーできるようにするために、ビルドツールでよく使用されます。バンドルサイズが大きいと、React アプリのユーザ体験は悪化します。モジュール依存関係ツリーを理解することは、そのような問題をデバッグするのに役立ちます。 -Read **[Your UI as a Tree](/learn/understanding-your-ui-as-a-tree)** to learn how to create a render and module dependency trees for a React app and how they're useful mental models for improving user experience and performance. +[**UI をツリーとして理解する**](/learn/understanding-your-ui-as-a-tree)を読んで、レンダーツリーやモジュール依存関係ツリーの作り方、そしてそのような考え方がユーザ体験やパフォーマンスを改善する際にどのように役立つのかについて学びましょう。 diff --git a/src/content/learn/understanding-your-ui-as-a-tree.md b/src/content/learn/understanding-your-ui-as-a-tree.md index 2a5a24b85..146b49802 100644 --- a/src/content/learn/understanding-your-ui-as-a-tree.md +++ b/src/content/learn/understanding-your-ui-as-a-tree.md @@ -1,41 +1,41 @@ --- -title: Understanding Your UI as a Tree +title: UI をツリーとして理解する --- -Your React app is taking shape with many components being nested within each other. How does React keep track of your app's component structure? +React アプリは、多数のコンポーネントが互いにネストされることで形成されます。React はどのようにアプリのコンポーネント構造を管理しているのでしょうか？ -React, and many other UI libraries, model UI as a tree. Thinking of your app as a tree is useful for understanding the relationship between components. This understanding will help you debug future concepts like performance and state management. +React をはじめとする多くの UI ライブラリは、UI をツリーとしてモデル化します。アプリをツリーとして捉えることにより、コンポーネント間の関係を理解するのに役立ちます。これを理解することで、これから学んでいくパフォーマンスや state 管理に関連した問題をデバッグするのに役立つでしょう。 -* How React "sees" component structures -* What a render tree is and what it is useful for -* What a module dependency tree is and what it is useful for +* React にはコンポーネント構造がどのように「見える」のか +* レンダーツリーとは何で、何の役に立つのか +* モジュール依存ツリーとは何で、何の役に立つのか -## Your UI as a tree {/*your-ui-as-a-tree*/} +## UI をツリーとして理解する {/*your-ui-as-a-tree*/} -Trees are a relationship model between items and UI is often represented using tree structures. For example, browsers use tree structures to model HTML ([DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction)) and CSS ([CSSOM](https://developer.mozilla.org/docs/Web/API/CSS_Object_Model)). Mobile platforms also use trees to represent their view hierarchy. +ツリーとはアイテム間の関係を表すモデルの一種です。UI はよくツリー構造を使用して表現されます。例えば、ブラウザは HTML ([DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction)) や CSS ([CSSOM](https://developer.mozilla.org/docs/Web/API/CSS_Object_Model)) をモデル化するためにツリー構造を使用します。モバイルプラットフォームもビューの階層構造を表現するためにツリーを使用します。 - + -React creates a UI tree from your components. In this example, the UI tree is then used to render to the DOM. +React はコンポーネントから UI ツリーを作成する。この例では、UI ツリーは DOM へのレンダーに使用されている。 -Like browsers and mobile platforms, React also uses tree structures to manage and model the relationship between components in a React app. These trees are useful tools to understand how data flows through a React app and how to optimize rendering and app size. +ブラウザやモバイルプラットフォームと同様に、React もツリー構造を使用して React アプリ内のコンポーネント間の関係を管理し、モデル化します。そのようなツリーは、React アプリ内をデータがどのように流れるか理解し、レンダーやアプリサイズを最適化する際の有用なツールとなります。 -## The Render Tree {/*the-render-tree*/} +## レンダーツリー {/*the-render-tree*/} -A major feature of components is the ability to compose components of other components. As we [nest components](/learn/your-first-component#nesting-and-organizing-components), we have the concept of parent and child components, where each parent component may itself be a child of another component. +コンポーネントの主要な特徴のひとつは、コンポーネント同士を組み合わせられることです。[コンポーネントをネストする](/learn/your-first-component#nesting-and-organizing-components)ことで、親コンポーネント・子コンポーネントという概念が発生します。その親コンポーネントもまた、別のコンポーネントの子かもしれません。 -When we render a React app, we can model this relationship in a tree, known as the render tree. +React アプリをレンダーする際、この関係性をツリーとしてモデル化することができます。これをレンダーツリーと呼びます。 -Here is a React app that renders inspirational quotes. +以下は、ひらめきを与えてくれる格言をレンダーするための React アプリです。 @@ -118,34 +118,34 @@ export default [ - + -React creates a *render tree*, a UI tree, composed of the rendered components. +React は、レンダーされたコンポーネントから構成される UI ツリーである*レンダーツリー*を作成する -From the example app, we can construct the above render tree. +このアプリから、上のようなレンダーツリーを構築することができます。 -The tree is composed of nodes, each of which represents a component. `App`, `FancyText`, `Copyright`, to name a few, are all nodes in our tree. +ツリー構造はノードで構成されており、各ノードがコンポーネントを表します。`App`、`FancyText`、`Copyright` などはすべてこのツリーのノードです。 -The root node in a React render tree is the [root component](/learn/importing-and-exporting-components#the-root-component-file) of the app. In this case, the root component is `App` and it is the first component React renders. Each arrow in the tree points from a parent component to a child component. +React レンダーツリーのルートノードは、アプリの[ルートコンポーネント](/learn/importing-and-exporting-components#the-root-component-file)となります。この場合、ルートコンポーネントは `App` であり、React が最初にレンダーするコンポーネントです。ツリーの各矢印は、親コンポーネントから子コンポーネントに伸びています。 -#### Where are the HTML tags in the render tree? {/*where-are-the-html-elements-in-the-render-tree*/} +#### レンダーツリー内の HTML タグはどこに？ {/*where-are-the-html-elements-in-the-render-tree*/} -You'll notice in the above render tree, there is no mention of the HTML tags that each component renders. This is because the render tree is only composed of React [components](learn/your-first-component#components-ui-building-blocks). +上記のレンダーツリーの図には、各コンポーネントがレンダーする HTML タグについては載っていません。これは、レンダーツリーとは React の[コンポーネント](learn/your-first-component#components-ui-building-blocks)だけで構成されるものだからです。 -React, as a UI framework, is platform agnostic. On react.dev, we showcase examples that render to the web, which uses HTML markup as its UI primitives. But a React app could just as likely render to a mobile or desktop platform, which may use different UI primitives like [UIView](https://developer.apple.com/documentation/uikit/uiview) or [FrameworkElement](https://learn.microsoft.com/en-us/dotnet/api/system.windows.frameworkelement?view=windowsdesktop-7.0). +UI フレームワークとしての React は特定のプラットフォームに依存しません。react.dev ではウェブへレンダーする例が紹介されており、そこでは UI のプリミティブとして HTML マークアップが使用されます。しかし、React アプリは同様にモバイルやデスクトッププラットフォームにレンダーすることも可能であり、そこでは [UIView](https://developer.apple.com/documentation/uikit/uiview) や [FrameworkElement](https://learn.microsoft.com/en-us/dotnet/api/system.windows.frameworkelement?view=windowsdesktop-7.0) のような別の UI プリミティブが使用されるでしょう。 -These platform UI primitives are not a part of React. React render trees can provide insight to our React app regardless of what platform your app renders to. +これらのプラットフォームの UI プリミティブは React の一部ではありません。React のレンダーツリーを考えることにより、アプリがどのプラットフォームにレンダーされるのかとは独立して、React アプリを理解できるようになります。 -A render tree represents a single render pass of a React application. With [conditional rendering](/learn/conditional-rendering), a parent component may render different children depending on the data passed. +レンダーツリーは、React アプリケーションにおける 1 回のレンダーを表します。[条件付きレンダー](/learn/conditional-rendering)を使用することで、親コンポーネントは渡されたデータに応じて異なる子をレンダーすることができます。 -We can update the app to conditionally render either an inspirational quote or color. +アプリを更新して、格言とカラーのいずれかが条件付きでレンダーされるようにしてみましょう。 @@ -245,55 +245,55 @@ export default [ ``` - + -With conditional rendering, across different renders, the render tree may render different components. +条件付きレンダーにより、違うレンダーではレンダーツリーが異なるコンポーネントをレンダーする。 -In this example, depending on what `inspiration.type` is, we may render `` or ``. The render tree may be different for each render pass. +この例では、`inspiration.type` の値によって、`` または `` のいずれかがレンダーされます。一連のレンダーが起きるたびに、レンダーツリーは異なったものになる可能性があるのです。 -Although render trees may differ across render pases, these trees are generally helpful for identifying what the top-level and leaf components are in a React app. Top-level components are the components nearest to the root component and affect the rendering performance of all the components beneath them and often contain the most complexity. Leaf components are near the bottom of the tree and have no child components and are often frequently re-rendered. +毎回のレンダーごとにレンダーツリーが異なることがあるにせよ、このようなツリーは一般的に、React アプリケーションにおいてトップレベルコンポーネントとリーフ（葉, 末端）コンポーネントがどれなのかを理解するのに役立ちます。トップレベルコンポーネントとはルートコンポーネントに最も近いコンポーネントです。下にあるすべてのコンポーネントのレンダーパフォーマンスに影響を与え、しばしばとても複雑な内容を含んでいます。リーフコンポーネントはツリーの下側にあり、子コンポーネントを持たず、通常は頻繁に再レンダーされます。 -Identifying these categories of components are useful for understanding data flow and performance of your app. +これらのカテゴリのコンポーネントを特定することにより、アプリケーションのデータの流れとパフォーマンスを理解するのに役立ちます。 -## The Module Dependency Tree {/*the-module-dependency-tree*/} +## モジュール依存関係ツリー {/*the-module-dependency-tree*/} -Another relationship in a React app that can be modeled with a tree are an app's module dependencies. As we [break up our components](/learn/importing-and-exporting-components#exporting-and-importing-a-component) and logic into separate files, we create [JS modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) where we may export components, functions, or constants. +React アプリにおいて、ツリー構造で関係性をモデル化できるものがもうひとつあります。アプリのモジュールの依存関係です。コンポーネントやロジックを別々のファイルに[分割する](/learn/importing-and-exporting-components#exporting-and-importing-a-component)ことで、[JS モジュール](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules)を作成し、コンポーネントや関数や定数をエクスポートします。 -Each node in a module dependency tree is a module and each branch represents an `import` statement in that module. +モジュール依存関係ツリーにおいては、各ノードはモジュールとなり、それぞれの枝はそのモジュール内の `import` 文を表します。 -If we take the previous Inspirations app, we can build a module dependency tree, or dependency tree for short. +先ほどのひらめきアプリの例では、以下のようなモジュール依存関係ツリー（あるいは単に依存関係ツリー）を作成することができます。 - + -The module dependency tree for the Inspirations app. +ひらめきアプリのモジュール依存関係ツリー -The root node of the tree is the root module, also known as the entrypoint file. It often is the module that contains the root component. +このツリーのルートノードはルートモジュールで、エントリーポイントファイルとも呼ばれます。これがルートコンポーネントを含んだモジュールであることも多いでしょう。 -Comparing to the render tree of the same app, there are similar structures but some notable differences: +同じアプリのレンダーツリーと比べると、似た部分もありますが、いくつか注目すべき違いがあります。 -* The nodes that make-up the tree represent modules, not components. -* Non-component modules, like `inspirations.js`, are also represented in this tree. The render tree only encapsulates components. -* `Copyright.js` appears under `App.js` but in the render tree, `Copyright`, the component, appears as a child of `InspirationGenerator`. This is because `InspirationGenerator` accepts JSX as [children props](/learn/passing-props-to-a-component#passing-jsx-as-children), so it renders `Copyright` as a child component but does not import the module. +* ツリーを構成するノードが表しているのはコンポーネントではなくモジュールです。 +* コンポーネントの書かれていない `inspirations.js` のようなモジュールもこのツリーには含まれています。レンダーツリーはコンポーネントのみを含みます。 +* `Copyright.js` は `App.js` の下に表示されていますが、レンダーツリーの方では、`Copyright` コンポーネントは `InspirationGenerator` の子でした。これは、`InspirationGenerator` が props である [children](/learn/passing-props-to-a-component#passing-jsx-as-children) 経由で JSX を受け付けるためです。`Copyright` を子コンポーネントとしてレンダーしてはいますが、それに対応するモジュールをインポートしているわけではありません。 -Dependency trees are useful to determine what modules are necessary to run your React app. When building a React app for production, there is typically a build step that will bundle all the necessary JavaScript to ship to the client. The tool responsible for this is called a [bundler](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview#the_modern_tooling_ecosystem), and bundlers will use the dependency tree to determine what modules should be included. +依存関係ツリーは、React アプリを実行するためにどのモジュールが必要かを判断するのに役立ちます。通常、React アプリを本番環境用にビルドする際には、クライアントに送信するために必要な JavaScript をすべてバンドルにまとめるというビルドステップが存在します。これを担当するツールは[バンドラ](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview#the_modern_tooling_ecosystem)と呼ばれ、バンドラは依存関係ツリーを使用することで、どのモジュールを含めるべきかを決定します。 -As your app grows, often the bundle size does too. Large bundle sizes are expensive for a client to download and run. Large bundle sizes can delay the time for your UI to get drawn. Getting a sense of your app's dependency tree may help with debugging these issues. +アプリが成長するにつれて、バンドルサイズも大きくなります。バンドルサイズが大きいと、クライアントがダウンロードして実行するのにコストがかかります。バンドルサイズが大きいと、UI が描画されるまでの時間も遅くなります。アプリの依存関係ツリーを把握することで、これらの問題のデバッグに役立つでしょう。 [comment]: <> (perhaps we should also deep dive on conditional imports) -* Trees are a common way to represent the relationship between entities. They are often used to model UI. -* Render trees represent the nested relationship between React components across a single render. -* With conditional rendering, the render tree may change across different renders. With different prop values, components may render different children components. -* Render trees help identify what the top-level and leaf components are. Top-level components affect the rendering performance of all components beneath them and leaf components are often re-rendered frequently. Identifying them is useful for understanding and debugging rendering performance. -* Dependency trees represent the module dependencies in a React app. -* Dependency trees are used by build tools to bundle the necessary code to ship an app. -* Dependency trees are useful for debugging large bundle sizes that slow time to paint and expose opportunities for optimizing what code is bundled. +* ツリー構造とは、何らかの物どうしの関係性を表現する際の一般的な方法である。UI をモデル化するために多用される。 +* レンダーツリーは、1 回のレンダーにおける React コンポーネント間のネスト関係を表現するものである。 +* 条件付きレンダーにより、毎回のレンダー間でレンダーツリーは変化する可能性がある。例えば props の値が変わることでコンポーネントは異なる子コンポーネントをレンダーする可能性がある。 +* レンダーツリーの概念は、トップレベルとリーフコンポーネントを特定するのに役立つ。トップレベルのコンポーネントはそれらの下の全コンポーネントのレンダーパフォーマンスに影響を与え、リーフコンポーネントは頻繁に再レンダーされる。これらを把握することでレンダーパフォーマンスの理解とデバッグに役立つ。 +* 依存関係ツリーは、React アプリ内のモジュール依存関係を表現する。 +* 依存関係ツリーは、アプリを届けるために必要なコードをバンドルするビルドツールによって使用される。 +* 依存関係ツリーは、ペイントまでの時間を遅らせるバンドルサイズの問題をデバッグしたり、どのコードをバンドル対象とするか最適化するきっかけとなることに役立つ。 diff --git a/src/sidebarLearn.json b/src/sidebarLearn.json index 512376b7a..306ba7f04 100644 --- a/src/sidebarLearn.json +++ b/src/sidebarLearn.json @@ -88,7 +88,7 @@ "path": "/learn/keeping-components-pure" }, { - "title": "Your UI as a Tree", + "title": "UI をツリーとして理解する", "path": "/learn/understanding-your-ui-as-a-tree" } ]