Nuxt.js + TypeScriptのサイトにコンポーネントを追加していく

## 前回の続きです
今回はnuxt.jsで作成しているサイトにコンポーネントを追加していきます。

前回の内容
[Nuxt.js + TypeScriptのサイトにfaviconと画像を表示する](https://qiita.com/GenkiMatsubara/items/216c75f2dd2bd2c7a09d)

## コンポーネントとは？

### コンポーネントの定義
部品・要素という意味っぽいという認識
[http://e-words.jp/ より引用](http://e-words.jp/w/%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88.html)


> コンポーネント
構成要素。部品。
コンピュータ機器やソフトウェアの部品。
ステレオで、チューナー・アンプ・プレーヤー・スピーカーなどの単独の機器。コンポ。

### Nuxt.jsにおいてのコンポーネント
Nuxt.jsにおいては複数箇所において使用する機能や要素をコンポーネント化して再利用する。
ちょうど1年前に読んだアトミックデザインの考え方に共感してコンポーネントを作成するときは作るコンポーネントがAtom〜Templatesのどれなのかを考えながら作成するようにしています。
個人的にこの分類の仕方がわかりやすいためこのようにしています。

#### 読んで学習した技術書
こちらを読んで学びました。
webページやアプリを構成する要素をロジカルに分割できるようになるので学んで良かった1冊です。
<img width="975" alt="スクリーンショット 2020-06-21 16.58.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199085/dac3d9fb-1c58-00fb-1152-0f7bf0413810.png">


## コンポーネントを追加する
今回は試しにヘッダーを追加していこうと思います。
順序はこんな感じです。

1. componentsディレクトリとAtoms~Templatesディレクトリを作成
2. header.vueファイルを作成する
4. コンポーネントのtemplateタグ内にhtmlとcssを追加
6. 使用するファイルで読み込む(import)する

### 1.componentsディレクトリとAtoms~Templatesディレクトリを作成

それぞれ作成するコンポーネントファイルを入れるディレクトリを作成します。
アトミックデザインを学びながらサイト作成するときはこの分割にしています。

理由としては

- このボタンはAtomになるなと思ったらAtomに格納
- この要素はOrganismと思ったらOrganismに格納

と行った具合に明確にできるのでこの設計が気に入っています。

<img width="411" alt="スクリーンショット 2020-06-21 17.09.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199085/cdd8259c-eba5-fa36-b27e-7fdf95ed3b33.png">

チームで運用する場合は要素をどのように管理するかなどのコミュニケーションコストが発生したりしますが今回は個人開発なのでこちらで進めます。


### 2.header.vueファイルを作成する
今回作成する`header.vue`を追加します。
ヘッダーはアトミックデザイン的に`organism`に属すると判断し他ので`Organism`ディレクトリに追加しました。
テンプレートで読み込んで再利用していく予定です。

### 3.コンポーネントのtemplateタグ内にhtmlとcssを追加
コードを追加していきます。
cssに`scoped`を設定することでこちらに記載したcssファイルの影響範囲をこのコンポーネント内に限定することができます。

``` components/Organism/header.vue
<template>
  <header class="header">
    <div>ブログタイトル</div>
  </header>
</template>

<script>
export default {
  name: "header"
};
</script>
<style lang="scss" scoped>
header {
  width: 100%;
  height: 100px;
  background: orange;
}
</style>
```

### 4.使用するファイルで読み込む(import)する
作成したコンポーネントを使用するファイルでimportします。
今回は`page/index.vue`で読み込みます。

``` pages/index.vue
<script lang="ts">
import Header from "@/components/Organisms/header.vue";

export default {
  components: {
    Header
  }
};
</script>
```
呼び出す際は`@/components`の絶対パス指定で呼び出すことでディレクトリ構成の変更などで呼び出す側のファイルを移動させてもコンポーネントの置き場所が変わっていなければ変更なしで呼び出せるので便利です。

そして作成したコンポーネントを呼び出したところ…

```
This relative module was not found:
```

まさかのエラー…
何度確認してもパスの指定などに問題はなし

#### このエラーで確認したこと

- ファイル名
- `.vue`のつけ忘れ
- `vue-shim.d.ts`の有無
- `tsconfig.json`の`paths`

いろいろ確認していたのですが…
[こちらのissue](https://github.com/nuxt/nuxt.js/issues/2713)にたどり着きました。

今回のエラー、要は作成したコンポーネントのsassが存在しないことに対するエラーでした。

```
npm install --save-dev node-sass sass-loader
```
環境構築の時にインストールしたつもりでしたが忘れていました。
という訳でインストールしてあげる。


***通った！！！***

<img width="1163" alt="スクリーンショット 2020-06-21 18.58.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199085/79cc59db-177d-3d5a-dbc1-f95bbda061cb.png">

とりあえず想定通りに表示できました。

日本語の記事が少ないので英語で検索していましたが貧弱な私の英語力では時間がかかってしまった…

## 今回のまとめ
とりあえず今回やりたかったコンポーネントの切り分けと追加・表示は達成できました。
コンポーネントの分類や管理は設計でもかなり重要な役割を果たすので必要に応じて変更していくと思います。

エラーではsassのインストール忘れという思わぬミスで原因がパッと思いつかず時間を取られてしまいました。
今回でコンポーネント作成まで出来たので次回からはガンガン実装していきます。

### 今回のコミット
[ヘッダーコンポーネントを追加](https://github.com/GenkiMatsubara/genki-blog/commit/704bf23eece34420cadcd063f54322dc07403c6b)
[sassのインストール](https://github.com/GenkiMatsubara/genki-blog/commit/cdc697ab9bc457a50dd24bf676281136213a7259)

完