Vue.jsとフレームワークの基礎知識

こんにちは！CODE CLUB965のKです！

今回は、Vue.jsとフレームワークの基礎知識について書こうと思います。

Vue.jsとは？

Vue.jsは、Evan You氏という方の個人プロジェクトとして始まり、2014年にリリースされた比較的新しいJavaScriptのフレームワークです。

PHPのフレームワークである「Laravel」のフロントエンジンとして採用されてから知名度が上がり、バージョンアップされながら今に至ります。

現在ではAdobeや任天堂、LINEなど有名な企業やプロジェクトで広く採用されています。

Vue.jsが採用される理由

JavaScriptのフレームワークが数多く開発されている中でなぜVue.jsの人気が高いのでしょうか？

大きな理由は以下の3つが考えられます。

・学習コストの低さ
・スケールの柔軟性
・公式ドキュメントの充実

学習コストの低さと公式ドキュメントの充実は説明しなくても、なんとなく分かるかと思います。

スケールの柔軟性という点は、拡張機能や開発のサポートツールも多くシングルページアプリケーションのような大きなプロダクトから、ページの一部だけをインタラクティブ化するなど小さな要件まで対応できる便利なフレームワークということです。

そもそもフレームワークとは？

これからプログラミングを始めるという方などであればフレームワークって何？という方もいるかと思います。

フレームワークのことをざっくり簡単に説明すると、プログラミングを楽にするための大きな枠組みです。

詳しくは以下の記事に書いていますので、よく分からない方は読んで見て下さい！

Vue.jsの基本機能

VUe.jsの機能はディレクティブを使ってテンプレートと連携します。

よく使うディレクティブは以下にまとめていますので参考にして下さい。

またディレクティブを使うにあたり、Vue.jsの基本的な構文なども理解しておく必要があると思います。

その点については、以下の記事にまとめていますのでこちらも参考にして下さい。

そして、基本的なオプションの構成は、最初はなんとなく頭に入れてもらっていればいいと思うので、以下に代表的なものを載せておきます。

「こんな感じで書くのか！」と思ってもらえればOKです。

var app = new Vue({
  el: '#app',　・・・①
  data: {　・・・②
    message: 'Vue.js'
  },
  computed: {　・・・③
    computedMessage: function(){
      return this.message
    }
  },
  created: function(){　・・・④
    '実行したい処理'
  },
  methods: {　・・・⑤
    myMethod: function(){
      '実行したい処理'
    }
  }
})

1〜5の番号は以下のような内容です。

①mountする要素
②アプリケーションで使用するデータ
③算出プロパティ
④ライフサイクルフック
⑤アプリケーションで使用するメソッド

以上です。

最後に

今回はVue.jsの基本的なことについて書きました。

これからVue.jsをやってみようかと思っている方は、ぜひチャレンジして下さい！

それでは、また！

Follow me!