女性向けエンジニアスクール
型が無いと止まらない
型を書かないと、props の名前を打ち間違えても実行するまで気づけません。
型を書かない
function ItemCard(props) {
return <p>{props.titel}</p>;
}型を書く
function ItemCard(
props: ItemCardProps
) {
return <p>{props.titel}</p>;
}右はこの打ち間違いに、書いているその場で気づけます。
1 / 5
Reactのprops・state・イベントへTypeScriptの型を付け、useEffectでAPIデータを取得し、loading・error・empty・successを型安全に表現する全23レッスンのコースです。フリマアプリfleamaの商品一覧をAPI駆動へ変え、送信中や競合を含む非同期UIを設計します。
レッスン
23件
所要時間
約6時間
ランク
中級
学習環境
ブラウザ完結
fleamaの商品一覧をAPI駆動にし、非同期状態をTypeScriptのunion型で安全に表現する
Reactのprops・state・イベントへTypeScriptの型を付け、useEffectでAPIデータを取得し、loading・error・empty・successを型安全に表現する全23レッスンのコースです。フリマアプリfleamaの商品一覧をAPI駆動へ変え、送信中や競合を含む非同期UIを設計します。
Reactのprops・state・イベントへTypeScriptの型を付けられる
APIレスポンスを型付けし、useEffectで安全に取得できる
loading・error・empty・successと送信中のUIを設計できる
ブラウザ完結（インストール不要）
テキストでの解説
0
レッスン
コーディングの問題
20
レッスン
クイズ問題
3
レッスン
ゆめさくコード編集部
プログラミング学習をもっと身近に。初心者から実務レベルまで、わかりやすいコンテンツをお届けします。
ゆめさくエンジニア / 現役ソフトウェアエンジニア。Ruby on Rails・Nuxt.js・Next.js・CakePHPなどの実務の開発をベースに、学習コンテンツを作成しています。
レッスンの最初に、図と短い言葉で学ぶ内容をつかみます。
型を書かないと、props の名前を打ち間違えても実行するまで気づけません。
型を書かない
function ItemCard(props) {
return <p>{props.titel}</p>;
}型を書く
function ItemCard(
props: ItemCardProps
) {
return <p>{props.titel}</p>;
}右はこの打ち間違いに、書いているその場で気づけます。
1 / 5
最初に何を入れるかで、TypeScript が型を決められるかが変わります。
初期値が空のまま
const [items, setItems] =
useState([]);
// items は never[] になる山かっこで型を渡す
const [items, setItems] =
useState<Item[]>([]);
// items は Item[] になる空配列からは中身の型が分からないので、自分で教えます。
1 / 5
e の型が無いと、TypeScript は e の中身に何があるか判断できません。
型を書かない
function handleChange(e) {
setKeyword(e.target.value);
}イベントの型を書く
function handleChange(
e: ChangeEvent<HTMLInputElement>
) {
setKeyword(e.target.value);
}山かっこの中が、そのまま e.target の正体になります。
1 / 5
title だけ受け取っていた型に、はさんだ中身を受け取る children を足します。
titleだけの型
type CardProps = {
title: string;
};childrenを足した型
type CardProps = {
title: string;
children: ReactNode;
};children という名前は決まっています。足すのは型のほうです。
1 / 5
動かしながら、仕組みや変化を目で確かめられます。
陽葵「注文ウィジェット、今風にできる?」
1問目は無料で解けます。
教材を見ないで、依頼と完成条件だけを読んで書いてみてください。
React道場 ハレノヒ珈琲をモダン化する10問
このコースを終えたあとに進むと、無理なく続けられます
