フロントエンド開発環境の構築

Vue.jsを使ったシステムの改修を行う業務に就いたので、学習のための環境構築をした際のメモ。
幾つものサイトの記事を取りまとめた内容になっており、非常に長いコンテンツですが、これで一通りの設定はできる。

WSLをインストール

Windows上で、Linuxを動かすためには、WSL環境を構築するのが一番楽。
Microsoftの解説ページは、次のページにある。

前提条件として、Windows10のバージョン1903以降、ビルド18362 以上である必要がある。
なお、バージョン1903は、すでに 2020.12.08でサポートが終了している。

ちなみに、本記事を作成している現在の最新のバージョンは、20H2である。

Linux 用 Windows サブシステムを有効にする

Windows上にLinuxディストリビューション（例えば、Ubuntu 20.04.LTS)をインストールするには、まず "Linux 用 Windows サブシステム" オプション機能を有効にする必要がある。

管理者として PowerShell を開き、以下のコマンドを実行する。

PowerShell(管理者権限)

dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart

仮想マシンの機能を有効化する

WSL2をインストールする前に、"仮想マシン プラットフォーム" オプション機能を有効にする必要がある。 この機能を使用するには、コンピューターに仮想化機能が必要になる。

管理者として PowerShellを開き、以下のコマンドを実行する。

PowerShell(管理者権限)

dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart

仮想化機能は、調べた限り、Intel の2008年以降のプロセッサには実装されているようである。
つまり、極端に古いCPUではWSL2を動作させることはできない。AMDについては、最近のCPUでは当然実装されています。

再起動

WSLの機能を有効化するために再起動を行う。

Linux カーネル更新プログラム パッケージをダウンロードする

続いて、Linuxカーネルの更新プログラムパッケージをダウンロードしてインストールする。

x64 マシン用 WSL2 Linux カーネル更新プログラム パッケージ

WSL 2 を既定のバージョンとして設定する

コマンドプロンプトを開いて次のコマンドを実行し、新しい Linux ディストリビューションをインストールする際の既定のバージョンとして WSL 2 を設定する。

コマンドプロンプト

wsl --set-default-version 2

選択した Linux ディストリビューションをインストールする

無償で、インターネット上、情報が多いLinuxディストリビューションは、Ubuntuである。
なので、今回はUbuntu 20.04 LTSをインストールすることにする。

MicrosoftStoreを開いて、検索フィールドに「Ubuntu」として検索します。

検索して見つかった Ubuntu 20.04 LTSをインストールする。

インストールフォルダは、Windowsの圧縮属性や暗号化属性が付与されてないディレクトリにインストールする必要がある。

インストールされるフォルダは、自分の場合、
%LOCALAPPDATA%\Packages\CanonicalGroupLimited.Ubuntu20.04onWindows_79rhkp1fndgsc
というフォルダ（ディレクトリ）だった。

圧縮属性が付与されたディレクトリにインストールしようとしたら、このようなエラーが発生してしまった。

Installing, this may take a few minutes...
WslRegisterDistribution failed with error: 0xc03a001a
Error: 0xc03a001a ?????? ??????????????????????????????????? ???? ??????????????????????????????????? ???? ???????????????????????

Press any key to continue...

圧縮属性の解除の仕方については、「Windows10 圧縮属性 解除」を検索キーワードにして探すと、幾つか解説ページが見つかるはずなのでそれを見て対応をしてください。

新しい Linux ディストリビューションのユーザー アカウントとパスワードを作成する

続いて、新しい Linux ディストリビューションのユーザー アカウントとパスワードを作成する。
この ユーザー名 および パスワード は、インストールする Linux ディストリビューションごとに固有であり、Windows ユーザー名とは関係はない。
また、ユーザーが ユーザー名 および パスワード を作成すると、そのアカウントがディストリビューションの既定のユーザーとなり、起動時に自動的にサインインされる。
このアカウントは、Linux 管理者と見なされ、sudo (Super User Do) 管理コマンドを実行することができる。
Windows Subsystem for Linux で実行されている各 Linux ディストリビューションには、独自の Linux ユーザー アカウントとパスワードがある。 ディストリビューションの追加、再インストール、再設定を行うたびに、Linux ユーザー アカウントを構成する必要がある。

適当なユーザー名を決めて、パスワードを入力する。
【後述しますが、配布用のディストリビューションの元を作成するのならば、dev、userなど当たり障りのないユーザー名にしたほうが良い。】
すると、このような画面になる。

