Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

前回の続きです

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

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

コンポーネントとは?

コンポーネントの定義

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

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

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

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

読んで学習した技術書

こちらを読んで学びました。
webページやアプリを構成する要素をロジカルに分割できるようになるので学んで良かった1冊です。
スクリーンショット 2020-06-21 16.58.29.png

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

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

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

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

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

理由としては

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

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

スクリーンショット 2020-06-21 17.09.30.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.jsonpaths

いろいろ確認していたのですが…
こちらのissueにたどり着きました。

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

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

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

通った!!!

スクリーンショット 2020-06-21 18.58.02.png

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

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

今回のまとめ

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

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

今回のコミット

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

couragenki
長崎の工業高校卒25歳。18歳で上京し東芝に入社。 22歳のときにプログラミング未経験から独学でWeb系企業に転職。 サイト制作、ゲーム開発、SNSマーケティングなどを担当。 その後新規事業の立ち上げや新作ソーシャルゲーム開発、PHPによるバックエンド開発などを経験。 現在はDeNAにてフロントエンド開発に従事しております。
https://note.com/genki_matsubara
dena_coltd
    Delight and Impact the World
https://dena.com/jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away