ASP.NET Core で Vue.js を使用する

ASP.NET Core でアプリケーションを作成していて、フロントエンドの処理を jQuery のみで書くのが辛くなってきたので、Vue.js を使うことにしました。 ちなみに私は React も Angular も使ったことがなく、フロントエンドのフレームワークを使うのは初めてです。 Vue.js を選んだのは、プログレッシブフレームワークということで、部分的に採用可能だというところに惹かれ、始めやすそうだったからです。 ## 環境 - Visual Studio 2017 - ASP.NET Core 2.2 - Vue.js 2.6.10 ## プロジェクトの作成 まずは Visual Studio でプロジェクトを作成します。 普通に MVC のプロジェクトとして作成します。 <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxw1XAq_7hblLwvhMFm14J4evsKoFCkBCq9HNGUC9bTIRO4LcknPaInQNquYIRauVMBifHPwmKTtmgjHrFwiO7AN7E3Mf9tOVfmZPx_LT5SOluXY9MTSVFOxlCsOS06yWJCmPGllzbjjc/s1600/01.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxw1XAq_7hblLwvhMFm14J4evsKoFCkBCq9HNGUC9bTIRO4LcknPaInQNquYIRauVMBifHPwmKTtmgjHrFwiO7AN7E3Mf9tOVfmZPx_LT5SOluXY9MTSVFOxlCsOS06yWJCmPGllzbjjc/s320/01.png" width="320" height="222" data-original-width="941" data-original-height="653" /></a> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirPTmIpVD0KapFqvgB3ldoXfesUTURjIL90hZqU-q3umSE_iKD_GKiGnbn_hU9pAYOY8paWdRF7WBSlsuYY_8gQIFxVvPLS8S2BFcUbZseZaxe_3ikLKooLL0c7oI7NoHhokvnJP3oIjk/s1600/02.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirPTmIpVD0KapFqvgB3ldoXfesUTURjIL90hZqU-q3umSE_iKD_GKiGnbn_hU9pAYOY8paWdRF7WBSlsuYY_8gQIFxVvPLS8S2BFcUbZseZaxe_3ikLKooLL0c7oI7NoHhokvnJP3oIjk/s320/02.png" width="320" height="225" data-original-width="786" data-original-height="553" /></a> ## Vue.js のインストール 普通は CDN を直接参照したり、npm でインストールしたりすると思いますが、今回は Visual Studio を使っているので LibMan (Library Manager) で CDN からダウンロードしてインストールします。 LibMan は Visual Studio のみでフロントエンドのライブラリも全て管理できるので便利です。 ソリューションエクスプローラーでプロジェクトを右クリックし、「追加」>「クライアント側のライブラリを追加するには」を選択します。 <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyRgXGAvKFjXe9p5q0NFwz6AzJpMo7i5KBptCd6h80zL9Ve_94dsk8J8d5aPve-Xq32KPQdfdL1dcjdJS8afLy84U77sbMQV8r5W-wdAsHYN-dpeB4uBx5k1O6eFyGqUZnhHbSmbmUWwU/s1600/03.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyRgXGAvKFjXe9p5q0NFwz6AzJpMo7i5KBptCd6h80zL9Ve_94dsk8J8d5aPve-Xq32KPQdfdL1dcjdJS8afLy84U77sbMQV8r5W-wdAsHYN-dpeB4uBx5k1O6eFyGqUZnhHbSmbmUWwU/s320/03.png" width="320" height="245" data-original-width="920" data-original-height="703" /></a> `vue` と入力して Enter を押すと、最新バージョンの Vue.js が表示されるので、インストールします。 <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuKZmz7WVqwKE-uPaS6SHB0WYIjWPNJa2sUgDbAQQiZihsd8ly2ab6q_3zZc8PqP4iE5YWwwx94gpO6UEFATxTyTxXggcYYNM5qssM4Z-VX9ZQdpB2G2Ttvz9m__eereceoXk8HjCQ_TM/s1600/04.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuKZmz7WVqwKE-uPaS6SHB0WYIjWPNJa2sUgDbAQQiZihsd8ly2ab6q_3zZc8PqP4iE5YWwwx94gpO6UEFATxTyTxXggcYYNM5qssM4Z-VX9ZQdpB2G2Ttvz9m__eereceoXk8HjCQ_TM/s320/04.png" width="320" height="226" data-original-width="486" data-original-height="343" /></a> 実際に必要なのは、`vue.js` と `vue.min.js` だけなので、この２つのファイルだけを指定してインストールしても OK です。 ## Vue.js のインクルード Vue.js をインストールしたら、`Views > Shared > _Layout.cshtml` を編集して、Vue.js のコードを読み込みます。 以下、該当箇所の抜粋です。 ```html <environment include="Development"> <script src="~/lib/jquery/dist/jquery.js"></script> <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js"></script> <script src="~/lib/vue/vue.js"></script></environment><environment exclude="Development"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" asp-fallback-src="~/lib/jquery/dist/jquery.min.js" asp-fallback-test="window.jQuery" crossorigin="anonymous" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="> </script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js" asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal" crossorigin="anonymous" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o"> </script> <script src="~/lib/vue/vue.min.js"></script></environment>``` `Development` では `vue.js` を、`Development` 以外では `vue.min.js` を読み込むようにします。 ## サンプル まずは Hello World ということで、Vue.js の[公式サイトのサンプルコード](https://jp.vuejs.org/v2/guide/#%E5%AE%A3%E8%A8%80%E7%9A%84%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0)を動かしてみます。 とりえあずさくっと動かしたいので、`Views > Home > Index.cshtml` に以下のコードを追加してみます。 ```cs <div id="app"> {{ message }} </div> @section scripts { <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </script>} ``` アプリケーションを実行して、`Hello Vue!` と表示されれば OK です。 ### 簡単な解説 `new Vue` で Vue.js のオブジェクトを作成し、`el` プロパティで、HTML 要素のセレクター(id）を指定し、`data` プロパティでデータの定義を行います。 ここでは `message` というデータを定義し、`Hello Vue!` を代入しています。 Vue が適用された要素内（ここでは `<div id="app">` ）では、`{{ message }}` という表記（マスタッシュ構文）で、`data` に定義したデータを展開することができます。 ## Vue.js の省略記法を使う際の注意点 Vue.js でよく使う `v-bind` と `v-on` には省略記法があります。 ```html <!-- 完全な構文 --><a v-bind:href="url"></a><a v-on:click="doSomething"></a> <!-- 省略記法 --><a :href="url"></a><a @click="doSomething"></a>```` しかし、 `@` は Razor 構文でも使われているため、`@` を使うと Razor 構文として解釈され、View 表示時にエラーとなります。 一応レンダリングエンジンを変えることもできるようですが、私はここまでやっていません。 - https://k-miyake.github.io/blog/vue-aspnetcoremvc/ ちなみに、`v-bind` の省略記号 `:` は使えました。 ## 参考 URL - https://www.codeproject.com/Tips/1271379/Simple-ASP-NET-CORE-2-2-App-plusVue-JS - https://k-miyake.github.io/blog/vue-aspnetcoremvc/ - http://jsstudy.hatenablog.com/entry/What-is-el-in-Vuejs - https://dice-record.com/vuejs-mustache-hello-world/