LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@kawabata324(Haruki Kawabata)

React 公式Docを訳す

Last updated at Posted at 2023-05-20

概要

新しい、公式サイトは日本語訳がされてなくて不便なので、deeplを使って訳して読んでいくだけ。
感想とかのノイズは極力入れないつもりなので、さらっと見てもらえると

本日訳すもの

Describing the UIの Your first component

Describing the UI

Reactは、ユーザーインターフェース（UI）をレンダリングするためのJavaScriptライブラリです。UIは、ボタン、テキスト、画像などの小さな単位から構築されます。Reactを使えば、それらを再利用可能でネスト可能なコンポーネントにまとめることができます。Webサイトからスマホアプリまで、画面上のあらゆるものをコンポーネントに分解することができます。この章では、Reactコンポーネントの作成、カスタマイズ、条件付き表示について学びます。

目次

  • 最初のReactコンポーネントを作成する方法
  • いつ、どのようにマルチコンポーネントファイルを作成するのか
  • JSXを使用してJavaScriptにマークアップを追加する方法
  • JSXで中括弧を使用して、コンポーネントからJavaScriptの機能にアクセスする方法
  • propsを使用してコンポーネントを構成する方法
  • コンポーネントを条件付きでレンダリングする方法
  • 複数のコンポーネントを一度にレンダリングする方法
  • コンポーネントを純粋な状態に保つことで、混乱を招くバグを回避する方法

Your first component

Reactアプリケーションは、コンポーネントと呼ばれる孤立したUIの断片から構築されます。Reactのコンポーネントは、マークアップを散りばめることができるJavaScriptの関数です。コンポーネントは、ボタンのような小さなものから、ページ全体のような大きなものまであります。ここでは、Galleryコンポーネントが3つのProfileコンポーネントをレンダリングしています

function Profile() {
  return (
    <img
      src="https://i.imgur.com/MK3eW3As.jpg"
      alt="Katherine Johnson"
    />
  );
}

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

コンポーネントは、Reactのコアコンセプトの1つです。ユーザーインターフェイス（UI）を構築するための土台となるもので、Reactの旅を始めるには最適な場所です！

以下のことを学びます。
コンポーネントとは何か
Reactアプリケーションでコンポーネントが果たす役割
最初のReactコンポーネントを作成する方法

コンポーネントUIの構成要素
Webでは、HTMLによって、<h1>や<li>などのタグが組み込まれたリッチな構造化ドキュメントを作成することができます：

<article>
  <h1>My First Component</h1>
  <ol>
    <li>Components: UI Building Blocks</li>
    <li>Defining a Component</li>
    <li>Using a Component</li>
  </ol>
</article>

このマークアップは、この記事<article>、その見出し<h1>、および順序付きリスト<ol>としての（省略された）目次を表しています。このようなマークアップと、スタイルを表すCSS、インタラクティブ性を表すJavaScriptが、サイドバー、アバター、モーダル、ドロップダウンなど、ウェブ上のあらゆるUIを支えています。

Reactでは、マークアップ、CSS、JavaScriptを組み合わせて、アプリの再利用可能なUI要素であるカスタム「コンポーネント」を作成できます。上で見た目次のコードは、すべてのページでレンダリングできる コンポーネントにすることができます。その際、<article>や<h1>など、HTMLタグと同じように、コンポーネントを構成し、順序付け、入れ子にして、ページ全体をデザインすることができます。例えば、あなたが読んでいるドキュメントのページは、Reactコンポーネントでできています：

<PageLayout>
  <NavigationHeader>
    <SearchBar />
    <Link to="/docs">Docs</Link>
  </NavigationHeader>
  <Sidebar />
  <PageContent>
    <TableOfContents />
    <DocumentationText />
  </PageContent>
</PageLayout>

プロジェクトが大きくなるにつれて、多くのデザインはすでに書いたコンポーネントを再利用することで構成できることに気づき、開発のスピードアップにつながるでしょう。上の目次は、でどの画面にも追加することができます！Chakra UIやMaterial UIなど、Reactのオープンソースコミュニティで共有されている何千ものコンポーネントを使ってプロジェクトをスタートさせることも可能です。

