フロントエンドを学ぶ

TypeScript の背景から React, Next.js を用いたアプリ開発までスムーズに学習できる。
Vercel, Jest, Prettier, ESLint 等の開発体験を向上させるためのツールも紹介されていて良い。
Vercel のデプロイ楽すぎる...

nomnomnonono 2ヶ月前

npm, npx, yarn とは？違いは？

nomnomnonono 2ヶ月前に更新

https://ja.vitejs.dev/guide/

色々記事を見ていると Vite を使っている人が多いので調べてみる。

Webpack 等のバンドルツールと比較して、高速に開発サーバを起動できる仕組みが備わっているらしい。プロダクションのビルドは Rollup という従来ツールを使用する。

nomnomnonono 2ヶ月前に更新

Webpack とは？Vite と Webpack の違いは？

nomnomnonono 2ヶ月前に更新

React with Vite の環境構築。prettier, eslint の設定で詰まらなくなるのでとても助かる。

nomnomnonono 2ヶ月前に更新

まとめて実行できるシェルスクリプト（雑）

#!/bin/sh

if [ -d react-setup-2024/ ]; then
    cd react-setup-2024/
    git pull origin main
    cd ..
else
    git clone git@github.com:nomnomnonono/react-setup-2024.git
fi

npm create vite@latest $1 -- --template react-ts
cd $1
npm install

npm install -D vite-tsconfig-paths

npm install -D \
  vitest \
  happy-dom \
  @vitest/coverage-v8 \
  @testing-library/react \
  @testing-library/user-event \
  @testing-library/jest-dom \
  msw

npm install -D \
  eslint-plugin-react \
  eslint-plugin-vitest \
  eslint-plugin-import \
  prettier \
  eslint-config-prettier \
  npm-run-all

git init
npm install --save-dev husky lint-staged
npx husky init
echo "npx lint-staged" > .husky/pre-commit

for file in ../react-setup-2024/*
do
  cp ../react-setup-2024/$file .
done
cp -r ../react-setup-2024/.github/ .github/
node postscript-package.js && rm -rf postscript-package.js
npm install