React チュートリアル - 初めての方が学ぶための基礎と実務へのつなげ方

フロントエンド開発•
ReactJavaScript

React チュートリアルのはじめに

皆さんは、React チュートリアルを探しているかもしれません。

プログラミング未経験の方や、学習を始めて間もない方がReactに興味を持つケースは多いようです。

ただ、いきなり専門的な用語や概念が出てくるとハードルが高いと感じることがあります。

そこでここでは、平易な言葉でReactの基本を押さえながら、実務と関連付けて説明していきます。

実務の現場では、Reactで作られたウェブアプリが多数存在します。

そのためReactを学ぶことで、新たなキャリアや副業としての可能性が広がりやすいかもしれません。

まずはReactの概要と特長から確認し、次にコンポーネントの作り方やHooksの使い方に進んでみましょう。

Reactとは何か

Reactは、JavaScriptを使ってUI（ユーザーインターフェイス）を構築するためのライブラリです。

Facebook（現Meta）の開発チームによって公開され、オープンソースとして継続的にメンテナンスされています。

UIを細かいパーツに分解し、それぞれをコンポーネントとして扱うことでコードの管理をしやすくします。

たとえばボタンや入力欄など、画面の一部分を独立したコンポーネントにするイメージです。

Reactを使った開発では、仮想DOMという仕組みがキーポイントになります。

画面表示の更新（レンダリング）が効率化されるので、大規模なアプリでもパフォーマンスが保たれやすいです。

実務の現場では、ユーザーの操作に素早く反応できるシングルページアプリケーション（SPA）を構築するためにReactが選ばれることがあります。

また、コンポーネント化されたコードは再利用しやすいので、大人数のチームでもスムーズに作業を進めやすいです。

React 18ではサーバーサイドレンダリング（SSR）の機能や並列レンダリングの強化が注目されています。

これらを活用することで、ウェブアプリの応答速度を向上させるなどの手段がとりやすくなるでしょう。

まずは最小限の機能を使ったシンプルなアプリから触れてみることをおすすめします。

開発環境の準備

Reactで開発を始めるために、まずNode.jsとnpm（またはyarn）を準備します。

その後、Create React Appというツールを使えば、必要な構成があらかじめセットアップされたプロジェクトをすぐに作れます。

以下の手順を例として挙げます。

npx create-react-app my-react-app
cd my-react-app
npm start

この操作で開発用サーバーが起動し、ブラウザで http://localhost:3000 にアクセスするとReactアプリが動いていることが確認できます。

この手法を使うと、バベル（Babel）やウェブパック（Webpack）などの複雑な設定を気にしなくてもReactの学習に集中できます。

実務の現場でも、まず簡単なプロトタイプを作るときはCreate React Appのようなテンプレートを利用することが多いです。

一方で、大規模なプロジェクトになってくると、ビルド設定やディレクトリ構成を細かくカスタマイズする場合があります。

しかし初心者の方が最初に触れる段階では、あまり難しい設定に深入りせず、Reactでコンポーネントをどう書くかを理解することが優先といえるでしょう。

準備が完了したら、実際にソースコードを編集してReactの書き方に慣れていくのがよいかもしれません。

コンポーネントとJSXの基礎

Reactでは画面をいくつかの部品（コンポーネント）に分割し、組み合わせることによってUI全体を構築します。

ここで皆さんが最初に驚くのは、JavaScriptの中にHTMLのような記述を書いている部分ではないでしょうか。

このHTMLのような構文をJSXと呼びます。

JSXを使うと、JavaScriptのコード内で<div>や<button>などを見慣れた形で定義できます。

以下の例を見てみてください。

import React from "react";

function Greeting() {
  const message = "こんにちは、React!";

  return (
    <div>
      <h2>{message}</h2>
      <p>このコンポーネントはJSXで構成されています。</p>
    </div>
  );
}

export default Greeting;

このコンポーネントはGreetingという名前で、メッセージと短い文章を表示するだけのシンプルなものです。

