今回から、実務に沿った形でプロジェクトを完遂していきましょう!
Laravel 初心者だよ!という方は先に以下で簡単な掲示板を作成してみましょう!
今回のストーリーは完全オリジナルとなっており、登場する人物等は全て架空のものになっております。
Contents
1 章:仕様の確認
オンボーディング MTG
実務に入った、「あなた」。 初めての案件のオンボーディングミーティングが今始まろうとしていた。。。。

はい。私は T と申します。宜しくお願いいたします!
では早速なんだけれども、今回は掲示板を作りたいなと思っているんだ。

「掲示板」ですか。
どのような機能を盛り込むご予定でしょうか?

某チャンネルのように、スレッドをたててコミュニケーションを取れるようなものにしたいな。
あとは、コミュニケーションをとる際には、画像を投稿もできるようにしたいな。
あとは、、、新しいスレッドが立ち上がったら、私に通知して欲しいな。

なるほど。ありがとうございます!
通知方法ですが、ご希望はございますか?
メジャーどころですと、メール、SMS、Slack、LINE あたりですかね。

その中なら、「Slack」がいいかな。社内の Slack があってそこに通知を流せば
みんなが見れるもんね。

承知いたしました!では、完成形をイメージできるようにモックを作成してまたお持ちいたしますね!

宜しくお願いします!
モックアップの作成と、DB 設計
ヒアリングを終えた、「あなた」。 ヒアリング内容を元に、モックアップを作成するのであった。 ※ モックアップ(モック)は、クライアントとの開発内容の認識齟齬がないように、提案時に持っていく「プロトタイプ」のこと。私は Figma を用いてプロトタイプを作成することが多い。 http://figma.com/
今回は Figma の解説については省略させていただきます。気になる方は、Figma にアクセスし実際に使ってみましょう。
今回は、私が作成した完成品をプロトタイプとして提案することにします。
完成形の確認

オンボーディング疲れた。。でも結構仕様の確認ができた気がする。
クライアントが欲しい機能はこれで全部かな。

クライアントさんが、不適切なスレッドなどを削除できるように、Admin 画面を作っておくのはどうだろうか。

なるほど!確かに。ありがとう!
よしできた!こんな機能があれば良いのではないだろうか!
DB 設計にトライ
では、上記を元に DB を設計していきましょう。
データベース設計における代表的な設計図である、ER 図を作成していきます。
作成するツールは draw.io です。
上記のサイトから簡単に ER 図を作成することができるのでアクセスしてみましょう。
「完成形」からどのような ER 図を作成できるか考え、実際に作成してみましょう。
私の答えは下記に添付いたします。

仕様の確認
モックを作り終えた「あなた」。クラアントにモックアップの確認と、仕様を詰める MTG を行うのであった。

お時間いただき、ありがとうございます!
今回はこちらのモックアップをお持ちしましたので、ご確認いただけますでしょうか?

ありがとうございます!
おお!管理アカウントつきですか!とても良いですね!
こちらの仕様で作成お願いしてもよろしいでしょうか?

承知いたしました!
作成していきます!
2 章:環境構築
環境構築何でする?
クライアントとの MTG が終了し、大まかな仕様が決定。 開発を始めるべく、環境構築を始めるのであった。

では環境構築をしていこう。
MAMP で簡単に作成しようかな。
MAMP 覚えておりますでしょうか。
前回の掲示板を作ろうの記事では MAMP を用いて環境を構築しました。
M : Mac OS
A : Apache
M : MySQL
P : PHP
Laravel を用いてアプリを開発するために必要なものを一気にインストール。ワンクリックで、それらを立ち上げることができました。
非常に便利でしたね。
しかし、今回は Docker を用いて環境を構築していきましょう。
1. コード化されたファイルを共有することで、どこでも誰でも同じ環境が作れる
2. 作成した環境を配布しやすい。
3. スクラップ&ビルドが容易にできる。例えば、開発環境(Windows上)では動いていたけどLinuxで動かなかった、といったケースも、開発工程からDockerを活用していくことで防ぎやすくなります。そして、開発工程の中で使っていた環境をそのまま本番環境に持っていくことも可能なため、環境差分が少なく、環境による問題を減らすことができます。
Docker入門(第一回)~Dockerとは何か、何が良いのか~
https://knowledge.sakura.ad.jp/13265/
Docker を用いることで、Aさんの PC では動いているのに、Bさんの PC では動かないぞ??
などといった問題を解決することができます。
Docker に関しては、Udemy や 書籍などでもまとめられることが多く。非常に学習コストがかかるものだと思います。ここでは、「学ぶ」よりも「使う」ことに重きをおき、「学ぶ」は Google Udemy 書籍等で進めていただければと思います。
参考までに私が学習したものを掲載します。
#マンガでわかるDocker ① 〜概念・基本コマンド編〜 【ダウンロード版】 #技術書典
https://booth.pm/ja/items/825879

