フロントフレームワークであるVue.js+Vuetify導入

記事の動機・目的

1. フロント開発方法を押さえておこうと思ってVue.jsを多少勉強したがパーツ単位にやってみても全体でどう作れば良いか見えていなかったので、１画面として動くものを作ってみようと思った。
2. 自社でもフロント開発のニーズが発生しているがノウハウがないため勉強会の中で入り口を短時間で知ってもらう。

※注意 本記事はそのまま勉強会でも使用します。勉強会向け表現をしている箇所もありますがご容赦ください。

---

Vue及びVuetifyを始める準備

基本ツールの準備

コーディングもするので使い慣れたエディタも用意してください。
私はemacsを使いたいのですがvscodeがvueでは現在一番使いやすそうです。
拡張機能をインストールしておきましょう。Visual Studio CodeでVue.jsアプリケーションの開発環境を構築するなどに記事がありました。

---

git

勉強会ではgit及びgithubを使います。gitが入っていることを確認してください。

Windowsの人は Git for Windowsをインストールしましょう。

次のgithubにアカウントを作ってsshのキーを登録しておいてください。
GitHubでssh接続する手順~公開鍵・秘密鍵の生成から~
[Windows 10] Git BashでGitHubにSSH接続

---

node.js

node.jsの公式サイトからダウンロードまたはbrewでインストールする

インストールしたら動作確認のためバージョンを表示してみましょう。

src/ (master✗) $ node --version
v15.1.0
src/ (master✗) $ npm --version
7.0.8

---

vueのインストール

Vue.js公式サイト

node.jsのパッケージはvueのインストールはnpmコマンドでインストールします。

npm install vue

Vue CLI公式サイト

vueをコマンドラインからいろいろ操作するために入れます。開発する時には必ず必要になります。

npm install -g @vue/cli

ここまでを勉強会前に実施してください。

---

Vueプロジェクトの作成

プロジェクトを作成します。
ここでは動作確認のためのプロジェクトなので何でも構いません。
プロジェクトのルートディレクトリで次のコマンドを実行してください。

$ vue create helloworld

Manually select featuresを選択し、Choose Vue version, Babel, Router, Linter / Formatterを選択しreturnを入力します。

今回versionは情報が多い2.xを選択します。

必要なパッケージがインストールされます。

プロジェクトを作成すると次のファイルとディレクトリができます。

helloworld/ (master✗) $ tree -I node_modules
.
├── babel.config.js
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
└── src
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   └── HelloWorld.vue
    └── main.js

一旦起動してみましょう。

プロジェクトのディレクトリで次の様に入力します。

$ npm run serve

上記の様に表示されたら無事ビルドされてWebサービスとして公開されました。
http://localhost:8080/ をブラウザ開いてください。

これがvueデフォルトの画面です。このままvueでも開発はできるのですがVuetifyにはGUIの便利なライブラリがたくさんあるということで最初からVuetifyを試すことにします。

Ctrl-C を押下して停止し、次のコマンドを入力します。

$ vue add vuetify

presetが聞かれるのでDefaultでよいです。

プロンプトが出たら、再度npm run serveを実行してブラウザで http://localhost:8080/ を開いてください。

Vuetifyの画面がWelcome画面が表示されればインストール完了です。

Vuetifyの開発

共同で使うリポジトリからプロジェクトをダウンロードする。

今回はVuetifyを学ぶだけでなくチーム開発も一緒に経験します。みんなで共同で開発するためのリポジトリを作っておきました。
プロジェクトのルートディレクトリで次のコマンドを入力します。

git clone [e-mail]:kaorunix/creist_vue_study.git

コマンドを実行するとプロジェクトのルートディレクトリ配下に creist_vue_study ディレクトリができています。
このディレクトリの中に入りアプリケーションを実行してみます。

$ cd creist_vue_study
$ npm install
$ npm run serve

http://localhost:8080 にアクセスすると真白の何もない画面が表示されました。
これからこの中にパーツを配置していきます。

まず、Vuetifyでの標準画面は次の構成です。

まずはヘッダ部分から作っていきます。

Vuetifyでページヘッダを作る

画面の構成情報を保持しているファイルはApp.vueです。
srcディレクトリの配下にあります。

src/App.vue

<template>
  <v-app>
  </v-app>
</template>

現在の状態は上記のコードとなっています。
<v-app>タグの間に次のコードを挿入してみましょう。

src/App.vue

...
  <v-app>
    <v-app-bar color="#0182D1">
      <v-toolbar-title>CREiST年末勉強会</v-toolbar-title>
    </v-app-bar>
  </v-app>
...

<v-app-bar>タグはヘッダを表すタグです。タグ内にプロパティappを追加するとヘッダであることがわかります。colorは文字通り色を表す設定です。

src/App.vue

...
  <v-app>
    <v-app-bar color="#0182D1" app>
      <v-toolbar-title>CREiST年末勉強会</v-toolbar-title>
    </v-app-bar>
  </v-app>
...

次へ進む前にメニューやメイン、フッタのコードを足します。全体を次の様に書き換えてください。