Installing, this may take a few minutes...
Please create a default UNIX user account. The username does not need to match your Windows username.
For more information visit: https://aka.ms/wslusers
Enter new UNIX username: user
New password:
Retype new password:
passwd: password updated successfully
Installation successful!
To run a command as administrator (user "root"), use "sudo <command>".
See "man sudo_root" for details.

Welcome to Ubuntu 20.04.2 LTS (GNU/Linux 5.4.72-microsoft-standard-WSL2 x86_64)

 * Documentation:  https://help.ubuntu.com
 * Management:     https://landscape.canonical.com
 * Support:        https://ubuntu.com/advantage

  System information as of Tue Mar 30 01:08:35 JST 2021

  System load:  0.0                Processes:             8
  Usage of /:   0.4% of 250.98GB   Users logged in:       0
  Memory usage: 8%                 IPv4 address for eth0: 172.24.33.202
  Swap usage:   0%

1 update can be installed immediately.
0 of these updates are security updates.
To see these additional updates run: apt list --upgradable


The list of available updates is more than a week old.
To check for new updates run: sudo apt update


This message is shown once a day. To disable it please create the
/home/user/.hushlogin file.
user@PC:~$

パッケージの更新とアップグレード

ほとんどのディストリビューションには、空または最小のパッケージ カタログが付属している。 パッケージ カタログを定期的に更新し、ディストリビューションの推奨パッケージ マネージャーを使用して、インストールされているパッケージをアップグレードすることを強くお勧めする。
Ubuntu では、apt を使用する。

$ sudo apt update && sudo apt upgrade -y

パスワードを忘れてしまった場合