JSXでは、{}を使うことでJavaScriptの変数や式を記述できます。

Greetingコンポーネントをアプリ全体から呼び出すときは、以下のようにタグ形式で使います。

function App() {
  return (
    <div>
      <Greeting />
    </div>
  );
}

実務でのUI開発では、ボタンコンポーネントや入力フォームコンポーネントなどを切り出し、繰り返し使うことがあります。

その結果、コードの重複を減らせて保守性が高まるメリットがあります。

こうしたコンポーネントを組み合わせていくのが、Reactの基本的な流れです。

JSXはHTMLに似ていますが、実態はJavaScriptの拡張構文なので、若干ルールが異なる部分もあります。

たとえばclass属性ではなくclassNameを使う点などが挙げられます。

初心者の方は、JSXの書き方に慣れるために小さなサンプルをいくつか作るといいでしょう。

PropsとStateの理解

コンポーネントを作るときに、動的な値や状態を扱う仕組みとしてPropsとStateがあります。

これらを理解すると、Reactのコンポーネント間のデータの流れがつかみやすくなります。

Propsは、コンポーネントに対して外部から渡される値です。

親コンポーネントが子コンポーネントにデータを渡すときに使われる仕組みで、コンポーネントの外部仕様に相当します。

function Welcome(props) {
  return <p>{props.name}さん、いらっしゃいませ</p>;
}

// 親側での呼び出し例
<Welcome name="山田" />

Stateは、コンポーネント内部で保持される変更可能なデータです。

ユーザーの入力やボタン操作などで状態が変わり、その変化に応じてUIが再レンダリングされます。

import React, { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>現在のカウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>カウントを増やす</button>
    </div>
  );
}

export default Counter;

このCounterコンポーネントでは、useStateフックを使ってcountという値を管理しています。

setCount関数を呼ぶたびにcountが増え、その変化に合わせてpタグの表示も更新されます。

実務シーンでは、ユーザーの入力を受け取るフォームや、外部APIから取得したデータを一時的に保持したい場合などにStateが使われることが多いです。

一方、Propsは親から子へデータを受け渡す際に便利で、アプリの各部分に情報が散らばる状況を避けるためにも役立ちます。

React チュートリアルを進める中で、PropsとStateの使い分けに慣れることが大切といえるでしょう。

イベントハンドリングと実務での活用シーン

Reactでは、ボタンクリックやフォームの送信など、ユーザーの操作をもとに処理を実行できます。

これはJavaScriptのイベント処理とほぼ同じ感覚ですが、JSXではアロー関数を使ってシンプルに書くことがよくあります。

先ほどのカウンターの例でも、ボタンのonClick属性でアロー関数を使ってカウントを更新しました。

実務の現場では、ユーザーの操作ごとにAPIコールを行ったり、画面を切り替えるなどの処理を入れることが多いです。

たとえば、ショッピングサイトのカートに商品を追加するときにボタンのクリックイベントをフックして、サーバーにリクエストを送るケースが考えられます。

その結果、ユーザーにエラーがあればエラーメッセージを表示し、成功すればカートの中身を更新するといった流れになります。

イベントハンドリングを設計するときは、「どのコンポーネントがどのデータを持ち、どんなタイミングで更新するか」を意識することが大切です。

データがどの階層に存在しているのかが曖昧になると、コードが複雑になりがちです。

そのため、PropsやStateの設計をしっかり考えておくことが求められます。

React チュートリアルを進める中で、こうした実務の流れを意識すると、学んだ内容を将来の開発で活用しやすくなるでしょう。

小規模なアプリを自分で作ってみると、イベントハンドリングの流れが手を動かしながら理解しやすくなります。

React Hooksのポイント

React 18でも、基本的なフック（Hooks）の考え方は変わりません。

Hooksは、クラスコンポーネントを使わなくてもStateやライフサイクルの管理を行える仕組みです。

