ReactJSテンプレート
ReactJSとBack4Appを使用したブログプラットフォームSPAの構築

26min
1. はじめに
このチュートリアルでは、ReactJSをフロントエンド、Back4Appをバックエンドとして使用したブログプラットフォームの完全なシングルページアプリケーション（SPA）を構築するプロセスを案内します。開発環境の設定、Reduxによるグローバルステートの管理、ルーティングとナビゲーションの実装、Back4Appを使用したCRUD操作の実行まで、すべてをカバーします。
目的：
ユーザーがブログ投稿を作成、編集、削除でき、読者が投稿を閲覧しコメントできる完全に機能するブログプラットフォームを作成します。このアプリケーションは、フロントエンドにReactJS、バックエンド操作にBack4Appを利用します。
主な機能：
ユーザー認証
投稿の作成、編集、削除
投稿とコメントの閲覧
Reduxによるグローバルステートの管理
React Routerを使用したルーティングとナビゲーション
前提条件：
JavaScript、ReactJS、Reduxの基本的な知識
アクティブなBack4Appアカウント
ローカル環境にNode.jsとnpmがインストールされていること
2. 初期設定
2.1. ReactJSプロジェクトの設定
ステップ 1: 新しいReactプロジェクトを作成する create-react-app を使用します。
ステップ 2: 開発サーバーを起動します。
2.2. Back4Appの設定
ステップ 1: Back4Appアカウントにサインインし、新しいアプリケーションを作成します。
ステップ 2: Back4Appダッシュボードで、「コア > ブラウザ」に移動し、次のクラスを作成します:
Post （ブログ投稿を保存するため）
Comment （投稿に対するコメントを保存するため）
ステップ 3: 「アプリ設定 > セキュリティとキー」セクションからアプリケーションIDとJavaScriptキーを取得します。
2.3. 必要なパッケージのインストール
React、Redux、およびBack4App統合のために必要な依存関係をインストールします。
MacOS
npm install parse @reduxjs/toolkit react-redux react-router-dom
npm install parse @reduxjs/toolkit react-redux react-router-dom
﻿
2.4. Parse SDKの設定
ステップ 1: ParseConfig.jsという名前のファイルを src フォルダーに作成し、Parse SDKを設定します。
JS
import Parse from 'parse';

Parse.initialize("YOUR_APP_ID", "YOUR_JAVASCRIPT_KEY");
Parse.serverURL = 'https://parseapi.back4app.com/';

export default Parse;

import Parse from 'parse';

Parse.initialize("YOUR_APP_ID", "YOUR_JAVASCRIPT_KEY");
Parse.serverURL = 'https://parseapi.back4app.com/';

export default Parse;
﻿
﻿
3. ブログプラットフォームの開発
3.1. プロジェクト構造
次の構造でプロジェクトを整理します:
Text
src/
|-- components/
|   |-- PostList.js
|   |-- PostDetails.js
|   |-- PostForm.js
|   |-- CommentList.js
|-- redux/
|   |-- store.js
|   |-- postSlice.js
|   |-- commentSlice.js
|-- ParseConfig.js
|-- App.js
|-- index.js
src/
|-- components/
|   |-- PostList.js
|   |-- PostDetails.js
|   |-- PostForm.js
|   |-- CommentList.js
|-- redux/
|   |-- store.js
|   |-- postSlice.js
|   |-- commentSlice.js
|-- ParseConfig.js
|-- App.js
|-- index.js
﻿
3.2. グローバルステート管理のためのReduxの実装
ステップ 1: Reduxストアを redux/store.js に設定します。
JS
import { configureStore } from '@reduxjs/toolkit';
import postReducer from './postSlice';
import commentReducer from './commentSlice';

export const store = configureStore({
  reducer: {
    posts: postReducer,
    comments: commentReducer,
  },
});

import { configureStore } from '@reduxjs/toolkit';
import postReducer from './postSlice';
import commentReducer from './commentSlice';

export const store = configureStore({
  reducer: {
    posts: postReducer,
    comments: commentReducer,
  },
});
﻿
ステップ 2: 投稿を管理するためのスライスを redux/postSlice.js に作成します。
JS
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import Parse from '../ParseConfig';

export const fetchPosts = createAsyncThunk('posts/fetchPosts', async () => {
  const query = new Parse.Query('Post');
  const results = await query.find();
  return results.map(post => ({
    id: post.id,
    title: post.get('title'),
    content: post.get('content'),
  }));
});

const postSlice = createSlice({
  name: 'posts',
  initialState: {
    list: [],
    status: null,
  },
  reducers: {},
  extraReducers: {
    [fetchPosts.fulfilled]: (state, action) => {
      state.list = action.payload;
      state.status = 'success';
    },
  },
});

export default postSlice.reducer;

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import Parse from '../ParseConfig';

