ReactとNode.jsとMySQLで作る基本のWebメモアプリ

 

  • 本記事の目標
    ゼロからWebアプリを作成し、データの入力・保存・検索・表示ができるようになる

     

    • 本記事の対象読者
      • 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の環境をそれぞれ整えていきます。

      1. WSLを導入する
      2. Ubuntuを導入する
      3. Node.jsとnpmを導入する
      4. MySQLを導入する

      ※1~3については、Microsoftの公式ドキュメントを参照することで、より正確かつ詳しい説明を確認できます。

      Node.jsをWSL2にインストール|Microsoft Docs

      1.WSLを導入する

      前提条件として、Windows10 バージョン2004以降(ビルド 19041 以降)またはWindows11を実行している必要があります。バージョンとビルド番号を確認するには、[Windowsロゴキー+Rキー]を押して、「winver」と入力してOKを押します。

       

      問題がなければWSLを導入していきます。

      PowerシェルまたはWindowsコマンドプロントに次のコマンドを入力してください。

      wsl --install

      このコマンドを実行すると、必要なオプションコンポーネントの有効化、既定の設定、Linuxディストリビューション(規定ではUbuntu)のインストールなどが自動で行われます。

       

      WSLの導入はこれで完了です。簡単でしたね。

      もし、上記のコマンドを実行しても機能しない場合は、すでにWSLがインストールされている可能性があります。次章を参考に解決してください。

      また、より正確な説明・解説についてはMicrosoftの公式ドキュメントをご覧ください。

      》WSLのインストール|Microsoft Docs

       

      WSLとは何か?なぜ必要か?

      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

       

      Windowsターミナルを使ってみよう
      現段階では、WindowsコマンドプロントやPowerシェルで作業している方が大半だと思いますが、より便利な「Windowsターミナル」の利用も検討してみてください。
      Windowsターミナルを使うと、一度に複数のタブを実行できたり、Linuxコマンドライン、Windowsコマンドプロント、Powerシェル、Azure CLIなどを同時に起動してすばやく切り替えることができますよ。
      また、以降の章ではWindowsターミナルを利用している前提でお話していきます。(Windowsコマンドプロント、Powerシェルのままでも支障はありません)

      3.Node.jsとnpmを導入する

      本章ではNode.jsとnpmを導入していきますが、まずはその前に「nvm(node version manager)」をインストールします。

      nvmとは?
      nvmはNode.jsのバージョンを管理するためのツールです。これを導入することで、必要に応じてNode.jsを最新あるいは過去のバージョンに適宜切り替えることができるようになります。
      npmとは?
      npm(node package manager)とは、ライブラリ間の依存関係を管理するためのパッケージ管理システムです。もともとはNode.jsのためのシステムでしたが、現在ではフロントエンド用のパッケージの方が多く公開されています。(Reactのライブラリもnpmを使ってインストールする)
      アプリを作る場合は通常それ単独で完結せず、サードパーティ(外部)のライブラリをいくつも読み込んで、それらの特定のバージョンが相互に依存し合って成り立っています。(これをライブラリの「依存関係」という)
      それらのバージョンの依存関係を管理するのがnpmの役割の"1つ"です。

       

      1.それでは、先ほど導入したUbuntuのコマンドライン(WSL)を開いてください。

      WSLを起動するには、Windowsターミナルにて次のコマンドを入力します。

      wsl

       

      2.既にNode.jsやnpmがインストールされていないか確認します。

      もしインストールされていた場合は、以下のサイトを参考に、既存のNode.jsおよびnpmを削除することをおススメします。(インストールの種類が異なると、予期せぬトラブルが行る可能性があるため)

      node -v
      npm -v

      Node.jsを削除する方法|askubuntu.com

       

      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もセットでインストールされます。

      LTS(安定版)とは何か?
      LTS(Long Term Support)とは、通常よりも長期間のサポートを保証するという意味です。
      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の公式ドキュメントを参照することでより正確かつ詳細な情報を確認できます。

      データベースの概要|Microsoft Docs

      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

      このコマンドを実行すると、いくつかの質問が表示されますので適宜答えてください。

      質問内容は次の通りです。(カッコ内は僕の回答例です)

      1. MySQLのパスワードの強度をテストするために使用できる、パスワードの検証プラグインを設定するか?(No)
      2. MySQLルートユーザーのパスワードを設定し、匿名ユーザーを削除するか?(No)
      3. ルートユーザーがローカルとリモートの両方でログインできるようにするか?(Yes)
      4. テストデータベースを削除するかどうか(No)
      5. 特権テーブルを直ちに再読み込みするかどうか(No)

       

      3.MySQLプロンプトを開きます。

      sudo mysql -u root -p

      初期のrootユーザーのパスワードは空白です。

       

      4.他プログラム(例えばNode.jsなど)からデータにアクセスするための、接続設定を行います。

       ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '<パスワード>';

      <パスワード>の部分は任意の文字列に置き換えてください。設定したパスワードは今後必ず使用するので忘れないようにしてください。

       

      MySQLの基本操作

      上から順に、起動~停止までの流れです。

      • 状態確認:sudo service mysql status
      • 起動:sudo service mysql start
      • MySQLを開く:sudo mysql
      • MySQLを閉じる:exit
      • 停止:sudo service mysql stop

      MySQLにデータを挿入する

      この後に使用するデータを挿入していきます。

      手順は次の通りです。

      1. sudo service mysql startでMySQLを起動
      2. sudo mysqlでMySQLを開く
      3. SHOW databases;でデータベースの一覧確認
      4. CREATE database memo_app;でデータベースを作成
      5. GRANT ALL ON memo_app.* TO 'root'@'localhost';で権限設定
      6. USE memo_app;でデータベースを選択
      7. SHOW tables;でテーブル確認
      8. CREATE TABLE users (id INT AUTO_INCREMENT, name TEXT,email varchar(255), pass varchar(255), PRIMARY KEY (id));でusersテーブル作成
      9. DESCRIBE usersでテーブル構成確認
      10. INSERT into users(name,email,pass) values('maya','maya@gmail.com','password');でデータ挿入
      11. SELECT * FROM users;でデータ確認
      12. 9の手順を何度か繰り返し、異なるデータをいくつか挿入してください。

       

      さらっと紹介しましたが、5番の権限設定は忘れずに必ず行ってください。権限設定ができていないと、外部のプログラムからMySQLに接続することができず、後々困りますので。

      小まとめ

      以上で環境構築は完了です。

      次ページからは、Webアプリの作成に入ります。