Vue.js + Laravelで記事一覧を作成する(フロント編 #1)

Vue.js + Laravelで記事一覧を作成する(フロント編 #1)

皆さんこんにちは!ラクミニです。

先日、歯列矯正専門病院で矯正の相談をしてきました。始めに問診票を記入したのですが、その時の字が汚かったからか…あとで見せられた私の口腔内写真の入ったフォルダ名が「ラクミンさん」になっていました。(領収書の宛名はラクミニでした。)

ラクミン…

ピクミンみたい…


(出典元:https://prcm.jp/album/85d63fd4a42cd/pic/75370639)

さて、前回に引き続きLaravelとVue.jsを使って記事一覧を作成します。LaravelでAPIを作成したので、Vue.jsでフロント側に着手していきます!今回は、実装前の準備です。

1.パッケージのインストール

まずはVue.jsを使うための準備をしましょう。

1.1laravel/uiパッケージ

LaravelはBootstrapとVue.jsのスカフォールドを提供しています。スカフォールドを使えるようにするため、laravel/uiパッケージをインストールしましょう。インストールはcomposerを使います。以下のコマンドを実行しましょう。

composer require laravel/ui “^2.0”

※公式サイトの通り「composer require laravel/ui」を実行すると最新のver3.0がインストールされます。ver3.0はLaravel8以上でないと対応していないので、versionを指定します。

続いて、artisanコマンドを実行し、フロントエンドのスカフォールドをインストールしましょう。

php artisan ui vue

1.2 npm install & npm run dev

上記のコマンドを実行し、正常に終了するとターミナルにこんなメッセージが表示されます。

Please run “npm install && npm run dev” to compile your fresh scaffolding.

Laravelには、デフォルトで必要最低限のnpmパッケージを設定したpackage.jsonファイルが用意されています。インストールされるパッケージは、ファイル内の「devDependencies」に記載されています。

    “devDependencies”: {
        “axios”: “^0.19”,
        “cross-env”: “^7.0”,
        “laravel-mix”: “^5.0.1”,
        “lodash”: “^4.17.13”,
        “resolve-url-loader”: “^3.1.0”,
        “sass”: “^1.15.2”,
        “sass-loader”: “^8.0.0”,
        “vue-template-compiler”: “^2.6.12”
    }

メッセージにある通り、次のコマンドを実行してパッケージをインストール&実行しましょう。

npm install && npm run dev

※予めローカルPCにNode.jsをインストールしていることが前提です。

ターミナルに以下が表示されれば成功です。また、node_modulesフォルダが追加されます。

2.Vueコンポーネントの確認

Vueのパッケージ類がインストール&スカフォールドされたので、生成されたファイルを確認しましょう。

2.1 app.js

まずは、Resources/js/app.jsを開いてください。

ここでは、このプロジェクトのすべてのJavaScript依存関係をロードしています。Vueやその他のライブラリが含まれています。今回はVueを使用するので、Vueコンポーネントが予め記述されています。Vueコンポーネントとは、再利用可能なVueインスタンス要素のことです。複数のコンポーネントを作成して、それを部品のように組み立てることで1つのWebページを作ることができます。
(引用:「5分でわかるVue.js基礎の基礎」https://qiita.com/kiyokiyo_kzsby/items/ce9fe8b72953584fecee)

続いて、app.jsファイルを下までスクロールしてみましょう。以下は、new Vue()でVueのインスタンスを生成しています。その際、「el:’#app’」と記載することで、htmlファイルのidがappのel要素を対象にVueの使用を定義できます。

2.2 Vue Component

続いて、Vueコンポーネントファイルを見てみましょう。

Resources/js/components/ExampleComponent.vueを開いてください。このvueファイルで、1つのコンポーネントを生成しています。1つのvueファイルはTemplate、Script、Styleの3部分から構成されています。自動生成されたExampleComponent.vueには、デフォルトでtemplateとscriptが記述されています。

Laravelのbladeテンプレートでもファイルを継承してレイアウトを切り替えたり、必要な箇所にファイルを読み込んだりすることはできますが、それと同様のことをVueコンポーネントで実現できる。と私は解釈しました。(違っていたらすみません)

今回はパッケージのインストールとスカフォールドされたVueファイルの中身などを確認しました。フロント側の実装は次回!

エンジョイワークスでは、一緒に働くデザイナー・エンジニアを募集中です!
採用情報はこちら
Wantedlyからもお待ちしております。

一覧へ戻る