初めて作る！MacOSでLaravelとVue.js の環境構築

こんにちは。ケイマエです。

本日はPHPのフレームワークである「Laravel」とモダンなJavascriptのフレームワーク「Vue.js」でアプリを開発する環境を作っていきたいと思います！

テックキャンプではRuby on Railsでアプリを開発しましたが、Laravelを採用している企業もかなり多いので、Laravel始めてみたいという方の参考になればと思います！

MVCの考え方は同じなので、PHPに慣れれば割と簡単にできますよ。

それでは早速いきましょう！

Contents

Homebrewをインストールする
PHPをインストール
Composerをインストール
Laravel
Vue.js
welcome.blade.php の編集

Homebrewをインストールする

Homebrewはパッケージマネージャーです。これをインストールするならこれも入れておいた方がいいよということを自動でやってくれます。

インストール

ターミナルに下記コマンドでHomebrewをインストール。

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

バージョン確認

$ brew -v

Homebrew 2.5.2　など表示されればインストール完了しています。

PHPをインストール

インストール

先ほどインストールしたHomebrewのbrewコマンドを使ってインストール。

ここではPHP7.4をインストールします。

$ brew install php@7.4

バージョン確認

$ php -v

Composerをインストール

ComposerはLaravelのパッケージマネージャーみたいなものです。

インストール

$ brew install composer

バージョン確認

$ composer -v

   ______
  / ____/___  ____ ___  ____  ____  ________  _____
 / /   / __ \/ __ `__ \/ __ \/ __ \/ ___/ _ \/ ___/
/ /___/ /_/ / / / / / / /_/ / /_/ (__  )  __/ /
\____/\____/_/ /_/ /_/ .___/\____/____/\___/_/
                    /_/
Composer version 1.10.13 2020-09-09 11:46:34

インストールされていればアスキーアート文字が出ます。凝ってるな（笑）

Laravel

Laravelインストーラーをダウンロード

$ composer global require "laravel/installer"

Laravelプロジェクト作成

プロジェクト（アプリ）を作りたい階層に移動します。例えば、~/projects/ディレクトリにプロジェクトを作るとします。

$ cd ~/projects

移動して、下記コマンドでプロジェクトを作ります。blogはプロジェクト名です。お好きな名前に変えて実行してください。

$ composer create-project --prefer-dist laravel/laravel blog "6.*"

上記コマンドの”6.*”でLaravel6を指定しています。Laravel6がLTS（Long Term Support）のため。（記事作成時点）

動作確認

下記コマンドでサーバーを立ち上げます。

$ php artisan serve

ブラウザから　http://127.0.0.1:8000/　にアクセスして下記の画面が出れば成功です。

お次はLaravelでVue.jsを使えるようにしていきます。

Vue.js

laravel/ui パッケージをインストール

$ composer require laravel/ui:^1.0 --dev

インストールできたらbootstrapとvueの下準備です。

bootstrapとvueのスカフォールド（足場）を生成

$ php artisan ui bootstrap

$ php artisan ui vue

npmをインストール

npmは（Node Project Manager)の略で、Node.jsのパッケージを管理するツールです。

Node.jsのパッケージとは、予め用意された便利な機能をまとめたものです。

$ npm install

CSSのコンパイル

Laravelのフロントエンドスカフォールドを含んでいるwebpack.mix.jsファイルは、SASSファイルをコンパイルします。

コンパイルとは、プログラミング言語で記述されたソフトウェアの設計図（ソースコード）を、コンピュータが実行可能な形式に変換する作業のことです。

$ npm run dev

以上でLaravelでVue.jsが使えるようになりました。

おまけとして、Laravelのbladeテンプレートに直接スクリプトを書く方法を紹介します。

この方法だとbladeテンプレートだけで完結できるので、分かりやすいと個人的に思っています。

welcome.blade.php の編集

Laravelの初期画面のwelcome.blade.phpで直接スクリプトを書けるようにしていきます。

deferを削除

headの中のscriptタグにdeferとあるのでこれを削除します。

<script> タグに defer も async も付けないと、HTML パース中に <script> タグにたどり着き次第、パースを一時停止し、JS ファイルのダウンロードと実行を行います。
JS ファイルの実行が完了するまで、HTML のパースは再開されません。

<head>
        ・・・
        <title>Laravel</title>
        <script src="{{ asset('js/app.js') }}" defer></script>  <!-- ←deferを削除してください -->
</head>

scriptタグを記述

bodyタグの後にscriptタグを書けばここに書くスクリプトが読み込まれます。

    ・・・
    </body>
    <script>
        
    </script>
</html>

実践

Laravelという大きいタイトルの下に、Vue.jsでmessageを表示します。

下記のdivタグを追記します。

            ・・・
            <div class="content">
                <div class="title m-b-md">
                    Laravel
                </div>
                <div id="app">     <!-- 追記 -->
                    @{{ message }}
                </div>

                <div class="links">
                    <a href="https://laravel.com/docs">ドキュメント</a>
                    <a href="https://laracasts.com">Laracasts</a>
                    <a href="https://laravel-news.com">News</a>
                    <a href="https://blog.laravel.com">Blog</a>
                    <a href="https://nova.laravel.com">Nova</a>
                    <a href="https://forge.laravel.com">Forge</a>
                    <a href="https://vapor.laravel.com">Vapor</a>
                    <a href="https://github.com/laravel/laravel">GitHub</a>
                </div>
            </div>
            ・・・

次にscriptタグの中にVue.jsのコードを書きます。

massageの変数に’Hello Vue!’を代入します。

　　・・・　
    </body>
    <script>
        new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            }
        })
    </script>
</html>

これで画面をリロードすると、Laravel の下に Hello Vue! と表示されます。