実装で学ぶフルスタックWeb開発

Docker DeskTop はインストール済み

1. MySQL

services:
  app-db:
    image: mysql:8
    command:
      --collation-server=utf8mb4_0900_bin
      --transaction-isolation=READ-COMMITTED
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: password
      TZ: Asia/Tokyo
    ports:
      - 53306:3306

workbenchをインストール
https://www.mysql.com/jp/products/workbench/

フロント

yarn create next-app frontend --ts --eslint

frontendに作らないとフォルダ名重複によりエラーになる

✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like your code inside a `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to use Turbopack for `next dev`? … No / Yes
✔ Would you like to customize the import alias (`@/*` by default)? … No / Yes

あとで直す

$ mv frontend/* .
$ mv frontend/.* .
$ rmdir frontend/

コンテナで開発する場合VSCodeのDev Containerをインストールして以下を実行

cd ./frontend
code .

ライブラリ追加する

yarn add @mui/material @emotion/react @emotion/styled
yarn add @mui/x-data-grid
yarn add axios
yarn add swr

swrとは

stale-while-revalidate
httpキャッシュ無効化戦略？

• Fast, efficient fetching
  バックエンドがレート制限を避けるためリクエストを効率的に並列化、重複除去、リトライする
• Realtime Updates
  リアルタイムにデータを更新
• Built-in cache and no re-renders
  データが更新されたら再レンダリング。ユーザー体験をスムーズに
• Transport and protocol agnostic
  swrはAPIやデータの形式に依存せず、GraphQL、RESTなどの任意のデータフェッチに使用可能

バックエンド

コンテナで開く

cd backend
code .

echo -e 'djangorestframework\nmysqlclient' > requirements.txt
pip install -r requirements.txt
pip freeze > requirements.lock

devcontainer.jsonに記載を追加

"postCreateCommand": "pip3 install --user -r requirements.txt"