【Laravel】laravel 環境構築 for Mac
たかぽん
どーも!

たかぽんです!

今日はMacOSにてLaravelを使えるように環境構築をしていこうと思います!

まっさらな状態からLaravelを使えるようにするためにはLaravelだけではなく、いくつか準備が必要なんです...

ひとつづつ詳しくみていきましょう!

必要な準備

先にお話ししたように、laravelを使う上で、結構準備しないといけないものがあります。

準備する必要があるのはこちら。

  • Homebrew(MacOS用パッケージマネージャ)
  • Composer(PHPの依存管理ツール)
  • Laravel(本体)

まず、LaravelはPHPのフレームワークなんですが、そのLaravel自体もPHPで書かれています。

そのため、PHPで書かれてるLaravelが欲しい!

けど、それには他にもあれやこれやいろんなPHPのライブラリが必要だなぁ...。

一個づつ調べてインストールするの大変だしなぁ...

そんなあなたにComposerです。

Laravelはもちろん、Laravelを動かすのに必要なライブラリなども合わせて持ってきてくれます。

そして、このComposerはMacOSのパッケージと言われており、Composerを動かすには他のパッケージも入れないといけません。

先ほどのPHPのライブラリ的な立ちと考えてもらえればわかりやすいでしょう。

それをいい感じにComposer使うんならこれもそれも必要やから一緒に持ってきたるで!

ってやってくれるのがHomebrewです。

二段構造なんですね!w

今までプログラミングなんかしてた!とか、WEB開発をしている!

っていう人はすでに入っている人もいるかもしれません。

その場合も以下手順にしたがって見ていってもらい、途中からやってもらえれば大丈夫です!

では、一個ずつ見ていきましょう!

Homebrewのインストール

Homebrewをインストールします。

まずは以下のサイトから、コマンドを選択し、Command + c または右クリックでコピーします。

homebrew インストール用スクリプト

コピーしたらlaunchpadで"ターミナル"と検索し、ターミナルを起動します。

launchpadのアイコンをクリック
"ターミナル"で検索し、クリック

起動したら、そのままcommand + Vまたは右クリックでペーストしてReturn(キーボード右側のおっきいやつ)。

コピペー!
途中一回止まってReturn押してー!って言われるから押す
なんか色々走るから"Installation successful!"が表示されるまで待つ

"Installation successful!"が表示されていれば大丈夫です。

楽ですね。

念の為、"brew doctor"コマンドで確認もしておきましょう。

ターミナルで"brew doctor"を入力しReturn

”Your system is ready to brew”と表示されていれば大丈夫です!

Composerをインストール

次はComposerをインストールします。

先ほどインストールしたbrewを使ってインストールします。

ターミナルにて"brew install homebrew/core/composer"を入力してReturn。

"brew install home/core/composer"を入力してReturn
ダウンロードが始まる...
ばーっていっぱい出てきて終わった。

"composer"をターミナルに入力して、確認。

かっこいい感じのやつ出てきた...!

でかでかとComposerってでればバッチグーです。

下の方に出てるのはコマンドのオプションですね。

途中にあるように"-V, --version"オプションを使うことでも確認ができます。

-V, --versionで確認
composerのバージョンだけ確認したい時に便利

Laravelのインストール

さて、それでは目的のlaravelをインストールします。

これも非常に楽で、コマンド一つでできちゃいます!

"composer create-project --prefer-dist laravel/laravel プロジェクト名"

をターミナルに打つんですが、プロジェクト名には片思いの人の名前や昔飼っていた猫の名前等、各自好きな名前をつけていいです。

...まぁ、本来はプロジェクトで扱うサイトの体を表すような英語orローマ字等がいいでしょう。

サイト名自体をローマ字で書いたり、どんなサイトなのかを英語で説明したりといった具合です。

(例: てくてくテックのブログ -> techtechtech, techtechblog とか...?)

今回僕は"MyProject"と名付けておこうと思います。

"プロジェクト名"を"MyProject"に変えて入力
インストール中...
"Application key set successfully."とでて無事終了

引き続き毎度恒例、確認しておきましょう。

新しく作成されたプロジェクトフォルダへ"cd"コマンドで移動後、"php artisan --version"コマンドを実行します。

まず最初に"cd プロジェクト名"を入力しReturnします。

すると先ほどのコマンドで生成されたlaravelのプロジェクトフォルダへ移動できるので、そこで"php artisan --version または php artisan -V"コマンドを入力しReturnします。

version確認できた!5.8.28みたいだ。
version確認がうまくいかない?

もしかしたらこの時点であれ?うまくいかない・・?

という方がいるかもしれません。

もし"Could not open input file: artisan"と怒られているのであれば、自分のいるディレクトリの位置が正しくない可能性が高いです。