Defining a component

プロジェクトが大きくなるにつれて、多くのデザインはすでに書いたコンポーネントを再利用することで構成できることに気づき、開発のスピードアップにつながるでしょう。上の目次は、でどの画面にも追加することができます！Chakra UIやMaterial UIなど、Reactのオープンソースコミュニティで共有されている何千ものコンポーネントを使ってプロジェクトをスタートさせることも可能です。

従来、ウェブページを作成する場合、ウェブ開発者はコンテンツをマークアップし、JavaScriptを散りばめてインタラクションを追加していました。この方法は、インタラクションがウェブ上で必要不可欠なものであった時代には、とても有効でした。しかし、今では多くのサイトやすべてのアプリでインタラクションが求められるようになりました。Reactは、同じ技術を使いながらも、インタラクティブ性を第一に考えています。Reactのコンポーネントは、マークアップに振りかけることができるJavaScript関数です。以下はその例です（以下の例は編集可能です）：

export default function Profile() {
  return (
    <img
      src="https://i.imgur.com/MK3eW3Am.jpg"
      alt="Katherine Johnson"
    />
  )
}

こんな感じで編集

const Profile = () => (
    <img
      src="https://i.imgur.com/MK3eW3Am.jpg"
      alt="Katherine Johnson"
    />
)

export default Profile

そして、コンポーネントの作り方を紹介します：

ステップ1：コンポーネントをエクスポートする
exportデフォルトプレフィックスは、標準的なJavaScript構文です（Reactに特有ではありません）。これを使うと、ファイル内のメイン機能をマークして、後で他のファイルからインポートできるようになります。(インポートについては、コンポーネントのインポートとエクスポートで詳しく説明します!)

ステップ2：関数を定義する
function Profile() { }で、Profileという名前のJavaScript関数を定義します。

落とし穴
Reactコンポーネントは、通常のJavaScript関数ですが、名前が大文字で始まらないと動作しません！

ステップ3：マークアップを追加する
コンポーネントは、srcとalt属性を持つタグを返します。はHTMLのように書かれていますが、実はその中身はJavaScriptです！この構文はJSXと呼ばれ、JavaScriptの中にマークアップを埋め込むことができます。

このコンポーネントのように、Return文を1行で記述することができます

return <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />;

しかし、マークアップがすべてreturnキーワードと同じ行にない場合は、括弧のペアで包む必要があります：

return (
  <div>
    <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  </div>
);

括弧がない場合、return以降の行のコードは無視されます！

コンポーネントの使用
Profileコンポーネントを定義したら、他のコンポーネントの中にネストすることができます。例えば、複数のProfileコンポーネントを使用するGalleryコンポーネントをエクスポートすることができます：

function Profile() {
  return (
    <img
      src="https://i.imgur.com/MK3eW3As.jpg"
      alt="Katherine Johnson"
    />
  );
}

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

ブラウザが見るもの
ケーシングの違いに注目してください：

は小文字なので、ReactはHTMLタグを参照していることを認識します。 は大文字のPで始まるので、ReactはProfileというコンポーネントを使用したいことを認識しています。 そしてProfileにはさらに多くのHTMLが含まれています：です。最終的に、これがブラウザが見るものです： 
<section>
  <h1>Amazing scientists</h1>
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
</section>

コンポーネントの入れ子と整理
コンポーネントは通常のJavaScript関数なので、複数のコンポーネントを同じファイル内に保持することができます。これは、コンポーネントが比較的小さかったり、互いに密接に関係していたりする場合に便利です。もしこのファイルが混雑してきたら、いつでもプロフィールを別のファイルに移動させることができます。この方法については、インポートについてのページですぐに説明します。

ProfileコンポーネントはGalleryの内部でレンダリングされるため、Galleryは親コンポーネントであり、各Profileを「子」としてレンダリングすると言えるでしょう。これはReactの魅力のひとつで、コンポーネントを一度定義すれば、あとは好きなだけ、好きな場所で、好きなだけ使うことができるのです。

コンポーネントは他のコンポーネントをレンダリングすることができますが、その定義を決してネストしてはいけません：

