なぜVue.js?

jp.vuejs.org

上記のなぜVue.js?の動画を見てみると何か英語で説明していますが、私には分かりません。

cr-vue.mio3io.com

なので基礎から学ぶVue.jsを買ってきて、勉強することにしました。(公式読んでもわからない人)

Why?

なぜVue.jsを使わないといけないのか？

それはフレームワークに設計を手助けしてもらうためです。

以下はライブラリは使わず、JavaScriptでテキストの要素を更新する処理になります。

var el = document.getElementById('text')
el.innerText = '新しいテキスト'

行数的には少なくシンプルに見えますが、規模が大きくなると可読性が悪くなり、管理がしずらくなります。

そこで、注目されたのが、データバインディング型のライブラリやフレームワークです。

へ？どゆこと？

実際にVueのコードを見てみる

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue.js App</title>
    <link href="main.css" rel="stylesheet">
</head>
<body>
    <div id="app">
        {{ message }}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="main.js"></script>
</body>
</html>

JavaScript

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

実際の描画

<div id = "app">
    <p>Hello Vue.js!</div>
</div>

JavaScript内に書かれているmessageの内容がhtmlの{{ }}の中に置き換わっています。

文法的な説明は別の記事でまとめるとして、JavaScriptのmessageプロパティがテキストの一部としてバインドしています。

つまり、画面に描画されたデータを変更したいときも、DOMを更新する処理を自分で書く必要がありません。

データバインディング

先ほど述べた、DOMを更新する処理を自分で書く必要がない、ということをもう少し詳しくみてみます。

先ほどのコードをブラウザでみると、単に「Hello Vue.js!」と表示されてますが、特にメソッドを定義したわけでもありません。

それはリアクティブシステムといいVue.jsが内部でいろいろ処理をしてくれて結果的に反応できるデータにしてくれています。

jp.vuejs.org

リアクティブシステムでは

DOMの更新
DOMの更新を最適化
加工したデータの同期
変更を検知し、処理を自動で実行

などができ、Vue.jsではこのリアクティブシステムにより、大半が動いているそうです。

結論

多分わかれば、凄い楽しいフレームワークだと思う。

余談

今回、hatenaに初投稿です。全体的に見づらいので記事を書きながら改善できればと思います。

あとVue.jsの勉強と平行でLaravelも勉強しているので、アウトプットしていきたいです。