#18 wsl2でReactアプリの開発する
YATTA!駆動開発の18回、wsl2でReactアプリの開発するときにつまづいたところなど.
基本情報
前回:#17 BodyPixを使って肉体を3Dアバターに置き替えるWebアプリケーションを作る
次回:#19 VRMから線画を作成しstyle2paintsで半自動着色する
WSL2のインストール
Windows Subsystem for Linux (WSL) を Windows 10 にインストールする | Microsoft Docs
Windowsのバージョン確認方法
Windowsの検索窓でwinverと入力する
Windows 10 バージョン1903/1909を使用している場合
Windows 10 バージョン 1903 または 1909 を実行している場合は、Windows メニューから 設定 を開き、更新とセキュリティ に移動して、更新プログラムのチェック を選択します。 ビルド番号は、18362.1049+ または 18363.1049+ で、マイナー ビルド番号は .1049 より大きい必要があります。 詳細については、「Windows 10 バージョン 1903 および 1909 で WSL 2 のサポート開始」を参照してください。 また、トラブルシューティング手順も参照してください。
出典:Windows Subsystem for Linux (WSL) を Windows 10 にインストールする | Microsoft Docs(2020/10/21)
結局 2004へバージョンアップしたけしごむ.icon
WSL2によるホストのメモリ枯渇を防ぐ
ホストであるWindowsのメモリが枯渇することがあるのでメモリサイズを固定することで対処する
code:%USERPROFILE%\.wslconfig
wsl2
memory=6GB
swap=0
WSL2によるホストのメモリ枯渇を防ぐための暫定対処 - Qiita
WSL 2 consumes massive amounts of RAM and doesn't return it · Issue #4166 · microsoft/WSL
nodenvのインストール
code:sh
echo 'export PATH="$HOME/.nodenv/bin:$PATH"' >> ~/.bashrc
echo 'eval "$(nodenv init -)"' >> ~/.bashrc
nodenv/nodenv: Manage multiple NodeJS versions.
Gitと認証
Windows Subsystem for Linux で Git の使用を開始する | Microsoft Docs
Reactのホットリロードが効かない、ビルドがとても遅い
作業ディレクトリがWindowsファイルシステム上にあるのが原因
/mnt/c や/mnt/e 等
linuxのホーム下に移動したら解決した
wsl2が異常に遅くてホットリロードも効かないとき - Tamaosa
WSL2で困ったときに使う魔法の呪文 - Qiita
Matrial-UIとstyled-componentsを使用する
インストール
code:sh
npx create-react-app genshin-simulator --typescript
yarn add styled-components @types/styled-components
yarn add @material-ui/core @material-ui/styles
yarn add @material-ui/icons
React.jsとstyled-componentsでmaterial-uiを利用する最適解
Material-UI と styled-components を組み合わせて、React のサイトを怠惰にスタイリングする。 - Qiita
次回は#19 VRMから線画を作成しstyle2paintsで半自動着色する