「Nuxtでプログを構築しよう!!」の4回目。今回は、プログ全体の構成を考えよう。
「Nuxt でプログを構築しよう」の 4 回目のブログとなります。今回はプログ全体の構成を考えてみたいと思います。Nuxt の標準的なフォルダー構成を元に考えて、どんなページを用意するか、またどんなコンポーネントを作成するのかも考えたいと思います。
フォルダーの構成
Nuxt の標準的フォルダー構成を元にカスタマイズしていきます。今回は、言語切替用の共有エリアとして新たしく composables フォルダを追加しましたが、その他のフォルダは標準の物にファイルを追加、更新してカスタマイズしていきます。
composition-api+store モデルは、私には少し複雑に感じましたので、composition-api+composables モデルにして、グローバルに利用できるように provide/inject 方式にしてみました。composables モデルは本来グローバル共有モデルにはしないのかなぁとも感じますが今回こちらを採用してみました。今回のフォルダー毎の用途は以下のようになりました。
| フォルダー | 説明 | 内容 | |
|---|---|---|---|
| .vscode | vscode 用フォルダです。 | 何もしません。 | |
| .nuxt | nuxt モジュールが入っています。 | 何もしません。 | |
| middleware | ミドルウェア用フォルダです。 | 何もしません。 | |
| node_modules | node モジュールが入っています。 | 何もしません。 | |
| store | ストア用フォルダです。 | composables モデルを利用しますのでこちらは何もしません。 | |
| x | components | コンポーネント用フォルダです。 | 画面で利用するコンポーネントを登録していきます。 |
| x | composables | composables 用フォルダです。 | 新規にフォルダを作成してここに言語切替管理モジュールを登録します。 |
| x | plugins | ブラグ引用フォルダです。 | 上記の言語切替管理モジュールをプラグイン登録用です。 |
| x | layout | レイアウト用フォルダです。 | default.vue をカスタマイズしていきます。 |
| x | pagges | ページ用フォルダです。 | ルート、記事一覧、記事ページを作成していきます。 |
| x | assests | アセット用フォルダです。 | 辞書用のデータをいれていきます。 |
| x | static | スタテック用ファイルのフォルダです。 | プログで表示する画像ファイルを登録します。 |
| x | content | 記事を登録するファルダです。 | ここに Markdown ファイルを作成します。 |
今回 x 印のものについてファイルの作成や修正をしていきます。
ブログの基本機能
今回構築する基本的な機能を洗い出してみました。
[コンポーネント]
| No | 機能名 | 名称 | 説明 |
|---|---|---|---|
| 1 | ヘッダー | /components/Header | ヘッダーを表示します。 |
| 2 | ロゴ | /components/Logo | ブログロゴを表示します。 |
| 3 | メニュー | /components/Menu | メニューを表示します。 |
| 4 | 言語切り換え | /components/Lang | 言語を切り換えます。 |
| 5 | 記事一覧 | /components/Articles | 登録されてい記事の一覧を表示します。タグを指定すると記事に登録したタグの記事の一覧を表示します。 |
| 6 | 記事 | /components/Article | 該当する記事情報を取得します。 |
| 7 | 記事表示 | /components/Card | 記事の情報を元に記事を表示します。 |
| 8 | 記事遷移 | /components/PrevNext | 前後の記事のリンクを表示します。 |
| 9 | メッセージ | /components/Msg | エラーなどのメッセージを表示します。 |
| 10 | フッター | /components/Footer | フッタを表示します。 |
[共通モジュール]
| No | 機能名 | 名称 | 説明 |
|---|---|---|---|
| 1 | 言語切替管理 | /composables/i18n-like | 言語切替を管理するモジュールです。 |
| 2 | 言語切替管理プラグイン | /plugins/i18nLikePlugin | 言語切替管理用プラグインです。 |
画面遷移
index.vue,search/_slug.vue,blog/_slug.vue の各画面は default.vue を共通として包含しています。ルート画面は、index.vue に記載します。Articles を呼び出して記事の一覧を表示します。一覧の記事をクリックすると Article を呼び出し記事を表示ます。
各画面の共通のヘッダにあるブログロゴをクリックすると/blog/_slug.vue(/blg/about)を呼び出しブログの説明記事を表示します。メニューをクリックすると/search/_slug.vue を呼び出してメニューに設定されているタグをキーに該当するタグの記事一覧を表示します。記事一覧から該当する記事をクリックすると該当する記事を表示します。またヘッダーにある言語切り換えボタンを押すと、言語に合わせた記事を表示します。言語は en と ja の二カ国のみです。
おおよその概要仕様が決まりましたので、基本となるレイアウト画面を次に作成したいと思います。