セットアップ

Express で TODO アプリを実装しよう の完成形です。

ハッカソンのテンプレで使ってください。

チーム開発する場合は代表者がダウンロードして、GitHub でリポジトリを作成し、チームメンバーに共有してください。

前提条件

• Node.js 22.12.0 以降
• Puppeteer
• MySQL 8.0.0 以降
• Git

3. データベースに接続できるようにします

1. .env.sample のファイル名を .env に変更する

.env ファイルを使って環境変数を設定します。

以下のコマンドを実行して .env.sample のファイル名を .env に変更しましょう。

mv .env.sample .env

2. .env ファイルの DATABASE_URL に MySQL に作成したユーザー名とパスワードを入力する

VS Code で .env ファイルを開きます。

code .env

中身は以下のようになっています。

DATABASE_URL="mysql://xxxxxx:xxxxxx@localhost:3306/todo_app_dev"
...

ファイル内の DATABASE_URL を実際のユーザー名とパスワードを使って書き換えます。

# フォーマット
DATABASE_URL="mysql://{ユーザー名}:{パスワード}@localhost:3306/todo_app_dev"
# 例
DATABASE_URL="mysql://ninjawanko:password@localhost:3306/todo_app_dev"

※ Codespaces を利用している場合は以下のように設定してください。

DATABASE_URL="mysql://path_user:password@127.0.0.1:3306/todo_app_dev"

3. .env.test.sample のファイル名を .env.test に変更する

以下のコマンドを実行して .env.test.sample のファイル名を .env.test に変更しましょう。

mv .env.test.sample .env.test

4. .env.test ファイルの DATABASE_URL に MySQL に作成したユーザー名とパスワードを入力する

VS Code で .env.test ファイルを開きます。

code .env.test

先ほどと同様に DATABASE_URL を実際のユーザー名とパスワードに置き換えます。

# フォーマット
DATABASE_URL="mysql://{ユーザー名}:{パスワード}@localhost:3306/todo_app_test"
# 例
DATABASE_URL="mysql://ninjawanko:password@localhost:3306/todo_app_test"

※ Codespaces を利用している場合は以下のように設定してください。

DATABASE_URL="mysql://path_user:password@127.0.0.1:3306/todo_app_test"

4. サーバーを起動し、ブラウザからアクセスします

データベースの設定ができたら、以下を実行してサーバーを起動してみましょう。

1. パッケージのインストール

必要なパッケージをインストールします。

npm clean-install

2. データベースのマイグレーション

ローカルのデータベースにプロジェクトのデータベース情報を反映します。

npm run db:migrate

実行後 MySQL にログインするとデータベースとテーブルが作成されていることが確認できます。

$ mysql -u <ユーザー名> -p
# Codespaces を利用している場合は以下 (パスワード: password )
$ mysql -u path_user -h 127.0.0.1 -p

mysql> show databases;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| mysql              |
| performance_schema |
| sys                |
| todo_app_dev       |
+--------------------+

テスト用のデータベースはテスト実行時に作成されます。

確認ができたら、exit で MySQL からログアウトします。

mysql> exit

※ npm run db:reset コマンドでデータベースを初期状態にリセットできます。リセットしたいタイミングで随時実行してください。

3. サーバーの起動

サーバーを起動しましょう。

npm run start

以下の URL にアクセスすると Web ページが確認できます。

• http://localhost:8000/

起動したサーバーは Ctrl + c で停止できます。

※ Codespaces を利用している場合は自動で転送されるため、ポート タブから 8000 番ポートの 転送されたアドレス にアクセスしてください。