1
/
5

VueとBladeを使い簡単なレイアウトを作成!

こんにちはSCOUTERでフロントエンドエンジニアをしているhirokinishizawaです!

前回、bladeを使いテンプレートを作ろうと言っていたのですが、弊社ではフロントでVueを使っているということもありせっかくなのでVueも使って自分が大好きな釣りの写真を年ごとにページを作成してみました!

はじめに

今回作ったものがこちらになります!

画像をクリックするとその年に釣った魚の写真一覧が表示されますj!完全に自己満の写真ファイルみたいな感じになっています!笑

弊社でlaravel + Vueを使ってプロジェクトを作成しているので、Vueを入れてから躓いたことは会社のプロジェクトを参考にしながら解決していきました!

Laravelとして使ったもの

今回Controllerファイルは使用していません。 Laravelの何を使っているのかと言いますと、ルーティングとbladeを使用しています!

環境

仕様エディタ: PhpStorm

Vueの導入

Laravelのプロジェクトを作成した際に LaravelMix(Laravel で CSS や JavaScript をビルドするための API を提供するもの) にVue.jsが組み込まれています。

なのでLaravelプロジェクトを作成した後にnpm installを実行することにより、Vue.jsを導入することができます!

Vue.jsを導入した後

Vue.jsを導入した後に躓いた点があったので少し紹介

Vueを使用する際に使ったファイル

  • 'resources/assets/js'にあるapp.jsファイル
  • 'resources/views'にあるblade.phpファイル
  • Vueのcomponents内にある.Vueファイル
  • web.php

こちらを使用しました。

ディレクトリ構造

resources
 ├── assets
 │ └── js
 │   ├── app.js
 │   └──components
 │     ├── ContentComponent.vue
 │     ├── HeaderComponent.vue
 │     └── imageComponents
 │     ├── Images_2016.vue
 │     ├── Images_2017.vue
 │     └── Images_2018.vue
 └── views
  ├── home
 │ └── content.blade.php
 ├── layouts
 │ └── app.blade.php
 └── memoryImage
  ├── 2016.blade.php
 ├── 2017.blade.php
 └── 2018.blade.php

app.js

Vue.jsを導入した際にapp.jsというファイルが入るのですが、最初はこのようになっています。

この設定のおかげで最初から

<example-component/>

というタグでExampleComponent.vueをbladeや.Vueファイルで使用することが出来ます

上記のディレクトリ構造でapp.jsを書くと

このような感じでVueコンポーネントをセットできます!

blade.php

※ 'layouts/app.blade.php' ->ベースとなるbladeファイル

親となるapp.blade.phpの中身はこのように記述しました

headerは固定したかったのでベースファイルであるapp.blade.phpにそのままvueコンポーネントをを呼び出していますが、ベースのcontentの部分には@yield('content')と記述されています。

@yieldの使用方法は子コンポーネントの方でexdendsはファイルの場所(書き方は"ディレクトリ名.bladeファイル名")、sectionはそのファイル(今回で言う'app.blade.php')の@yieldと同じkey('content')を記述します。

これでurlがcontent.blade.phpの設定のときにapp.blade.phpに読み込まれます。

ルーティングはweb.phpで

Route::get('/', function () {
//view('ディレクトリ名.bladeファイル名')
return view('home.content');
});

と設定します。

これでtopページが作成完了です!

次に年ごとにページを作成していきます。やることは同じです。

ファイルを作成してapp.jsでVueコンポーネントを使用できる状態にしbladeで読み込み、app.blade.phpの@yield("content")で読み込めるようにしルーティングを作成すれば、レイアウトは完成です!

ルーティングはこんな感じになっています!

2017年のページを開く場合は'/images/2017'となります。

この'memoryImage.2017'はviews/memoryImage/2017.blade.phpになっていて中身は

と、content.blade.phpの中とほとんど同じです! 唯一違うところは呼び出しているVueコンポーネントが違います!

先程のルーティングの画像を見てもらうとわかると思いますが、

content.blade.phpを見るとき開発環境urlはlocalhost:8000

