React学習サイトまとめ（BFE.devとか）

Reactにも競技プログラミングのような練習方法はある

短時間で1問解く
コードを書く
正誤を判定する
次の問題へ進む

という形式で練習

Reactにもこれに近いサービスはあります。

ただし、フロントエンド全体を競技プログラミングのような自動採点だけで習得するのは難しいです。

フロントエンドでは、単純な処理結果だけでなく、

UIが正しく表示されるか
ユーザー操作に応じて状態が正しく変化するか
コンポーネントをどう分割するか
stateをどこに持たせるか
API通信中やエラー時をどう扱うか
HTMLやCSSが適切か

といった複数の要素を考える必要があるためです。

Reactの反復練習に使えるサービス

用途ごとに分けると、次のようになります。

鍛えたい能力	サービス	料金	自動判定・反復性	カバーしにくい領域
React・Hooks・DOM	BFE.dev	無料＋有料	高い	アプリ全体の設計
TypeScript	Exercism	無料	高い	React・CSS・ブラウザ
React基礎	Scrimba	無料コース＋有料	高め	ゼロからの設計
HTML・CSS・UI実装	Frontend Mentor	無料＋有料	低め	React内部の理解
Reactの標準的な考え方	React公式Learn	無料	中程度	アプリ全体の実装
総合的なReact開発	自作アプリ	無料	なし	自動採点

それぞれ得意な領域が違うため、1つのサービスだけですべてを学習するより、目的によって使い分けた方が効率的です。

BFE.devでReactを短時間反復する

競技プログラミングに最も近いのがBFE.dev（BigFrontend.dev）です。

BFE.devには、現在React Coding、JavaScript Coding、TypeScript Puzzle、CSS Codingなどのカテゴリが用意されています。Reactだけでも多数のコーディング問題があり、TypeScript対応のエディタ上で実装して、その場で実行・提出できます。 (BigFrontend)

例えばReactでは、Hooksやコンポーネントに関する小さな問題を1問ずつ解いていけます。

submitボタンで正解かチェックできます

無料で利用できる機能があり、解答など一部の機能はPremiumとして提供されています。 (BigFrontend)

ExercismでTypeScriptを反復する

TypeScript自体を練習したい場合はExercismがあります。

ExercismのTypeScript Trackには現在100問以上の演習があり、コード解析やテストを使いながら問題を解いていけます。無料で提供されています。 (Exercism)

形式としてはかなり競技プログラミングに近いですが、すでに競技プログラミングでTypeScriptを使用している場合は優先度を下げてもよいでしょう。

例えば、

const users = new Map<string, number>();

const result = values
  .filter((value) => value > 0)
  .map((value) => value * 2);

といったTypeScriptやJavaScriptの基本的な処理を問題なく書けるなら、TypeScriptの文法問題を大量に解くより、

DOM
HTML
CSS
React
ブラウザAPI

の学習へ時間を使う方が、フロントエンド習得という目的には直結します。

ExercismだけではReactやUI設計まではカバーできません。

ScrimbaでReactの基礎を反復する

Scrimbaは、説明を聞くだけの動画教材とは少し異なります。

画面内のコードをそのまま編集でき、説明の途中で実際にコードを書きながら進められます。

現在の無料Reactコースにも多数のインタラクティブな演習やプロジェクトが含まれています。React 19に対応した内容も提供されています。 (Scrimba)

学習の流れは、

説明を見る
↓
その場でコードを書く
↓
動作を確認する
↓
次の課題へ進む

となるため、読むだけの教材より反復しやすいのが特徴です。

Reactを初めて触る段階では、

JSX
props
state
イベント
Hooks

などを順番に覚える用途に向いています。

Frontend MentorでHTML・CSS・UI実装を練習する

Reactを学習するときに見落としやすいのが、HTMLとCSSです。

競技プログラミング経験者の場合、JavaScriptやTypeScriptの処理を書くことには慣れていても、

Flexbox
Grid
レスポンシブ
semantic HTML
フォーム
アクセシビリティ

などは別途学ぶ必要があります。

この部分の練習にはFrontend Mentorが使えます。

デザインを渡され、それをHTML、CSS、JavaScript、Reactなどを使って実装します。無料で利用できるFree・Free+の課題があり、Premium課題にはPro契約が必要です。 (Frontend Mentor)

例えば料金カードのような小さなUIをデザインに合わせて実装する課題もあります。 (Frontend Mentor)

ただし、競技プログラミングのような明確なAC・WA判定はありません。

「デザインにどこまで近づけられたか」「HTML構造が適切か」といった部分は、自分で確認する必要があります。

React公式Learnを正解の基準にする

Reactについては、練習サービスとは別にReact公式ドキュメントを基準にすることが重要です。

2026年8月時点でReact公式サイトが掲載している最新版はReact 19.2です。 (React)

React公式Learnでは、

UIの記述
インタラクティブな処理
state管理
Effect
Ref

などが体系的に整理されています。

練習サイトやブログ記事でコードを見つけた場合も、

この書き方を現在のReactでも推奨しているのか

をReact公式で確認する使い方ができます。

つまり、

練習サイト → 問題を解く場所
React公式 → 書き方を判断する基準

と役割を分けます。

この組み合わせにすると、問題は解けるものの古いReactの書き方まで覚えてしまう、というリスクを減らせます。

学習サイトを自作できないのか

BFE.dev のような学習サイトでは、ブラウザ上のコードエディタとして「Monaco Editor」のような VS Code 系エディタを使う構成が候補になります。
React学習サイトを作ること自体は現実的です。
Monaco Editorを表示してコードを書けるようにする部分は、そこまで難しくありません。
難所は「ユーザーが入力したReact / TypeScriptコードを実行する仕組み」です。
Reactなど使用可能なnpmパッケージを固定すれば、任意のnpmパッケージを許可する場合よりかなり実装しやすくなります。
想定構成は次のようになります。

問題文
↓
Monaco Editor
↓
React / TypeScriptコード入力
↓
Babel / esbuildなどで変換
↓
隔離された環境で実行
↓
プレビュー / テスト
↓
正誤判定

セキュリティ面では、ユーザーコードをサイト本体と同じJavaScript環境で直接実行しないことが重要です。無限ループによるUI停止や、document・localStorage などへのアクセスを考慮する必要があります。Web Workerを使えば処理をメインスレッドから分離でき、必要なら terminate() で停止できます。

Reactの画面プレビューについては、iframe で実行環境を分離し、sandbox 属性で権限を制限する方法があります。MDNでも、埋め込みコンテンツには必要最小限の権限だけを与えることが推奨されています。

参考になるサイトはこちらです。