React

メギド所持率チェッカー〆所持チェッカーをreactで書き直してリニューアルしました。

• クラスやスタイルでの絞り込み機能の実装
• 入手方法、実装日表示
• 実装日順ソート

などを追加しました。

reactもTypescriptも初めて触ってかなりレンダリングに無駄があると思うのでちょっとずつ改修していきたいです。

今年はメギド6周年/72ヶ月祝いなので楽しみです🎉

そろそろ触ってみようかな…（消極的）〆所持チェッカーをreactで書き直したいな…と計画中

DockerでNode.jsインストール

docker-compose.yaml

version: '3'
services:
  app:
    image: node:20-bookworm-slim
    working_dir: /app
    container_name: nodejs
    ports:
      - "3000:3000"
    tty: true
    environment:
      - WATCHPACK_POLLING=true
    volumes:
      - ./app:/app
      - node_modules:/app/node_modules
    restart: always
    networks:
      - mynetwork
        
volumes:
  node_modules:

networks:
  mynetwork:
    external: true

WATCHPACK_POLLING=trueを入れないとホットリロードができないらしいので記述。

新規Next.jsアプリ作成

sudo docker compose up -dで起動。sudo docker exec -it nextjs /bin/bashでコンテナ内に入ってnpx create-next-app@latestで新規Next.jsアプリを作成

What is your project named? app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use src/ directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias? No / Yes

こちらを参考にEslintとPrettierの設定をしました。

sudo docker exec -it nodejs npm run devで開発環境が起動できます。

./app/src/app/page.tsxを変更&保存してみてホットリロードが効いていればとりあえず成功です。中身はまた今度…