はじめに

1週間N(E)ETになった社会人の学習記録です。
今日はReactのサンプルを写経し、使い方を覚えます。
前々回作ったFastAPIに対して、CRUDできることを目標にしましたが、できませんでした。

私のHTML/CSSのレベルは、「阿部寛のホームページ¹をかろうじて理解できる。」程度です。
正直、見た目とかどうでもいいので、CSS何それおいしいのって思っています。
ただ、複数カラムに対する絞り込み選択をアクセス並みの便利さにしようとすると、ページ遷移があると厳しそうなので、Ajax（もはや死語？）的な動作が必要なためReactを選んでみました。

私のjavascriptのレベルは、「hello world²」程度です。
取り敢えずReactのチュートリアル³は金曜日（Day0of9）にやってみました。

開発環境の設定

vimのアップデート

.tsxのファイルを開いてもsyntaxがつかなかったので、Ubuntu On WSLのvimをversionを8.2に上げた。

sudo su
apt install software-properties-common
apt update
add-apt-repository ppa:jonathonf/vim
apt upgrade

sudo suはお行儀が悪いので良い子は使わないこと。

開発環境をWSLからWindows側に変更

vimで編集すると、tsxのautoindentがものすごく微妙なので、VS Codeにしよう。

~~volumesのsourceをWindows系のパス(C:...)に変更~~（結局WSL系のパス（/mnt/c/...）に戻した。）
環境変数に「CHOKIDAR_USEPOLLING: 'true'」を追加⁴（ソースの変更に追随して再Compileをする設定。Ubuntuの場合だと設定しなくてもできる時もあった。）

実装

参考ページ

とりあえず以下のページが（githubのリンクもあり）わかりやすそうだけど、そもそもReactの使い方は全くわからん。

FastAPIとの通信

参考ページを見るとAPIとの通信はReactだけではなく、Axiosというやつを使っているぽい。
とりま「react api　通信」でググるとトップ7/8がAxiosだったので、これにする。

CORS(Cross-Origin Resource Sharing)⁵の許可

FastAPIにReactからの通信を許可する設定を追加⁶ ⁷。

main.py

origins = [
    "http://localhost:3000"
]

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

axiosの設定

サンプルコピペ。

App.tsx

  get axios() {
    const axiosBase = require('axios');
    return axiosBase.create({
      baseURL: "http://localhost:8000",
      headers: {
        'Content-Type': 'application/json',
        'X-Requested-With': 'XMLHttpRequest'
      },
      responseType: 'json'
    });
  }

ネットワークのまとめ（かなり怪しい初心者なりの理解）

Dockerの中だけで完結する場合は、services名(今回はdb, api, web)で通信できる。そのため、api->dbへの接続はFastAPIの「db.py」において、「HOST='db'」としている。
一方、Reactの「App.tsx」内の通信はブラウザが行っており、データの流れは後者だと考えられる。そのため、FastAPIの「main.py」において、「origins=["http://localhost:3000"]」とし、axios内のbaseURLは「"http://localhost:8000"」とする。
- ブラウザ(localhost) ← localhost:3000=web ← api ← db
- web=localhost:3000 → ブラウザ(localhost) ← localhost:8000=api ← db
「App.tsx」内で環境変数をとってくる「process.env.ENV_VALUE」はブラウザ側の環境変数をとってくるみたい。「docker-compose.yml」で環境変数を設定して、main.pyで「os.environ['WEB_URL']」、「App.tsx」で「baseURL: process.env.API_URL」として、環境設定を押し込めたかったけど無理だった。Reactでserver側の環境変数を参照できる方法があったら知りたい。（といいつつ、サーバーの設定を外に出すのは微妙な気がするので、m4マクロみたいに上書きされる仕様になりそうだけども。）

Index（一覧）

とりま、参考サイトから、一覧表示に必要そうなところだけコピペ。
「@material-ui/data-grid」は一意のidがいるというエラーが出たので、FastAPI側のSchema(UserSelect)にidを追加。

とりあえず一覧はできたので、CRUDは明日頑張る。

所感

ホットリロードの有効化（CHOKIDAR_USEPOLLING=true）とCORSの許可にかなり手間取った。
こういう知ってたら一瞬だけど、知らないと調べようもなくて時間がとられるやつは、学習とはそういうものだと思って楽しむしかない。愚者は経験からしか学べない。
まあ、printfデバッグの方法⁸すらわからない状況から始めたことを思えば頑張ったと思う。
明日こそはReactからCRUDするぞ。

免責事項（言い訳）

上記の技術については初心者なので、あてにしないように!!!