皆さんこんにちは！ラクミニです。
先日、歯列矯正専門病院で矯正の相談をしてきました。始めに問診票を記入したのですが、その時の字が汚かったからか…あとで見せられた私の口腔内写真の入ったフォルダ名が「ラクミンさん」になっていました。(領収書の宛名はラクミニでした。)
ラクミン…
ピクミンみたい…
（出典元：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からもお待ちしております。
