どーも!
たかぽんです!
今日はMacOSにてLaravelを使えるように環境構築をしていこうと思います!
まっさらな状態からLaravelを使えるようにするためにはLaravelだけではなく、いくつか準備が必要なんです...
ひとつづつ詳しくみていきましょう!
必要な準備
先にお話ししたように、laravelを使う上で、結構準備しないといけないものがあります。
準備する必要があるのは以下3点です。
- 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
または右クリックでコピーします。
コピーしたらlaunchpadで"ターミナル"と検索し、ターミナルを起動します。
起動したら、そのままcommand + Vまたは右クリックでペーストしてReturn(キーボード右側のおっきいやつ)。
"Installation successful!"が表示されていれば大丈夫です。
楽ですね。
念の為、"brew doctor"コマンドで確認もしておきましょう。
”Your system is ready to brew”と表示されていれば大丈夫です!
Composerをインストール
次はComposerをインストールします。
先ほどインストールしたbrewを使ってインストールします。
ターミナルにて"brew install homebrew/core/composer"を入力してReturn。
"composer"をターミナルに入力して、確認。
でかでかとComposerってでればバッチグーです。
下の方に出てるのはコマンドのオプションですね。
途中にあるように"-V, --version"オプションを使うことでも確認ができます。
Laravelのインストール
さて、それでは目的のlaravelをインストールします。
これも非常に楽で、コマンド一つでできちゃいます!
"composer create-project laravel/laravel プロジェクト名"
をターミナルに打つんですが、プロジェクト名には片思いの人の名前や昔飼っていた猫の名前等、各自好きな名前をつけていいです。
...まぁ、本来はプロジェクトで扱うサイトの体を表すような英語orローマ字等がいいでしょう。
サイト名自体をローマ字で書いたり、どんなサイトなのかを英語で説明したりといった具合です。
(例: てくてくテックのブログ -> techtechtech, techtechblog とか...?)
今回僕は"MyProject"と名付けておこうと思います。
引き続き毎度恒例、確認しておきましょう。
新しく作成されたプロジェクトフォルダへ"cd"コマンドで移動後、"php artisan --version"コマンドを実行します。
まず最初に"cd プロジェクト名"を入力しReturnします。
すると先ほどのコマンドで生成されたlaravelのプロジェクトフォルダへ移動できるので、そこで"php artisan --version または php artisan -V"コマンドを入力しReturnします。
もしかしたらこの時点であれ?うまくいかない・・?
という方がいるかもしれません。
もし"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"コマンドをターミナルに入力してローカル開発用のサーバを立ち上げます。
これで開発用のサーバーが動きました。
この状態でブラウザのURLに"http://localhost:8000"を入力します。
すると...?
この画面が出てくれば完璧です。
次はほんの少しだけこの画面に変更を加えてみます。
アクセスしたらこんな画面になっちゃった!
この場合、"URLが間違っている"あるいは"サーバーが起動できていない"可能性が高いです。
まず、ちゃんと入力されているURLが"http://localhost:8000/"になっているか確認します。
間違っていないようでしたら今度は先ほど"php artisan serve"を実行したターミナル画面をみにいきます。
以下のようにLaravel ... started:から時間のようなものがずーっと流れている(正確にはブラウザでアクセスするたびに増える)状態が正常です。
ところが、なんらかの理由で処理が終わり、$の入力できる状態になっている場合、アクセスしようとすると先ほどのエラーが出てしまいます。
この場合、再度"php artisan serve"を実行すれば大抵解決するはずです。
特にPCを再起動(PCを落として次の日またやるぞって時とか)した後にはサーバーが落ちるので、再度"cd"でディレクトリを移動し、"php artisan serve"を実行してあげる必要があります。
なので、開発する前には必ず必要になりますね。
書き換えてみよう!
では実際にプログラムを書き換えてそれが本当に反映されるのだけ確認してみましょう!
Finderから、"作成したプロジェクト名/resources/views/welcome.blade.php"というファイルを探します。
今回僕の場合はMyProjectというプロジェクト名なので
"MyProject/resources/views/welcome.blade.php"になります。
開く時は各自お好きなテキストエディタを使っていただいて結構です。
今回はAtom使っていきます。
開けたら、ファイルの中から文字列"Laravel"を検索します。
大抵"Command + f"ショートカットキーでできるかと思います。
最悪わかんないっていうかたは、対して量も多くないので、目視で同じ箇所を探してください。
目的の場所は僕のエディタだと検索で二番目に引っかかった箇所で、行数は84行目でした。(設定等で多少変動する場合があります)
下の画像の
<div class = "title m-b-md"> Laravel </div>
の箇所ですね。
ここを好きな文字に書き換えちゃいましょう!日本語でも大丈夫です!
書き換えたら"Command + S"で上書き保存します。(エディタによって少し違うかも。
保存したら再び先ほどの"http://localhost:8000/"にアクセスしてみましょう!
といった具合にWebページを開発していくことができます!
僕は開きっぱなしだったので画面更新しましたが、もちろん、普通に新しいタブで再度URLを入力してもらっても大丈夫です。
ぜひご自身で他にどんなとこ変えたらどうなるんだろう?っていうのを色々試してみてくださいっ!
おわりに
というわけで、今回はlaravelの環境構築をMacで行なっていきました。
基本的に今後、当ブログでもこの環境でいじいじしていく予定です。
次回はlaravelのフォルダがどんな役割を持っているのか、僕自身確認もしたいので調べてみようかなと思います。
それでわ!