はじめに
弊社ではWebアプリを開発する際によくReactとLaravelを使用します。プログラミング初学者の方でもReactを触る機会はあるかもしれませんが、今からLaravelで開発してみようという方は少ないのではないかなと思います。
良い機会ですので今回はReactとLaravelを使った簡単なWebアプリを題材に
・Laravelの環境構築
・Reactの導入
・テーブルの作成
・APIの作成
・画面の作成
を一連の流れでご紹介できればと思います。
初回は「Laravelの環境構築」についてご説明します。
前提条件
今回の環境構築ではDockerを使用するので事前にDocker Desktopをインストールしておいてください。
環境構築
前置き
Dockerで環境構築と聞くと急に難易度が上がったように感じるかもしれません。ですが、有難いことにLaravelには公式が提供している「Laravel Sail」という軽量な開発環境があります。こちらを使えばなんとコマンド1つで環境構築が可能です。
今回はこちらのLaravel Sailを使ってサクッと環境を構築したいと思います。
プロジェクトの作成
まずはプロジェクトを作成します。先ほどお話しした「コマンド1つで環境構築が可能」の部分になります。手順はとてもシンプルで以下のコマンドを実行するだけです。example-app
の部分はお好みのプロジェクト名に変更して実行してください。
$ curl -s "https://laravel.build/example-app" | bash
コマンドの実行後、しばらく待つと以下のメッセージが表示されます。ここではPCのログイン時に使用するパスワードを入力してください。
Please provide your password so we can make some final adjustments to your application's permissions.
パスワードの入力後、こちらのメッセージが表示されたらプロジェクトの作成は完了です。後ほど使用するのでターミナルは開いたままにしておきましょう。
Thank you! We hope you build something incredible. Dive in with: cd example-app && ./vendor/bin/sail up
.envファイルの書き換え
LaravelではMySQLやRedisなどの設定に必要な値は基本的に.envファイルに書かれています。デフォルトで値が設定されているので、この時点で画面へのアクセスは可能な状態となっており、MySQLやRedisなどの設定も一通り完了しています。このまま開発を始めることもできますが、今回は言語設定などを含め何点か変更を加えたいと思います。
まずはAPP_LOCALEの変更です。一番わかりやすい使用箇所だとHTMLの言語設定(<html lang="ja">
)で使用されています。こちらを日本語に変更します。
APP_LOCALE=ja
次にAPP_FAKER_LOCALEも変更します。Laravelではデータベースに追加するダミーデータを簡単に用意することができます。その際に使用する言語をこちらで指定します。こちらも日本語に変更します。
APP_FAKER_LOCALE=ja_JP
最後にSESSION_DRIVERを変更します。こちらはセッション情報の保存先を指定する環境変数です。初期値のdatabase
でも特に問題はありませんが、私はよくredis
を使用するのでこちらに変更しておきます。
SESSION_DRIVER=redis
app.phpファイルの書き換え
Laravelでは環境変数を/config
配下のファイルを介して取得します。app.phpもその1つになります。.envファイルの書き換えで大体の言語設定の変更は完了していますが、タイムゾーンはUTC(協定世界時)となっているため、Asia/Tokyo
に変更しておきます
'timezone' => 'Asia/Tokyo',
画面へのアクセス
ここまでで一通りの作業は完了です。以下のコマンドを実行後にhttp://localhost/へアクセスしてみてください。
$ cd example-app
$ ./vendor/bin/sail up -d
このような画面が表示されたら完了構築は完了です。お疲れ様でした。
画面へアクセスした際に以下のようなエラーが発生した方がいらっしゃるかもしれません。その方はおそらく.envがSESSION_DRIVER=database
のままになっていると思います。
SQLSTATE[42S02]: Base table or view not found: 1146 Table 'laravel.sessions' doesn't exist (Connection: mysql, SQL: select * from `sessions` where `id` = lV7e8a9qU5zDRh8H2QY6TLSndukxj78fWjL5c680 limit 1)
エラーが発生する流れとしては
1.セッション情報をsessionsテーブルから取得しようとする
2.sessionsテーブルが存在しない
3.エラーが発生
となっているのでsessionsテーブルを作成してください。
まとめ
今回はLaravel Sailを使用してLaravelの環境構築を行いました。想像していたよりも簡単に環境構築ができたのではないかと思います。次回は今回作成したLaravelのプロジェクトにReactを導入していきたいと思います。