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

# 概要

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

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

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

## 事前準備

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


# 1.ブログの記事を作る

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

## spaceを作る

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

<img width="337" alt="スクリーンショット 2019-12-27 13.16.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252067/ca62af7c-b7b1-06bc-6481-99e83af5127e.png">

## Content Modelを作る

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

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

<img width="1073" alt="スクリーンショット 2019-12-27 13.28.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252067/4717c2ff-8add-2233-ce67-e68c9d8275dd.png">

## 記事を追加する

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

<img width="1082" alt="スクリーンショット 2019-12-27 13.29.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252067/60386b9c-b5e3-ad7c-cf3b-af5d859c3cfa.png">

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

<img width="1002" alt="スクリーンショット 2019-12-27 13.31.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252067/1acd6964-ba14-51f9-74c4-2bbfd916bfa7.png">

# 2. APIキーを設定する

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

Add API Key をクリックしてキーを追加します。追加できるとトークンなどを確認できます。
<img width="998" alt="スクリーンショット 2019-12-27 13.39.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252067/f7791988-f235-9aa2-e7c2-d89a618fe77b.png">

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

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

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

reactの雛形を作成

```console
# create-react-app contentfultest
# cd contentfultest 
```

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

```
# npm install --save contentful
```

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

```react
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 すると次のように記事一覧が取得できます。

<img width="616" alt="スクリーンショット 2019-12-27 13.45.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252067/830802c9-a7c9-dc32-f739-d2b221718440.png">


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

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


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

## APIリファレンス

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

- https://www.contentful.com/developers/docs/references/content-management-api/#/reference