[React] Reactとは

はじめに

この記事は、Reactを学ぶ中で得た知識や感じたことを記録したメモをまとめたものです。エンジニア初学者として学習する中で気づいたポイントや躓いた部分を整理し、後から振り返った際に役立てるとともに、Reactを学び始めた方々にも少しでも参考になる内容になれば幸いです。

Reactとは

Reactは、Metaが開発した、UIを効率的に構築するためのJavaScriptライブラリ。

ライブラリ？ フレームワーク？

Reactはあくまでライブラリだが、豊富な周辺ツールやエコシステムを活用することで、フレームワークのように使うことが可能。

Reactフレームワークの例

• Next.js
  サーバーサイドレンダリング（SSR）や静的サイト生成（SSG）に対応。
• Gatsby
  静的サイト生成に特化したフレームワーク。高速なウェブサイト構築に最適。
• Remix
  高速なデータ駆動型のアプリケーション開発が可能。

「State of JavaScript 2024」によると、メタフレームワークの中で最も使用されているのはNext.js。

React周辺ツールの例

• Axios: シンプルで柔軟なHTTP通信ライブラリ。
• React Hook Form: 軽量でパフォーマンスに優れたフォーム管理ツール。
• Tailwind CSS: ユーティリティクラスを活用したCSSフレームワーク。
• Jest: JavaScriptのテストランナー。
• Vite: 高速な開発環境を提供するビルドツール。

Reactの特徴

1. コンポーネントベース

ReactではUIを「コンポーネント」という小さな部品に分けて作成する。それぞれのコンポーネントは独立しており、再利用可能なため、保守性や開発効率が向上する。

2. 仮想DOM

仮想DOMを使用することで、変更箇所だけを効率的に更新する。この仕組みにより、アプリケーションの動作が高速化する。

Reactプロジェクトの始め方

React公式では「Reactをフレームワークなしで使うことも可能だが、新しいアプリやサイトをフルでReactを使って構築する場合は、フレームワークを使用することを推奨」としている。

Next.jsプロジェクトの作成方法

新規プロジェクトを作成するには、以下のコマンドを実行：

npx create-next-app@latest

コマンドの各部分の解説

1. npx

• 意味
  Node.js に付属するコマンドラインツールで、パッケージを一時的にインストールして実行するためのもの。
• 役割
  指定したパッケージ（create-next-app）をローカルやグローバルにインストールせず、その場で実行する。

2. create-next-app

• 意味
  Next.js プロジェクトを簡単にセットアップするための CLI ツール。
• 役割
  プロジェクトディレクトリを作成し、Next.js の基本構成や依存関係を自動的にセットアップする。
• 実行後に行われること

  • プロジェクトディレクトリが作成される。

  • 必要なファイルやディレクトリが生成される。
    　*　pages/（ルーティング用のディレクトリ）
    　*　public/（静的アセット用のディレクトリ）
    　*　styles/（スタイル用のディレクトリ）

  • package.jsonが生成され、Next.js 関連の依存パッケージがインストールされる。

3. @latest

• 意味
  create-next-appパッケージの最新バージョンを使用する指定。
• 役割
  バージョンを明示的に指定する代わりに、常に最新バージョンをインストールして実行する。

Reactを学ぶために

下記は、Reactを学ぶために実際に取り組んだ内容です。

1. 基本を理解する

• JSX、コンポーネント、Props、Stateなどの基礎概念を、Udemyや本を活用して学習しました。

2. 小さなReactプロジェクトを始めてみる

• 簡単なポートフォリオを作成しました。
• スクール内の課題で家計簿アプリを作成しました。

3. 公式ドキュメントを活用する

• React公式ドキュメントを活用して、基礎を学びました。

4. Next.jsなどのフレームワークを使ってみる

• 前述の家計簿アプリを、再度Next.jsで作成しました。
• SSRやルーティングの活用を体験しました。