#はじめに
自己学習とアウトプットを兼ねて作成してみました
本記事がQiita初投稿となります
#やってみたこと
####Vue.jsを使って簡単なコードを書いてみた
公式サイト
参考サイト
上記のサイトを参考にしつつ環境構築
#そもそもVue.jsって何？
#####Vue.js(ビュージェイエス)は、クライアントサイドで使われるJavaScriptのフレームワークのこと
それぞれ説明すると
▶︎クライアントサイド
Webサーバーにアクセスした得られた結果をWebページで表示する部分
▶︎JavaScript
Webページで複雑な機能をできるようにしたプログラミング言語
▶︎フレームワーク
少ないコードで効率的に作れるようにした機能の集まり
要は、Webページで良い感じに表示させるための機能の一つなんだなーという解釈で良いと思います
#Vue.jsって何が良いの？
####学習コスト低い
JavaScriptのフレームワークは他にも沢山存在するが、学習コストが低く学習しやすい利点がある
公式サイトが日本語対応しており、技術ブログうあ記事も充実しているので調べやすい
####小規模から大規模開発まで
個人開発から、大規模なWebサイトまで対応している
採用企業例）Google、Apple、LINE、note、ZOZO
####SPA開発
SPA（シングルページアプリケーション）開発に使用される
SPAとは、ブラウザで出来る処理はJavaScriptで終わらして、サーバーとの通信は必要最低限に抑えましょうという意味
####MVVMモデル
Webサービスを開発する上では
Model
View
ViewModel
に分けて開発する設計思想があり、ModelのデータをViewで扱いやすくするようなものを設け、データバインディングという機能を使い、データそのものを共有して取り扱う考え方
文字だけでは、良く分からない（私も）と思うので気になった方はこちらを参考に
#概要が分かってきた所で作成してみよう
今回作成したのは静的なhtmlファイルになります
###index.htmlの作成
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello Worldを表示</title>
</head>
<body>
<!--- "Hello World" を表示する --->
</body>
</html>
###作成したindex.htmlファイル内にCDNを記述
Vue.jsを導入する方法は幾つかありますが、今回はCDNを利用しました
bodyタグの中に記述します
<body>
<!--- "Hello World" を表示する --->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</body>
###表示用htmlを記述
messageという変数を用意して、"Hello World"の文字列を格納して表示していきます
messeageという変数を{{ }}の二重カッコで囲み、divタグで括ることでid要素を割当てています
<body>
<!--- "Hello World" を表示する --->
<div id="app">{{ message }}</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</body>
htmlはこれで準備OK
###Vue関数を使用
ここでやっとVueを記述してきます
初めて書くときには構文がやや複雑ですが、お作法と思いましょう
const app = new Vue({
el: '#app',
data: {
message: 'Hello World'
}
})
まず、Vueインスタンスの生成を行います
el:'#app'で、先ほどid要素を割当てたappの値にVue関数が使用出来るように設定しています
data:{}の中で用意したmessage変数に出力した文字列を格納
###scriptタグで括る
最後にscriptタグで括り以下のように記述します
<body>
<div id="app">{{ message }}</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'Hello World'
}
})
</script>
</body>
###出力
以上でプログラムの作成は完了したのでブラウザで表示させてみましょう
と表示されたらOKです！
###index.html全文
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello Worldを表示</title>
</head>
<body>
<div id="app">{{ message }}</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'Hello World'
}
})
</script>
</body>
</html>
#最後に
今回はVue.jsで簡単なプログラムを作成しましたが、まだまだVue.jsの利点を十分に発揮できていないので
これからまた勉強次第、記事を投稿しようと思います