読者です 読者をやめる 読者になる 読者になる

Vue-cliでVue.jsを始めよう

44です。最近Vue.jsを触り始めて色んな人にオススメしています。 今回は、コマンド一つでVue.jsのプロジェクトを作成できる「vue-cli」を紹介したいと思います。

Vue.jsとは?

vue-cliを紹介する前にVue.jsの紹介をしたいと思います。 Vue.jsとはJavaScriptのライブラリの一つでMVVMのViewの部分を担当するライブラリです。 双方向バインディングに特化したシンプルなライブラリです。

Vue.jsのいいところ

公式ページの和訳がしっかりしている。

新しい技術を学ぼうとした場合、私のような英語が得意でない人は公式サイトやQiitaの記事が英語だらけだとそれだけでとてもハードルの高いものに思えてしまいます。 Vue.jsは公式ページのしっかりしているので安心です。さらにVue.jsで利用する主要プラグインの日本語ドキュメントも整備されているので学習しやすいのではないかと思います。

様々な規模のアプリケーションで仕様できる

初めに書いた通りVue.jsは双方向バインディングに特化したシンプルなライブラリです。なので簡単なツールを作る場合などに気軽に導入できます。 ルーティング用のプラグインvue-router、Flux や Reduxのようなステートを管理するためのプラグインvuexを入れることでSPAや複雑なアプリケーションなどを作成することができます。

なぜvue-cliが必要なのか

Vue.jsではコンポーネントといい、構造(HTML)、装飾(CSS)、イベント、データ(JavaScript)をひとまとめにして管理することができます。 Vue.jsではtemplateURLなど外部からHTMLファイルを読み込む機能はサポートされていません。その理由はこちら

HTMLをjsファイルに書くとシンタックスハイライトの恩恵を受けれなかったり、ファイルのコード量が増えてしまいます。 また、構造(HTML)、装飾(CSS)、イベント、データ(JavaScript)をひとまとめにかける.vueという便利なファイルがあるのですがWebpackやBrowserifyを使う必要があります。 WebpackやBrowserifyを導入することで学習コストが増えてします。簡単に学べるVue.jsを難しいものにしてしまい挫折してしまう人が出てくるかもしれません。 そういった問題をVue-cliは解決してくれます。

vue-cliとは?

WebpackやBrowserifyの設定ファイルや必要なノードモジュール、ユニットテスト環境をコマンド一つで用意してくれるものです。 vue-cliにより、すぐアプリケーションのコードを書くことができます。

最後に

Vue.jsが全てに対して最適なライブラリだとは思っていません。Vue.jsをJSフレームワークの入門として学習し、用語などを理解しAngulerやReactを勉強するのがいいのではと思っています。 ぜひVue.jsを勉強してみてください。