MENU

Reactの練習方法｜競技プログラミングのように反復できる学習サービスと進め方

Figma React
  1. ホーム
  2. Figma
  3. Reactの練習方法｜競技プログラミングのように反復できる学習サービスと進め方
目次

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

TypeScriptの文法やアルゴリズムは書けるものの、ReactやWebフロントエンドは未経験という場合、競技プログラミングと同じように、

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

という形式で練習したくなります。

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

特にBFE.devは、JavaScript、React、TypeScript、CSS、DOMなどについて小さな問題を解いていく形式になっており、競技プログラミング経験者には使いやすいでしょう。

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

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

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

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

そのため、短時間の反復練習と、実際にアプリを作る練習を組み合わせるのが適しています。

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

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

鍛えたい能力サービス料金自動判定・反復性カバーしにくい領域
React・Hooks・DOMBFE.dev無料＋有料高いアプリ全体の設計
TypeScriptExercism無料高い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)

ただし、BFE.devはフロントエンドの面接対策という性格も強いサービスです。

問題を解けたからといって、

  • 適切にコンポーネントを設計できる
  • stateを適切な場所に配置できる
  • APIを含むアプリ全体を設計できる

とは限りません。

BFE.devは「Reactの小さな処理を反復する場所」と考えるのが適切です。

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の書き方まで覚えてしまう、というリスクを減らせます。

なぜReactでは自動採点だけでは足りないのか

競技プログラミングでは、基本的に入力に対する出力が決まっています。

入力
↓
アルゴリズム
↓
出力
↓
期待値と比較

そのため、自動的にAC・WAを判定できます。

Reactでは少し違います。

例えば検索フォームなら、

ユーザーが入力
↓
stateが変化
↓
再レンダリング
↓
検索結果が変化
↓
ユーザーが結果をクリック
↓
別のUIが変化

という複数の状態遷移があります。

さらに、

App
├─ SearchForm
├─ ResultList
└─ ResultItem

と分けても、

SearchPage
├─ SearchInput
├─ SearchResults
└─ SearchResult

と分けても、どちらも正常に動く可能性があります。

競技プログラミング 入力 → 出力 期待値と比較 AC / WA React 操作・状態・UI 表示 / 状態遷移 / DOM / 設計 HTML / CSS / アクセシビリティ 単純な正誤だけでは判定しにくい

そのため、Reactでは「短い問題を大量に解く」だけではなく、複数の機能を組み合わせて1本のアプリを完成させる経験が必要になります。

反復ドリルとアプリ開発を組み合わせる

Webフロントエンド未経験の段階では、

反復ドリル 60% : アプリ開発 40%

くらいから始めると進めやすいです。

最初は、

  • JSX
  • props
  • state
  • イベント
  • 条件分岐
  • リストレンダリング
  • フォーム
  • useState
  • useEffect
  • useRef

といったReact固有の概念を細かく分けて練習します。

これらを一通り理解したら、

反復ドリル 30% : アプリ開発 70%

程度までアプリ開発を増やします。

理由は、Reactを実際に使うときには複数の知識を同時に使う必要があるためです。

例えばAPIを利用した検索アプリなら、

API取得
↓
Loading表示
↓
一覧表示
↓
検索
↓
詳細表示
↓
エラー処理

という一連の処理が必要になります。

ここで初めて、

  • どこにstateを置くか
  • propsで何を渡すか
  • コンポーネントをどこで分割するか
  • API通信をどう管理するか

といった、ドリルでは身につきにくい判断が発生します。

平日1〜2時間程度なら、基礎を覚えた後は、

20〜30分：BFE.devなどの反復練習
40〜90分：自作アプリ

くらいにすると、短時間の反復と長い実装の両方を継続できます。

最初のReactアプリはViteで十分

Reactの学習開始直後からNext.jsを使う必要はありません。

Next.jsを使うとReactそのものに加えて、

  • Server Components
  • Client Components
  • ルーティング
  • サーバー・クライアント境界
  • データ取得
  • キャッシュ
  • Next.js固有API

なども同時に学ぶことになります。

Reactそのものを理解する目的なら、最初はVite + React + TypeScript程度の構成にした方が、何がReactの機能なのかを区別しやすくなります。

React公式も、Reactをスクラッチから構成する場合のビルドツールとしてVite、Parcel、Rsbuildなどを案内しています。 (React)

例えば最初のアプリなら、

商品検索アプリ

・APIから商品取得
・商品一覧
・検索
・詳細表示
・Loading
・Error
・フォーム

程度で十分です。

これだけでもstate、props、イベント、API通信、条件レンダリング、コンポーネント分割を一通り経験できます。

古いReact教材には注意する

Reactを学習するときに特に注意したいのが、検索で古い記事や教材が大量に出てくることです。

コードが現在も動くことと、今から学習する書き方として適切であることは別です。

特に次の内容を中心に説明している教材は注意が必要です。

教材で使われている内容現在の扱い
Class Component中心既存コードでは存在するが、新規学習の中心にはしない
componentDidMountなどLifecycle中心Class Component由来。新規学習では優先しない
Create React App非推奨
stateから計算できる値をuseEffectでstateへ保存要注意
とりあえずuseEffectを使う要注意
何でもuseMemo・useCallbackする要注意
React 17以前を前提補助資料として扱う

特にCreate React Appについては、Reactチームが2025年2月に新規アプリ向けとして非推奨化を正式に発表しています。React公式のInstallationでも現在は「Create React Appはdeprecated」と明記されています。 (React)

また、現在のReactにはReact Compilerもあり、公式ドキュメントではCompilerによる自動的なmemoizationについて説明されています。古い記事にある「パフォーマンスのため、とりあえずuseMemoやuseCallbackを付ける」という考え方をそのまま現在の標準として覚えるべきではありません。 (React)

古い記事を読むこと自体が問題なのではありません。

ブログ・動画・練習サイトで学ぶ
↓
書き方に疑問を持つ
↓
React公式Learnで確認する

という順番にしておけば、過去の慣習をそのまま現在のReactの標準だと誤認するリスクを減らせます。

競技プログラミング経験者向けの学習構成

TypeScriptでアルゴリズムを書ける状態からReactを始めるなら、TypeScriptの基礎学習を最初からやり直す必要性は高くありません。

優先順位としては、

React公式Learn
      ↓
BFE.devで短時間反復
      ↓
Vite + React + TypeScriptでアプリ開発

を軸にします。

HTML・CSSの実装経験が不足している場合だけFrontend Mentorを追加し、Reactの説明をもう少し段階的に受けたい場合はScrimbaを追加します。

競技プログラミングと同じ「問題を大量に解けばよい」という学習方法をそのまま持ち込むのではなく、小さな問題でReactの部品を覚え、アプリ開発でそれらを組み合わせるという形に変えるのが、Reactでは適しています。

Figma React

関連記事

目次