もがき系プログラマの日常

もがき系エンジニアの勉強したこと、日常のこと、気になっている技術、備忘録などを紹介するブログです。

Vue.js入門 基礎から実践アプリケーション開発までを読んだ vol.6

はじめに

こんにちは。

Kojirockの1人アドベントカレンダー Advent Calendar 2018の6日目の記事です。

以下の本を読んで勉強できたことを記載していきます。

今回は第6章です。

Vue.js入門 基礎から実践アプリケーション開発まで

Vue.js入門 基礎から実践アプリケーション開発まで

6章 単一ファイルコンポーネントによる開発

目次

6.1 ツールのインストール

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

6.3 単一ファイルコンポーネントの仕様

6.4 単一ファイルコンポーネントのビルド

6.5 単一ファイルコンポーネントの動作を体験する

6.6 単一ファイルコンポーネントの機能





「単一ファイルコンポーネント」という単語がとにかく多いw

6.1 ツールのインストール

Vue CLIを利便性について述べられています。

実際にVue CLIを使用してのインストールは、ここでは述べられていないので、実践してみます。

$ npm install -g @vue/cli
+ @vue/cli@3.2.1

# デフォルト設定か、手動インストールかを選択します
$ vue create test
Vue CLI v3.2.1
? Please pick a preset: (Use arrow keys)
  default (babel, eslint)     ← デフォルト設定
❯ Manually select features    ← 手動設定(一旦こっち選んで見る)

# 同時にインストールしたい機能を選択します
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router ← この2つにチェックを入れます 
 ◉ Vuex   ← この2つにチェックを入れます
 ◯ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing
 
# Vue Routerのヒストリーモードを使用するかどうかを選択します
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Yes

# LinterとFormatterの設定を選択します
? Pick a linter / formatter config: (Use arrow keys)
  ESLint with error prevention only
  ESLint + Airbnb config
❯ ESLint + Standard config  ← この辺はよくわからなかったので、Standardにしておきます
  ESLint + Prettier
  
# 追加のLint機能を選択します(Lintの実行タイミング)
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◉ Lint on save
 ◯ Lint and fix on commit
 
# Babel、PostCSS、ESLint等の設定をどこで行うかを選択します
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files ← それぞれの設定ファイルで行う
  In package.json

# 次回からもこの設定を使うために、設定を保存するかどうかを選択します
? Save this as a preset for future projects? (y/N) Yes

# どこに保存するかを入力します
? Save preset as:
./setteing



Vue CLI v3.2.1
✨  Creating project in /path/to/test.
🗃  Initializing git repository...
⚙  Installing CLI plugins. This might take a while...

yarn install v1.12.3
info No lockfile found.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...

success Saved lockfile.
✨  Done in 135.72s.
🚀  Invoking generators...
📦  Installing additional dependencies...

yarn install v1.12.3
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 📃  Building fresh packages...

success Saved lockfile.
✨  Done in 42.73s.
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project test.
👉  Get started with the following commands:

 $ cd test
 $ yarn serve

$ cd test
$ yarn serve
yarn run v1.12.3
$ vue-cli-service serve
 INFO  Starting development server...
 98% after emitting CopyPlugin

 DONE  Compiled successfully in 3536ms                                                                                                                                                                              17:23:20


  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.7.6:8080/

  Note that the development build is not optimized.
  To create a production build, run yarn build.

f:id:kojirooooocks:20181206223015p:plain

OKです。簡単ですね。

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

単一ファイルコンポーネントの簡単な説明が述べられています。 本書の文を引用します。

Vue.jsのコンポーネントを単独のファイルとして作成する機能です。

単一ファイルコンポーネントという呼び方の他に、 SFC(Single File Component)や、 Vueコンポーネントと呼ぶこともあるようです。

Vue CLIで作成されたHelloWorld.vueの中身がわかりやすいと思いますので、記載しておきます。

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
    <h3>Installed CLI Plugins</h3>
    <ul>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
    </ul>
    <h3>Essential Links</h3>
    <ul>
      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
    </ul>
    <h3>Ecosystem</h3>
    <ul>
      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

SFCは、HTML構成(template)と、ロジック(script)と、更にスタイル(style)がそれぞれのブロックに分かれて、一つのファイルの中に閉じ込めたものになります。

設計を気をつける必要がありますが、作り方によっては、使用方法が確立した、再利用性の高いコンポーネントが完成すると思います。

6.3 単一ファイルコンポーネントの仕様

SFCのそれぞれのブロックの説明が述べられています。

基本的に名前通りです。

  • <template>

    テンプレート(HTML要素)を記載します。

    コンポーネントのtemplateオプションと同じく、各種ディレクティブなどを記載できます。

  • <script>

    javascriptを記載します。

    つまりこのブロックがSFCのキモの部分可と思います。

    利用するためにはエクスポートが必要です。以下のようなコードです。

    html <script> export default { // 処理 } </script>

  • <style>

    対象のSFC内のコンポーネントに対してのスタイル(CSS)を記載します。

    lang指定をすることで、書くaltCSSを使用することもできるようです。

    <style lang="stylus">など。公式にも記載されいます。

6.4 単一ファイルコンポーネントのビルド

作成したSFCはvueファイルなので、ブラウザは解析できません。

ブラウザで確認可能にするため変換する必要があります。

このブロックでは、webpackやvue-loaderの説明が述べられています。

6.5 単一ファイルコンポーネントの動作を体験する

実際にSFCを作成してみて、動作を確認するブロックです。

router.jsにコードを追加します。

    {
      path: '/profile',
      name: 'profile',
      component: Profile
    }

src/views/Profile.vueを作成します。

<template>
  <div class="profile">
    <ProfileField name="kojirock" age="34" address="埼玉県"/>
  </div>
</template>

<script>
import ProfileField from '@/components/ProfileField.vue'
export default {
  name: 'profile',
  components: {
    ProfileField
  }
}
</script>

src/components/ProfileField.vueを作成します。

<template>
<table>
  <thead>
    <tr>
      <th>名前</th>
      <th>年齢</th>
      <th>住所</th>
    </tr>
  </thead>
  <tbody>
    <tr>{{ name }}</tr>
    <tr>{{ age }}</tr>
    <tr>{{ address }}</tr>
  </tbody>
</table>
</template>

<script>
export default {
  name: 'ProfileField',
  props: {
    name: String,
    age: Number,
    address: String
  }
}
</script>

<style>
thead tr {
  background-color: aquamarine;
}
</style>

これで、yarn serve を実行して http://192.168.7.6:8080/profile にアクセスします。

f:id:kojirooooocks:20181206223049p:plain

表示されました。

6.6 単一ファイルコンポーネントの機能

SFCのその他いろいろな機能の紹介がされていました。

1. 外部ファイルのインポート

template, script, style全てにおいて、importすることができます。

<template src="./aaa.html"></template>

<script src="./bbb.js"></script>

<style src="./ccc.css"></style>

2. スコープ付きCSSCSSモジュール

<style scoped> とすることで、そのSFC内の要素のみに適用されるstyleとして定義できます。

これは、最終的に排出されるcssファイルが1ファイルになるため、かぶらないための対応なのだと思います。

CSSモジュールは、<style module> という指定になります。

moduleの場合はスコープの指定の仕方が違うようです。

:class="$style.style_name" という感じで指定する形です。

終わりに

簡単な感じで終わっちゃいました。。。

次は自分的鬼門のVuexのところです。

がんばります。