前回は、PHPとReact(TypeScript)を使って、簡単な掲示板アプリを作成しました。

今回は、そこから発展させて、勤怠管理アプリを作っていきたいと考えています。

PHPは、フレームワークを使わず作成していましたが、今回は、

ルーティング、認証、セッション管理、キャッシュ、メール送信など、多くのWebアプリケーションに必要な機能が備わっているphpのフレームワークであるLaravelと

React(typescript)のフレームワークであるサーバーサイドのAPIエンドポイントを簡単に構築可能で、バックエンドとフロントエンドを統合したフルスタック開発が可能なNext.jsを使用して、

作成していきたいと考えています。

まずは、アプリ名を「attendance」にするので、

ターミナルで、

$ mkdir attendance

※ $マークは、コマンドライン(ターミナル)での入力を意味しているので、無視してください。

と入力してください。

そして、attendanceディレクトリ内に勤怠管理アプリを作成するので、ターミナルにて、

$ cd attendance

とコマンドを打って、入ってください。

Laravelを使うにはPHPやComposerが必要です。

環境が整っていない場合は、こちらのサイトを利用してください。

macの場合だと、

Homebrewを使ったインストールをしてみるといいです。

Homebrewがインストールされていない場合、以下を実行してインストールします。

$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

その後、HomebrewでPHPをインストールするには、

$ brew install php

と入力してください。

$ php -v

と入力して、

上の画像のようなメッセージが帰ってくれば、インストール成功です。

1. Composerのインストール方法

全OS共通手順

Composerインストールスクリプトのダウンロード:

ターミナルまたはコマンドプロンプトで以下を実行:

$ php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"

スクリプトの検証（オプション）:

インストールスクリプトが改ざんされていないことを確認

$ php -r "if (hash_file('sha384', 'composer-setup.php') === 'インストールページで確認したハッシュ値') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"

Composerをグローバルにインストールしたいので、

$ php composer-setup.php --install-dir=/usr/local/bin --filename=composer

とコマンドを打ってください。

インストールスクリプトの削除をするために、

$ php -r "unlink('composer-setup.php');"

と入力してください。

$ composer -v

と入力して、

上の画像のようなメッセージが出れば、インストール成功です。

今回は、プロジェクト名を「laravel」にするので、

$ composer create-project --prefer-dist laravel/laravel laravel(プロジェクト名)

と、コマンドを打ってください。すると、

上の画像のようなメッセージが表示されると思います。

このようなメッセージが出れば成功です。

それでは、Laravelを動かしてみましょう。

プロジェクトディレクトリに移動

$ cd laravel

アプリケーションキーの生成

$ php artisan key:generate

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

必要に応じて、以下のコマンドでデータベーススキーマを作成します。

$ php artisan migrate

サーバーの起動

Laravelの開発サーバーを起動します。

$ php artisan serve

それでは、ブラウザで、http://localhost:8000と入力して、

という画面が出れば、成功です。

2. Next.jsプロジェクトを作成

Next.jsはNode.jsを必要とします。

以下の手順でNode.jsをインストールしてください：

Node.js公式サイトから最新のLTS（長期サポート版）をダウンロードしてインストールします。

インストール後、以下のコマンドでインストール確認を行います。

$ node -v
$ npm -v

プロジェクトを作成するには、以下のコマンドを実行します

$ npx create-next-app@latest frontend

コマンドの実行中に以下の選択肢が表示される場合があります。（2025年現在の例）

TypeScriptを使用しますか？
Yes または No を選択。
ESLintを設定しますか？
コード品質チェックのため Yes を選択することを推奨。
srcディレクトリを使用しますか？
プロジェクト構造を整理するため Yes を選択することを推奨。
importの構文にエイリアスを設定しますか？
必要であれば Yes を選択。

上のような画像が表示されれば、インストール成功です。

プロジェクトが作成されると、次のディレクトリ構造が生成されます。

frontend/
├── README.md
├── node_modules/
├── package.json
├── public/
├── src/ (srcディレクトリを選択した場合)
│   ├── pages/
│   ├── styles/
│   └── ...
└── .next/

それでは、Next.jsアプリケーションを動かしてみましょう。

このNext.jsアプリケーションを実行するには、以下のコマンドを実行します。

$ npm run build

このコマンドが成功すると、.next ディレクトリにプロダクションビルドが作成されます。

ビルドが成功した後に、

$ npm start

というコマンドを実行します。

そして、ブラウザで、http://localhost:3000と入力して、

という画面が出れば、成功です。

次は、手動ではなく、Dockerを起動させて、LEMP環境を作り、フロントエンド、バックエンド両方のブラウザを動かせるようにしていきます、↓