今回の内容は初心者プログラマー向けのvue.js入門です。
vue.jsの基本を解説していきます。
前半の内容は、
そして、後半には実際にコードを解説していきます。
vue.jsはjavascriptのフレームワークです。
vue.jsを使うと、javascriptが使いやすくなります。
jqueryはライブラリなのでちょっと違うのですが、jqueryと同じようにcdnを使えば、scriptタグを1行書くだけで利用することができます。
初心者プログラマーだと、環境構築の段階でつまずいてしまうことも、よくあると思います。
開発環境を準備する必要がないくて、手軽に始められるのがvue.jsの魅力ですね。
javascriptは2020年の現時点では、もっとも重要で人気があるプログラミング言語と言われています。
javascriptはWebサービスの全てと言っても過言ではないくらいで、需要が高いです。
さらにreactとかvue.jsといったようにフレームワークの開発も盛ん。
javascriptのフレームワークは、流行り廃りもあると思います。
しかし、ベースとなるjavascriptの今の地位が揺らぐことはないんじゃないでしょうか。
javascriptの普及率と将来性の高さから、人気のプログラミング言語となっているのです。
vue.jsの良さって、javascriptやjqueryをある程度知っていれば、はすぐ利用できるくらい学習コストが低いところにあります。
もしかしたら、ゼロからピュアjsを覚える方が大変かもしれませんね。
もし、初心者プログラマーがjavascript勉強したいのであれば、vue.jsから入っても良いん
じゃないか。
jqueryとvue.jsで大きく違うところは、DOM操作が自動かどうかというところです。
バックエンドでapiサーバーを作成して、開発の主体をフロントにするSPAとなると、jqueryでは実現不可能なのです。
jqueryも便利だけど、SPAになってくるとvue.jsが必要になってくるのです。
バックエンドはapiサーバーとしての役割がメインとなり、wordpressのrest apiやfirebaseといったバックエンドを簡単にするサービスも増えています。
今後、開発の主体がフロントエンドになってくるってのは間違いないのではないでしょうか。
ドキュメントが豊富で、公式も日本語でわかりやすいです。
これにそって、学習していけば間違いないでしょう。
まずは、どちらかを読み込みます。
<!-- 開発バージョン、便利なコンソールの警告が含まれています -->
<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”の記述をしましょう。
正社員という奴隷制度に中指を立てるWebエンジニアです。PHPが得意。繋がれた鎖を断ち切るために、自由を取り戻すために、プログラミングスキルを磨く日々です。プログラミングと個人でもできるビジネスについて、情報発信しています。