女性向けエンジニアスクール
React入門の導入スライド
同じ表示、書くものが違う
左は「どうやって画面を組み立てるか」の手順、右は「どうなっていてほしいか」を書いています。
命令的：手順を書く
const box = document.getElementById("profile");
const title = document.createElement("h1");
title.textContent = "あおいのプロフィール";
box.appendChild(title);宣言的 UI：完成形を書く
export default function App() {
return <h1>あおいのプロフィール</h1>;
}DOM をどの順番で組み立てるかは React がやります。
1 / 4
命令的UIでは、手順を人がつなぐ
画面に1行足すだけでも、人がこの3手を順番に書きます。
作る
createElement で部品を1つ作る
文字を入れる
textContent で中身の文字を決める
つなぐ
append で親の下にぶら下げる
3手目のつなぐをやるまで、作った部品は画面のどこにも入っていません。順番を覚えているのは書いた人の側です。
2 / 4
Reactでは、返す形を変える
左の形を書きかえると、右の画面がそのとおりに変わります。document は使いません。
あおいのプロフィール
Web エンジニア
あおいのプロフィール見出しに出る文字Web エンジニア段落に出る文字3 / 4
考えてみよう外しても進めます
React で表示している見出しの文字を変えたいとき、書きかえるのはどれですか。
選ぶと、この枚の中で答えと理由を確かめられます。
4 / 4
代表の印がないと表示されない
export default は「このファイルの代表はこれです」という印です。この印がないと、React はどの関数を表示すればよいか分かりません。
export default を書き忘れる
function App() {
return <h1>あおいのプロフィールサイト</h1>;
}export default を書いている
export default function App() {
return <h1>あおいのプロフィールサイト</h1>;
}React はファイル名だけを知っていて、中の関数の名前までは知りません。だから代表に印を付けます。
1 / 4
return した形だけが画面に出る
App 関数の中に console.log を書いても、画面には出ません。画面に出るのは return した形だけです。
console.log だけ書く
export default function App() {
console.log("あおいのプロフィールサイト");
}return で返す
export default function App() {
return <h1>あおいのプロフィールサイト</h1>;
}console.log の中身は開発者ツールのコンソールに出るだけで、プレビューには反映されません。
2 / 4
ここを書きかえると画面が変わる
演習で書きかえるのは、return のうしろにあるタグと文字だけです。
あおいのプロフィールサイト
h1タグの名前あおいのプロフィールサイト画面に出る文字3 / 4
考えてみよう外しても進めます
App.jsx から export default を消すと、画面はどうなりますか。
選ぶと、この枚の中で答えと理由を確かめられます。
4 / 4
JSXは文字列ではない
return のうしろに h1 のタグがそのまま書けます。クォートで囲むと、ただの文字列になってしまいます。
文字列として書くと
export default function App() {
return "<h1>あおいのプロフィール</h1>";
}JSXとして書くと
export default function App() {
return <h1>あおいのプロフィール</h1>;
}文字列は画面にそのまま表示され、要素にはなりません。
1 / 5
React入門 - JSX
JSXは関数呼び出しに変わる
書き方を切り替えて、ブラウザに渡る内容が同じか確かめてください。
- 書き方を切り替えても、ブラウザに渡るコードは同じ
- 変換を通さないままにすると、その場で止まる
- 画面に出る文字は、変換されたコードの中の文字列と同じもの
2 / 5
returnを丸かっこで囲む
見出しと段落のように2つ以上を返すときは、全体を丸かっこと1つのタグで包みます。
丸かっこが無いと
export default function App() {
return
<div>
<h1>あおいのプロフィール</h1>
</div>;
}丸かっこで囲むと
export default function App() {
return (
<div>
<h1>あおいのプロフィール</h1>
</div>
);
}return とタグの間で改行するときは、必ず丸かっこで囲みます。
3 / 5
React入門 - JSX
閉じタグは自分で閉じる
HTML なら省略できた閉じタグも、JSX では自分で閉じます。
末尾を スラッシュ と 大なり で閉じます。閉じ忘れると画面が真っ白になります。
<img src="/works/recipe.png" alt="レシピ検索アプリ" />
<br />4 / 5
考えてみよう外しても進めます
見出しと段落の2つを1つの App から返したいとき、正しいのはどれですか。
選ぶと、この枚の中で答えと理由を確かめられます。
5 / 5
class でなく className
JSX の属性名は、ブラウザの DOM API に合わせます。CSS の class は JSX では className です。
HTMLの感覚で書く
<div class="profile">
<h2>あおい</h2>
</div>JSXの書き方
<div className="profile">
<h2>あおい</h2>
</div>class と書いても画面には出ますが、開発中に className へ直すよう警告されます。
1 / 5
React入門 - JSXの決まり
閉じないタグも自分で閉じる
HTML では省略できた閉じタグも、JSX では自分で閉じます。
閉じ忘れると、そのあとの行が全部そのタグの中身として扱われ、エラーになります。
<hr />
<br />
<img src="/works/recipe.png" alt="レシピ検索アプリ" />2 / 5
React入門 - JSXの決まり
返せるのは1つだけ
返す要素の数を増やして、包むかどうかを切り替えてください。
- 要素を2つ以上にすると、包まない場合はエラーになる
- 空のタグで包むと、複数でも1つとして返せる
- 空のタグ自体は画面には何も表示されない
3 / 5
演習で直す2か所
次の演習ではこの HTML 断片を動く JSX に直します。直す場所は class と閉じタグの2か所です。
演習で渡される HTML
<div class="profile">
<h2>あおい</h2>
<p>Web エンジニアです</p>
<hr>
</div>直したあとの JSX
<div className="profile">
<h2>あおい</h2>
<p>Web エンジニアです</p>
<hr />
</div>この2か所さえ直せば、あとは今のままで動きます。
4 / 5
考えてみよう外しても進めます
hr の閉じタグを書かずに hr のタグだけを置くと、どうなりますか。
選ぶと、この枚の中で答えと理由を確かめられます。
5 / 5
文字を直接書かない
見出しの文字を直接書くと、変えたい場所を毎回探すことになります。React では変数を波かっこで呼び出します。
文字を直接書く
export default function App() {
return <h1>あおいのプロフィール</h1>;
}データから出す
const profile = {
name: "あおい",
};
export default function App() {
return <h1>{profile.name}のプロフィール</h1>;
}名前を変えるときは profile.name の中身を直すだけで済みます。
1 / 5
React入門 - 波かっこで値を出す
波かっこの中は式
price を動かして、下の画面の数字がどう変わるか見てください。
- price を動かすと、式の答えと画面の数字が一緒に変わる
- 波かっこを外すと、計算されずに文字がそのまま出る
- 波かっこの中には price * 2 のような計算をそのまま書ける
2 / 5
React入門 - 波かっこで値を出す
波かっこの中に書けるもの
書けるのは式だけです。式とは、計算すると1つの値になるもののことです。
if 文や for 文は値にならないので、波かっこの中には書けません。
| 波かっこに書くもの | 画面に出るもの |
|---|---|
| {works.length} | 3 |
| {profile.name} | あおい |
| {2026 - 2025} | 1 |
| {profile.title.toUpperCase()} | WEB エンジニア |
3 / 5
属性にも使える
波かっこはタグの中身だけでなく、属性の値にも使えます。属性で使うときはクォートで囲みません。
そうしたくなる書き方
<img src={work.image} alt="{work.title}" />実際に使う書き方
<img src={work.image} alt={work.title} />クォートで囲むと、波かっこを含んだ文字がそのまま入ってしまいます。
4 / 5
考えてみよう外しても進めます
profile がオブジェクトのとき、<p>{profile}</p> と書くと画面はどうなりますか。
選ぶと、この枚の中で答えと理由を確かめられます。
5 / 5
同じ処理をアロー関数で書く
左は function を使った書き方、右は同じ処理をアロー関数で書いたものです。
function を使った書き方
const toDisplayName = function (name, title) {
return name + "（" + title + "）";
};アロー関数で書いたもの
const toDisplayName = (name, title) => {
return name + "（" + title + "）";
};function が消えて、引数のうしろに矢印が付きました。処理の中身は変わりません。
1 / 5
React入門 - アロー関数の復習
波かっことreturnを省く
書き方を切り替えて、戻り値が変わるかどうか確かめてください。
- function 版とアロー版は、書き方が違うだけで戻り値は同じ
- 本体が1つの式なら、波かっこと return を両方省ける
- 波かっこだけ残して return を消すと、undefined になる
2 / 5
React入門 - アロー関数の復習
小さな関数をその場で渡す
ボタンの処理も一覧の変換も、その場で作った小さな関数を渡しています。
アロー関数が読めないと React のコードはほとんど読めません。書き慣れておきましょう。
<button onClick={() => setCount(count + 1)}>いいね</button>
works.map((work) => <li>{work.title}</li>)3 / 5
React入門 - アロー関数の復習
引数のかっこを省くとき
引数の数によって、かっこを省略できるかどうかが変わります。
このコースでは、引数が1つでもかっこを書く形で統一します。
| 書き方 | 引数の数とかっこ |
|---|---|
| (title) => ... | 引数1つ。かっこを書いてもよい |
| title => ... | 引数1つ。かっこを省略した形 |
| () => ... | 引数0個はかっこが必須 |
4 / 5
考えてみよう外しても進めます
波かっこを付けたアロー関数で return を書き忘れると、呼び出した結果はどうなりますか。
選ぶと、この枚の中で答えと理由を確かめられます。
5 / 5
まとめて取り出す
左はプロパティを1つずつ取り出す書き方、右は分割代入でまとめて取り出す書き方です。
これまでの書き方
const name = profile.name;
const title = profile.title;分割代入で取り出す書き方
const { name, title } = profile;波かっこの中に並べたプロパティ名が、そのまま変数名になります。
1 / 5
React入門 - 分割代入の復習
名前で結びつく
受け取り方を切り替えて、名前と値がどうつながるか確かめてください。
- 並べる順番を入れ替えても、名前が同じなら同じ値が入る
- 波かっこの中の名前が、そのままできる変数の名前になる
- 綴りを間違えると、その変数だけ undefined になる
2 / 5
既定値が効くのは1つだけ
bio に渡す値によって、既定値が使われるかどうかが変わります。
bio が無い (undefined)
既定値のあいさつ文が使われる
bio に null が入っている
既定値は使われず null のまま
bio が空の文字列
既定値は使われず空のまま
既定値が使われるのは、値が undefined のときだけです。
3 / 5
propsもこの形で受け取る
次の章で出てくる props の受け取りも、まったく同じ分割代入の形です。
分割代入を使わない受け取り方
function ProfileCard(props) {
return <h2>{props.name}</h2>;
}分割代入で受け取る書き方
function ProfileCard({ name }) {
return <h2>{name}</h2>;
}引数のかっこを見ただけで、何を必要としているのかが分かります。
4 / 5
考えてみよう外しても進めます
オブジェクトを const [name] = profile; と角かっこで受け取ると、何が起こりますか。
選ぶと、この枚の中で答えと理由を確かめられます。
5 / 5
React入門 - スプレッド構文
元の配列は残るか
2つの操作を順番に選んで、元の arr がどうなるか比べてください。
- push を選ぶと、元の arr そのものが書き換わる
- スプレッドを選ぶと、元の arr は残ったまま別の配列ができる
- React が見ているのは「別の配列になったかどうか」
1 / 5
オブジェクトも同じ形で変える
1か所だけ変えた新しいオブジェクトを作ります。元の work は変わりません。
...work先にコピーするpublished: trueあとから上書きするできたもの
| id | title | published | |
|---|---|---|---|
| work | 1 | レシピ検索アプリ | false |
| publishedWork | 1 | レシピ検索アプリ | true |
2 / 5
書き換えでは画面が変わらない
元の配列を書き換えるだけだと、React は変化に気づきません。
画面が変わらない書き方
works.push(newWork);
setWorks(works);新しい配列を渡す書き方
setWorks([...works, newWork]);push は同じ配列を書き換えるだけなので、渡しても同じものに見えます。
3 / 5
React入門 - スプレッド構文
コピーされるのは外側だけ
スプレッドが複製するのは1階層だけで、入れ子の中身は共有されたままです。
links の中までは複製されません。内側を変えたいときは、そこにも点を書きます。
const profile = { name: "あおい", links: { github: "aoi" } };
const copy = { ...profile };
copy.links.github = "aoi-dev";
profile.links.github; // "aoi-dev" 元まで変わってしまった4 / 5
考えてみよう外しても進めます
作品を1件追加するとき、画面が正しく更新されるのはどちらの書き方ですか。
選ぶと、この枚の中で答えと理由を確かめられます。
5 / 5
React入門 - map
同じ件数の別の配列に変える
map は1件ずつ変換した結果を集めて、同じ件数の新しい配列を返します。
3件が3件のまま。件数を減らしたいときは filter を使います。
| 元の要素 | 変換後の要素 |
|---|---|
| レシピ検索アプリ | レシピ検索アプリ（2025） |
| 買い物メモツール | 買い物メモツール（2025） |
| 写真ギャラリー | 写真ギャラリー（2024） |
1 / 5
分割代入と組み合わせる
引数のところに波かっこを書けば、必要なものだけ取り出して変換できます。
{ title, year }分割代入で受け取るlabels
| 中身 |
|---|
| レシピ検索アプリ（2025） |
| 買い物メモツール（2025） |
2 / 5
変換先をJSXに変えるだけ
返す先を文字列から JSX に変えると、そのまま画面のリストになります。key は行を見分ける印で、詳しくは後の章で扱います。
- レシピ検索アプリ
- 買い物メモツール
- 写真ギャラリー
works.map1件ずつ変換するkey={work.id}行を見分ける印3 / 5
React入門 - map
returnを忘れると起きること
波かっこで本体を書いたのに return を書き忘れると、中身が空になります。
件数は合っているのに中身が空、という症状が出たらここを疑ってください。
const labels = works.map((work) => {
work.title + "（" + work.year + "）";
});
labels; // [undefined, undefined]4 / 5
考えてみよう外しても進めます
3件の配列に map を使うと、返ってくる配列は何件になりますか。
選ぶと、この枚の中で答えと理由を確かめられます。
5 / 5
値を返す条件分岐
if 文は先に箱を用意して書き込みます。三項演算子はこの1行がそのまま値になります。
if 文で書く
let status;
if (work.published) {
status = "公開中";
} else {
status = "下書き";
}三項演算子で書く
const status = work.published ? "公開中" : "下書き";if 文は手順を実行するだけで、それ自体は値になりません。
1 / 5
React入門 - 三項演算子と論理積
選ばれる値が入れ替わる
数を動かして、しきい値をまたぐと選ばれる文字がどう入れ替わるか見てください。
- しきい値をまたぐ瞬間に、選ばれる文字が入れ替わる
- 真になった側の値だけが、そのまま結果に残る
- 選ばれなかった側の値は、結果のどこにも出てこない
2 / 5
React入門 - 三項演算子と論理積
左が真のときだけ右を返す
論理積は真偽値を返すわけではありません。左が偽ならその左の値を、真なら右の値を返します。
0 や空文字のように、偽であっても数字や文字列そのものが返ることがあります。
| 式 | 結果 |
|---|---|
| true && "新着" | 新着 |
| false && "新着" | false |
| 0 && "新着" | 0 |
| "" && "新着" | 空の文字列 |
3 / 5
よくある落とし穴
左に数値や文字列をそのまま置くと、画面や文字列に思わぬ値が混ざります。
件数をそのまま左に置く
0 件のとき、画面に 0 とだけ表示される
文字列を組み立てる場所で使う
偽のとき false という文字が混ざる
左を必ず真偽値にします。文字列を組み立てる場所では三項演算子を使います。
4 / 5
考えてみよう外しても進めます
新着バッジの文字を文言に足します。新着でないときに安全なのはどちらですか。
選ぶと、この枚の中で答えと理由を確かめられます。
5 / 5
関数がJSXを返す部品になる
名前を付けた関数がJSXを返せば、それがそのまま画面の部品になります。<Profile /> と書いた場所に、Profile が返したJSXが差し込まれます。
App の中に直接書く
export default function App() {
return (
<div>
<h1>あおいのプロフィール</h1>
<p>あおい / Web エンジニア</p>
</div>
);
}関数に切り出して呼び出す
function Profile() {
return <p>あおい / Web エンジニア</p>;
}
export default function App() {
return (
<div>
<h1>あおいのプロフィール</h1>
<Profile />
</div>
);
}1 / 5
React入門 - コンポーネントを作る
タグの先頭で結果が変わる
書き方を切り替えて、Card が呼ばれるかどうか見てください。
- 大文字ではじめると、その瞬間に Card 関数が呼ばれる
- 先頭を小文字にすると、React はHTML要素だと思い込む
- 小文字のままだとエラーは出ず、画面に何も出ないだけになる
2 / 5
切り出す3つの手順
はじめから部品に分けようとせず、動く画面をまず作ってから移すほうが楽です。
関数を作る
新しい関数を作り、移したいJSXをreturnで返す
置きかえる
もとの場所を <Profile /> に置きかえる
確かめる
画面が前と同じに見えるか確かめる
見た目が変わらないのが正解です。変わるのは、あとから値を差し替えられるようになる未来だけです。
3 / 5
つまずきどころ
切り出すときによくある3つのミスです。
コンポーネント名を profile と小文字で書く
エラーは出ず、画面に何も表示されない
名前と肩書きのpを2つ、そのままreturnする
1つのかたまりで返していないためエラーになる
Profileの定義をAppの関数の中に書く
動くが、あとで値を持たせると消えてしまう置き場所になる
3つとも、あとで直すのに時間がかかる詰まり方です。
4 / 5
考えてみよう外しても進めます
コンポーネントの名前を profile と小文字で書いて <profile /> と使うと、どうなりますか。
選ぶと、この枚の中で答えと理由を確かめられます。
5 / 5
渡した値が画面に出る
属性で渡した値が、そのまま props として子に届き、画面に出ます。
あおい
Web エンジニア
props.name受け取って表示name="あおい"渡す値1 / 5
React入門 - props
propsは一方通行
値と向きを切り替えて、propsがどちらに動くか見てください。
- 親が持つ値を変えると、子が受け取る値も画面もそろって変わる
- 子から親へ書きかえようとしても、親の値は動かない
- 値は親から子へ流れるだけで、逆向きには流れない
2 / 5
React入門 - props
文字列以外は波かっこ
クォートで囲むと文字列になります。数値や真偽値は波かっこで囲みます。
見た目は同じでも、あとで計算に使うときに文字列だと困ります。
| 書き方 | props に届く値 |
|---|---|
| year="2025" | 文字列の "2025" |
| year={2025} | 数値の 2025 |
| published={true} | 真偽値の true |
3 / 5
propsは書きかえない
受け取った props を子の側で書きかえてはいけません。値は親から子への一方通行です。
やってしまいがちな書き方
function Profile(props) {
props.name = "べつの名前";
return <p>{props.name}</p>;
}表示だけする書き方
function Profile(props) {
return <p>{props.name}</p>;
}props は親から借りている値です。値を変えたいときの仕組みは、この先の章で扱います。
4 / 5
考えてみよう外しても進めます
Work コンポーネントに year として数値の2025を渡したいとき、正しい書き方はどれですか。
選ぶと、この枚の中で答えと理由を確かめられます。
5 / 5
props. をくり返さない
props が増えるほど props. の繰り返しで読みにくくなり、打ち間違いも増えます。第2章で復習した分割代入を、そのまま引数のところで使います。
propsが3つに増えると
function Profile(props) {
return (
<section className="profile">
<p>{props.name}</p>
<p>{props.title}</p>
<p>{props.bio}</p>
</section>
);
}分割代入で受け取る
function Profile({ name, title, bio }) {
return (
<section className="profile">
<p>{name}</p>
<p>{title}</p>
<p>{bio}</p>
</section>
);
}1 / 5
React入門 - propsの分割代入
波かっこは受け取り方
引数の波かっこは、渡すものの形ではなく受け取り方の指定です。渡す側はこれまでどおり属性で書きます。
渡す側の書き方は変わりません。変わるのは受け取る側だけです。
| 書く場所 | 書き方 |
|---|---|
| 渡す側（JSXの属性） | <Profile name="あおい" title="Web エンジニア" /> |
| 受け取る側（関数の引数） | function Profile({ name, title }) |
| 波かっこの中身 | 渡すオブジェクトの形ではなく、受け取る変数の指定 |
2 / 5
書き忘れたpropsは使えない
分割代入は書いたものだけを取り出します。渡す側と受け取る側の両方を直さないと動きません。
title を波かっこに書かず、本文で {title} を使う
title is not defined と出て画面が真っ白になる
渡す側にだけ bio="..." を足す
受け取る側の波かっこに bio が無いと使われないまま
波かっこの中で name を nmae と打ち間違える
nmae は undefined になり、name も使えない
props を1つ足すときは、渡す側と受け取る側の両方を直したか確かめてください。
3 / 5
渡さなければ既定値
title を渡さなかったときだけ、既定値の「肩書き未設定」が使われます。渡した値があれば、そちらが優先されます。
title = "肩書き未設定"渡されなかったときの値呼び出しと画面
| 呼び出し方 | 画面に出る文字 |
|---|---|
| <Profile name="あおい" /> | あおい / 肩書き未設定 |
| <Profile name="あおい" title="Web エンジニア" /> | あおい / Web エンジニア |
4 / 5
考えてみよう外しても進めます
function Profile({ name }) の中で、波かっこに書いていない title を {title} として使うと何が起きますか。
選ぶと、この枚の中で答えと理由を確かめられます。
5 / 5
枠は共通、中身は差し込む
見た目の枠を複製せず、中身だけを外から差し込めるようにします。枠の div と h2 は Card の中に1回だけ書けば済みます。
枠ごと重複して書く
<div className="card">
<h2 className="card-title">プロフィール</h2>
<p className="name">あおい</p>
</div>
<div className="card">
<h2 className="card-title">作品</h2>
<p>レシピ検索アプリ</p>
</div>Cardに中身をはさむ
<Card title="プロフィール">
<p className="name">あおい</p>
</Card>
<Card title="作品">
<p>レシピ検索アプリ</p>
</Card>1 / 5
React入門 - children
はさんだ中身がchildren
挟むものを切り替えて、children に何が入るか確かめてください。
- 挟む中身を切り替えると、書いた行と画面が同時に変わる
- 何も挟まないと children は空になり、画面には何も出ない
- {children} を置き忘れると、受け取っていても画面には出ない
2 / 5
React入門 - children
childrenも1つのprops
children は特別扱いではなく、値の由来が違うだけのふつうの props です。
名前は children で決まっています。ほかの名前にはできません。
| propsの名前 | 値の由来 |
|---|---|
| title | 属性 title="プロフィール" で渡した値 |
| children | 開始タグと終了タグではさんだ中身 |
| 受け取り方 | ({ title, children }) と同じ波かっこで受け取る |
3 / 5
はさみ忘れると消える
children を扱うときによくある事故です。エラーは出ないので気づきにくいところです。
Card の return で {children} を書き忘れる
はさんだ中身が画面のどこにも出ない
<Card title="作品" /> と自分で閉じる
children が空になり、見出しだけの枠が残る
children の代わりに body={...} と属性で渡す
動くが、呼ぶたびにJSXを組み立てて渡す手間が増える
中身が消えたと思ったら、まず {children} を置いたかを見てください。
4 / 5
考えてみよう外しても進めます
<Card title="作品" /> のように自分で閉じるタグを書くと、Card が受け取る children はどうなりますか。
選ぶと、この枚の中で答えと理由を確かめられます。
5 / 5
1ファイルと複数ファイル
これまでは Card も Profile も App.jsx にまとめて書いてきました。部品が増えると、この1ファイルが読みにくくなります。
1ファイルにまとめて書く
// App.jsx
function Card({ title, children }) { ... }
function Profile({ name, title, bio }) { ... }
export default function App() { ... }componentsフォルダへ分ける
src/
App.jsx
components/
Card.jsx
Profile.jsx部品が3つを超えたあたりから、目当てのコードを探す手間が増えます。
1 / 5
分ける・出す・受け取る
ファイル分割は、この3手の繰り返しです。
分ける
部品ごとのファイルを components/ に作る
出す
export default を付けて外から見えるようにする
受け取る
使う側で import してタグとして使う
分けても画面は何も変わりません。変わるのは、直したい部品をすぐ見つけられるかどうかです。
2 / 5
React入門 - ファイルに分ける
出し方と受け取り方
出し方によって、受け取る側の書き方が変わります。
このコースでは1ファイル1部品なので、基本は default export だけを使います。
| 出す側の書き方 | 受け取る側の書き方 |
|---|---|
| export default function Card() {} | import Card from "./components/Card.jsx" |
| export function CardTitle() {} | import { CardTitle } from "./components/Card.jsx" |
| 自分で書いたファイルを指す | 頭の ./ か ../ は省略できない |
3 / 5
importでよくある事故
書き方をひとつ間違えるだけで、画面がまるごと出なくなります。
頭の ./ を書かずに import Card from "components/Card.jsx"
npm のライブラリとして探しにいき、見つからずエラーになる
default export なのに { Card } と波かっこで受け取る
Card は undefined になり、画面が真っ白になる
export default を書き忘れる
import できるものが無く、同じく undefined になる
エラーに部品名が出てきたら、まず import の波かっこと ./ を疑ってください。
4 / 5
考えてみよう外しても進めます
import Card from "components/Card.jsx"; と、頭の ./ を書き忘れました。実行するとどうなりますか。
選ぶと、この枚の中で答えと理由を確かめられます。
5 / 5
コピペと再利用
同じ見た目のカードを増やすとき、コピーして貼るのと、部品を再利用するのとでは、直すときの手間が変わります。左は書いた数だけ直し、右は WorkCard.jsx を1か所直すだけです。
コピーして貼る
<li className="work-card">
<h3>レシピ検索アプリ</h3>
<p>web / 2025</p>
</li>
<li className="work-card">
<h3>買い物メモツール</h3>
<p>tool / 2025</p>
</li>WorkCard を値違いで使う
<WorkCard title="レシピ検索アプリ"
category="web" year={2025} />
<WorkCard title="買い物メモツール"
category="tool" year={2025} />1 / 5
値を変えて3枚並べる
WorkCard は1つしか書いていません。渡す値を変えて呼ぶだけで、3枚のカードが並びます。
レシピ検索アプリ
web / 2025
買い物メモツール
tool / 2025
写真ギャラリー
web / 2026
title="レシピ検索アプリ"呼ぶたびに値を変える2 / 5
React入門 - 部品を使い回す
数値と文字列の渡し方
year の波かっこの有無で、渡る値の型が変わります。見た目は同じでも中身は別物です。
あとで大小を比べるとき、文字列のままだと思ったとおりに動きません。
| 書き方 | year の中身 |
|---|---|
| year={2025} | 数値の 2025 |
| year="2025" | 文字列の "2025" |
| year={"2025"} | 波かっこの中でも文字列の "2025" |
3 / 5
React入門 - 部品を使い回す
件数が増えたら
作品が3件なら手で3行書けます。30件だったらどうでしょうか。
件数が増えるたびに1行足す書き方は、いずれ限界がきます。この面倒さは覚えておいてください。
const works = [
{ title: "レシピ検索アプリ", year: 2025 },
{ title: "買い物メモツール", year: 2025 },
{ title: "写真ギャラリー", year: 2026 },
];
// このデータを見ながら、
// 人が手でJSXを書き写している4 / 5
考えてみよう外しても進めます
1枚目の WorkCard に渡した title は、2枚目の WorkCard に影響しますか。
選ぶと、この枚の中で答えと理由を確かめられます。
5 / 5