【Vue.js】Vue.jsはじめの一歩

Web

Vue.jsとは

最近話題のVue.js。

フロントエンド未経験の私が半年程前からいろいろ試した結果、最終的に落ち着いたのはVue.jsでした。

公式ドキュメントには次のように記載されています。

Vue (発音は / v j u ː / 、 view と同様)はユーザーインターフェイスを構築するためのプログレッシブフレームワークです。他の一枚板(モノリシック: monolithic)なフレームワークとは異なり、Vue は少しずつ適用していけるように設計されています。中核となるライブラリは view 層だけに焦点を当てています。そのため、使い始めるのも、他のライブラリや既存のプロジェクトに統合するのも、とても簡単です。また、モダンなツールやサポートライブラリと併用することで、洗練されたシングルページアプリケーションの開発も可能です。 引用元(https://jp.vuejs.org/v2/guide/)

なぜVue.js?

私個人の感想としては、とにかくわかりやすい。 個人的な好みかもしれないですが、他のフレームワークなどに比べて学習コストは低いように感じました。

また公式ドキュメントトップに「親しみやすい」、「融通が利く」、「高性能」と書かれているように、使っていくうちにそれらを実感することができます。

あとは公式ドキュメントが充実していることもポイントです。 英語ができない私のためにここまで…、と思うくらい日本語ドキュメントが充実しています。

Vue.jsを始めるには?

公式ドキュメントのこちらに記載されています。

scriptタグ読み込み

上記リンクからVue.jsのjsファイルをダウンロードすることができます。 Vue.jsを使用するページにscriptタグで読み込むことで利用可能になります。

また以下のようにCDNも用意されています。

<!-- バージョン指定なし --> 
<script src="https://cdn.jsdelivr.net/npm/vue"></script> 
<!-- バージョン指定あり --> 
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

Vue CLI

Vue.jsで大規模なアプリケーションを開発するために、CLIが提供されています。 自作のコンポーネントを作ったり、ライブラリを読み込んだりする場合、Vue CLIを使わない理由はありません。

Vue CLIのインストールはnpmやyarnで行うことができます。

$npm install -g @vue/cli 
$yarn global add @vue/cli

インストールが完了するとvueコマンドが使えるようになり、プロジェクトを作成することができます。

$vue create my-project

またCLIと言いつつ管理用のUIがしっかり用意されています。

$vue ui

Hello Vue!!

では簡単ですがVue.jsを使用してみます。

以下のようなHTMLファイルを作成します。 ブラウザで開いたときに「Hello Vue!!」と表示されていればOKです。

<body>
  <div id="app">
    {{message}}
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script>
    const app = new Vue({
      el: '#app', 
      data: { 
        message: 'Hello Vue!!' 
      }
    }) 
  </script>
</body>

Vueインスタンスの生成

<script>
  const app = new Vue( 
    //オプションオブジェクト 
  ) 
</script>

new演算子を用いてVueインスタンスを生成します。 この時にオプションオブジェクトを引数として渡します。

オプションオブジェクト

オプションオブジェクトには以下のようなものがあります。

オプション説明
elVueインスタンスをマウントする要素
dataデータオブジェクト
methodsVueインスタンスに組み込む処理
computeddataから算出される値

HTMLへの展開

<div id="app">
  {{ message }}
</div>

Mustache構文(二重中括弧)を用いてHTMLにVueインスタンスのデータを展開します。 展開場所はelオプションで’#app’と指定しているようにid属性=”app”の中になります。 今回の例ではdataのmessageの値を指定しているので「Hello Vue!!」と表示されます。

まとめ

これからフロントエンドを学び始める人にとってもVue.jsはおすすめです。

最近では書籍もたくさん出始めていますし、PREMIUM限定ではありますがドットインストールでVue.jsのレッスンが公開されていたりします。

どんどん学びやすくなってきているので始めてみてはいかがでしょうか

 

- Vue.jsのおすすめ書籍はコチラ -

コメント

タイトルとURLをコピーしました