Udemyセール!最大95%オフ!1,200円~Udemy公式サイト >

この記事にはプロモーションが含まれています。

【React】Reactの基礎と開発環境の準備|TODOアプリ【基本編:第1回】

【React】Reactの基礎と開発環境の準備|TODOアプリ【基本編:第1回】

Reactで作るTODOアプリ開発シリーズ第1回

ケケンタ

このシリーズでは、Reactの基礎から実践的なTODOアプリの開発まで、段階的に学習していきます。最終的には、基本編~発展編を経て、データベース連携まで行える本格的なアプリケーションを完成させることが目標です!

それは早速ですが、シリーズ初投稿となる第1回では

Reactの基礎知識と開発環境の構築方法

を解説します。

Reactは現在、Webアプリケーション開発で最も人気のあるJavaScriptライブラリの一つです。Facebook(現Meta)が開発したこのライブラリは、コンポーネントベースの開発手法により、効率的で保守性の高いWebアプリケーションを作ることができます。

この記事でわかること
  • Reactとは何か(仮想DOM、コンポーネントベース開発)
  • Node.jsとnpmのインストール方法
  • Create React Appでのプロジェクト作成
  • 開発サーバーの起動と基本操作
  • JSXの基本文法
  • 初めてのコンポーネント作成
TODOアプリ(第1回:完成イメージ)
TODOアプリ(第1回:完成イメージ)

TODOアプリ開発シリーズのまとめ記事はこちら



ケケンタ

ケケンタのITブログでは、WebアプリPHPLaravel)やWeb制作WordPressコーディング)について情報を発信しています。
学習中の方や実務をされている方など多くの方にアクセスいただいていますので、ぜひほかの記事も参考にしてみてください!


運動不足、気になっていませんか?

もしプログラミング学習やお仕事で運動不足が気になっているなら

連続屈伸運動がおすすめです!

ボタンにカーソルを合わせるだけ
カウントダウンが始まるタイマーをご用意してみました!

ケケンタ

無理のない範囲で、ぜひ隙間時間に屈伸運動を取り入れてみて下さい!

タイマースタート

3:00

※運動不足だと連続3分で取り組んでもかなり息が切れます
(僕は加えて気分もちょっと悪くなりました……)
絶対にご無理の無い範囲でお取り組みください!



目次

Reactとは何か

Reactは、ユーザーインターフェース(UI)を構築するためのJavaScriptライブラリです。特に以下の特徴があります。

仮想DOM(Virtual DOM)

Reactの最大の特徴の一つが仮想DOMです。従来のWeb開発では、HTMLの要素を直接操作していましたが、Reactでは仮想的なDOMツリーを作成し、実際のDOMとの差分のみを更新します。

これにより、パフォーマンスが大幅に向上し、複雑なUIでもスムーズに動作するアプリケーションを作ることができます。

コンポーネントベース開発

Reactでは、UIを小さな部品(コンポーネント)に分割して開発します。例えば、TODOアプリであれば、

  • TodoList(TODOリスト全体)
  • TodoItem(個別のTODOアイテム)
  • TodoForm(TODO追加フォーム)

このように分割することで、コードの再利用性が高まり、保守性も向上します。

開発環境の準備

それではここからは実際に手を動かしていきましょう。まずはReactでTODOアプリ開発を行うための「開発環境の準備」からです。

Node.jsのインストール

Reactの開発には、Node.jsが必要です。Node.jsは、JavaScriptをサーバーサイドで実行できるようにするプラットフォームです。

STEP
Node.js公式サイトにアクセス
STEP
LTS版(推奨版)をダウンロード
STEP
インストーラーを実行し、指示に従ってインストール

インストールが完了したら、ターミナル(コマンドプロンプト)を開いて、以下のコマンドを実行して確認します。

node --version
npm --version

バージョン番号が表示されれば、インストールは成功です。

Create React Appの使用

Reactプロジェクトを作成する最も簡単な方法が、Create React Appを使用することです。これは、Facebookが提供する公式のツールで、Reactアプリケーションの開発に必要な設定がすべて含まれています。

今回は、デスクトップ上でターミナルを開き、以下のコマンドを実行します。

npx create-react-app todo-app

このコマンドにより、以下のファイル構造が自動的に作成されます。

コマンドで自動作成されるファイル構造

todo-app/
├── node_modules/
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── App.js
│   ├── App.css
│   ├── index.js
│   └── index.css
├── package.json
└── README.md

開発サーバーの起動

次に、以下のコマンドでプロジェクトディレクトリに移動します。

cd todo-app

続いて、以下のコマンドで開発サーバーを起動します。

npm start

このコマンドを実行すると、ブラウザが自動的に開き、http://localhost:3000でReactアプリケーションが表示されます。

Reactアプリケーションの初期画面
Reactアプリケーションの初期画面

JSXの基本文法

ここからはいったんReactで使用する文法について解説をしていきます。その後、実際に手を動かしてTODOアプリ開発の第一歩目を踏み出しましょう。

