ブログ投稿機能をReactで作ってみたいけど、フォーム入力の扱い方や投稿管理の方法がわからない…。
そんなお悩みを持つ方へ、この記事では「Reactで簡易ブログ投稿アプリを作る方法」をわかりやすく解説いたします。
初心者の方でも、フォームの状態管理・投稿一覧表示・リセット機能までしっかり実装できるようになります。
実際のコードを交えながら丁寧に解説しますので、ぜひ最後までご覧ください。
Reactでブログ投稿アプリを作る
結論:フォーム入力は状態管理の基本
Reactを使うと、入力内容をリアルタイムで管理できます。
投稿された内容を一覧表示したり、削除したりする操作も簡単に実装可能です。
「useState」や「map」など、Reactの基本機能を身につけるには最適なアプリといえます。
Reactとは?初心者向けに解説
Reactの特徴と選ばれる理由
ReactはMeta社が開発したUI構築のためのJavaScriptライブラリです。
再利用可能な部品(コンポーネント)で構成されているため、保守性が高く、動的なアプリに強い特長があります。
フォームアプリにReactが適する理由
・フォームの入力と出力が即座に反映される
・状態(state)で値の変化を管理できる
・部品化(コンポーネント化)により、管理がしやすくなる
簡易ブログ投稿アプリの構成
必要な画面と機能一覧
このアプリでは以下の画面構成を採用します:
- 投稿フォーム(タイトル・本文)
- 投稿一覧表示エリア
- 削除・リセットボタン
状態管理とコンポーネント分割
「App」コンポーネントに状態を持たせ、
フォーム・投稿表示・削除ボタンをそれぞれ別コンポーネントに分けます。
入力フォームの実装方法
useStateでフォームの状態を管理
1 2 | const [title, setTitle] = useState( "" ); const [content, setContent] = useState( "" ); |
タイトルと本文の状態をそれぞれuseStateで管理します。
入力時には以下のように書きます:
1 | <input value={title} onChange={(e) => setTitle(e.target.value)} /> |
入力値をまとめて扱うコツ
1 2 3 4 5 6 | const [form, setForm] = useState({ title: "" , content: "" }); const handleChange = (e) => { const { name, value } = e.target; setForm((prev) => ({ ...prev, [name]: value })); }; |
投稿一覧を表示する方法
配列で投稿を管理する仕組み
投稿された内容は配列でまとめて保存します。
1 | const [posts, setPosts] = useState([]); |
map関数で一覧表示を作成する
1 2 3 4 5 6 | {posts.map((post, index) => ( <div key={index}> <h3>{post.title}</h3> <p>{post.content}</p> </div> ))} |
投稿のリセット・削除の実装
リセットボタンの作り方
1 | <button onClick={() => setForm({ title: "" , content: "" })}>リセット</button> |
削除機能を追加するには
1 2 3 4 | 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後の値反映は非同期のため、すぐには反映されない点に注意してください。
実践コード:完成形の全体コード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | 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の基本である状態管理とイベント処理を学ぶには、投稿アプリは非常に有効です。
フォーム→投稿→一覧表示という一連の流れを学ぶことで、今後の開発にも応用が効きます。
小さな成功体験を積みながら、次は「保存機能」や「ログイン機能」などにも挑戦してみましょう!