【Laravel】blade内でVue.jsを利用する
＜なぜ、この記事を書こうと思ったのか？＞
Laravel+Vue.jsを作成して新しいフロントエンドのフレームワークを利用した開発を行う時にVue.jsは比較的に新しいフレームワークなので躓きやすそうなポイントだなと思える部分を発見したので、是非これから個人開発やプロジェクトでVue.jsを利用したプロジェクトを使う時参考にしてください。
＜前提条件＞
・laravelプロジェクトを予め作成している方を対象に記事を書いています。
まだの方は下記のコマンド、またはわからない場合は下記のURLを参考にプロジェクト作成をしてください。
【コマンド】
laravel new プロジェクト名(プロジェクト名はお好きに決めてください。)
URL:【Laravel入門】プロジェクト作成から起動まで - Qiita
(※注意)
・本記事では基礎的なHTML、JS、Laravelの公文の知識が必要になります。
・まだプロジェクトを作っていない方はプロジェクトを作成してから作業に着手するようにしましょう。
＜本記事のゴール＞
blade内でVue.jsを利用しメッセージを表示すること。
(※本記事ではVue.jsのcdnを利用した実装を紹介します。)
＜作業の流れ＞
①Vue.jsのcdnを入手
②Vue.jsの基本的な使い方
③bladeテンプレートにVue.jsメッセージ表示
＜作業開始＞
①Vue.jsのcdn入手
・まずは、welcome.blade.phpよりbodyタグ内のHTML要素全部とstyleタグの要素を全て削除してください。
(削除後は下記の画像の様になっているはずです。)
その次に Vue.jsの公式サイトよりcdnを入手できます。
公式サイトURL：インストール — Vue.js
公式サイトよりcdnを入手したら、headタグの中へ貼り付けましょう。
これでVue.jsを使う準備が整いました、次のステップではVue.jsの基本的な使い方を紹介します。
②Vue.jsの基本的な使い方
今回はシンプルな実装を心がけました、下記の画像にも説明を載せていますが、変数定義を行いVue関数を使用できる環境を整えることができました。
次にblade内でHTMLと変数を埋め込んでいきます。
下記の画像のようにdivタグを作成し、idを割り振るとVue関数が利用できるようになります。
Vue関数を利用できるようになったことにより関数内で定義した変数「message」をHTML内へ埋め込んで次のステップへ行きます。
③bladeテンプレートにVue.jsメッセージ表示
さて、いよいよphp artisan serveコマンドを使いページにアクセスしてみましょう！
＜エラーが起きてしまう問題＞
ページへアクセスすると下記のような画面になりました。
ざっくりエラー内容の説明をすると「未定義の変数を使った」というエラー内容です。
＜なぜエラーが起きてしまったのか？＞
bladeでVue.jsを使う場合は、「{{}}」（Mastache記法）が競合して、Vue関数で定義した変数がPHPの変数として解釈された為、エラーが出てしまいました。
＜エラーの対処法＞
blade内で「{{}}」の前に@をつけることにより、「{{}}」をそのまま出力することができます。
これを利用することにより下記の画像のようにコードを書くと文字列を画面上に表示させることができます。
※今回はPHP側でも変数定義して埋め込んでサンプルコードを提示します。
ページを更新すると......下記の画像を見てもらっての通り、ブラウザ上にPHP側で定義したmessage変数とVue関数内で定義したmessage変数を表示させることができました！！
＜後書き＞
Vue.jsは比較的に新しめのJSフレームワークです、これからエンジニアを目指し就職活動を行う方は新しい目のフレームワークを採用しWEBアプリケーションの制作にチャレンジしてみると良いかもしれませんね！
この記事を参考に誰かの実装の手助けになれば幸いです、今回はこれにて失礼します。
