Zenn
Open28

React&TypeScript チートシート【サーバーメインだけどフロント書くことになったエンジニア用】

React
TypeScript
Yukito OhiraYukito Ohira

React FC宣言方法

import React from 'react'

type Props = {
  name: string
}

export const HelloWorld: React.FC = (props:Props) => {
  const {name} = props
  return (
    <div>Hello,{name}!</div>
  )
}
  • import Reactをしないとダメ
  • propsの型定義はtypeを使うのがよい（interfaceでもよいがtypeのほうが良い）
  • アロー関数の引数定義には型を明示しないと多分linterに怒られる（暗黙のanyを利用してしまうため）
  • const {name} = props という書き方でprops.nameを取ることができる。（愚直にconst name = props.name）でも良いがこっちのほうが記述がちょっと短くなる
nabeyangnabeyang

こんな風にも書けると思います。React.FCはchildrenが入るとか、使わなくて良いとかも言われたりしますね。あとジェネリクス利用した汎用コンポーネントが作れなくなるのも大きいかもしれません。

export const HelloWorld: React.FC<Props> = ({name}) => {
  return (
    <div>Hello,{name}!</div>
  )
}
Yukito OhiraYukito Ohira

現代ReactではclassでReactComponentを定義しなくても、propsのみで動くものはFCで関数を定義するだけ。stateが必要なものもhooksを利用するとFC内に書くことができる。

ReactComponentのrender()⇔React.FCの関数の戻り値

Yukito OhiraYukito Ohira

開発環境を作るには何を使ったらいいの

webpackをがちゃがちゃいじくるのも良いが正直webpackに詳しくないと消耗するのでcreate-react-appか、Next.jsでばっこり作ってしまうのがよさそう

Yukito OhiraYukito Ohira

型を明示的に宣言すべき場面

・関数の引数の型（指定しないと暗黙anyになるのでlinterに怒られると思う）

ケースバイケース

・関数の戻りの型（型推論が効くが、可読性向上のために戻りを書くことは否定しない）

型を推論すべき場面

・const変数への代入（スコープが狭いので型推論に任せるべき）

Yukito OhiraYukito Ohira

型のマージ（Intersection Types, 交差型）

二つの型を統合して新たな型を生み出す。どちらも共通するプロパティは統一される。

type Foo={
    baz: number
    hoge: string
}

type Bar={
    baz:number
    fuga: string
}

type FooBar = Foo & Bar

const foobar:FooBar = {baz: 10, hoge: "hoge",fuga:"fuga"}

console.log(foobar) // not error

なお、プリミティブ型で交差型を使用しても意味はない

Yukito OhiraYukito Ohira

型のOR（Union Types, 共用体）

// 通常の共用体。stringもしくはnumberを期待したいとき

type Input = {
    value: string | number
}

const inp1 = {value: "000"}
const inp2 = {value: 1}

console.log(inp1)
console.log(inp2)

//プロパティに？をつけるとundefinedとの共用体

type Type = {
    key?:string
}

const t: Type = {key: "hoge"}
const t2: Type = {}

console.log(t)
console.log(t2)
Yukito OhiraYukito Ohira

エディタは何がいいの

圧倒的にIDE。vimmerもemac使いもプライド捨ててVSCode使っていこう。
ちなみに自分はWebStorm

Yukito OhiraYukito Ohira

anyとunknownの違い

unknownはメソッド使用時に型キャストが必要

const str1: any = "hoge";
const str2: unknown = "fuga";

console.log(str1.indexOf("g")) // もしstr1がstringじゃなかったら実行時エラーになる
console.log((str2 as string).indexOf("g")) // str2.indexOf はコンパイルエラー

基本的には型が決まらない場合でもanyを使う前にunknownを使用した方が良さそう

Yukito OhiraYukito Ohira

Contextの使い方

・多階層なコンポーネントの propsのバケツリレーを防ぐのが目的
・React.cretateContext()でContextを作成
・Contextを参照するProviderを作成
・一つのContextで管理できるContextオブジェクトは一つだけ


const AppContext = React.createContext()

// Providerを以下の書き方で作成
<AppContext.Provider value={"hello,context!"}>
  // 子要素からは useContext(AppContext) で context valueを参照できる
</AppContext.Provider>
Yukito OhiraYukito Ohira

古い書籍ではReactの古い書き方で書かれていて、Hooksなどが利用されていないケースがある。

Hooksベースの最新の書き方を学ぶには、「基礎から学ぶReact/React Hooks」がわかりやすい。

https://amzn.to/32medRM

Yukito OhiraYukito Ohira

useEffect

副作用のある関数を実行する

ここでいう副作用とは、
・Reactの管理外のDOM更新
・HTTPリクエストによるAPI通信
・購読の設定

などUI構築以外の処理。

Reactの古い書き方でいうところのcomponentDidMountと同じタイミングでこの関数が実行される。

第一引数に実行する関数リテラル、第二引数に依存する変数の配列を渡す。

第二引数は省略可能だが、省略するとComponentがレンダリングされるたびに副作用関数が実行されるので省略は非推奨。

初回レンダリングのみ実行したい場合は、空配列 [] を渡す。