src/App.vue

<template>
  <v-app>
    <v-navigation-drawer app>
      メニュー
    </v-navigation-drawer>
    <v-app-bar color="#0182D1" app>
      <v-toolbar-title>CREiST年末勉強会</v-toolbar-title>
    </v-app-bar>
    <<v-main app>
      メイン
    </v-main>
    <v-footer app>
      フッター
    </v-footer>
  </v-app>
</template>

<script>
export default {

}
</script>

メニューが出ない人は画面幅を広げてみてください。レスポンシブルデザインのため画面サイズに応じた画面表示となります。

次にヘッダバーにメニューの表示切り替えをするボタンを追加してみましょう。線が積み重なっているのでハンバーガーアイコンという様です。

これだけではボタンとして動かないので、次のコードを追加してください。ハンバーガーアイコンを押すとメニューが出てくる様になりました。

src/App.vue

...
<v-app>
    <v-navigation-drawer app　v-model="drawer">
...
    <v-app-bar color="#0182D1" app>
      <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
      <v-toolbar-title>CREiST年末勉強会</v-toolbar-title>
 ...
export default {
  data () {
    return {
        drawer: null
    }
  }
}
...

<v-navigation-drawer>タグにあるプロパティ v-model はVue.jsを使ってフォームを構築する際に使う機能です。ハンバーガーアイコンを押下して押下フラグ(drawer)変更した値をものを

細かい設定はドキュメントをみて少しずつ変えていってみてください。

• 公式ページのマニュアル (Navigation drawers)
• 公式ページのAPIリファレンス (Navigation drawers)

次はヘッダにボタン、ドロップダウンメニュー、アイコンをVuetifyのコンポーネントを利用して作成していきましょう。

ボタン作成

<v-app-bar>タグの中にボタンを追加します。ボタンの作成はv-btnタグを利用します。次のコードの様に変更してください。

src/App.vue

...
   <v-app-bar color="#0182D1" app>
      <v-app-bar-nav-icon @click.stop="adrawer = !adrawer"></v-app-bar-nav-icon>
      <v-toolbar-title>CREiST年末勉強会</v-toolbar-title>
      <v-spacer/>
      <v-btn color="#9182D9">会社紹介</v-btn>
    </v-app-bar>
...

<v-spacer/>はボタンの位置を調整するためのスペースです。
&nbsp;とかは無視されてしまうのでvuetifyまたはvueの機能でデザインを調整する必要がある様です。

公式サイト [Buttons]などを参考にボタンのカスタマイズを行ってください。

ボタンはこのままでは何もしないのでドロップダウンメニューを追加していきましょう。
次の様に<v-app-bar>の中を編集するとボタンの選択肢として「会社紹介」「沿革」が出てきます。

src/App.vue

...
    <v-app-bar color="#0182D1" app>
      <v-app-bar-nav-icon @click.stop="adrawer = !adrawer"></v-app-bar-nav-icon>
      <v-toolbar-title>CREiST年末勉強会</v-toolbar-title>
      <v-spacer/>

      <!-- 変更(開始) -->
      <v-menu offset-y>
      <template v-slot:activator="{on}">
      <v-btn v-on="on" color="#9182D9">会社紹介</v-btn>
      </template>
      <v-list>
        <v-list-item>
          <v-list-item-content>
            <v-list-item-title>会社情報</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
        <v-list-item>
          <v-list-item-content>
            <v-list-item-title>沿革</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-menu>
    <!-- 変更(終了) -->

    </v-app-bar>
...

<v-list>がリストを作るタグ、<v-list-item>が要素、<v-list-item-content>が中身となります。

<template>タグのv-slot:activator="{on}"は何でしょう。
v-slot:activator="{ on }"の仕組みの考察
といったブログが参考になりました。ボタンからイベントを渡すものという理解で良いかと思います。

次に、選択肢をタグの中に埋め込んだらレガシーなhtml書いているので同じ手間がかかってしまいます。リストで渡す方法を説明します。

<script>タグの中を次の様に書き換えます。これでcompany_menuはリストを設定できる様になりました。

src/App.vue

<script>
export default {
  data () {
    return {
      drawer: null,

      company_menu: [
        '会社紹介',
        '沿革',
        '連絡'
      ]

    }
  }
}
</script>

<v-list>タグの中を次の様に編集します。

src/App.vue

      <v-list>
        <v-subheader>ヘルプ</v-subheader>
        <v-list-item v-for="menu_item in company_menu"
        :key="menu_item">
          <v-list-item-content>
            <v-list-item-title>{{ menu_item }}</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>

既にVue.jsを学び始めている人は知っているかも知れませんが、v-forでそのタグの中身を繰り返すことができます。v-forにはx in xsと書くことでxsリストの各要素xについてループできます。
{{}}の中にその要素の変数名を書けば値を埋め込んでくれます。この記述ができることでHTMLを複数回記述したり、どこからどこまでをループにするかといったことを意識せず繰り返しができます。

次の章では左側のメニューを作っていきます。