【React入門】ブログ投稿アプリを作って学ぶ！フォーム入力で投稿機能を完全理解

プログラミング

ブログ投稿機能をReactで作ってみたいけど、フォーム入力の扱い方や投稿管理の方法がわからない…。
そんなお悩みを持つ方へ、この記事では「Reactで簡易ブログ投稿アプリを作る方法」をわかりやすく解説いたします。
初心者の方でも、フォームの状態管理・投稿一覧表示・リセット機能までしっかり実装できるようになります。
実際のコードを交えながら丁寧に解説しますので、ぜひ最後までご覧ください。

Reactでブログ投稿アプリを作る

結論：フォーム入力は状態管理の基本

Reactを使うと、入力内容をリアルタイムで管理できます。
投稿された内容を一覧表示したり、削除したりする操作も簡単に実装可能です。
「useState」や「map」など、Reactの基本機能を身につけるには最適なアプリといえます。

Reactとは？初心者向けに解説

Reactの特徴と選ばれる理由

ReactはMeta社が開発したUI構築のためのJavaScriptライブラリです。
再利用可能な部品（コンポーネント）で構成されているため、保守性が高く、動的なアプリに強い特長があります。

フォームアプリにReactが適する理由

・フォームの入力と出力が即座に反映される
・状態（state）で値の変化を管理できる
・部品化（コンポーネント化）により、管理がしやすくなる

簡易ブログ投稿アプリの構成

必要な画面と機能一覧

このアプリでは以下の画面構成を採用します：

  • 投稿フォーム（タイトル・本文）
  • 投稿一覧表示エリア
  • 削除・リセットボタン

状態管理とコンポーネント分割

「App」コンポーネントに状態を持たせ、
フォーム・投稿表示・削除ボタンをそれぞれ別コンポーネントに分けます。

入力フォームの実装方法

useStateでフォームの状態を管理

const [title, setTitle] = useState("");
const [content, setContent] = useState("");

タイトルと本文の状態をそれぞれuseStateで管理します。
入力時には以下のように書きます：

<input value={title} onChange={(e) => setTitle(e.target.value)} />

入力値をまとめて扱うコツ

const [form, setForm] = useState({ title: "", content: "" });

const handleChange = (e) => {
  const { name, value } = e.target;
  setForm((prev) => ({ ...prev, [name]: value }));
};

投稿一覧を表示する方法

配列で投稿を管理する仕組み

投稿された内容は配列でまとめて保存します。

const [posts, setPosts] = useState([]);

map関数で一覧表示を作成する

{posts.map((post, index) => (
  <div key={index}>
    <h3>{post.title}</h3>
    <p>{post.content}</p>
  </div>
))}

投稿のリセット・削除の実装

リセットボタンの作り方

<button onClick={() => setForm({ title: "", content: "" })}>リセット</button>

削除機能を追加するには

const deletePost = (index) => {
  const updated = posts.filter((_, i) => i !== index);
  setPosts(updated);
};

デザインとアクセシビリティ

最低限のCSS装飾とポイント

・フォームの余白を保つ
・投稿一覧は区切り線で見やすく
・ボタンは明確なラベルをつける

公的データで見るWebアクセシビリティ

参考：https://www.soumu.go.jp/menu_news/s-news/01ryutsu02_02000169.html

よくあるエラーと対処法

Uncontrolled inputのエラー解決法

値とonChangeがセットでないと警告が出るので、常にvalueを指定します。

状態が更新されないときの対策

setState後の値反映は非同期のため、すぐには反映されない点に注意してください。

実践コード：完成形の全体コード

import React, { useState } from "react";

function App() {
  const [form, setForm] = useState({ title: "", content: "" });
  const [posts, setPosts] = useState([]);

  const handleChange = (e) => {
    const { name, value } = e.target;
    setForm((prev) => ({ ...prev, [name]: value }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!form.title || !form.content) return;
    setPosts([...posts, form]);
    setForm({ title: "", content: "" });
  };

  const deletePost = (index) => {
    const updated = posts.filter((_, i) => i !== index);
    setPosts(updated);
  };

  return (
    <div>
      <h1>簡易ブログ投稿アプリ</h1>
      <form onSubmit={handleSubmit}>
        <input
          name="title"
          placeholder="タイトル"
          value={form.title}
          onChange={handleChange}
        />
        <br />
        <textarea
          name="content"
          placeholder="本文"
          value={form.content}
          onChange={handleChange}
        />
        <br />
        <button type="submit">投稿</button>
        <button type="button" onClick={() => setForm({ title: "", content: "" })}>
          リセット
        </button>
      </form>
      <hr />
      {posts.map((post, index) => (
        <div key={index}>
          <h3>{post.title}</h3>
          <p>{post.content}</p>
          <button onClick={() => deletePost(index)}>削除</button>
          <hr />
        </div>
      ))}
    </div>
  );
}

export default App;

まとめ：投稿フォームでReactを理解する

Reactの基本である状態管理とイベント処理を学ぶには、投稿アプリは非常に有効です。
フォーム→投稿→一覧表示という一連の流れを学ぶことで、今後の開発にも応用が効きます。
小さな成功体験を積みながら、次は「保存機能」や「ログイン機能」などにも挑戦してみましょう！

タイトルとURLをコピーしました