☆Yuus Memo☆
非エンジニアの方でも業務を効率化できるプログラムを紹介します!
Laravel

Laravel + Vue.jsでGoogleカレンダーのクローンを作ろう!!【Laravel8対応】フロントエンド準備編

皆さんこんにちは!!
前回までで、最低限のスケジュール管理をできるAPIサーバーの作成が終わりました。

今回からは、フロントエンド編ということで、ようやくWEBアプリの開発らしくブラウザー上で動きを確認できるようになります。

フロントエンドは、Vue.jsで作成するのですが、いくつか開発に便利なライブラリーを利用して開発を行なっていくので、今回は「準備編」ということで、一気にそれらのライブラリーをプロジェクトへ組み込んでいきたいと思います。

では、張り切っていきましょう!!

フロントエンドの開発に必要なライブラリーのインストール

それでは、プロジェクトディレクトリーをエディターで開いて下さい。
プロジェクトディレクトリーの直下に、「package.json」というファイルがあると思うので、そのファイルをエディターで開いて下さい。

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "axios": "^0.21",
        "bootstrap": "^4.6.0",
        "jquery": "^3.6",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "popper.js": "^1.16.1",
        "postcss": "^8.1.14",
        "resolve-url-loader": "^3.1.2",
        "sass": "^1.39.0",
        "sass-loader": "^11.1.1",
        "vue": "^2.6.12",
        "vue-loader": "^15.9.8",
        "vue-template-compiler": "^2.6.12"
    }
}

バージョンの違いなどはあるかと思いますが、チュートリアル通りに進めていればpackage.jsonの内容はこんな感じだと思います。

次の様に編集してください。

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "@mdi/font": "^6.1.95",  // 追加
        "axios": "^0.21",
        "bootstrap": "^4.6.0",
        "deepmerge": "^4.2.2", // 追加
        "jquery": "^3.6",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "popper.js": "^1.16.1",
        "postcss": "^8.1.14",
        "resolve-url-loader": "^3.1.2",
        "sass": "^1.39.0",
        "sass-loader": "^11.1.1",
        "vue": "^2.6.12",
        "vue-loader": "^15.9.8",
        "vue-template-compiler": "^2.6.12"
    },
 // 下記追加
   "dependencies": {
        "date-fns": "^2.23.0",
        "material-design-icons-iconfont": "^6.1.0",
        "prettier": "^2.4.0",
        "vuelidate": "^0.7.6",
        "vuetify": "^2.5.8",
        "vuex": "^3.6.2"
    }
}

package.jsonはコメントが入力できないので、コピペする場合、コメント部分を取り除いてください。

転記が終わったら、ターミナルで次のように実行してライブラリーをインストールします。

my-calendar $ npm install && npm run dev

##下記が出れば成功です。
webpack compiled successfully

追加したライブラリーは、次回の記事から順次使用していくので、使用する際に併せて解説していきます。

今は、こんなライブラリーを使うのか位に考えていただければ大丈夫です。

コードフォーマッター導入

複数人で開発を行っている場合、各々が自由にコードを書いてしまうと、さまざまな書き方が混在し統一性のない読みづらいコードとなってしまいます。統一されていないコードは、可読性が低くメンテナンス性が悪くなり、ミスが発生する原因となることもあります。

コードフォーマッターを利用すると、自動的に決められたコードスタイルに整形してくれるため、開発者はコードスタイルを意識することなくコーディングに集中でき、可読性の高いコードを作成できます。


今回は、よく使われているPrettierというコードフォーマッターを設定します。

package.jsonに次のようにprettierを実行するコマンドの設定を追記してください。

"scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production",
// 以下2行を追記
        "lint": "vue-cli-service lint",
        "prettier": "prettier --write './resources/js/**/*.{vue, js}'"
    },
// 省略

package.jsonscriptsの中にnpm runで実行したいコマンドを定義することができます。
つまり、npm run prettierというコマンドを実行すると、prettier --write './src/**/*.{vue,js}'が実行されるようになります。
--writeオプションには整形する対象とするファイルを指定しており、srcディレクトリ以下の、拡張子が.vueもしくは.jsのファイルが対象となります。

オプションを指定するためにドキュメントルート直下に、「.prettierrc」ファイルを新規作成し、JSON形式で次のように書いて下さい。
今回は簡単なルールのみ指定しておきます。

{
  "singleQuote": true,
  "printWidth": 120,
  "trailingComma": "all"
}

今回は、次の様にルールを設定しました。

