Reactを使ったテックブログを作成してみた

はじめに

React学習用のサンプルとして、REST APIを用いたCRUD操作のを用いた技術ブログを作成してみました。

今回は簡易的に利用できるJSON Serverを使ってデータのやり取りを行っています。アプリケーション内の状態管理にはRedux Toolkit（createAsyncThunk、createEntityAdapter）を利用しました。発展型としては外部サイトに公開できるように外部のデータベースと連携していきたいところです。

記事一覧ページと記事詳細ページ

管理画面と記事確認画面

新規・編集画面

仕様について

今回は下記のような仕様を想定して制作を行いました。

• 閲覧ユーザー向けの機能
  • 記事一覧を表示する（公開設定している記事のみ）
  • 記事詳細を表示する
  • いいねボタンを押すといいねが1増える（何度も押せる）
• 管理ユーザー向けの機能
  • 登録記事一覧を表示する
  • 記事詳細を表示する
  • 記事の編集ができる
  • 記事の公開・非公開の切り替えができる
  • 記事の削除ができる
  • 新規記事の作成ができる
  • 記事はマークダウン記法で登録できる
  • ログイン機能はなし
  • 画像の投稿機能はなし

主な利用サービス・利用技術

• React
• Redux Toolkit
• JSON Server … JSONファイルをデータベースとして利用できる簡易APIサーバー
• react-markdown … Reactで使えるマークダウン変換ライブラリ
• styled-components
• TypeScript

JSON Server

今回外部APIとしてJSON Serverを利用しました。
データベースとしてJSONファイルをそのまま利用することができるので、余計な手間をかけずにすぐに開発に取り掛かることができます。JSON形式のデータを返すAPIであれば、JSON Serverで作成後にURLだけ変えれば外部との連携に簡単に切り替えることもできます。

セットアップ

$ yarn add json-server

データベースとして利用するJSONファイルを用意します。
フォーマットとしてはリソース名を1階層目に必ず用意しなくてはいけません。
今回はブログサイトを想定していますので下記のようなダミーデータを用意しました。

src/data/db.json

{
  "posts": [
    {
      "id": "1",
      "title": "create-react-app直後にやる環境構築の備忘録",
      "createdAt": 1620804168398,
      "updatedAt": 1621064460898,
      "body": "本文テキスト1",
      "image": "/assets/images/dummy01.jpeg",
      "like": 100,
      "publish": false
    },
    {
      "id": "2",
      "title": "Reactを使ったお天気アプリを作成してみた",
      "createdAt": 1620804168398,
      "updatedAt": 1621070951011,
      "body": "本文テキスト2",
      "image": "/assets/images/dummy01.jpeg",
      "like": 112,
      "publish": true
    }
  ]
}

React内で扱う型としては下記を想定しています。
投稿「Post」とその一覧「Post[]」という形です。

src/types/index.ts

export type Post = {
  id: string;
  createdAt: number;
  updatedAt?: number;
  title: string;
  body: string;
  image: string;
  like: number;
  publish: boolean;
};

export type Posts = Post[];

package.jsonにJSON Server起動用のスクリプトを追記します。

package.json

  "scripts": {
    "json-server": "json-server --watch src/data/db.json -p 3001 -d 2000"
  },

--watchをつけることで常時監視モードで起動することができます。
Reactがポート3000を利用するため、-p 3001として3001番ポートで起動するように変更。
また、-d 2000として2秒の待ち時間を入れるようにしています。待ち時間を入れることで非同期のテストも体感的にわかりやすくなのでとても便利です。

$ yarn json-server

ブラウザでhttp://localhost:3001/postsを開くと登録した記事一覧を表示することができます。

JSON ServerへのCRUD操作

今回は記事の登録、編集、削除に合わせてRedux ToolkitのcreateAsyncThunk、axiosを利用してJSON Serverへアクセスするようにしています。

const post:Post = 記事データ

// 登録 POST
const response = await axios
  .post<Post>(`${URL}/posts`, post)
  .catch((err) => {
    // エラー処理
  });
return response.data;

// 編集 PUT
const response = await axios
  .put<Post>(`${URL}/posts/${post.id}`, post)
  .catch((err) => {
    // エラー処理
  });
return response.data;

// 削除 DELETE
const response = await axios
  .delete<Post>(`${URL}/posts/${post.id}`, {
    data: { id: post.id },
  })
  .catch((err) => {
    // エラー処理
  });
return response.data;

上記は省略していますが前後の処理については下記ソースを参照いただければと思います。

Redux Toolkit

JSON Serverからデータの取得にはcreateAsyncThunkを経由して、createEntityAdapterを使い処理を行っています。
詳細は下記にも記事を投稿させていただきました。

今後の拡張

今後の拡張としては下記を想定すると外部公開用のテックブログの完成です。

• 管理画面の認証機能
• 画像の投稿機能
• Express、mongoDBを用いたバックエンド構築（DBは好みで）

さいごに

チュートリアル的なTODOアプリからちょっと進んだ？、APIを用いたCRUDなアプリケーションを作成することでより知識を深めることができると思います。JSON Serverで気軽にAPIを構築できるのでぜひ試してみてください。

関連記事

参考サイト

React

JSON Server

Redux