JSXは、JavaScriptの中にHTMLライクな記法を書くことができるReactの拡張構文です。

基本的なJSX

function App() {
  return (
    <div className="App">
      <h1>Hello, React!</h1>
      <p>これはJSXで書かれたコンポーネントです。</p>
    </div>
  );
}

JSXの特徴

  1. className属性: HTMLのclassではなく、classNameを使用
  2. 閉じタグ: すべての要素は閉じタグが必要(<img />のように自己終了タグも可能)
  3. JavaScript式の埋め込み: {}を使ってJavaScriptの式を埋め込むことが可能
function App() {
  const name = "React";
  const items = ["アイテム1", "アイテム2", "アイテム3"];

  return (
    <div className="App">
      <h1>Hello, {name}!</h1>
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

【実践】初めてのコンポーネント作成

それでは、ここから実際に手を動かしてコンポーネントを作成してみましょう。
普段お使いのエディタでtodo-appディレクトリを開いたら、srcフォルダ内に新しいファイルを作成します。

1. TodoItemコンポーネントの作成

src/TodoItem.jsファイルを作成し、以下のコードを記述します。

import React from 'react';

function TodoItem({ text, completed }) {
  return (
    <div className="todo-item">
      <input 
        type="checkbox" 
        checked={completed} 
        readOnly 
      />
      <span style={{ 
        textDecoration: completed ? 'line-through' : 'none' 
      }}>
        {text}
      </span>
    </div>
  );
}

export default TodoItem;

2. App.jsの修正

src/App.jsを以下のように修正します。

import React from 'react';
import './App.css';
import TodoItem from './TodoItem';

function App() {
  return (
    <div className="App">
      <h1>React TODOアプリ</h1>
      <div className="todo-list">
        <TodoItem text="Reactを学ぶ" completed={false} />
        <TodoItem text="TODOアプリを作る" completed={true} />
        <TodoItem text="データベース連携" completed={false} />
      </div>
    </div>
  );
}

export default App;

3. スタイルの追加

src/App.cssに以下のスタイルを追加します。

.App {
  text-align: center;
  padding: 20px;
  max-width: 600px;
  margin: 0 auto;
}

.todo-list {
  margin-top: 20px;
}

.todo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.todo-item input[type="checkbox"] {
  margin-right: 10px;
}

.todo-item span {
  font-size: 16px;
}

動作確認

開発サーバーが起動している状態で、ブラウザを確認すると、以下のような表示が確認できます。

TODOアプリ(第1回:完成イメージ)
TODOアプリ(第1回:完成イメージ)
  • 「React TODOアプリ」というタイトル
  • 3つのTODOアイテム(チェックボックス付き)
  • 2番目のアイテムが完了状態(取り消し線付き)

発展課題

基本を理解したら、ぜひ以下の課題に挑戦してみてください!

  1. 新しいTODOアイテムを追加する(ハードコーディングで)
  2. アイテムの表示順序を変更する(ハードコーディングで)
  3. 異なるスタイルを適用する

FAQ

Node.jsのインストールでエラーが発生した場合

Node.jsの公式サイトから最新版をダウンロードし直してください。Windowsの場合は管理者権限でインストールを実行し、インストール後にPCを再起動してください。

npm startでエラーが発生する場合

以下の手順を試してください。

  1. node_modulesフォルダを削除
  2. npm installを再実行
  3. npm startを実行
ポート3000が既に使用されている場合

ターミナルでCtrl + Cで停止し、別のポートを使用するか、使用中のプロセスを終了してください。または、npm startの代わりにPORT=3001 npm startを実行してください。

JSXでエラーが発生する場合

JSXは必ず一つの要素で囲む必要があります。複数の要素がある場合は、<div><>(React Fragment)で囲んでください。

ブラウザでページが表示されない場合

ブラウザのキャッシュをクリアし、開発者ツールのコンソールでエラーメッセージを確認してください。また、URLがhttp://localhost:3000になっているか確認してください。

コンポーネントが表示されない場合

以下の点を確認してください。

  1. ファイル名とimport文が一致しているか
  2. export defaultが正しく記述されているか
  3. ファイルパスが正しいか

まとめ

今回は、Reactの基礎知識と開発環境の構築について学習しました!

Reactは仮想DOMとコンポーネントベース開発により、効率的で保守性の高いWebアプリケーションを作ることができるJavaScriptライブラリです。

開発環境の準備から初めてのコンポーネント作成まで、実際に手を動かしながら学習することで、Reactの基本的な概念を理解することができました。

ケケンタ

次回は、コンポーネントとJSXについてより詳しく学習していきます。コンポーネントの分割方法や、propsの受け渡しについて理解を深めていきましょう!

この記事が少しでもお役に立ったなら何よりです。次回もお楽しみに!


僕が実際にReact学習に使用した書籍です

【React】Reactの基礎と開発環境の準備|TODOアプリ【基本編:第1回】のアイキャッチ画像

この記事が気に入ったら
フォローしてね!

この記事が良いと思ったらシェアしてね!

コメント

コメントする

CAPTCHA


目次