# フロントエンド勉強会

ISG, ISR参考記事: https://qiita.com/Yametaro/items/3363b1f996714af1b451

## ISG (Incremental Static Generation)

サーバー側で、増えた分の差分を自動でbuildして生成してくれる機能。

対象の差分に関してアクセスがあった際に、以下のように書いておくことで404にならずloadingのような画面が表示される。

export const getStaticPaths: GetStaticPaths = async () => {
  /* 〜省略〜 */

  return {
    paths,
+   fallback: true,
  }
}

1. 新しい記事が投稿される
- この時点ではHTMLファイルは生成されない
2. その記事のURLにアクセスが来る
- ここでHTMLファイルが生成される
3. それ以降のアクセスでは、2.で生成されたHTMLが返される

## ISR (Incremental Static Regeneration)

対象のファイルが編集された場合に差分を再生成してくれる。

ISRにするには

export const getStaticProps: GetStaticProps<StaticProps, { id: string }> = async (context) => {
  /* 〜省略〜 */

  return {
    props: {
      article,
    },
+   revalidate: 30,
  }
}

のように revalidate を設定する

## TypeScriptの型情報

TypeScriptの型は、実行時には存在しない。
TypeScriptはコンパイルされると普通のJavaScriptのコードになる。
そのため、TypeScriptで定義したカスタム型の情報をif文, switch文の条件に使うことはできない。

ただし ここにもあるように https://qiita.com/Yametaro/items/e75d5c520b0f30c4db28#%E3%83%96%E3%83%AB%E3%83%BC%E3%83%99%E3%83%AA%E3%83%BC%E6%9C%AC%E3%81%AB%E6%9B%B8%E3%81%84%E3%81%A6%E3%81%82%E3%81%A3%E3%81%9F

    // ユーザーには「個人ユーザー」と「法人ユーザー」がいまっせ！
    type User = PersonalUser | CorporateUser

    // 個人ユーザーは「姓」と「名」を持ってまっせ！
    type PersonalUser = {
+     type: "PersonalUser"
      familyName: string
      givenName : string
    }

    // 法人ユーザーは名前だけを持ってまっせ！
    type CorporateUser = {
+     type: "CorporateUser"
      name: string
    }

のように型にtypeというプロパティを持たせてあげると適切に条件分岐ができる。

## Reactにおいて props を渡す方法
参考: https://qiita.com/Yametaro/items/814f40d08e9d30584e20

  import React from 'react'

  type InputProps = JSX.IntrinsicElements['input']
  type Props = InputProps & { labelText: string }

  export const LabeledInput: React.FC<Props> = (props) => {
    const { labelText, ...inputProps } = props

    return (
      <label>
        <span>{labelText}</span>
        <input {...inputProps} />
      </label>
    )
  }

これの肝は `JSX.IntrinsicElements['input']`を使うこと

これのおかげでたくさんの要素を列挙する必要がなくなる。

## 検索フォーム等の不要な再レンダリング

参考: https://qiita.com/Yametaro/items/621bfd8c894f8fd36539#reactmemo%E3%81%A7%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%82%92%E3%83%A1%E3%83%A2%E5%8C%96%E3%81%97%E3%82%88%E3%81%86

リンク先の記事にある React Componentのうちどれが再レンダリング対象になっているかを可視化するツールを用いると余分な再レンダリングに気づくことができる。

Reactの useState をそのまま使うのではなく、 memo を使うようにすることで、余分な再レンダリングをなくすことができる。
詳しい説明は以下のリンク参照のこと

https://qiita.com/Yametaro/items/621bfd8c894f8fd36539#%E5%A8%98%E3%81%A1%E3%82%83%E3%82%93%E3%81%AB%E3%82%88%E3%82%8B%E8%A7%A3%E8%AA%AC

## TypeScript の型システム

参考: https://qiita.com/uhyo/items/e2fdef2d3236b9bfe74a

コンパイル時に `--strictNullChecks` option を渡さないと、null, undefinedが : number, : string にも紛れ込む可能性がある。

### プリミティブ型

`string`, `number`, `boolean`, `symbol`, `bigint`, `null`, `undefined`のような基本的な型
JavaScriptのプリミティブ型と対応している。

### リテラル型

> プリミティブ型を細分化したものとしてリテラル型があります。リテラル型には文字列のリテラル型と数値のリテラル型と真偽値のリテラル型があります。それぞれ、'foo'や3やtrueというような名前の型です。

const a: 'foo' = 'foo';
const b: 'bar' = 'foo'; // エラー: Type '"foo"' is not assignable to type '"bar"'.

変数宣言時に constなのか, letなのかで、プリミティブ型が割り振られるか、リテラル型が割り振られるかが決まる。
詳しくは、下記のリンクから

https://qiita.com/uhyo/items/e2fdef2d3236b9bfe74a#%E3%83%AA%E3%83%86%E3%83%A9%E3%83%AB%E5%9E%8B%E3%81%A8%E5%9E%8B%E6%8E%A8%E8%AB%96