代表的なフックとしては次が挙げられます。

  • useState
  • useEffect
  • useContext

useStateはすでに例を紹介しましたが、値を持ちたいときに宣言し、セット関数を通して状態を更新します。

useEffectは副作用（例えばデータの取得やDOM操作）を扱う際に利用します。

レンダリングのタイミングに合わせて処理が走るので、初回表示時だけAPIを呼ぶ、特定の値が変わったらログを取るなどの場面に使われやすいです。

useContextは、コンポーネントを何層もまたいでデータを渡すときに役立ちます。

Propsを深い階層へわたすよりは、コンテキストを利用するほうがコードの可読性が上がることがあります。

実務の場面では、これらのフックを組み合わせつつ、ビジネスロジックを整理していきます。

たとえばカート機能やユーザーログイン機能など、複数のコンポーネントをまたいで状態を管理したい場合にフックを活用すると便利です。

Hooksをうまく使うと、コードがスッキリ書けるうえに、パフォーマンス面の調整もしやすくなることがあります。

React チュートリアルの中でHooksは重要なパートを占めるので、まずはuseStateとuseEffectをしっかり理解しておくといいでしょう。

実務で気をつけるポイント

Reactでアプリケーションを作る際、データの管理をどのように行うかは大きなテーマです。

状態が少ないうちはコンポーネント単位での管理でも問題ありません。

しかし、大規模になるほどPropsの受け渡しが複雑になりやすく、その対策としてコンテキストや外部の状態管理ツールが検討されることがあります。

一方で、React本体にはやや最小限の機能が用意されているので、足りないところはライブラリを組み合わせることが多いです。

それによって開発が柔軟になる一方、選択肢が増えるので初心者の方は迷うケースも考えられます。

もう一つ重要なのはコンポーネントの設計です。

多機能すぎるコンポーネントは再利用しづらく、保守が難しくなります。

関心ごとをしっかり分割して、どの部分の表示やロジックを担当するかを決めておくと、あとで手直ししやすくなるでしょう。

実務の現場では、コードレビューやチームでの相談を通じてコンポーネントの責務や命名規則を統一することが多いです。

初心者の方は、まず小規模なアプリを作りながら、気をつけるポイントを少しずつ学んでいくのがおすすめです。

コンポーネント単位の責務分割や、PropsとStateの明確化に意識を向けると、Reactのメリットが最大限に活かせるかもしれません。

React チュートリアルまとめ

ここまでReact チュートリアルとして、初めて学ぶ方が押さえておきたい基本的なポイントを解説しました。

実務においては、開発環境の構築からコンポーネント設計、イベント処理、そしてHooksを使った状態管理まで、Reactで扱う内容は多岐にわたります。

しかしどれも、最初は小さなアプリを作りながら学ぶことで理解しやすくなります。

React 18では並列レンダリングやサーバーサイドレンダリングが進化しており、大規模アプリから個人のプロジェクトまで幅広い場面で活用可能です。

コンポーネントをどう分割し、PropsやState、Hooksをどう使うのかを整理しておくと、あとで規模が大きくなってもスムーズに対応できます。

コーディングの際は、複数人で作業するときにもわかりやすい命名とコメントを意識すると保守性が上がりやすいでしょう。

React チュートリアルの先には、ルーティングやテスト、パフォーマンスの最適化など、より実務寄りの課題が待っています。

それらを乗り越えて、自分だけのReactアプリを構築できるスキルを身につけてみてはいかがでしょうか。

Reactをマスターしよう

この記事で学んだReactの知識をさらに伸ばしませんか？
Udemyには、現場ですぐ使えるスキルを身につけられる実践的な講座が揃っています。

Reactの人気講座ランキングを見る筆者おすすめ No.1 講座！「React(v18)完全入門ガイド｜Hooks、Next14、Redux、TypeScript」
フロントエンド開発の新着記事をチェック

フロントエンドエンジニアとは？初心者にもわかりやすい徹底解説