Help us understand the problem. What is going on with this article?

contentfulとreact使ってブログ記事を表示

概要

Contentfulとは

Contentfulは見た目がついてないCMSで、ブログやニュースなどの記事のモデルを定義すると、定義したモデルに対しAPI経由で実際の記事(データ)を登録したり参照したりできるものです。

乱暴にいうとWordpressの見た目がついてない記事管理機能って感じです。

やりたいこと

Contentfulで定義したブログ記事を、Reactで表示させようと思います。

事前準備

Contentfulに登録しておきます
https://app.contentful.com/

1.ブログの記事を作る

Contentfulの管理画面でブログの記事を作っていきます。

spaceを作る

Contentfulに登録してログインしたら、ヘッダメニューのトグルを開き+Create spaceをクリックして適当なスペースをひとつ作ります。

スクリーンショット 2019-12-27 13.16.53.png

Content Modelを作る

記事の原型となるモデルを定義します。
Content modelを開き、Add content type のボタンをクリックします。

ダイアログで Nameに Post など適当な名前をつけて Createします。
これはPostというテーブルを作った形となります。
あとはフィールドとしてtitle、bodyを追加していきます。(右のサイドメニューから追加できます)
こんな形になればOKです。右上にある Saveで保存します。

スクリーンショット 2019-12-27 13.28.19.png

記事を追加する

Contentを開くと、定義したモデルに記事が追加できるようになっています。

スクリーンショット 2019-12-27 13.29.27.png

適当に記事を2つくらい追加したら終わりにします。

スクリーンショット 2019-12-27 13.31.32.png

2. APIキーを設定する

次に、これらをAPIから呼び出すときに必要なトークンを追加します。
Settings から API Keysを開きます。

Add API Key をクリックしてキーを追加します。追加できるとトークンなどを確認できます。
スクリーンショット 2019-12-27 13.39.54.png

作成したキーの Space IDと Content DeliveryAPI -access token は後で利用します。

3.Reactから記事を呼び出す

次にReactで記事を表示してみます。

reactの雛形を作成

# create-react-app contentfultest
# cd contentfultest 

次に、contentfulのAPIを使えるようにします。

# npm install --save contentful

あとはApp.jsを次のように変更します。
<SpaceID><Content Delivery API -access token> は先ほど作成したAPIキーの各値を貼り付けます。

import React from 'react';
import './App.css';
import * as contentful from 'contentful';

class App extends React.Component{

  client = contentful.createClient({
    space: "<Space ID>",
    accessToken: "<Content Delivery API - access token>"
  });

  state = {
    items: []
  }

  componentDidMount = () => {
    this.client.getEntries()
    .then((response) => {
      this.setState({
        items: response.items
      });
    });
  }

  render(){
    return (
      <div>
        {
          this.state.items.map((item) => (
            <li>{item.fields.title}</li>
           ))
        }
      </div>
    );  
  }
}


export default App;

これで npm start すると次のように記事一覧が取得できます。

スクリーンショット 2019-12-27 13.45.06.png

簡単なコードなので解説するまでもないですが、

  1. APIトークンを設定したclinetをcreateClient()で作成
  2. clientでgetEntriesを呼び出し、全記事を取得
  3. stateのitemsにentriesのitemを入れる
  4. 画面上に各itemのtitleを表示

という感じです。
モデルで設定した各フィールドは fields.xxxx で取得できます。
なので、記事本体を表示したい場合は上のコードの流れで言えば item.fields.body とすると本文を表示できます。

APIリファレンス

Contentful のAPIリファレンスはこちら

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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした