ReactJS - Stateless Components: A Beginner's Guide
こんにちは、未来のReact魔法使いさんたち！今日は、Reactコンポーネントの世界に興味深く飛び込んでいきます。特にstatelessコンポーネントに焦点を当てます。プログラミングが初めてであっても心配しないでください。私はあなたの親切なガイドとして、すべてをステップバイステップで説明します。コーヒー（またはあなたが好きなお茶）を一杯取り、一緒に飛び込みましょう！
Reactでのコンポーネントとは？
statelessコンポーネントについて話す前に、まずReactでのコンポーネントとは何かを理解しましょう。コンポーネントはLEGOブロックのようなものです。LEGOブロックを使って複雑な構造を築くように、Reactコンポーネントを使って複雑なウェブアプリケーションを作成できます。
コンポーネントの種類
Reactには主に2つの種類のコモポーネントがあります：
- Stateful Components（クラスコンポーネント）
- Stateless Components（関数コンポーネント）
今日はstatelessコンポーネントに焦点を当てますが、まずstatefulコンポーネントについて簡単に触れて、違いを理解しましょう。
Stateful Components: 簡単な概要
Statefulコンポーネント、別名クラスコンポーネントは、Reactのスイスアーミーナイフのような存在です。自分の状態を管理するなど、多くのことができます。以下に簡単な例を示します：
import React, { Component } from 'react';
class Greeting extends Component {
constructor(props) {
super(props);
this.state = { name: 'World' };
}
render() {
return <h1>Hello, {this.state.name}!</h1>;
}
}この例では、Greetingは自分のname状態を管理するstatefulコンポーネントです。しかし、時々このような強力な機能は不要で、それがstatelessコンポーネントの出番です！
Stateless Components: シンプリシティーの极致
Statelessコンポーネント、別名関数コンポーネントは、Reactの効率的な労働者のような存在です。彼らは一つの仕事を一所懸命行います：受け取ったpropsに基づいてUIをレンダリングします。以下に例を示します：
const Greeting = (props) => {
return <h1>Hello, {props.name}!</h1>;
};これは素晴らしいですね！このコンポーネントは前のクラスコンポーネントと同じ仕事をしていますが、はるかに少ないコードで実現しています。まるで、 picture frameを挂ける際に大ハンマーと普通のハンマーを使う違いのように - 時々、シンプルな方が良いときがあります！
Stateless Componentsを使う理由
- シンプリシティー: 読みやすく、書きやすいです。
- パフォーマンス: Reactが状態管理を設定する必要がないため、少し速いです。
- テスト性: 部品が少ないため、テストがしやすいです。
- 再利用性: より焦点を当てているため、再利用がしやすいです。
最初のStateless Componentを作成する
ブログのプレビュー用の簡単なstatelessコンポーネントを作成してみましょう：
const BlogPostPreview = ({ title, excerpt, author }) => {
return (
<div className="blog-post-preview">
<h2>{title}</h2>
<p>{excerpt}</p>
<span>By {author}</span>
</div>
);
};以下はその説明です：
-
BlogPostPreviewという関数を定義します。 - この関数はオブジェクトを受け取り、即座に
title、excerpt、authorをデストラクチャリングします。 - この関数は、コンポーネントがレンダリングするべきものを記述するJSXを返します。
このコンポーネントを使うには以下の通りです：
const App = () => {
return (
<div>
<BlogPostPreview
title="React is Awesome!"
excerpt="Reactがウェブ開発の世界を席巻する理由を学びましょう。"
author="Jane Doe"
/>
</div>
);
};Props: Stateless Componentsの命運
Props（プロップス）は、私たちがstatelessコンポーネントにデータを渡す方法です。これは、シェフに渡す材料のようなものです - コンポーネントはこれらのpropsを受け取り、美味しいUIを「調理」します！
より複雑な例を作成してみましょう：ユーザープロファイルカード。
const ProfileCard = ({ name, job, avatar, socialLinks }) => {
return (
<div className="profile-card">
<img src={avatar} alt={`${name}'s avatar`} />
<h2>{name}</h2>
<p>{job}</p>
<div className="social-links">
{socialLinks.map((link, index) => (
<a key={index} href={link.url}>
{link.platform}
</a>
))}
</div>
</div>
);
};以下で詳細を説明します：
-
name、job、avatar、socialLinksをpropsからデストラクチャリングします。 - これらの値を使ってJSXを記述します。
-
socialLinksには、map関数を使って各ソーシャルプラットフォームにリンクを作成します。
このコンポーネントを使うには以下の通りです：
const App = () => {
const socialLinks = [
{ platform: 'Twitter', url: 'https://twitter.com/johndoe' },
{ platform: 'LinkedIn', url: 'https://linkedin.com/in/johndoe' }
];
return (
<ProfileCard
name="John Doe"
job="React Developer"
avatar="https://example.com/avatar.jpg"
socialLinks={socialLinks}
/>
);
};Stateless Componentsのベストプラクティス
以下に、statelessコンポーネントを輝かせるためのいくつかのヒントを紹介します：
- 焦点を絞る: 各コンポーネントは一つのことをよく行うべきです。
- prop-typesを使う: このチュートリアルでは説明していませんが、prop-typesを使うとバグを防ぐのに役立ちます。
- デフォルトのpropsを使う: 必要に応じて、propsにデフォルト値を提供します。
- propsをデストラクチャリングする: コードをクリーンで読みやすくします。
結論
おめでとうございます！あなたはReactのstatelessコンポーネントの世界への最初の一歩を踏み出しました。新しいスキルを学ぶ際には、練習が成功の鍵です。自分でstatelessコンポーネントを作成し、さまざまなpropsを試してみてください。そして、一番重要的是に、楽しみましょう！
次のレッスンでは、これらのコンポーネントを実際のアプリケーションにどのように使うかを深く掘り下げます。それまでは、ハッピーコーディングを！
| メソッド | 説明 |
|---|---|
props |
コンポーネントに渡されるプロパティを含むオブジェクト |
useState |
関数コンポーネントにReactの状態を追加するためのHook |
useEffect |
関数コンポーネントでサイドエフェクトを実行するためのHook |
useContext |
Reactのコンテキストに订阅するためのHookで、ネストを導入することなく |
useReducer |
関数コンポーネントでより複雑な状態ロジックを管理するためのHook |
useCallback |
関数をメモ化してパフォーマンスを最適化するためのHook |
useMemo |
高価な計算をメモ化するためのHook |
useRef |
レンダリングを跨いで変化しない参照を生成するためのHook |
Credits: Image by storyset