はじめに
こんにちは。
Kojirockの1人アドベントカレンダー Advent Calendar 2018の6日目の記事です。
以下の本を読んで勉強できたことを記載していきます。
今回は第6章です。
- 作者: 川口和也,喜多啓介,野田陽平,手島拓也,片山真也
- 出版社/メーカー: 技術評論社
- 発売日: 2018/09/22
- メディア: 単行本(ソフトカバー)
- この商品を含むブログを見る
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.
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
にアクセスします。
表示されました。
6.6 単一ファイルコンポーネントの機能
SFCのその他いろいろな機能の紹介がされていました。
1. 外部ファイルのインポート
template, script, style全てにおいて、importすることができます。
<template src="./aaa.html"></template> <script src="./bbb.js"></script> <style src="./ccc.css"></style>
2. スコープ付きCSS、CSSモジュール
<style scoped>
とすることで、そのSFC内の要素のみに適用されるstyleとして定義できます。
これは、最終的に排出されるcssファイルが1ファイルになるため、かぶらないための対応なのだと思います。
CSSモジュールは、<style module>
という指定になります。
moduleの場合はスコープの指定の仕方が違うようです。
:class="$style.style_name"
という感じで指定する形です。
終わりに
簡単な感じで終わっちゃいました。。。
次は自分的鬼門のVuexのところです。
がんばります。