実はこのコマンドはちゃんとlaravelのプロジェクトディレクトリで実行してあげないとうまく動作しないんです...

以下は最初はターミナルを開いた状態で"php artisan --version"と"php artisan -V"を実行していますが、うまくいっていません...

その後"cd"コマンドで作成した"MyProject"ディレクトリへ移動した後実行するとちゃんと確認できています。

正しいフォルダに移動しないとうまく動作しない

自分の現在位置は"pwd"コマンドで確認できるので、確認して正しい位置を探してみてください。

下の画像を見ると、最初実行できない時の位置は"/User/taka"ディレクトリであることがわかります。

次に"cd"で移動してから"pwd"コマンドで位置を確認すると、"/User/taka/MyProject"になっています。

ちゃんと先ほど作ったlaravelのプロジェクトディレクトリ名になっていますね。

位置を確認しつつ実行

Laravelを動かしてみよう!

はい、というわけで一通りインストールまで終えました。

この時点でlaravelを動かすことができるので動かしてみましょう!

laravelのプロジェクトディレクトリへ移動した後、"php artisan serve"コマンドをターミナルに入力してローカル開発用のサーバを立ち上げます。

laravelプロジェクトディレクトリに移動して"php artisan serve"コマンドを実行
開発用サーバーが動いた!

これで開発用のサーバーが動きました。

この状態でブラウザのURLに"http://localhost:8000"を入力します。

すると...?

ブラウザのURL欄に"http://localhost:8000"を入力
おぉ〜!なんかかっこいい画面が!Laravelだっ!

この画面が出てくれば完璧です。

次はほんの少しだけこの画面に変更を加えてみます。

アクセスできない?

アクセスしたらこんな画面になっちゃった!

拒否された...

この場合、"URLが間違っている"あるいは"サーバーが起動できていない"可能性が高いです。

まず、ちゃんと入力されているURLが"http://localhost:8000/"になっているか確認します。

間違っていないようでしたら今度は先ほど"php artisan serve"を実行したターミナル画面をみにいきます。

以下のようにLaravel ... started:から時間のようなものがずーっと流れている(正確にはブラウザでアクセスするたびに増える)状態が正常です。

正常な状態
"Control + C"で強制的にサーバー落とした状態

ところが、なんらかの理由で処理が終わり、$の入力できる状態になっている場合、アクセスしようとすると先ほどのエラーが出てしまいます。

この場合、再度"php artisan serve"を実行すれば大抵解決するはずです。

特にPCを再起動(PCを落として次の日またやるぞって時とか)した後にはサーバーが落ちるので、再度"cd"でディレクトリを移動し、"php artisan serve"を実行してあげる必要があります。

なので、開発する前には必ず必要になりますね。

書き換えてみよう!

では実際にプログラムを書き換えてそれが本当に反映されるのだけ確認してみましょう!

Finderから、"作成したプロジェクト名/resources/views/welcome.blade.php"というファイルを探します。

今回僕の場合はMyProjectというプロジェクト名なので

"MyProject/resources/views/welcome.blade.php"になります。

FInder開く
MyProject/resources/views/welcome.blade.phpを開く

開く時は各自お好きなテキストエディタを使っていただいて結構です。

今回はAtom使っていきます。

開けたら、ファイルの中から文字列"Laravel"を検索します。

大抵"Command + f"ショートカットキーでできるかと思います。

最悪わかんないっていうかたは、対して量も多くないので、目視で同じ箇所を探してください。

"Laravel"で文字列検索

目的の場所は僕のエディタだと検索で二番目に引っかかった箇所で、行数は84行目でした。(設定等で多少変動する場合があります)

下の画像の

<div class = "title m-b-md"> Laravel </div>

の箇所ですね。

検索の順番は二つ目、行数は84行目

ここを好きな文字に書き換えちゃいましょう!日本語でも大丈夫です!

書き換えた。

書き換えたら"Command + S"で上書き保存します。(エディタによって少し違うかも。

保存したら再び先ほどの"http://localhost:8000/"にアクセスしてみましょう!

さっき開いてた画面
更新する
かわったぁああぁあぁあ!だっせぇえぇえ!w

といった具合にWebページを開発していくことができます!

僕は開きっぱなしだったので画面更新しましたが、もちろん、普通に新しいタブで再度URLを入力してもらっても大丈夫です。

ぜひご自身で他にどんなとこ変えたらどうなるんだろう?っていうのを色々試してみてくださいっ!

おわりに

というわけで、今回はlaravelの環境構築をMacで行なっていきました。

基本的に今後、当ブログでもこの環境でいじいじしていく予定です。

次回はlaravelのフォルダがどんな役割を持っているのか、僕自身確認もしたいので調べてみようかなと思います。

それでわ!

おすすめの記事