カテゴリー
サインイン 新規登録

間違いや改善の指摘

内容の技術的な誤り・誤字脱字やミスのご報告・解説やトピックの追記/改善のご要望は教材をさらに良くしていく上でとても貴重なご意見になります。

少しでも気になった点があれば、ご遠慮なく投稿いただけると幸いです🙏

実際には誤りではなく勘違いであっても、ご報告いただけることで教材のブラッシュアップにつながります。

質問ポリシー①

教材受講者みなさんのスムーズな問題解決のために、心がけていただきたいことがあります。

教材の内容に関する質問を投稿しましょう

教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。

その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。

2-2

Nuxt.jsアプリとContentfulを連携させよう

このパートでは記事データの置かれたContentfulと、記事を表示させる場であるNuxt.jsアプリを連携させる方法を学びます。この教材の肝になるパートなので、じっくり取り組みましょう。

連携の手順は、公式ドキュメントに詳しく説明されていますので、これにしたがって進めていきます。

npmでcontentfulをインストールしよう

まず、連携に必要なツールをnpmからインストールします。

以下のコマンドを実行してください。

bash
1
Copied!
$ npm install contentful --save

以下のような実行結果が出力されれば成功です。

Copied!
$ npm install contentful --save ... + contentful@7.13.1 added 4 packages from 3 contributors and audited 13376 packages in 25.621s

連携に必要なファイルを作成しよう

続いて設定ファイルとなるcontentful.jssrc/plugins/配下に追加します。

追加したファイルを以下のように編集してください。

src/plugins/contentful.js
123456789101112
Copied!
// src/plugins/contentful.js const contentful = require('contentful') const config = { space: process.env.CTF_SPACE_ID, accessToken: process.env.CTF_CDA_ACCESS_TOKEN } module.exports = { createClient () { return contentful.createClient(config) } }

続いてsrc/配下に.contentful.jsonファイルを作成してください。このファイルは連携のためのコードを保管するためのものです。前章の最後にContentfulで取得した2つのコードを次のようにペーストしてください。

src/.contentful.json
123456
Copied!
// src/.contentful.json { "CTF_SPACE_ID": "Space ID", "CTF_CDA_ACCESS_TOKEN": "access token" }

nuxt.config.jsを編集しよう

最後にsrc/nuxt.config.jsを次の通りに編集してください。

src/nuxt.config.js
12345678910111213141516171819202122
Copied!
// src/nuxt.config.js // ここから追加 const config = require('./.contentful.json') const contentful = require('contentful') // ここまで追加 export default { mode: 'universal', /* ** Headers of the page */ // ここから追加 env: { CTF_SPACE_ID: config.CTF_SPACE_ID, CTF_CDA_ACCESS_TOKEN: config.CTF_CDA_ACCESS_TOKEN }, // ここまで追加 ・ ・ ・

1つずつ説明していきます。

js
12
Copied!
const config = require('./.contentful.json') const contentful = require('contentful')

上記コードは先ほど作成した設定ファイルをconfigという定数とし、また先ほどインストールしたcontentfulのプラグインをcontentfulという定数としています。

js
1234
Copied!
env: { CTF_SPACE_ID: config.CTF_SPACE_ID, CTF_CDA_ACCESS_TOKEN: config.CTF_CDA_ACCESS_TOKEN },

上記コードは環境変数としてスペースIDとアクセストークンを設定しています。各変数の値は設定ファイルから引っ張ってきています。

以上でプロジェクトフォルダの下準備が完了しました。次の章ではアプリの中身を作っていきます。