【vue.js入門 #1】初心者プログラマー向けvue.jsの学習方法

今回の内容は初心者プログラマー向けのvue.js入門です。

vue.jsの基本を解説していきます。

前半の内容は、

• vue.jsがどんなものなのか？
• vue.jsがなぜ必要なのか？

そして、後半には実際にコードを解説していきます。

vue.jsってなに？

vue.jsはjavascriptのフレームワークです。

vue.jsを使うと、javascriptが使いやすくなります。

jqueryはライブラリなのでちょっと違うのですが、jqueryと同じようにcdnを使えば、scriptタグを1行書くだけで利用することができます。

初心者プログラマーだと、環境構築の段階でつまずいてしまうことも、よくあると思います。

開発環境を準備する必要がないくて、手軽に始められるのがvue.jsの魅力ですね。

javascriptの可能性

javascriptは2020年の現時点では、もっとも重要で人気があるプログラミング言語と言われています。

javascriptはWebサービスの全てと言っても過言ではないくらいで、需要が高いです。

さらにreactとかvue.jsといったようにフレームワークの開発も盛ん。

javascriptのフレームワークは、流行り廃りもあると思います。

しかし、ベースとなるjavascriptの今の地位が揺らぐことはないんじゃないでしょうか。

javascriptの普及率と将来性の高さから、人気のプログラミング言語となっているのです。

vue.jsがオススメな理由

vue.jsの良さって、javascriptやjqueryをある程度知っていれば、はすぐ利用できるくらい学習コストが低いところにあります。

もしかしたら、ゼロからピュアjsを覚える方が大変かもしれませんね。

もし、初心者プログラマーがjavascript勉強したいのであれば、vue.jsから入っても良いん
じゃないか。

jqueryとvue.jsの違い

jqueryとvue.jsで大きく違うところは、DOM操作が自動かどうかというところです。

バックエンドでapiサーバーを作成して、開発の主体をフロントにするSPAとなると、jqueryでは実現不可能なのです。

jqueryも便利だけど、SPAになってくるとvue.jsが必要になってくるのです。

バックエンドはapiサーバーとしての役割がメインとなり、wordpressのrest apiやfirebaseといったバックエンドを簡単にするサービスも増えています。

今後、開発の主体がフロントエンドになってくるってのは間違いないのではないでしょうか。

vue.jsの学習方法

ドキュメントが豊富で、公式も日本語でわかりやすいです。

https://jp.vuejs.org/

これにそって、学習していけば間違いないでしょう。

はじめに

まずは、どちらかを読み込みます。

<!-- 開発バージョン、便利なコンソールの警告が含まれています -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 本番バージョン、サイズと速度のために最適化されています -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

テストなんで上の開発バージョンでいいですね。

これで準備完了。

{{...}}を使ってテキストを表示させる

まずやるのは、単純にvueのdataに登録されたテキストを表示させる処理です。

html側

<div id="app">
   {{ message }}
</div>

js側

var app = new Vue({
   el: '#app',
   data: {
       message: 'Hello Vue!'
   }
})

vue.jsを起動させるにはこのような書き方をし、elで#app指定しているので、id=”app”の中だけを操作することができるようになります。

これをインスタンスといいます。

データオブジェクトに設定されたHello Vue!が表示はできましたでしょうか？

データオブジェクトにアクセスする時は{{...}}という構文を使います。

これをMustache構文といいます。

現在は、テキストを表示させているだけですが、javascriptの式を利用することが可能です。

{{1+1}} //計算
{{value + 1}} //変数と演算

他にもメソッドやオブジェクトを読み出すことも可能です。

表示されない場合

なんかおかしいとと思ったらブラウザの開発ツールを利用してエラー内容を確認します。

「Cannot find element: #app」というエラーメッセージが表示されていた場合、記述の順番が間違っています。

ブラウザは上から順番に読み込んでいますので、jsでインスタンスを実行した時、id=”app”が存在しないとエラーのなってしまうのです。

インスタンスの設定をする前にid=”app”の記述をしましょう。