【Vue.js】基礎知識とvue-cliを使用した開発環境の構築（Windows）

はじめに

---

Vue.jsとは？

Vue.js（ヴュージェイエス）はWebアプリケーションにおけるUIを構築するための オープソンソースのJavaScriptフレームワークです。

GoogleでAngularJSを使用した開発に携わったEvan Youによって開発され、2014年2月にリリースされました。

Vue.js公式サイト
https://jp.vuejs.org/index.html

Vue.jsが使われているサービス一例

・LINE
・Retty
・note

Vue.jsの特徴

・HTML/CSSや、JavaScriptの知識がある場合の学習コストが低い
・シンプルで拡張性が高い
・コンポーネント単位で区切ることでの再利用性が高い

開発環境の構築

---

開発環境

本記事の開発環境
・Windows10
・VS Code 1.47.2

この記事でインストールするもの
・Vue CLI 4.4.1

前提として、Node.jsやNpmについては既にインストールがされているという環境を想定して記事を作成しています。
インストールされているかどうかが分からない方はコマンドプロンプトで以下のコマンドをそれぞれ実行し確認してみてください。

npm -v
node -v

インストールされていなかった場合は、以下の記事を参考にNode.jsとNpmのインストールを実施してください。

【React Native】基礎知識とExpoを使用した開発環境構築！（【Node.js とNpmのインストール】項）

vue-cliのインストール

以下のコマンドを入力するとインストールが開始されます。

npm install -g @vue/cli

インストールが完了したら、念のため以下コマンドでインストールの確認を行います。

vue --version 

これでインストールは完了です。

最初のアプリを作ってみよう

---

セットアップ

コマンドプロンプトを起動し、C:\work\ 等の作業用に用意しているディレクトリに移動した状態で、以下のコマンドを入力する。

vue create プロジェクト名

※上のコマンドに記載している『プロジェクト名』の部分は任意のプロジェクト名を半角英数字で指定します。
今回の記事では『hello-world』という名前でプロジェクトを作成しました。

コマンドラインに以下の質問がでてきます。

? Please pick a preset: (Use arrow keys)
> default (babel, eslint)
  Manually select features

この画面の操作方法はキーボードの上下キーで操作し、実行したい方に「>」を合わせ、Enterで決定を行います。

今回はdefaultを選択して、シンプルな構成のプロジェクトを作成します。
ここでManuallyを選択すると更にいくつかの質問が表示され、プロジェクトに必要な機能の追加や設定ができます。
また、defaultを選んだ場合も後からManuallyの機能はインストールできるようです。

Successfully created project hello-world.
Get started with the following commands:
 $ cd hello-world
 $ npm run serve

上記の表示がでると、ディレクトリにプロジェクトが作成されています。

作成したプロジェクトのディレクトリに移動し、スタートを実行する

cd プロジェクト名
npm run serve

Welcomeページが表示されました！やったね。

修正してみよう

App.VueをVS Codeで開いてコードを編集して保存すると、自動的に再ビルドされ、すぐに変更を確認することができます。 例として、App.Vueの style の#app内に画面の背景色を追加してみます。

background-color: #000000;

Cntl+Sで編集を保存すると、画面側では自動的に背景が黒くなりました！

HelloWorldページを作ってみよう

/components内に新しいページを作成します。
HelloWorld.vueはプロジェクト作成時に自動で作られたので、名前が同じにならないように今回は「NewPage.vue」というファイルを新規作成しました。
作成したNewPage.vueファイル内は以下のような形でコードを記載します。

<template>
  <!-- HTMLを記述する部分 -->
</template>

<script>
  // JSを記述する部分
</script>

<style scoped>
  /* CSSを記述する部分 */
</style>

ちなみに、上のコードをコピーしてNewPage.vueへ貼り付けるとこんなエラーがでます。
[vue/valid-template-root]
The template root requires exactly one element.
このエラーは「template 内に要素が無いよ」というエラーで、以下のようにtemplateの中に div 要素を追加するとエラーが解消されます。

<template>
  <!-- HTMLを記述する部分 -->
    <div></div>
</template>

<script>
  // JSを記述する部分
</script>

<style scoped>
  /* CSSを記述する部分 */
</style>

App.vueの設定を変更します。
まず、表示用のメッセージを追加します。template要素内へ以下のようにmsg2を追加します。

<template>
  <div id="app">
    <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <HelloWorld msg2="HelloWorld"/>
  </div>
</template>

次に、App.vueのscript内を更新します。
importするファイルのパスを新規作成したNewPage.vueへ変更します。
下記では元々のコードをコメントアウトしていますが、消しても問題ありません。

<script>
import HelloWorld from './components/NewPage.vue'
//import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

上記でApp.vueでの設定は完了です。
再度、NewPage.vueの編集へ戻ります。

NewPage.vueの script内を更新します。

<script>
  // JSを記述する部分
  export default {
  name: 'HelloWorld',
  props: {
    msg: String,
    msg2: String
  }
}
</script>

最後に、NewPage.vueのtemplateを更新します。
定義したメッセージを表示する場合、 {{ 定義名 }}で表示することができます。

<template>
  <!-- HTMLを記述する部分 -->
  <div class="helloWorld">
    {{ msg2 }}
  </div>
</template>

無事、HelloWorldが表示されました！、、…？
…読めますか？読めませんね。
黒背景に濃い青みがかったグレーの文字で表示されているのですが、非常に可読性が悪いので最後にApp.vueのstyle内の文字色を変更します。

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #FFFFFF;
  margin-top: 60px;
  background-color: #000000;
}
</style>

どうでしょうか、HelloWorldの文字が読みやすくなりました。

印象

---

React.jsと比べ、開発者でなくとも理解しやすいという噂に違わず、簡単に環境の構築ができました。 また、実行中にも編集が可能で保存を行うとすぐに画面に変更が反映されるので、開発しやすいのではと感じました(^^)！

参考

---

Vue.jsオフィシャルサイト： https://jp.vuejs.org/index.html
Vue-cliオフィシャルサイト： https://cli.vuejs.org/
VueJSを始めるには： https://medium.com/js-dojo/getting-started-with-vuejs-for-web-and-native-285dc64f0f0d

---

これからエンジニア転職を考えている方へ

---

ロックシステムではエンジニアスクール「ロックシステムアカデミー」を運営しています。
プログラミングの基礎知識から本格的な開発ノウハウまでしっかり教えます！

教室は生のIT企業！
◆　実際の開発プロジェクトを通して経験できる！
◆　現役エンジニアが直接指導！
◆　20代の転職成功率100％！

是非公式ホームページもご覧ください