パスワードを忘れてしまってログインができなくなってしまった場合、
wsl -u root コマンドを実行することで、デフォルトのWSLディストリビューションのパスワードを変更することができる。(パスワード無しでログインすることができ、そのあとパスワードを変更することで対応する。）
デフォルトのWSLディストリビューション以外のディストリビューションのパスワードを変更するには、
wsl -d Debian -u root コマンドを実行する。Debian は、対象のディストリビューション名である。

日本語言語パックのインストール

Ubuntuを日本語化するためには、最初に日本語の言語パック（language-pack-ja）をインストールする。これにより、日本語のメッセージなどが表示できるようになる。以下のコマンドを実行する。

$ sudo apt -y install language-pack-ja

日本語ロケールの設定

続いて、日本語ロケールの設定を行う。ロケールとは、ユーザーインタフェースなどに利用する文字コードや言語、そのエンコード方法、日付や時刻、通貨などの書式、各種リソースなどをまとめておいて、簡単に切り替えるようにするための機能のことです。

$ sudo update-locale LANG=ja_JP.UTF-8

Ubuntuコンソールの再起動

ロケールの変更後は、いったんUbuntuのコンソール（シェル）をexitコマンドや［Ctrl］＋［D］で終了してから、もう一度起動する（Windows OSの再起動は不要）。すると以後はずっと変更されたロケールが使われる。

再起動前

user@PC:~$ locale
LANG=C.UTF-8
LANGUAGE=
LC_CTYPE="C.UTF-8"
LC_NUMERIC="C.UTF-8"
LC_TIME="C.UTF-8"
LC_COLLATE="C.UTF-8"
LC_MONETARY="C.UTF-8"
LC_MESSAGES="C.UTF-8"
LC_PAPER="C.UTF-8"
LC_NAME="C.UTF-8"
LC_ADDRESS="C.UTF-8"
LC_TELEPHONE="C.UTF-8"
LC_MEASUREMENT="C.UTF-8"
LC_IDENTIFICATION="C.UTF-8"
LC_ALL=

再起動後

user@PC:~$ locale
LANG=ja_JP.UTF-8
LANGUAGE=
LC_CTYPE="ja_JP.UTF-8"
LC_NUMERIC="ja_JP.UTF-8"
LC_TIME="ja_JP.UTF-8"
LC_COLLATE="ja_JP.UTF-8"
LC_MONETARY="ja_JP.UTF-8"
LC_MESSAGES="ja_JP.UTF-8"
LC_PAPER="ja_JP.UTF-8"
LC_NAME="ja_JP.UTF-8"
LC_ADDRESS="ja_JP.UTF-8"
LC_TELEPHONE="ja_JP.UTF-8"
LC_MEASUREMENT="ja_JP.UTF-8"
LC_IDENTIFICATION="ja_JP.UTF-8"
LC_ALL=

日本語マニュアルのインストール

日本語のマニュアルドキュメント（manコマンドで表示されるヘルプ。「man pages」ともいう）も導入するため、以下のコマンドを実行する。

$ sudo apt -y install manpages-ja manpages-ja-dev

適当なコマンドのマニュアルページを表示してみる。
ここでは、ls コマンドのマニュアルを表示してみる。

インストール時のロケールに戻す

インストール時のロケールを戻すには、以下のコマンドを実行し、ターミナルを再起動する。

sudo update-locale LANG=C.UTF-8

一時的にロケールを変更するには

デフォルトのロケールをそのままに、一時的に特定のコマンドだけロケールを変更するには、実行するコマンドの前でロケールの指定をすればよい。

$ LANG=en_US.UTF-8 date
Tue 30 Mar 2021 11:09:12 PM JST
$ LANG=en_US.UTF-8 cal
     March 2021
Su Mo Tu We Th Fr Sa
    1  2  3  4  5  6
 7  8  9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31

開発パッケージのインストール

今回は、開発用のLinuxとして仕立てるため、以下のコマンドを実行して開発パッケージをインストールする。主にC言語系のツールがインストールされる。

$ sudo apt -y install build-essential

nvm(Node Version Manger)のインストール

以下のコマンドの実行と、.bash_profileの修正を行う。

$ export NVM_DIR="$HOME/.nvm" && (
  git clone https://github.com/nvm-sh/nvm.git "$NVM_DIR"
  cd "$NVM_DIR"
  git checkout `git describe --abbrev=0 --tags --match "v[0-9]*" $(git rev-list --tags --max-count=1)`
) && \. "$NVM_DIR/nvm.sh"
# 任意のエディタで .bash_profile を編集する。ここではviを使用する
$ vi ~/.bash_profile
# 以下を追加する
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

## エディタを保存して実行する。
source ~/.bash_profile

nvmのバージョンアップ

nvm自身のバージョンアップをするには次のコマンドを実行する。

(
  cd "$NVM_DIR"
  git fetch --tags origin
  git checkout `git describe --abbrev=0 --tags --match "v[0-9]*" $(git rev-list --tags --max-count=1)`
) && \. "$NVM_DIR/nvm.sh"

nvmのインストール検証

正しくインストールできたかどうか、以下のコマンドを実行して確認する。

$ command -v nvm
nvm
$ nvm -v
0.38.0

Node.jsのインストール

LTS(Long Term Support)のバージョンをインストールするには、次のコマンドを実行する。

$ nvm install --lts --latest-npm
$ nvm alias default lts/*

リリースされた全てのNode.jsのバージョンをみる

$ nvm ls-remote

特定のバージョンのNode.jsをインストール

プロジェクトで使用するNode.jsのバージョンが決まっている場合、次のコマンドを実行して特定のバージョンのNode.jsをインストールする。

$ nvm install <version>
$ nvm use <version>

インストールされているNode.jsのバージョンを調べる

インストールされているNode.jsのバージョンを調べる場合、次のコマンドを実行する。

$ nvm ls
->     v14.16.0
default -> lts/* (-> v14.16.0)
iojs -> N/A (default)
unstable -> N/A (default)
node -> stable (-> v14.16.0) (default)
stable -> 14.16 (-> v14.16.0) (default)
lts/* -> lts/fermium (-> v14.16.0)
lts/argon -> v4.9.1 (-> N/A)

lts/boron -> v6.17.1 (-> N/A)
lts/carbon -> v8.17.0 (-> N/A)
lts/dubnium -> v10.24.0 (-> N/A)
lts/erbium -> v12.22.0 (-> N/A)
lts/fermium -> v14.16.0

プロジェクトで使用するNode.jsのバージョンを固定する

プロジェクトで使用するNode.jsのバージョンを固定するには、プロジェクトに .nvmrc という名のがいるを置けばよい。

$ mkdir new_project && cd new_project
$ echo '14.16.0' > .nvmrc
$ nvm use

npmのバージョンを調べる

npm のバージョンを調べるには、以下のコマンドを実行します。

$ npm --version

npmのバージョンアップをする。

npm のバージョンを上げるには、以下のコマンドを実行します。

$ npm install -g npm

changed 14 packages, and audited 253 packages in 13s

11 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Yarnをインストールする

Yarnは、npmに代わるパッケージ管理ソフトウェアで、npmと互換性があるそうです。
インストールするには、以下のコマンドを実行します。

$ npm install -g yarn

Yarn のバージョンを調べる

$ yarn --version

yarnをバージョンアップする

バージョンアップするには、intall コマンドを実行すればよい。

$ npm install -g yarn

グローバルパッケージの更新

グローバルパッケージを更新するには、以下のコマンドを実行します。

$ npm update -g

古くなっているグローバルパッケージが何か調べるには、以下のコマンドを実行します。

$ npm outofdated -g

環境構築したディストリビューションをパッケージングする

環境構築は、一人で開発する場合には仕方がないので自分でポチポチとコマンドを打って構築するものですが、大規模のプロジェクト、かつ大人数の場合、環境構築についての工数も馬鹿になりません。

すぐに作業が実施できるように立ち上げたいのに、個別に作成してもらうのは、時間の無駄です。
また、環境構築の時期によって「最新」というのがネックになってそれぞれの開発環境でのバージョン違いが発生してしまうことも無視できません。

こんなニーズのために、WSLではディストリビューションのエクスポート機能というものが準備されています。

以下のコマンドを実行すると、Linuxディストリビューションをエクスポートすることができます。
まず、インストールされているLinuxディストリビューション名を調べるため、wsl --list --all コマンドを実行します。
次に、インストールされているLinuxディストリビューションを wsl --export コマンドでtar形式でまとめます。

# インストールされているLinuxディストリビューション名を表示する
> wsl --list --all
Linux 用 Windows サブシステム ディストリビューション:
docker-desktop-data (既定)
CentOS7
Ubuntu-20.04
docker-desktop

# インストールされているLinuxディストリビューションをエクスポートする
# wsl --export <ディストリビューション名> [ファイル名]
> wsl --export Ubuntu-20.04 .\Ubuntu.tar
> dir .\Ubuntu.*
 ドライブ C のボリューム ラベルがありません。
 ボリューム シリアル番号は 6043-8216 です

 C:\Users\user のディレクトリ

2021/04/01   21:57     1,560,565,760 Ubuntu-20.04.tar
2021/04/01   22:09       497,429,665 Ubuntu-20.04.tar.7z
2021/04/01   22:08       636,051,424 Ubuntu-20.04.zip
               3 個のファイル       2,694,046,849 バイト
               0 個のディレクトリ  82,597,548,032 バイトの空き領域

圧縮されていない状態で、1.45GB　ありました。
Windows標準のZip圧縮した場合、606MB。圧縮率が高いとされる7zipの場合、474MBまで圧縮できます。
606MBならば共有サーバーに配置してもそれほどでもありません。
7zipで圧縮した場合にはさらに容量を削減できますが、解凍するためのツールをインストールさせる必要があるので、別の課題が発生します。

もちろん、使用しているPCを移行する場合や、一度作成したLinuxディストリビューションを他のPCに移植する際にも使えます。配布時にだけ活用するわけではありません。

Linuxディストリビューションをインポートする

プロジェクトで共有されるディストリビューションのtarファイルが作成できたら、インポートできるかどうか確認する。
展開するディレクトリは、前述したとおり、Windowsの圧縮属性や暗号化属性がついたディレクトリには展開することはできない。
ディストリビューションをインポートするには、以下のコマンドを実行する。

# mkdir %LOCALAPPDATA%\Packages\(任意のディレクトリ名)
# wsl --import <ディストリビューション名> %LOCALAPPDATA%\Packages\(任意のディレクトリ名) <インポートするtarファイル名>
# 例
> mkdir %LOCALAPPDATA%\Packages\Ubuntu-20.04
> wsl --import Ubuntu %LOCALAPPDATA%\Packages\Ubuntu-20.04 Ubuntu-20.04.tar --version 2

インストールされているディストリビューションを確認する

以下のコマンドを実行してインストールされているディストリビューションを確認する。
先ほどインポートしたディストリビューション名が表示されていたら成功です。

> wsl --list --all -v
  NAME                   STATE           VERSION
* docker-desktop-data    Running         2
  CentOS7                Stopped         2
  Ubuntu                 Stopped         2
  Ubuntu-20.04           Stopped         2
  docker-desktop         Running         2

ディストリビューションを実行する

ディストリビューションを実行するには、以下のコマンドを実行します。

> wsl -d Ubuntu
Welcome to Ubuntu 20.04.2 LTS (GNU/Linux 5.4.72-microsoft-standard-WSL2 x86_64)

 * Documentation:  https://help.ubuntu.com
 * Management:     https://landscape.canonical.com
 * Support:        https://ubuntu.com/advantage

  System information as of 2021年  4月  1日 木曜日 23:11:16 JST

  System load:  0.01               Processes:             8
  Usage of /:   0.6% of 250.98GB   Users logged in:       0
  Memory usage: 8%                 IPv4 address for eth0: 172.21.117.139
  Swap usage:   0%

0 updates can be installed immediately.
0 of these updates are security updates.



This message is shown once a day. To disable it please create the
/root/.hushlogin file.
#

気づいた点

ディストリビューションをエクスポートした結果、/home ディレクトリにあまり見せたくないユーザー名があることに気づいた。
エクスポートをして環境を配布する場合、最初に作成するユーザー名に dev や user など当たり障りのない名前で作成すべきである。

root@YS-PC:/home# ls -l
合計 4
drwxr-xr-x 5 yasu yasu 4096  3月 31 03:27 yasu

ルートのパスワードの変更

エクスポートしたLinuxディストリビューションのルートのパスワードを変更する。
エクスポート元のrootのパスワードは問われない。

# sudo passwd root
root@YS-XX:/home# sudo passwd root
新しいパスワード:
新しいパスワードを再入力してください:
passwd: パスワードは正しく更新されました

開発者がつかうユーザーの作成

普段、開発者が使用するLinuxアカウントを作成する。
アカウント名は、メールアドレスの@より左で特殊文字がないものとするのが良い。
以下のサンプルでは、dev というユーザーを作成している。適宜修正のこと。

root@XX-PC:/home# adduser dev
ユーザー `dev' を追加しています...
新しいグループ `dev' (1001) を追加しています...
新しいユーザー `dev' (1001) をグループ `dev' に追加しています...
ホームディレクトリ `/home/dev' を作成しています...
`/etc/skel' からファイルをコピーしています...
新しいパスワード:
新しいパスワードを再入力してください:
passwd: パスワードは正しく更新されました
dev のユーザ情報を変更中
新しい値を入力してください。標準設定値を使うならリターンを押してください
        フルネーム []:
        部屋番号 []:
        職場電話番号 []:
        自宅電話番号 []:
        その他 []:
以上で正しいですか? [Y/n] Y

自分が使うユーザーにroot権限を与える

自分がつかうPCなのに管理者権限が無いのは悲しいです。
以下のコマンドを実行して、管理者権限を与える。
dev と入力しているところは、例なので、実際には自分のLinuxアカウント名を指定する。

# sudo gpasswd -a dev sudo
ユーザ dev をグループ sudo に追加

デフォルトでログインするユーザーを変更

> vi /etc/wsl.conf
[user]
# default=[デフォルトユーザー名]
default=dev

ディストリビューションを再起動すると、反映される。

WSLが使用するメモリの制約を設定する。

WLSが使用するメモリの制約を設定するには、設定ファイルを作成する。
%USERPROFILE%.wslconfig が設定ファイルとなる。
WSLが使用するメモリについて制約を設定するには、以下の設定を行う。

%USERPROFILE%\.wslconfig

[wsl2]
memory=4GB # Limits VM memory in WSL 2 to 4 GB

Visual Studio Codeをインストール

フロントエンド開発を行うために必要なツールとして、Visual Studio Code をインストールする。

配布サイトは、次の通りです。

Windows版のUserインストーラをダウンロードし、インストールする。
Userインストーラも32bit版と64bit版と別れていますが、一般的には64bit版のWindows10で稼働しているはずなので、64bit版をインストールする。

インストールする際のオプションとして、追加タスクのページで、
「デスクトップ上にアイコンを作成するにチェックを入れてインストールしたほうが良い。

Visual Studio Codeを起動する

デスクトップに作成されたショートカットをダブルクリックする。
もしくはインストーラーが起動したVisual Studio Codeが起動したと思います。

拡張機能をインストールする

フロントエンド開発(JavaScriptを使った開発)を実施するににあたり、便利な拡張機能をインストールする。

はじめに、日本語表示する拡張機能をインストールする。
拡張機能をインストールするには、拡張機能のタブをクリックし、検索フィールドに japan と入力する。すると、Japanese Language Pack for Visual Studio Code(日本語言語パック)が先頭に現れます。install のボタンをクリックしてインストールし、Visual Studio Codeを再起動するようにうながされるので、再起動してください。

再起動するとユーザーインタフェースが日本語化されます。

以降、１つ１つキャプチャをするのが面倒なので省略しますが、

• Visual Studio IntelliCode
• ESLint
• Prettier
• Bracket Pair Colorizer 2
• GitLense
• Git History
• Rainbow CSV
• Output Colorizer
• Log File Highlighter
• Path Intellisense
• JavaScript(ES6)code snippetes
• Node.js Extension Pack
• Debugger for Chrome
• npm Intellisense
• vscode-icons
• Vetur
• HTML Snippet
• npm
• Git Graph

などの拡張機能をインストールします。

人気の高い(定番)の拡張機能は、検索フィールドに「@popular」という文字列を入れるとフィルタされます。
おすすめの拡張機能は、検索フィールドに「@featured」という文字列を入れるとフィルタされます。

入力するのが面倒な場合、フィルタのアイコンをクリックするとよいです。

Git for Windows

GitLenseをインストールしたら、gitが見つからないと怒られました。

Windows上にVSCをインストールした場合、Gitクライアントをインストールする必要があるようです。

Git for Windows は、以下のサイトで配布されています。

Git for Windowsをインストールする際にデフォルトのエディタを指定する部分があるのですが、自分の場合、サクラエディタを使用しているので、このように設定しました。

サクラエディタを常駐する形だとエラーが発生しました。
常駐はしないように設定する必要があります。

その他の設定は、デフォルトのままとしました。

TortoiseGitのインストール

Windows上にGitクライアントをインストールしたので、せっかくですのでTortoiseGitもインストールします。

配布サイトは、以下です。

日本語化パッチもダウンロードしてインストールします。
日本語化パッチをインストール後に、Configure TortoiseGit to use this language にチェックを入れて、完了ボタンを押す必要があります。

自分の場合、TortoiseGit をインストールする際に、Languageの設定がEnglishしか表示が無かったので、再度 TortoiseGitを再インストールすることで、このように 初期設定ウィザードで日本語が選択できるようになりました。

Git.exeを設定の画面では、今すぐチェックボタンをクリックしました。
自動で、Git.exeが検索されるはずです。

ユーザー情報の設定は、今はこの設定を保存しないにチェックを入れて先に進めます。

認証/資格情報ストアについては、デフォルトのままで完了ボタンをクリックします。

UbuntuのGitクライアント

WSL上のUbuntuでは、Gitクライアントはすでにインストール済みでした。WSL上のUbuntuではなく通常のUbuntuをインストールした場合、インストールの形態によっては、Gitクライアントがインストールされていない場合があります。
そのような場合は、以下のコマンドを入力してGitクライアントをインストールします。

$ sudo apt install git -y

Gitクライアントの設定

Gitクライアントを設定します。ユーザー名とメールアドレスの登録をします。
ユーザー名は、コミット者として利用されます。メールアドレスは、連絡用に使用されます。

$ git config --global user.name "Test User"
$ git config --global user.email "[e-mail]" 

もしも、特定のプロジェクトでは違う設定をしたいのであれば、
--global オプションを付与せずに設定を行えばよいです。

設定の確認

設定の確認を行いたいのであれば、以下のコマンドを実行する。

$ git config --list

設定ファイルは、Ubuntuの場合、自分のホームディレクトリの .gitconfig に保存されており、
Windowsの場合、%USERPROFILE%.gitconfig に保存されています。

WindowsTerminalのインストール

WSL上のUbuntuを制御するために、Windows Terminalをインストールすると、いろいろとはかどります。（立ち上がっていないLinuxディストリビューションを自動で立ち上げることができるなど）

WindowsTerminal は、Microsoft Storeにて配布されています。
Microsoft Storeを開いて、検索フィールドに、WindowsTerminalと入力して探します。

プレビュー版と安定板の２種類あります。安定版をインストールしましょう。

WindowsTerminalについては、細かなカスタマイズができます。
別途、記事にしたいと思っています。

おわりに

とりあえず、WSLを使ったフロントエンド開発環境の構築についての記事についてはひとまずこれで終わりにしたいと思います。

そのほか、何かインストールや設定をすべきだと思ったら、適宜更新をしたいと思っています。