Vue.js童貞がネコ本読んで得たもの④

はじめに

本稿はフロントエンド領域から逃げてきたバックエンドエンジニアが追い詰められて0から勉強した軌跡である。詳細は前回をご参照ください＾＾

ネコ本とは？

みんな大好きMio様の名著「基礎から学ぶ Vue.js」です。
https://www.amazon.co.jp/dp/B07D9BYHMZ

童貞卒業までの道程

• （済）基本
• （済）データバインディング、条件分岐、繰り返し
• （済）ハンドラ、双方向バインディング
• （済）算出プロパティ
• （済）ウォッチャ、フィルタ
• （済）コンポーネント
• VueCLI、単一ファイルコンポーネント ←今日はここまで
• Vuex
• Vue Router

そろそろ本格的になってきましたね＾＾

VueCLI

VueはVue.jsを指しますが、CLIとは「コマンドラインインターフェース（command line interface）」を指します。
画面でボタンぽちぽちするのではなく、コマンドをカタカタして実行できる便利機能のことですね。

今までのように単一のjsファイルとhtmlファイルを作成して、CDNを読み込んでいくつかのVueインスタンスと単一のhtml文書を作成するだけで完結する世界ならVueCLIは不要なのかもしれません。

しかし、世界はもっと複雑にできています。
複数の画面構成や多数のコンポーネントが相互に入り乱れ、外部のオープンソースなモジュールや新しく開発のエコシステムに組み込まれることを望んでいるツール群が世界には溢れています。

一つ一つを導入しようとしても、やれ依存関係だの、バージョンの競合だのと問題は常に発生します。

そんな中で、webpackのようなビルドツールを用いたりして標準的な開発環境を構築するためにVueCLIを利用します。

インストール

VueCLIのインストールにはnpmが必要です。
それぞれの環境に合わせて適宜インストールしましょう。
私の環境はMacなので、homebrewなどを使えば簡単にインストールできます。

homebrewを使ってnodebrewをインストールしてnodeをインストール

まずはnodebrewをインストールしましょう。
nodebrewとは、Node.jsのバージョン管理ツールですね。rubyにおけるrbenv的なやつです。

  $ brew install nodebrew

インストール後、以下のように表示されればOKです。

  $ nodebrew
  => nodebrew 1.0.1

その後は以下の記事を参考に、nodeとnpmをインストールしましょう。
https://qiita.com/Alex_mht_code/items/422f5ce10d9c9d5729b7

npmをインストールできたあとは、以下のようにインストールしましょう。

  $ npm install -g vue-cli
  // インストールできたら念の為バージョンを確認しましょう。
  $ vue --version
  => 2.9.6

テンプレートを利用したskeletonの構築

  $ vue init webpack smaple-vue-app

上記のwebpackはテンプレート名、smaple-appはアプリケーション名ですね。
構築最中いくつか質問されますので適宜回答しましょう。
いくつかのディレクトリとファイルができました。

アプリの起動方法は以下の通りです。

  $ cd sample-vue-app
  $ npm run dev

以下のように表示されます。

 DONE  Compiled successfully in 2047ms
 I  Your application is running here: http://localhost:8080

そのまま、 ブラウザで「 http://localhost:8080 」にアクセスしたところブラウザエラーががが、、、
どうやらESETというセキュリティソフトの影響のようなので、「 http://0.0.0.0:8080 」にアクセスしたら以下のように無事表示されました＾＾

単一ファイルコンポーネント

単一ファイルコンポーネント（Single File Components 略して「SFC」）とは前述したように、より複雑なアプリケーションを構築する際に、単一のjsファイル、htmlファイルでいくつものコンポーネントを書いていると、どこに何書いたのかわかりにくくなったり、依存関係がつかみにくくなります。何より複数人で開発していて、同じファイルを何人でも触っているよ余裕でコンフリクトが発生してソースコードをマージする時に死ねる。

そんな自体を防ぐためために、コンポーネント後tに利用するhtml、js、CSSを一つのファイルの中に全てまとめてしまって、コンポーネントごとにコードを集約するという方法を実現するための機能です。

こんな言葉があるのかはわかりにくいですが、コンポーネント指向って感じですね＾＾

単一ファイルコンポーネントの拡張子は.vueです。
ファイルの中身は以下のような形ですね。

<template>
  <div class="example">
    <span class="title">{{text}}</span>
  </div>
</template>

<script>
export default {
  name: 'Example',
  data() {
    return {
      text: 'hello'
    }
  }
}
</script>

<style scoped>
span.title { color: #000000; }
</style>

htmlのテンプレート、JS、CSSと全ての記述が一つの単一ファイルコンポーネントに記述されていますね。
これでこのテンプレートを修正するときはこのファイルだけを修正すれば完結しそうです。

上記の内容を、前述のvue-cliで構築したを作成したskeletonの、src/components配下にExample.vueというファイル名で保存しましょう。

作成した単一ファイルコンポーネントを表示したいですよね。
src/components/App.vueの中身を以下のように書き換えましょう。

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <Example/>  ## ここを書き換える
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'
import Example from './components/Example'　 ## 追記


export default {
  name: 'App',
  components: {
    Example  ## ここを書き換える
  }
}
</script>

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

これで、作成した単一ファイルコンポーネントの内容が書き換わりました。ずいぶんシンプルになりましたね。

終わりに

ちょっとアプリケーション開発っぽくなってきました。
今日はこの後牛タン食べに行くのでボリューム少なめで＾＾