1つ目のオプションは、文字列を囲う時はシングルクオートを使用する。
2つ目のオプションは、1行の文字数が120以上の場合は改行する。
3つ目のオプションは、配列の最後の要素などの末尾にカンマを入れるようにする。

実際にフロント部分のコードを書く際に動作を説明します。

画面の確認

画面の確認をする前に今入れたライブラリを読み込み、LaravelでVueのコンポーネントを利用する様に一部、コードを編集します。

まず、「resources/js/app.js」を開いて下さい。
次の様な記述になっています。

※コメントは省略します。

require('./bootstrap');

window.Vue = require('vue').default;

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

const app = new Vue({
    el: '#app',
});

このjsファイルでVueコンポーネントタグを使用できるように定義しています。
3行目の部分で、「resources/js/components/ExampleComponent.vue」を使用する宣言を行なっています。

ExampleComponent.vueをappタグの中にexample-componentタグで配置することで使用できます。
因みにサンプルのExampleComponent.vueは、こんなコードになっています。

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Example Component</div>

                    <div class="card-body">I'm an example component.</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    mounted() {
        console.log('Component mounted.');
    },
};
</script>

それでは、ExampleComponent.vueをLaravelのbladeの中で使用していきましょう。
まず、「resources/views/home.blade.php」を開いて下さい。
次の様なコードになっていると思います。

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">{{ __('Dashboard') }}</div>

                <div class="card-body">
                    @if (session('status'))
                        <div class="alert alert-success" role="alert">
                            {{ session('status') }}
                        </div>
                    @endif

                    {{ __('You are logged in!') }}
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

このコードに次の様に追記して下さい。

<!--省略  -->
                    {{ __('You are logged in!') }}
                </div>
            </div>

                <div id="app">
                    <example-component></example-component>
                </div>
  
        </div>
    </div>
</div>
@endsection

追記したら、「php artisan serve」でサーバーを立ち上げて、Loginして下さい。

ユーザー登録を行なっていない場合、Registerのリンクをクリックしてユーザー登録を先に行って下さい。

Loginすると、/homeへリダイレクトされ次の様な画面が表示されます。

赤丸で囲った部分が、 ExampleComponent.vueに定義されていた部分です。
無事にLaravelからVue.jsが使用できる環境が整いました!!

コードフォーマッターの動作確認

ここまでで、LaravelとVueを連携させる部分は完了しましたが、先ほど設定したコードフォーマッターの動作も確認しておきたいと思います。

ExampleComponent.vueを開き次の様に編集して下さい。

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Example ComponentExample ComponentExample ComponentExample ComponentExample ComponentExample ComponentExample Component</div>

                    <div class="card-body">I'm an example component.I'm an example component.I'm an example component.I'm an example component.I'm an example component.I'm an example component.I'm an example component.I'm an example component.I'm an example component.</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    mounted() {
        console.log("Component mounted.")
    },
};
</script>

この状態で、ターミナルを開き次のコードを実行して下さい。

my-calendar $ npm run prettier

再度 ExampleComponent.vueを開くと次の様に整形されていることが確認できます。

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">
                        Example ComponentExample ComponentExample ComponentExample ComponentExample ComponentExample ComponentExample
                        Component
                    </div>

                    <div class="card-body">
                        I'm an example component.I'm an example component.I'm an example component.I'm an example component.I'm an example
                        component.I'm an example component.I'm an example component.I'm an example component.I'm an example component.
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    mounted() {
        console.log('Component mounted.');
    },
};
</script>

<div>の中身の文字列が、120文字以上なので、折り返されています。

console.log()の中身のダブルクォーテーションがシングルクォーテーションへ置き換えられています。

jsのコードの行末にセミコロンがついています。

上記の様に簡単にコードを一定の基準でフォーマットできます。
複数人で開発を行う際には、フォーマッターは必須なので是非使い方を覚えて下さい。

prettierについて詳しく学びたい方はこちらをご覧ください。

フロント開発編(準備編)のまとめ

皆さんお疲れ様でした!!
API開発編に続き、今回も設定ばかりになってしまった感じですが、最後にLaravelの中で、Vue.jsのコンポーネントを表示する部分を確認できたので、少し楽しくなってきたのではないでしょうか。

次回はカレンダーを作っていきます。
実際にデータベースのデータをカレンダーへ表示、更新などできる様になるので楽しんでいきましょう!!

最後まで読んでいただきありがとうございました。次回をお楽しみに!!

Vue.jsの学習を行いたい方は書籍での学習がお勧めです。
フロントエンドは非常に変化のスピードが早いので、体系だった基礎力が無いと変化に対応できません。

次の書籍は読みやすいのでお勧めです!!

コメントを残す