2017.blade.phpを見るときはlocalhost:8000/images/2017となります。

app.blade.phpでヘッダーと背景は固定しているので、@yield('content')の部分だけを作成してルーティングを設定してあげればいろんなページが作成できます!

躓いた点

上記で説明したようにやればレイアウトは作成できるはずだったのですが、なぜかbladeは呼ばれているのにVueコンポーネントが反映されていませんでした。 解決方法は、app.blade.phpの<body>内に

<script src="{{ asset('js/app.js') }}"></script>

を付けるて 一番最初のdivのidをappで指定してあげてれば解決できました。

自分は会社のプロジェクトと比較をして間違え探しのような形で見つけたのですが理由を調べてみるとapp.jsのデフォルトで記述されている、

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

でidを最初に指定されていて <script> タグで呼ばなければいけなかったみたいです。

今はapp.blade.phpにcontentを作成していく感じなのでapp.jsを呼び出すための

<script>
タグはapp.blade.phpのみの記述で大丈夫です!

最後に

今はただ画像を挿入して表示しているだけですが、ゆくゆくは年ごとにアップロード、ダウンロードしていけるような仕組みにしてきたいと考えています!

自分が書いているLaravelのブログは自分の成長記録みたいなものを書いているので最初から見ていただけたらとてもうれしく思います!


サーバーサイドエンジニア
Laravelでマーケット成長の波に乗りたいエンジニアを募集!
ROXXは「時代の転換点を創る」をビジョンに、2013年に設立。この先何十年も使い続けられるような社会的意義のあるサービスを目指し、現在はHR Techサービスを展開しています。 ■月額制リファレンスチェックサービス『back check』( https://backcheck.jp ) 書類選考や面接だけでは分からない採用候補者の経歴や実績に関する情報を、候補者の上司や同僚といった一緒に働いた経験のある第三者から取得することができる、オンライン完結型リファレンスチェックサービスです。back checkでは、採用予定の職種やポジションに合わせて数十問の質問を自動生成し、オンライン上で簡単にリファレンスチェックを実施できるだけでなく、低単価(※1)での実施が可能であることから、スタートアップから大手企業まで、採用人数やポジションに関わらず、幅広い企業に導入いただいています。2019年10月、正式リリース。2021年7月、累計リファレンスチェック実施人数1万人を突破。オンラインリファレンスサービスを利用した年間リファレンス実施人数No.1獲得(※2)。 ※1…従来のリファレンスチェックサービスと比べて1/10程度の価格。 ※2…商工リサーチ調べ(期間:2020年4月~2021年3月​) ■ 採用企業と人材紹介会社を繋ぐ、求人プラットフォーム『agent bank』(https://agent-bank.com/) 転職決定人数 No.1、掲載求人数 No.1、推薦人数 No.1(※1)のクラウド求人データベースです。「人材紹介会社」は、月額利用料のみで、サービス上に掲載されている約15,000件(※2)の求人に対して、自社で抱える転職希望者を掲載企業に紹介することが可能です。「求人企業」は、完全成功報酬型で募集求人を何件でも無料で掲載。『agent bank』導入中の人材紹介会社から、掲載求人に対して紹介が集まります。また、最大の特徴として、成功報酬を求人ごとに自由に設定いただけるため、従来の人材紹介よりも圧倒的に低コストで採用することが可能です。大手企業からベンチャー/スタートアップ企業まで、幅広い年収・業界・業種の求人が掲載されていることから、転職希望者に紹介できる案件を最大化できるだけでなく、過去の選考結果や業務内容に関する詳細情報が全て蓄積されており、効率だけでなく、紹介の質を大幅に向上することが可能です。 ※1…転職決定者数・推薦人数…東京商工リサーチ調べ(調査期間:2021年1月~12月) ※2…掲載求人数…調査対象に『agent bank + パーソルキャリア』掲載の求人数を含む。東京商工リサーチ調べ(調査期間:2022年4月11日〜15日)
株式会社ROXX
株式会社ROXXでは一緒に働く仲間を募集しています
2 いいね!
2 いいね!
同じタグの記事
今週のランキング