漫画で書かれていて、分かりやすそうだな。
個人的におすすめの勉強法としては
- 使ってみる
- 深ぼってみる
なので、実際に使って環境を構築してみましょう。
Docker のインストール
まずは Docker をインストールしましょう。
Docker
https://www.docker.com/
まずは、アクセス、「Get Started」をクリックしましょう。

「Dowonload for Mac」をクリックし、ダウンロードをします。

ダウンロードが終了したら、アプリケーション(鯨のマーク)をクリック、起動します。
Mac のナビゲーションに「鯨のマーク」が表示されれば起動完了です!

Laradock を使ってみる
それでは Docker を使っていきましょう。

とは言っても、何から始めればいいかわからないな。
MAMP はダウンロードして起動してボタンを押すだけだったが。
ここで便利なのが Laradock です。
Laradock の web サイトを確認してみましょう。
Laradock is a full PHP development environment for Docker.
It supports a variety of common services, all pre-configured to provide a ready PHP development environment.
Use Docker First – Learn About It Later!
https://laradock.io/
開発者によると、Laradock は Docker に詳しくなくても、Laravel の環境を構築できるようにしているそうです。
Use Docker First – Learn About It Later!
まず、使って!その後に学びましょう。
ということで、実際に使ってみましょう。
公式ドキュメントにそって開発環境を構築していきましょう。
https://laradock.io/getting-started/
your-project $ git clone https://github.com/Laradock/laradock.git your-project $ cd laradock laradock $ cp env-example .env
Vscode で Laradock のコードを開いてみましょう。
.env 内で以下のコードを修正します。
.env ### MYSQL ################################################# MYSQL_VERSION=5.7 MYSQL_DATABASE=2ch // DB の名前を 2ch にしています。 MYSQL_USER=default // default という user を MySQL に作ります。 MYSQL_PASSWORD=root // パスワードは root にしています(覚えやすいので)。 MYSQL_PORT=3306 MYSQL_ROOT_PASSWORD=root MYSQL_ENTRYPOINT_INITDB=./mysql/docker-entrypoint-initdb.d
デフォルト設定の latest ですと最新版がインストールされます。
8.0 以上がインストールされますが、認証プラグインが変更となっておりこのまま進めるとエラーに出くわしてしまいます。
よって未然に回避するために、5.7 をインストールするように設定を変更しました。
また次に公式ドキュメント にあるようにもう一箇所変更していきます。
APP_CODE_PATH_HOST=../ 修正前 APP_CODE_PATH_HOST=../2ch/ 修正後 // 今回は2chという名前で Laravel プロジェクトをインストールするため上記のように指定。
では実際に Laradock のコンテナを立ち上げましょう。
laradock $ docker-compose up -d nginx mysql
それではコンテナが立ち上がったかどうかを確認してみましょう。
laradock $ docker-compose ps // 以下表示内容 Name Command State Ports --------------------------------------------------------------------------------------------------------------- laradock_docker-in-docker_1 dockerd-entrypoint.sh Up 2375/tcp, 2376/tcp laradock_mysql_1 docker-entrypoint.sh mysqld Up 0.0.0.0:3306->3306/tcp, 33060/tcp laradock_nginx_1 /bin/bash /opt/startup.sh Up 0.0.0.0:443->443/tcp, 0.0.0.0:80->80/tcp, 0.0.0.0:81->81/tcp laradock_php-fpm_1 docker-php-entrypoint php-fpm Up 9000/tcp, 0.0.0.0:9003->9003/tcp laradock_workspace_1 /sbin/my_init Up 0.0.0.0:2222->22/tcp, 0.0.0.0:3000->3000/tcp, 0.0.0.0:3001->3001/tcp, 0.0.0.0:4200->4200/tcp, 0.0.0.0:8001->8000/tcp, 0.0.0.0:8080->8080/tcp 0.0.0.0:4200->4200/tcp, 0.0.0.0:8001->8000/tcp, 0.0.0.0:8080->8080/tcp
上記のように STATUS が UP になっていれば成功です。

MySQL と NGINX しか立ち上げる時に指定していないが、「php-fpm」「workspace」も立ち上がってるけど….どうして?
Laradock 内の docker-compose.yml には depends_on (依存関係)が設定されています。
NGINX を立ち上げる前には、「php-fpm を立ち上げてね」。「php-fpm を立ち上げてね」と記載があるため、自動的に立ち上がりました。
Laravel のインストール
laradock % docker-compose exec --user=laradock workspace bash /var/www# composer create-project --prefer-dist laravel/laravel 2ch "6.*" // Laravel 6 をインストールします。 // インストールが終了したらコンテナから出ましょう。 /var/www# exit laradock % cd .. your-project % ls 2ch laradock
ここまでで、Laravel のインストールが完了し、your-project ディレクトリ内に 2ch が作成されました。
では http://localhost/ にアクセスしてみましょう。


これで環境構築ができたね。
では、どんどん開発していこう!
初めまして。私は「あなた」です。
今回はどうぞよろしくお願いいたします!