Reactのコードが読めないとき、つまずいているのはReactではなくJavaScriptの書き方だった——というのはとてもよくあります。
const BirdCard = ({ name, area }) => (
<div className="card">
<h2>{name}</h2>
{area && <span>{area}</span>}
</div>
)この5行に、Reactの機能はほとんど出てきません。矢印・波かっこ・&&——全部JavaScriptの書き方です。この回で、そこだけをまとめて片づけます。
アロー関数——関数を短く書く
いちばんよく出てくる書き方です。
// これまでの書き方
function add(a, b) {
return a + b
}
// アロー関数
const add = (a, b) => {
return a + b
}
// 中身が「返すだけ」なら、returnと波かっこを省略できる
const add = (a, b) => a + b3つめの形がReactでは頻出します。returnが消えているだけで、やっていることは同じです。
引数が1つのときは、かっこも省略できます。
const double = (n) => n * 2
const double = n => n * 2 // これも同じ（どちらの書き方も見かけます）Reactではこんな形で出てきます。
<button onClick={() => setCount(count + 1)}>ふやす</button>() => setCount(count + 1)は、引数なしで、押されたらsetCount(...)を実行する関数です。ここで「実行される関数そのもの」を渡しているのがポイントで、onClick={setCount(count + 1)}と書くとその場で実行されてしまいます（よくある間違いなので、後の回でもう一度出てきます）。
分割代入——中身を取り出して名前を付ける
オブジェクトから値を取り出すとき、名前をそのまま変数にできます。
const bird = { name: 'シマエナガ', area: '北海道', rare: 3 }
// これまでの書き方
const name = bird.name
const area = bird.area
// 分割代入
const { name, area } = bird左側の波かっこは「オブジェクトを作る」のではなく「取り出す」の合図です。ここが最初は読みにくいところです。
配列でも同じことができます。こちらは名前ではなく順番で取り出します。
const [first, second] = ['シマエナガ', 'スズメ']
// first → 'シマエナガ' second → 'スズメ'この形はReactのuseStateでそのまま出てきます。
const [count, setCount] = useState(0)useStateが返す配列の1番目をcount、2番目をsetCountという名前で受け取っている——それだけの話です。countやsetCountという名前は自分で決めています。
関数の引数でも分割代入は使えます。Reactのコンポーネントはほぼこの形です。
// propsというオブジェクトを受け取って中身を使う
function BirdCard(props) {
return props.name
}
// 受け取るところで分割代入する（Reactの記事はほぼこちら）
function BirdCard({ name }) {
return name
}スプレッド構文——中身を広げてコピーする
...は、配列やオブジェクトの中身を1つずつ取り出して並べ直す書き方です。
const birds = ['シマエナガ', 'スズメ']
const added = [...birds, 'フクロウ']
// → ['シマエナガ', 'スズメ', 'フクロウ']（元のbirdsはそのまま）オブジェクトでも同じです。
const bird = { name: 'シマエナガ', rare: 3 }
const updated = { ...bird, rare: 5 }
// → { name: 'シマエナガ', rare: 5 }（rareだけ上書き）なぜこんな回りくどいことをするのか。Reactでは、いま持っているデータを直接書きかえてはいけないからです。
// ✕ Reactでは画面が更新されない
birds.push('フクロウ')
// ○ 新しい配列を作って渡す
setBirds([...birds, 'フクロウ'])Reactは「前のデータと新しいデータが別物かどうか」で画面を作り直すかを判断します。pushは元の配列そのものを書きかえるので、Reactから見ると「何も変わっていない」ように見えてしまうのです。
mapとfilter——配列から配列を作る
mapは1つ1つを別のものに変換した新しい配列を返します。
const names = ['シマエナガ', 'スズメ']
const items = names.map((name) => `🐦 ${name}`)
// → ['🐦 シマエナガ', '🐦 スズメ']filterは条件に合うものだけを残した新しい配列を返します。
const rare = birds.filter((bird) => bird.rare >= 3)Reactでは、mapがそのまま画面の一覧になります。
<ul>
{birds.map((bird) => (
<li key={bird.id}>{bird.name}</li>
))}
</ul>配列の中身が「文字列」から「<li>」に変わっただけで、mapのやっていることは同じです。一覧を作る回で必ず出てくるので、ここだけは手で書いて慣れておくと効きます。
三項演算子と&&——条件を式で書く
Reactではifが使えない場所（JSXの中）があるので、式で書ける条件分岐をよく使います。
// 三項演算子: 条件 ? 真のとき : 偽のとき
const label = isFavorite ? '★' : '☆'
// && : 左が真のときだけ右を返す
const badge = rare >= 3 && 'レア'JSXの中ではこうなります。
{isFavorite ? '★' : '☆'}
{rare >= 3 && <span className="badge">レア</span>}「&&って、こんな使い方していいの？」と感じたら正しい感覚です。本来は条件式のための記号を、表示の出し分けに流用している書き方で、Reactの世界では完全に定番になっています。
テンプレートリテラル——文字列に値を混ぜる
バッククォート（`）で囲むと、${}の中に値を書けます。
const name = 'シマエナガ'
const message = `${name}をお気に入りにしました`Tailwindのクラスを組み立てるときにも使いますが、Tailwindでは注意が必要です。
Tailwind CSSクラス名の読み方Tailwindのクラス名の規則はこちら。Reactの中でも規則は同じですimportとexport——ファイルを分ける
Reactでは1ファイル＝1コンポーネントが基本なので、ファイルをまたいで受け渡しをします。
// BirdCard.jsx（渡す側）
function BirdCard() { /* … */ }
export default BirdCard// App.jsx（受け取る側）
import BirdCard from './components/BirdCard.jsx'export defaultは1ファイルに1つだけ置ける「主役」の書き出し方です。受け取る側は名前を自由に決められます（import Card from …でも動きます）。
主役以外も出したいときは、名前つきで書き出します。
// data/birds.js
export const birds = [ /* … */ ]// 受け取る側は名前をそろえる（波かっこが要る）
import { birds } from './data/birds.js'波かっこの有無で書き方が変わるのがまぎらわしいところです。「defaultは波かっこなし、名前つきは波かっこあり」と覚えてください。
| 書き出し方 | 受け取り方 | 1ファイルに |
|---|---|---|
export default BirdCard | import BirdCard from '…' | 1つだけ |
export const birds = … | import { birds } from '…' | いくつでも |
変数はconstから
最後に短く。まずconstで書き、書きかえが必要になったときだけletにします。Reactでは状態の書きかえをuseStateが受け持つので、letはほとんど出てきません。
const birds = [] // 中身の追加はできる（再代入だけができない）
let count = 0 // 数えるための一時変数などに公式ドキュメントも見てみる
Reactの公式にも、この回と同じ趣旨のまとめページがあります。より深く知りたくなったときの行き先として覚えておいてください。
ja.react.dev外部サイトJSX に波括弧で JavaScript を含める – ReactJSXの中で波かっこを使って値を書く話。この回で扱った書き方が、Reactのどこで効いてくるかが分かりますこのレッスンのまとめ
- アロー関数——
(a, b) => a + bはreturnを省略した関数。Reactではこの形が既定 - 分割代入——
const { name } = birdは取り出し。useStateの[count, setCount]も同じ書き方 - スプレッド構文——
[...birds, 新しい鳥]で元をこわさずコピー。Reactの状態更新はこれが必須 - mapは配列から配列を作る。Reactではそのまま一覧の描画になる
- 三項演算子と
&&は、JSXの中で条件を書くための道具 export defaultは波かっこなし、名前つきは波かっこありで受け取る
準備は終わりです。次からは実際に手を動かします。ViteとTailwindで、Reactが動く環境を10分で作ります。