Vue連載その1 まずはVueに触れてみよう〜最初に実施するコマンド〜

つくる

2018.08.14

ポイント

はじめに

最近、ギルドワークスでは Vue.js を活用して、フロントエンド開発を進めているプロジェクトが増えてきています。本記事から連載形式で、実際のVue.jsでのプロジェクトの始め方やTipsなどを紹介していきます。

初回の今回は、まずVueに触れるための環境構築についてです。

Vue.jsとは

Vue.js はWebフロントエンド開発において、JSフレームワークの3強の一つと言えるものです。

3強JSフレームワーク(2018年)

Vue.jsのメリット

Vue.jsの良さについては、公式でサイトでは、3つ記載してあります。

親しみやすい
融通が効く
高性能

また、ガイドでも以下のように Vue.js とは？が書かれています。 https://jp.vuejs.org/v2/guide/

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

公式サイトは日本語のドキュメントも充実しているので、学びやすいのではないでしょうか。

なぜVue.jsなのか

https://risingstars.js.org/2017/ja/

コンポーネントという考え方は React と同じだが、シンタックスが React よりとっつきやすく比較的短期間で習得できる。

エコシステエムがしっかりしている。ルーター：vue-router、状態管理ライブラリ：Vuex といったデファクトスタンダード一式を含んでいる。

ひとつの .vue ファイルにテンプレート、ロジック、スタイルすべてを格納するシングルファイルコンポーネントというコンセプトが非常に優れている。

PHP のWEB アプリケーションフレームワークでもっとも人気の高い Laravel でデフォルトの view エンジンとして採用されている。

Facebook や Google のような巨大なインターネット企業がバックに控えているのではなく、Evan You 氏がクラウドソーシングでスポンサーを募り、オープンソースプロジェクトとしてメンテナンスしている。

上記のような理由で、とても人気のJSフレームワークです。

まずはVueに触れてみよう

CDNを利用してみる

https://jp.vuejs.org/v2/guide/installation.html#CDN

記事執筆時の最新の安定バージョン: 2.5.17

 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"> </script>

実際にVue.jsを書いてみよう

中身の理解は、次回以降としまして、まずは動かすために最小限のセット（3ファイル）を用意します。以下のコードを書いてみましょう。

index.html

<html>
  <head>
    <meta charset="utf-8">
    <title>Hello Vue</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"> </script>
  </head>
  <body>
    <div id="app">
      {{ message }}
    </div>
    <script src="index.js"></script>
  </body>
</html>

index.js

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

index.css

html, body { margin: 5px; padding: 0; }

index.htmlをブラウザで表示し、以下のような表示が出れば完成です。

まとめ

今回は、Vue.jsプロジェクトのはじめの一歩について書きました。次回は、手軽に動かしながらコードを修正できる、サンドボックスについて書いてみたいと思います。

[お知らせ] Vue.jsに限らず、ギルドワークスでは状況に応じて最適なフレームワークを利用し、開発を進めています。お気軽にお問い合わせください。お問い合わせ窓口

また、開発ツールだけでなく、プロセスを含めて開発組織自体をアップデートしたいというご要望も受け付けておりますお気軽にお問い合わせください。開発組織2.0 -古くなってしまった開発組織を、自分たちに最適な状態へアップデート-

共感した

ポイント

取り消す

この記事に共感したら、何度でも押してこの記事のポイントをみんなでアップしよう。