export const fetchPosts = createAsyncThunk('posts/fetchPosts', async () => {
  const query = new Parse.Query('Post');
  const results = await query.find();
  return results.map(post => ({
    id: post.id,
    title: post.get('title'),
    content: post.get('content'),
  }));
});

const postSlice = createSlice({
  name: 'posts',
  initialState: {
    list: [],
    status: null,
  },
  reducers: {},
  extraReducers: {
    [fetchPosts.fulfilled]: (state, action) => {
      state.list = action.payload;
      state.status = 'success';
    },
  },
});

export default postSlice.reducer;
﻿
ステップ 3: コメントを管理するためのスライスを redux/commentSlice.js に作成します。
JS
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import Parse from '../ParseConfig';

export const fetchComments = createAsyncThunk('comments/fetchComments', async (postId) => {
  const query = new Parse.Query('Comment');
  query.equalTo('post', { __type: 'Pointer', className: 'Post', objectId: postId });
  const results = await query.find();
  return results.map(comment => ({
    id: comment.id,
    content: comment.get('content'),
    postId: postId,
  }));
});

const commentSlice = createSlice({
  name: 'comments',
  initialState: {
    list: [],
    status: null,
  },
  reducers: {},
  extraReducers: {
    [fetchComments.fulfilled]: (state, action) => {
      state.list = action.payload;
      state.status = 'success';
    },
  },
});

export default commentSlice.reducer;

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import Parse from '../ParseConfig';

export const fetchComments = createAsyncThunk('comments/fetchComments', async (postId) => {
  const query = new Parse.Query('Comment');
  query.equalTo('post', { __type: 'Pointer', className: 'Post', objectId: postId });
  const results = await query.find();
  return results.map(comment => ({
    id: comment.id,
    content: comment.get('content'),
    postId: postId,
  }));
});

const commentSlice = createSlice({
  name: 'comments',
  initialState: {
    list: [],
    status: null,
  },
  reducers: {},
  extraReducers: {
    [fetchComments.fulfilled]: (state, action) => {
      state.list = action.payload;
      state.status = 'success';
    },
  },
});

export default commentSlice.reducer;
﻿
3.3. React Routerを使用したルーティングの実装
ステップ 1: ルーティングを設定する App.js.
JS
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import PostList from './components/PostList';
import PostDetails from './components/PostDetails';
import PostForm from './components/PostForm';

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/" exact component={PostList} />
        <Route path="/post/:id" component={PostDetails} />
        <Route path="/new-post" component={PostForm} />
      </Switch>
    </Router>
  );
}

export default App;

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import PostList from './components/PostList';
import PostDetails from './components/PostDetails';
import PostForm from './components/PostForm';

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/" exact component={PostList} />
        <Route path="/post/:id" component={PostDetails} />
        <Route path="/new-post" component={PostForm} />
      </Switch>
    </Router>
  );
}

export default App;
﻿
3.4. コンポーネントの作成
ステップ 1: PostList コンポーネントを作成して、すべてのブログ投稿を表示します。
JS
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchPosts } from '../redux/postSlice';
import { Link } from 'react-router-dom';

