- 本記事の目標
- 本記事の対象読者
- Webアプリがどういう仕組みで動いているのか知りたい人
- ReactとNode.jsでWebアプリを作ってみたい人
- （WSL2を使ってWindows環境でアプリ開発を行いたい人）
こんにちは、mayaです。今回は以下の構成で基本のWebアプリを作成していきたいと思います。
- フロントエンドをReact
- バックエンドをNode.js
- データベースをMySQL
今回作るアプリの完成形としては「アプリから入力したデータを保存、必要に応じて検索・表示できるメモアプリ」のようなものをイメージしてください。
全体を通して完全初心者向けの解説となっているため、随所で解説がクドイですが、何卒ご了承ください。
環境
今回使用している環境は以下の通りです。
- Windows11
- WSL2
- Ubuntu 20.04.4 LTS
- Node.js 16.14.2
- MySQL 333
- npm 8.5.0
環境構築
本章では、WSL、Ubuntu、Node.js、MySQLの環境をそれぞれ整えていきます。
- WSLを導入する
- Ubuntuを導入する
- Node.jsとnpmを導入する
- MySQLを導入する
※1～3については、Microsoftの公式ドキュメントを参照することで、より正確かつ詳しい説明を確認できます。
1．WSLを導入する
前提条件として、Windows10 バージョン2004以降（ビルド 19041 以降）またはWindows11を実行している必要があります。バージョンとビルド番号を確認するには、[Windowsロゴキー＋Rキー]を押して、「winver」と入力してOKを押します。
問題がなければWSLを導入していきます。
PowerシェルまたはWindowsコマンドプロントに次のコマンドを入力してください。
wsl --installこのコマンドを実行すると、必要なオプションコンポーネントの有効化、既定の設定、Linuxディストリビューション（規定ではUbuntu）のインストールなどが自動で行われます。
WSLの導入はこれで完了です。簡単でしたね。
もし、上記のコマンドを実行しても機能しない場合は、すでにWSLがインストールされている可能性があります。次章を参考に解決してください。
また、より正確な説明・解説についてはMicrosoftの公式ドキュメントをご覧ください。
WSL（Windows Subsystem for Linux）とは、Linux環境をWindows上で"直接"利用するための機能です。
なぜWindows上でわざわざLinux環境を利用する必要があるかというと、PythonやPHPやRubyなどの人気プログラミング言語のほとんどは、Linux上で動作することを前提として作られているからです。今回使用するNode.jsも例外ではありません。
要するに、Windowsユーザーがアプリ開発をしたいなら、WSLを導入したほうがいいですよ※1。というお話です。
※1 WSL以外にも方法はありますが、WSLの利用を推奨します
2．Ubuntuを導入する
ほとんどの方は、先ほどwsl --installのコマンドを実行した際に、規定のLinuxディストリビューションであるUbuntuがインストールされているため、本章は読み飛ばして構いません。
しかし、コマンドを実行しても機能しなかった場合は、既にWSLがインストールされている可能性があります。
次のコマンドをPowerシェルまたはWindowsコマンドラインで実行し、既に使用可能なディストリビューションがあるか確認してください。
wsl --listt --online
一覧に「Ubuntu」がない場合は、次のコマンドを実行してUbuntuをインストールしてください。
wsl --install -d ubuntu
3．Node.jsとnpmを導入する
本章ではNode.jsとnpmを導入していきますが、まずはその前に「nvm（node version manager）」をインストールします。
アプリを作る場合は通常それ単独で完結せず、サードパーティ（外部）のライブラリをいくつも読み込んで、それらの特定のバージョンが相互に依存し合って成り立っています。（これをライブラリの「依存関係」という）
それらのバージョンの依存関係を管理するのがnpmの役割の"1つ"です。
1．それでは、先ほど導入したUbuntuのコマンドライン（WSL）を開いてください。
WSLを起動するには、Windowsターミナルにて次のコマンドを入力します。
wsl
2．既にNode.jsやnpmがインストールされていないか確認します。
もしインストールされていた場合は、以下のサイトを参考に、既存のNode.jsおよびnpmを削除することをおススメします。（インストールの種類が異なると、予期せぬトラブルが行る可能性があるため）
node -v
npm -v
3．cURLというツールをインストールします。
cURLは、コマンドラインを使ってインターネットからコンテンツをダウンロードするために使用するツールです。
sudo apt-get install curl
4．次のコマンドを実行して、nvmをインストールします。
この際、あらかじめGithubのプロジェクトページを確認し、コマンドがnvmの最新バージョンを指定しているか確かめてください。（2022年6月現在ではv0.39.1が最新でした）
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
5．nvmのインストールを確認します。
次のコマンドを実行して、コマンドが見つかりませんと表示される場合は、一度Windowsターミナルを閉じてから4．の作業をやり直してください。
command -v nvm
ちなみに、次のコマンドを実行することで、現在インストールされているNode.jsのバージョンを確認できます。無論、現段階では何も表示されないはずです。
nvm ls
6．今回は、最新バージョンと安定バ―ション（LTS）の2種類のNode.jsをインストールしてみます。
アプリ開発で実際に使用するのは安定バージョンですが、もう片方は、この後の手順で「Node.jsのバージョンを切り替える方法」について学ぶために使用します。
nvm install --lts
nvm install nodeなお、上記コマンドを実行することで、npmやnpxもセットでインストールされます。
UbuntuなどのOSをインストールする際、最新版とLTS版のどちらかを選ぶ場合、通常はLTSを選ぶべきでしょう。LTS版は最新版に比べてバグが少なく、安定した運用を実現できます。
7．次のコマンドで、先ほどインストールした2つのバージョンを確認します。
nvm ls僕の場合は、v16.14.2とv18.0.0がインストールされているのが分かります。
また、次のコマンドでnpmがインストールされていることも確認できます。
npm -v
8．最後にNode.jsのバージョンを切り替える方法について紹介します。（試さなくても大丈夫です）
Node.jsのバージョンを切り替えたいときは、当該プロジェクトディレクトリに移動して、次のコマンドを実行することで最新バージョンに切り替えることができます。
nvm use node
あるいは、次のコマンドを実行することで安定バージョンに切り替えたり、バージョンを指定して切り替えることができます。
nvm use --lts
nvm use v8.2.1
使用可能なバージョンは、次のコマンドで確認できます。
nvm ls-remote
4．MySQLを導入する
ここでは、MySQLのインストールと初期設定を行います。
インストールについては、Microsoftの公式ドキュメントを参照することでより正確かつ詳細な情報を確認できます。
MySQLのインストール
1．WSLターミナル（Ubuntu）を開きます。
wsl
2．Ubuntuパッケージを更新します。
sudo apt update
3．MySQLをインストールします。
sudo apt install mysql-server
4．MySQLのバージョンを確認します。
mysql --version
MySQLの初期設定
1．次のコマンドを実行して、MySQLサーバーを起動します。
sudo /etc/init.d/mysql start
2．セキュリティスクリプトプロンプトを開始します。
sudo mysql_secure_installationこのコマンドを実行すると、いくつかの質問が表示されますので適宜答えてください。
質問内容は次の通りです。（カッコ内は僕の回答例です）
- MySQLのパスワードの強度をテストするために使用できる、パスワードの検証プラグインを設定するか？（No）
- MySQLルートユーザーのパスワードを設定し、匿名ユーザーを削除するか？（No）
- ルートユーザーがローカルとリモートの両方でログインできるようにするか？（Yes）
- テストデータベースを削除するかどうか（No）
- 特権テーブルを直ちに再読み込みするかどうか（No）
3．MySQLプロンプトを開きます。
sudo mysql -u root -p初期のrootユーザーのパスワードは空白です。
4．他プログラム（例えばNode.jsなど）からデータにアクセスするための、接続設定を行います。
ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '<パスワード>';<パスワード>の部分は任意の文字列に置き換えてください。設定したパスワードは今後必ず使用するので忘れないようにしてください。
上から順に、起動～停止までの流れです。
- 状態確認：sudo service mysql status
- 起動：sudo service mysql start
- MySQLを開く：sudo mysql
- MySQLを閉じる：exit
- 停止：sudo service mysql stop
MySQLにデータを挿入する
この後に使用するデータを挿入していきます。
手順は次の通りです。
sudo service mysql startでMySQLを起動sudo mysqlでMySQLを開くSHOW databases;でデータベースの一覧確認CREATE database memo_app;でデータベースを作成GRANT ALL ON memo_app.* TO 'root'@'localhost';で権限設定USE memo_app;でデータベースを選択SHOW tables;でテーブル確認CREATE TABLE users (id INT AUTO_INCREMENT, name TEXT,email varchar(255), pass varchar(255), PRIMARY KEY (id));でusersテーブル作成DESCRIBE usersでテーブル構成確認INSERT into users(name,email,pass) values('maya','maya@gmail.com','password');でデータ挿入SELECT * FROM users;でデータ確認- 9の手順を何度か繰り返し、異なるデータをいくつか挿入してください。
さらっと紹介しましたが、5番の権限設定は忘れずに必ず行ってください。権限設定ができていないと、外部のプログラムからMySQLに接続することができず、後々困りますので。
小まとめ
以上で環境構築は完了です。
次ページからは、Webアプリの作成に入ります。
