Zenn
Open15

よくみるやつ

メモ
ﾏｯﾁｬﾏｯﾁｬ

js ... スプレッド構文

配列やオブジェクトのかっこを外してくれるやつ
展開

ﾏｯﾁｬﾏｯﾁｬ
配列.map((繰り返したいvalue要素、一意なindex値)=>{
色々
 return();
})
ﾏｯﾁｬﾏｯﾁｬ

indexを指定するのは最終手段なのでおススメではない
なぜならレンダリングの順番がどうのこうのごにょごにょ…
でも一番手っ取り早くエラーが消える(よくない)

ﾏｯﾁｬﾏｯﾁｬ

tsx propsとかtypeとか

子は親から受け取ったデータを渡すだけ、みたいなやつ

親コンポーネント

export function OyaComponent() {
    return (
        <KoComponent
            myoji="やまだ"
            namae={[
                { id: 1, kodomo: 'たかし' },
                { id: 2, kodomo: 'ひろこ' },
                { id: 3, kodomo: 'のぶゆき' },
            ]}
        />
    )
}

子コンポーネント

export function KoComponent({ myoji, namae }: {
    myoji?: string
    namae: {
        id: number
        kodomo?: string
    }[]
}) {
    return (
        <div>
            {namae.map((namae) => (
                <p key={namae.id}>{myoji}{namae.kodomo}</p>
            ))}
        </div>
    )
}

// こう書いてもいい
interface Props {
    myoji?: string
    namae: {
        id: number
        kodomo?: string
    }[]
}

export function KoComponent({ myoji, namae }: Props) {
    return (
        <div>
            {namae.map((namae) => (
                <p key={namae.id}>{myoji}{namae.kodomo}</p>
            ))}
        </div>
    )
}

// 出力
やまだたかし
やまだひろこ
やまだのぶゆき
ﾏｯﾁｬﾏｯﾁｬ

フロントエンドから始める開発の流れ

(Reactしかやったことないから偏ってるかも)

1. 静的な画面構築

要件をもとに画面を作る。

2. 動きをつける(フロント)

ボタンを押したらページが遷移するなど、dbやバックエンドの必要がない動きをつける。

3. 動きをつける(バックエンド)

APIとかと連携。

ﾏｯﾁｬﾏｯﾁｬ

TypeScriptの型アノテーション

//　プリミティブ型
const num: number = 123
const str: string = "文字列"
const boo: boolean = true

//　配列
const boolArray: boolean[]= [true, false];

//　interface　(Propsとかに使う)
interface Name {
    first: string;
    second: string;
}
var name: Name;
name = {
    first: 'John',
    second: 'Doe'
};

//　any　(敗北　なるべく使わない)
var power: any;
power = '123';
power = 123;

https://typescript-jp.gitbook.io/deep-dive/type-system

ﾏｯﾁｬﾏｯﾁｬ

state

useStateで生成するやつ。コンポーネントの状態(そのコンポーネントだけが変更できる値)を変える。

// 親コンポーネント
const [text, setText] = useState('')
console.log("親");
<InputForm
    value={text}
    onChange={setText}
/>

// 子コンポーネント
console.log("子");
<Input
    value={value}
    onChange={ev => onChange?.(ev.currentTarget.value)}
    }
/>

// Inputに入力するたび出力
親
子

Inputのtext(value)が更新されるたび、親コンポーネントも子コンポーネントも更新される。

ﾏｯﾁｬﾏｯﾁｬ
interface Props {
    onChange?(value: string): void
    onConfirm?(): void
    onCancel?(): void
}

空のvoidを返す

ﾏｯﾁｬﾏｯﾁｬ

useRef

// refが持っている値が変わっても再レンダリングされない
const ref = useRef<HTMLTextAreaElement>(null)
ﾏｯﾁｬﾏｯﾁｬ

useEffect

副作用を伴う処理をするやつ

  • DOMの操作
  • API通信
  • React外のライブラリとの連携
useEffect(
  ()=>{
    処理
},
[検知するやつ]
)