export default function Gallery() {
  // 🔴 他のコンポーネントの中にコンポーネントを定義しないこと！
  function Profile() {
    // ...
  }
  // ...
}

上記のスニペットは非常に遅く、バグの原因になります。その代わりに、すべてのコンポーネントをトップレベルで定義します：

export default function Gallery() {
  // ...
}

// ✅ トップレベルでコンポーネントを宣言する
function Profile() {
  // ...
}

子コンポーネントが親コンポーネントから何らかのデータを必要とする場合、定義をネストするのではなく、propsで渡します。

コンポーネントの全貌

Reactアプリケーションは、「ルート」コンポーネントから始まります。通常、新しいプロジェクトを開始すると、自動的に作成されます。たとえば、CodeSandboxまたはCreate React Appを使用する場合、ルートコンポーネントはsrc/App.jsに定義されます。フレームワークのNext.jsを使用する場合は、ルートコンポーネントはpages/index.jsに定義されます。これらの例では、ルートコンポーネントをエクスポートしています。

Reactアプリの多くは、ずっとコンポーネントを使用しています。つまり、ボタンのような再利用可能な部分だけでなく、サイドバーやリスト、最終的には完全なページのような大きな部分にもコンポーネントを使用することになるのです！コンポーネントは、UIコードやマークアップを整理する便利な方法ですが、たとえその一部が一度しか使用されないとしてもです。

Reactベースのフレームワークは、これをさらに一歩進めたものです。空のHTMLファイルを使い、JavaScriptでページの管理をReactに「任せる」のではなく、ReactコンポーネントからHTMLを自動生成するのです。これにより、JavaScriptのコードが読み込まれる前に、アプリが何らかのコンテンツを表示することができます。

それでも、多くのウェブサイトは、既存のHTMLページにインタラクティブ性を追加するためにReactを使用しているだけです。このようなサイトでは、ページ全体に単一のコンポーネントを使用するのではなく、多くのルートコンポーネントを使用しています。Reactは、必要な分だけ、あるいは少ししか使うことができません。

Reactを初めて体験したあなたへ！重要なポイントをおさらいしておきましょう。

Reactでは、アプリの再利用可能なUI要素であるコンポーネントを作成することができます。

Reactアプリでは、UIのすべてのピースがコンポーネントとなります。

Reactコンポーネントは、以下を除き、通常のJavaScript関数です：

名前は常に大文字で始まります。
JSXマークアップを返す。

Try out some challenges

ここからはネタバレになるかもしれないので以下を自分で試したい方は注意してください

課題1/4：コンポーネントをエクスポートする
ルートコンポーネントがエクスポートされていないため、このサンドボックスは動作しません：

私の回答 
export default function Profile() {
  return (
    <img
      src="https://i.imgur.com/lICfvbD.jpg"
      alt="Aklilu Lemma"
    />
  );
}

チャレンジ2/4：return文を修正する
このreturn文は何かおかしいです。直せますか？

私の回答 
export default function Profile() {
  return(
    <img src="https://i.imgur.com/jA8hHMpm.jpg" alt="Katsuko Saruhashi" />
    )
}

チャレンジ3/4：間違いを見破れ
Profileコンポーネントの宣言方法と使用方法が間違っています。その間違いに気づくことができるでしょうか？(Reactがコンポーネントを通常のHTMLタグとどのように区別しているかを思い出してみてください

私の回答 
function Profile() {
  return (
    <img
      src="https://i.imgur.com/QIrZWGIs.jpg"
      alt="Alan L. Hart"
    />
  );
}

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

チャレンジ4/4：自分だけのコンポーネント
ゼロからコンポーネントを書いてください。任意の有効な名前をつけて、任意のマークアップを返すことができます。アイデアがない場合は、<h1>Good job</h1>を表示するCongratulationsコンポーネントを書くことができます。このコンポーネントをエクスポートすることを忘れないでください！

私の回答 
export default function Congraturations () {
  return(
    <h1>Good job!</h1>
  )
}

次回

Importing and Exporting Components

https://react.dev/learn/importing-and-exporting-components

Writing Markup with JSX

https://react.dev/learn/writing-markup-with-jsx

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?