const PostList = () => {
  const dispatch = useDispatch();
  const posts = useSelector(state => state.posts.list);

  useEffect(() => {
    dispatch(fetchPosts());
  }, [dispatch]);

  return (
    <div>
      <h1>Blog Posts</h1>
      <Link to="/new-post">Create New Post</Link>
      <ul>
        {posts.map(post => (
          <li key={post.id}>
            <Link to={`/post/${post.id}`}>{post.title}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default PostList;
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchPosts } from '../redux/postSlice';
import { Link } from 'react-router-dom';

const PostList = () => {
  const dispatch = useDispatch();
  const posts = useSelector(state => state.posts.list);

  useEffect(() => {
    dispatch(fetchPosts());
  }, [dispatch]);

  return (
    <div>
      <h1>Blog Posts</h1>
      <Link to="/new-post">Create New Post</Link>
      <ul>
        {posts.map(post => (
          <li key={post.id}>
            <Link to={`/post/${post.id}`}>{post.title}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default PostList;
﻿
ステップ 2: PostDetails コンポーネントを作成して、特定の投稿の詳細を表示します。
JS
import React, { useEffect } from 'react';
import { useParams } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
import { fetchComments } from '../redux/commentSlice';

const PostDetails = () => {
  const { id } = useParams();
  const dispatch = useDispatch();
  const comments = useSelector(state => state.comments.list);

  useEffect(() => {
    dispatch(fetchComments(id));
  }, [dispatch, id]);

  return (
    <div>
      <h1>Post Details</h1>
      <p>Comments:</p>
      <ul>
        {comments.map(comment => (
          <li key={comment.id}>{comment.content}</li>
        ))}
      </ul>
    </div>
  );
};

export default PostDetails;
import React, { useEffect } from 'react';
import { useParams } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
import { fetchComments } from '../redux/commentSlice';

const PostDetails = () => {
  const { id } = useParams();
  const dispatch = useDispatch();
  const comments = useSelector(state => state.comments.list);

  useEffect(() => {
    dispatch(fetchComments(id));
  }, [dispatch, id]);

  return (
    <div>
      <h1>Post Details</h1>
      <p>Comments:</p>
      <ul>
        {comments.map(comment => (
          <li key={comment.id}>{comment.content}</li>
        ))}
      </ul>
    </div>
  );
};

export default PostDetails;
﻿
ステップ 3: PostForm コンポーネントを作成して、投稿の作成と編集を行います。
JS
import React, { useState } from 'react';
import Parse from '../ParseConfig';
import { useHistory } from 'react-router-dom';

const PostForm = () => {
  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');
  const history = useHistory();

  const handleSubmit = async (e) => {
    e.preventDefault();
    const Post = Parse.Object.extend('Post');
    const post = new Post();
    post.set('title', title);
    post.set('content', content);

    try {
      await post.save();
      history.push('/');
    } catch (error) {
      console.error('Error creating post:', error);
    }
  };

  return (
    <div>
      <h1>Create New Post</h1>
      <form onSubmit={handleSubmit}>
        <div>
          <label>Title</label>
          <input type="text" value={title} onChange={(e) => setTitle(e.target.value)} />
        </div>
        <div>
          <label>Content</label>
          <textarea value={content} onChange={(e) => setContent(e.target.value)} />
        </div>
        <button type="submit">Submit</button>
      </form>
    </div>
  );
};

export default PostForm;

import React, { useState } from 'react';
import Parse from '../ParseConfig';
import { useHistory } from 'react-router-dom';

const PostForm = () => {
  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');
  const history = useHistory();

  const handleSubmit = async (e) => {
    e.preventDefault();
    const Post = Parse.Object.extend('Post');
    const post = new Post();
    post.set('title', title);
    post.set('content', content);

    try {
      await post.save();
      history.push('/');
    } catch (error) {
      console.error('Error creating post:', error);
    }
  };

  return (
    <div>
      <h1>Create New Post</h1>
      <form onSubmit={handleSubmit}>
        <div>
          <label>Title</label>
          <input type="text" value={title} onChange={(e) => setTitle(e.target.value)} />
        </div>
        <div>
          <label>Content</label>
          <textarea value={content} onChange={(e) => setContent(e.target.value)} />
        </div>
        <button type="submit">Submit</button>
      </form>
    </div>
  );
};

export default PostForm;
﻿
4. テストとデプロイメント
4.1. アプリケーションのテスト
ステップ 1: アプリケーションをローカルでテストして、すべての機能が動作していることを確認します:
投稿の作成、編集、削除をテストします。
各投稿に対してコメントが正しく表示されることを確認します。
異なるルート間のナビゲーションをテストします。
4.2. 本番用にアプリケーションをビルドする
ステップ 1: 本番用にアプリケーションをビルドします。
MacOS
npm run build

npm run build
﻿
ステップ 2: ビルドしたアプリケーションをBack4app Containersのようなホスティングサービスにデプロイします。
4.3. Back4Appの本番環境の設定
Back4appはすでに本番環境として準備が整っていますが、コードを確認し、必要な環境変数やキーを更新することができます。
5. 結論
要約：このチュートリアルでは、ReactJSとBack4Appを使用して完全なブログプラットフォームSPAを作成する方法を案内しました。Back4Appでバックエンドを設定および構成し、Reduxでグローバルステートを管理し、React Routerでルーティングを実装し、CRUD操作を実行する方法を学びました。このプラットフォームは、ユーザー認証、高度なコメントシステムなどの追加機能で拡張できます。
次のステップ：
Back4Appでユーザー認証を追加することを検討してください。
リアルタイム更新でコメントシステムを強化してください。
検索エンジンの可視性を向上させるためにSEO機能を実装してください。
6. ソースコードと追加リソース
GitHubリポジトリ：アプリケーションの完全なソースコードへのリンクをGitHubで提供します。
追加リソース：
﻿ReactJS ドキュメント﻿
﻿Redux ドキュメント﻿
﻿React Router ドキュメント﻿
﻿Back4App ドキュメント﻿
7. FAQ / トラブルシューティング
一般的な問題：
Back4Appへの接続エラー： アプリケーションIDとJavaScriptキーを再確認してください。
Reduxの状態が更新されない： アクションとリデューサーが正しく設定されていることを確認してください。
サポート： 問題が発生した場合は、Back4Appサポートに連絡するか、関連する開発者コミュニティで質問してください。
更新日 24 Jan 2025
このページは役に立ちましたか？
FlutterとBack4Appを使用したソーシャルネットワーキングアプリの構築
FlutterでBack4appを使用してデータ処理を行う方法：List.generateの利用