Vue.jsすら触ったことのない私が、案件でNuxt.jsを使うことになりました。
実際に触ってみた所感を残したいと思います。
今回の案件の概要
- TOPページと、下層に記事コンテンツを複数ページ作成
- 記事コンテンツのレイアウトは全て同じ
コンポーネントを組み合わせて作る
Pugで開発をしていた時もヘッダーやフッター・頻出するボタン等はコンポーネント化して使用していましたが、今回はほとんど全てのパーツをコンポーネント化し、それを組み合わせてページを作っています。
example.vue
<template>
<div>
<OrganizationHeader />
<main class="main">
<section class="contents">
<article class="article">
<!-- 記事タイトルを表示するコンポーネント -->
<OrganizationArticleHead :page-title="page.articleTitle" />
<section class="article__main">
<p>
{{ page.introText }}
</p>
<!-- 記事の見出しを取得して目次を作るコンポーネント -->
<MoleculesToc :page-toc="page.toc" />
<!-- 記事の本文 -->
<nuxt-content :document="page" :page-data="page" />
</section>
</article>
</section>
<!-- おすすめ記事を表示するコンポーネント -->
<OrganizationRecommend :page-slug="page.slug" />
</main>
<!-- パンくずリストを表示するコンポーネント -->
<OrganizationBreadcrumb :link-data="breadcrumbData" />
</div>
</template>
<!-- データの受け渡し -->
<script>
export default {
props: {
breadcrumbData: {
type: Object,
default: () => {}
},
page: {
type: Object,
default: () => {}
}
}
}
</script>
<!-- cssファイルの読み込み -->
<style lang="sass">
@use '~/assets/sass/style'
</style>
今回の記事コンテンツは、後述するNuxt Contentを利用して制作しましたが、記事本文となるMarkdownファイルにページ固有の情報を持たせています。
記事タイトルやmeta情報で使用するdescription、keywords等の情報をpropsにてpageで取得し、各コンポーネントへ渡しています。
Nuxt Contentで記事作成
Nuxt.jsで記事やブログを作成するための機能、Nuxt Contentを導入しました。
記事の中身となる部分をMarkdownファイルで作り、meta情報に入れるdescriptionやkeywordsなどをこのファイルに記述します。
example.md
---
title: Nuxt Contentで記事作成
description: Nuxt Contentで記事作成のディスクリプション
slug: example
metaKeywords:
- Qiita
- 例文
- 初心者
---
<h2>見出し</h2>
<p>
HTMLタグも使えるし、Markdown記法も使えます
</p>
<div class="article__img">
<atoms-picture :src="'./assets/images/img_001.jpg'" :width="740" :height="450" alt="" ></atoms-picture>
</div>
<p>
.md内でコンポーネントも使用できます
</p>
ディレクトリ構成が（割と）複雑
Pugなどで開発する時に比べると、ディレクトリ構成が複雑だなという印象でした。
.nuxt // Nuxt.jsを利用するためのファイル
assets // cssやjsonファイルを格納
components // コンポーネントファイルを格納
content // 記事本文となるMarkdownファイル
dist // 納品用ファイル
layouts // サイト全体のベースファイル
pages // TOPや下層のベースファイル
src // 画像を格納
static // 最適化した画像などを格納
store // jsonファイルを利用する時のstoreの設定ファイル
ディレクトリ構成が少々複雑な分、ファイルの所在が分かりやすくなり管理がしやすいかと思います。
感想
最初はコンポーネント化やデータの受け渡しなど、やり方を理解するまでにかなり時間がかかってしまいました。
ですが、ある程度理解してくると開発がとても楽しくなり、またNuxt.jsで開発したい！と思えました。
いろんなサイト制作に活用できそうなので、また機会があれば導入してみたいです。