『Vue.js入門』輪読会 6章
6. 単一ファイルコンポーネントによる開発
６章の内容
単一ファイルコンポーネントの説明
本に記述されているコードのサンプルは以下の公式URLからダウンロードできます。
gihyo.jp
6.1 ツールのインストール
Node.js、npmのインストール
インストール後に以下のコマンドを実行して、バージョンが表示されればインストール完了。
$ node --version v10.14.2
Nodeインストール時に、npmというNode.jsモジュールの管理ツールもインストールされるので
以下のコマンドでバージョンが表示されるかどうか確認する。
$ npm --version v10.14.2 6.4.1
6.2 単一ファイルコンポーネントとは
Vue.jsのコンポーネントを単独のファイルとして作成する機能
単一ファイルコンポーネントはSFC(Single File Component)、
またはVueコンポーネントと呼ぶこともある。
単一ファイルコンポーネントはコンポーネントのUIを構造化したテンプレート、
コンポーネントの振る舞いを定義したロジック、見た目のスタイルも含めて、
コンポーネントとして定義できる。
6.3 単一ファイルコンポーネントの仕様
単一ファイルコンポーネントを構成するtemplate、script、styleの各ブロックについての説明
6.3.1 templateブロック
コンポーネントのtemplateに対応していて、HTMLを記載する部分
v-で始まる属性のディレクティブも利用可能
6.3.2 scriptブロック
Javascriptを使用できる部分
ライブラリや他のコンポーネントのインポートをここで行う。
6.3.3 styleブロック
HTMLのstyle要素と同じでCSSを定義する部分
6.5 単一ファイルコンポーネントの動作を体験する
6.6 単一ファイルコンポーネントの機能
単一ファイルコンポーネントのほかにも便利な機能の紹介
6.6.1 外部ファイルのインポート
src属性を使用して、各ブロックで外部ファイルをインポートできます。
パスには単一ファイルコンポーネントからの相対パスを設定する。
<template src="./my-template.html"></template> <script src="./my-component.js"></script> <style src="./my-component.css"></style>
6.6.2 スコープ付きCSS
styleブロックにscoped属性を付与することで、その単一ファイルコンポーネントのみにCSSを適用できる。
<style scoped"> ・・・CSSの記述 </style>
6.6.3 CSSモジュール
CSSモジュールでも、CSSのクラス名の衝突を防いでくれる。
以下の例ではtemplateブロックでstyleのクラスを指定している。
<template> <p :class="$style.message">こんにちは！</p> </template> <script> // 省略 </script> <style module> .message { color: #4258b9; } </style>
221ページのフォームテキストボックスに入力があるかどうかのサンプルを実行するコマンドが
間違っているので、気を付けましょう。
実行するファイル名が異なっています。indexではなくnamedです。 $ vue serve index.vue --open $ vue serve named.vue --open
6.6.4 他言語実装のサポート
単一ファイルコンポーネントでは、以下の言語を使用できる。
lang属性を使用することで、他言語実装ができる。
本で記載されている例はtemplateブロックに「Pug」、scriptブロックに「TypeScript」、styleブロックで「stylus」です。
<template lang="pug"> </template> <script lang="ts"> </script> <style lang="stylus"> </style>
単一ファイルコンポーネントの知識は中規模以上のアプリケーション開発において必須になるということなので勉強しましょう。
