「Vue.js」の「SFC」を学ぶ
今回は「SFC(Single File Component)」について学んでいきたいと思います。
「SFC」は「コンポーネント」をファイルごとに作成して、そのファイルを読み込むことで「コンポーネント」が利用できる仕組みです。
「Vue CLI」を利用した「Vueアプリケーション」の作成方法についても学んでいきたいと思います。
「Vue CLI」の仕組みと利用方法
「Vue CLI」は「コマンドライン」で「Vueアプリケーション」の作成ができるツールです。
「Vue CLI」を利用するためには「node.js」と「npm」または「yarn」などの「パッケージマネジメントシステム」を利用しますが、この2つのインストール及び利用方法については「Vue.js」の学習内容と離れてしまうため割愛します。
これ以降の内容は「Vue CLI」をインストールしている前提でご説明をしていきます。
「Vue CLI」で「Vueアプリケーション」を作成するためには「アプリケーションを作成するディレクトリ」に移動してから、コマンドラインに
vue create アプリ名
を入力します。
下記のようにさまざまな「ファイル・フォルダ」が自動で生成されます。
.git（フォルダ） node_modules（フォルダ） public（フォルダ） src（フォルダ） .gitignore babel.config.js jsconfig.json package.json package-lock.json README.md vue.config.js
「SFC」は主に「srcフォルダ」内の「componentsフォルダ」の中に作成をしていきます。
「componentsフォルダ」の内容は、
assetsフォルダ componentsフォルダ App.vue main.js
のようになっています。
「App.vue」の内容が「Vueアプリケーション」でルートとなる「SFC」です。
それ以外の「SFC」は「componentsフォルダ」に定義をしていきます。
例えば、「Header」という名前の「SFC」を定義する場合は、「componentsフォルダ」の中に「Header.vue」を定義します。
「SFC」の「vueファイル」の内容は、
<template> //HTMLを記述 </template> <script> //Javascriptを記述 </script> <style> //CSSを記述 </style>
のように定義していきます。
例えば「HeaderComp」という名前の「SFC」を作成してみると、
<template>
<header class="header">
<p>Hello from Header</p>
</header>
</template>
<style scoped>
.header {
background-color: #ddd;
}
</style>
<script>
export default {
name: 'HeaderComp'
}
</script>
のようになります。
「App.vue」で「HeaderComp」を利用するコードは、
<template>
<HeaderComp></HeaderComp>
</template>
<script>
import HeaderComp from './components/HeaderComp.vue'
export default {
name: 'App',
components: {
HeaderComp
}
}
</script>
<style>
</style>
のようになります。
import文で「コンポーネント」をインポートしてから、「template」で利用していきます。
「SFC」を利用することで、ファイル単位で「コンポーネント」を管理することができ、「コンポーネントの管理負荷」が低減されます。
CSSの記述方法について
CSSでは「カプセル化の機能」が備わっています。
<style scoped>
のように「style要素」に「scoped」を付加すると「data-v-27b7d928」のような属性が「Vue.js」によって自動的に付加され、このコンポーネント内でのみ利用できるCSSを定義することができます。
「scoped」を付加せずに「style要素」にCSSを記述するとグローバルなCSSとして認識されます。
基本的に「scoped」を設定した方が「他のコンポーネントとの干渉」を気にせずにコードが書けるため安心して開発に取り組めそうですね。
「style要素」は
<style scoped>
.header {
background-color: #ddd;
}
</style>
<style>
header {
border: solid 1px #000;
}
</style>
のように１つの「SFC」の中に「scoped有り」と「scoped無し」の「２つのstyle要素」を記述することもできます。
より実践的な開発では「SFC」を利用して開発をすることと「Vue CLI」などを利用して開発環境構築の効率化を行うことが主流とのことです。
「コンポーネント」については少しずつ考え方に慣れてきましたが、コードを書いてより実践的な開発ができるようになっていきたいと思います。