こんにちは。Reactの世界へようこそ。

「Reactってなんか難しそう…」「コンポーネントとか関数とか、急に横文字が増えて頭がパンクしそう」……そう思っていませんか？大丈夫です。最初から全てを完璧に理解している人なんて、この世に一人もいません。

今日は、Reactの心臓部である「関数コンポーネント」について、専門用語の鎧を脱ぎ捨てて、お茶でも飲みながらお話しするように紐解いていきましょう。

—

いきなりですが、皆さんは「お弁当」を作ったことはありますか？

お弁当箱という「画面」の中に、卵焼き、唐揚げ、ブロッコリーという「パーツ」を詰めていきますよね。Reactの世界もこれと同じです。

Reactの「関数コンポーネント」とは、まさにこの「一つひとつの料理を作る手順書」のようなものなんです。決まった材料（データ）を渡せば、決まった料理（画面のパーツ）ができあがる。シンプルでしょう？

Reactのコンポーネントは、JavaScriptの「普通の関数」です。ただし、一つだけ絶対に守らないといけない「お約束」があります。

1. 関数の名前は「大文字」から始める（例：`MyButton`）
2. 画面に表示したいものを「return」で返す

さっそく、一番シンプルなコードを見てみましょう。

// これが関数コンポーネントの基本形です
function WelcomeCard(props) {
// ここで受け取ったデータ（props）を使って処理をしたりします

// return の後ろに「画面に表示したいもの」を書きます
// これが「JSX」と呼ばれる、HTMLに似た書き方です
return (

こんにちは、{props.name}さん！

Reactの世界へようこそ。

);
}

// 実際に使うときは、HTMLのタグのように書けます
//

`props（プロップス）`は、親から子へ渡される「注文票」だと思ってください。
「唐揚げを3個入れてね」「名前は『太郎』で表示してね」という指示が、この`props`という箱に入ってコンポーネントに届きます。コンポーネントは、その注文票を見て、適切な表示を組み立てるだけなんです。

Reactのコンポーネントは「純粋関数」であるべき、とよく言われます。これ、難しく聞こえますが、実はすごく優しい考え方です。

「同じ材料を渡されたら、必ず同じものを作る」

もし、卵焼きのレシピ通りに作ったのに、ある日はケーキになって、ある日はステーキになったら困りますよね？コンポーネントも同じで、「`props`という材料が同じなら、画面の見た目も常に同じであるべき」なんです。

この「予測可能性」があるからこそ、Reactは複雑なアプリを作っても壊れにくく、メンテナンスしやすいのです。

最初から巨大なアプリを作ろうとせず、まずは「ボタン一個」「カード一個」から作ってみてください。

1. 関数を作る（名前は大文字で！）
2. 中身をreturnする（JSXでHTMLっぽく書く）
3. propsでデータを流し込んでみる

この3ステップを繰り返すだけで、あなたはもうReactのエンジニアとしての第一歩を踏み出しています。

「何がわからないかが、わからない」という状態は、成長の合図です。まずはコードを書いてみて、画面に文字が表示されたときの「あ、出た！」という小さな感動を大切にしてくださいね。

もし詰まったら、いつでもまた戻ってきてください。私たちはみんな、そうやって一つずつ階段を登ってきたんですから。応援していますよ！

【入門編】関数コンポーネントの定義と基本構造 – React実践ガイド