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

前回の続きです

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

前回の内容
Nuxt.js + TypeScriptのサイトにfaviconと画像を表示する

コンポーネントとは？

コンポーネントの定義

部品・要素という意味っぽいという認識
http://e-words.jp/ より引用

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

Nuxt.jsにおいてのコンポーネント

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

読んで学習した技術書

こちらを読んで学びました。
webページやアプリを構成する要素をロジカルに分割できるようになるので学んで良かった1冊です。

コンポーネントを追加する

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

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

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

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

理由としては

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

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

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

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にたどり着きました。

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

npm install --save-dev node-sass sass-loader

環境構築の時にインストールしたつもりでしたが忘れていました。
という訳でインストールしてあげる。

通った！！！

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

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

今回のまとめ

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

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

今回のコミット

ヘッダーコンポーネントを追加
 sassのインストール

完