React + TS + Turbo + pnpmでアプリ作るので書き散らし

natsushima.lab

登場人物

Turborepo : モノレポ環境用のビルドツール
- Next.jsの会社と同じVercel社が開発している
- ルートのnode_modules にライブラリがまとめて保存され、各プロジェクトが参照する
- TSConfig、ESLintも共有できる
pnpm : パッケージ管理ツール
- package.jsonの内容にアクセスする
vite
- JS ビルドツール(バンドルツール)
npx
- Node Package eXecutorの略
- node.jsパッケージの実行をするコマンド。使用後はゴミが残らない

natsushima.lab

React componentの型

JSX.Element
- JSXの結果の「型」
ReactElement
- Reactのコンポーネントのインスタンスの型
- プロパティにkey , props を持つ
ReactNode
- React要素の型のスーパーセット
- propsのchildren の型がこれ
React.FC
- React.FunctionComponentの略称

natsushima.lab

ES Lint

LintなしでJSを書くのは命綱無しでバンジーするようなもの

まだちょっとよくわからん(◜௰◝)

natsushima.lab

import pathにHOME = ~をaliasを設定したらpath参照できなくなって3時間詰まった件

vite.config.tsのdefineConfigにaliasを↓のように設定した

vite.config.ts

  return defineConfig({
    base: process.env.VITE_BASE_PATH,
    plugins: [react()],
    resolve: {
      alias: {
        "~": path.resolve(__dirname, "src"),
      },
    },
  })

react routerは

router.ts

basename: import.meta.env.VITE_BASE_PATH,

この状態で実行したら、routerをimportしているApp.tsxでpath参照できないとエラーが出た。
色々調べたが、結果的に必要だったのはtsconfig.json の更新だった。

tsconfig.json

{
  "compilerOptions": {
    ~略~
    "baseUrl": "./src",
    "paths": {
      "~/*":["./*"]
    },
    ~略~
  }
}

これでpathが~で参照できるようになった。
しかしまだエラーになる。file自体は参照できて静的解析は成功するが、実行時に404になる。

原因は.env ファイルだった。

.env

- VITE_BASE_PATH="/"
+ VITE_BASE_PATH=""

ReactRouterのbasenameに/ を入れてしまったためパスがおかしいことになってしまった（なんとなくenvにしたけど今今はenv使わないのだから削除しとけという話ではある）

natsushima.lab

jsで外部ファイル(モジュール)を読み込みたいとき

import
- ESM形式(ECMAScript Modules)
  - ES6で策定した形式。Chrome, Firefoxは動く。IEでは動かない。
require
- CJS形式(CommonJS Modules)
  - node.jsで実行できる
  - ブラウザ側では実行できない

natsushima.lab

アイデアまとめるのに使えそう
https://excalidraw.com

natsushima.lab

ReactQuery

単なるData fetchライブラリではない
cache機構が優秀なので、外部Libraryを入れるよりReactQueryのみで完結したほうがいいかも
Reduxは完璧に運営できれば堅牢だが、規模がデカくなりすぎる

natsushima.lab

なんか知らんけどtsはswitch文は避ける（なんでや？）

  const viewMap: { [key in DataT]: ReactNode } = {
    [DataT.AAA]: <ViewA />,
    [DataT.BBB]: <ViewB />,
    [DataT.CCC]: <ViewC />,
  };

というふうに定義し、

viewMap[type]

で、アクセスする

natsushima.lab

Componentの中でComponentを定義するのはダメ

const HogeView = () => {
  const BarView = () => {
  }
  return <BarView />;
}

natsushima.lab