Reactとは？

はじめに

この記事は 初心者向け の記事となっています。
専門用語については、できるだけ かみ砕いた意味 を書くようにしています。

また、表現の仕方に主観的な内容が含まれる場合がありますが、
あらかじめご了承ください。

---

まず初めに：Reactとは？

Reactとは、Meta社（旧 Facebook社） が開発した
JavaScriptのライブラリ（便利ツール） です。

Reactには、大きく分けて 2つの大きな特徴 があります。

• 仮想DOM
• コンポーネント指向のUI設計

この2つを理解することで、
「なぜReactが使われているのか」が見えてきます。

---

仮想DOMについて

従来のDOM（画面を表示する仕組み）では、
画面の一部を変更しただけでも、

• 計算
• 描画

といった 画面表示までの流れをすべてやり直す 必要がありました。

そのため、画面が複雑になるほど処理が重くなりがちでした。

---

仮想DOMとは？

Reactでは 仮想DOM という仕組みを使っています。

仮想DOMでは、

• 変更があった部分をチェック
• 本当に必要なところだけを更新

という処理を行います。

つまり、
無駄な描画や処理をできるだけ省いて、
素早く画面を更新できる というわけです。

これが、Reactの画面表示が速い理由の1つです。

---

コンポーネント指向のUI設計について

コンポーネント指向とは？

簡単に言うと 積み木 のような考え方です。

小さいブロック（部品）を組み合わせて、
大きなものを作る考え方を コンポーネント指向 といいます。

---

アプリでいうと？

アプリケーションでは、

• ボタン
• 画像
• テキスト

といった UIの部品 を組み合わせて、
1つの画面やアプリを作っていきます。

この「部品」を コンポーネント と呼びます。

---

コンポーネント指向のメリット

コンポーネント指向のUI設計には、
大きく 3つのメリット があります。

---

① 再利用が簡単！

一度作ったボタンを、
別のページでも簡単に再利用できます。

関数名を書くような感覚で使えるため、

• 視覚的に分かりやすい
• 同じ処理を書かなくて済む

といったメリットがあります。

---

② 変更が簡単！

たとえば、

「いろいろなページで使っている
ホームボタンのデザインを変えたい！」

となった場合でも、

ボタンのコンポーネントを1箇所修正するだけ で、
すべてのページに変更が反映されます。

---

③ コードが見やすい！

UIの部品ごとにコードが分かれるため、
全体の構造が把握しやすくなります。

結果として、

• 読みやすい
• 管理しやすい

コードになります。

---

JSXとは？

Reactでは、
これらのコンポーネントを
JSX（JavaScript XML） という書き方で表現します。

JSXは、

• HTMLのように見える
• でも中身はJavaScript

という少し不思議な書き方です。

HTMLを書く感覚でUIを作れるため、
初心者でも比較的とっつきやすいのが特徴です。

---

Reactだけでは少し大変なこともある

ここまでで、Reactは

• UIを作るのが得意
• 部品（コンポーネント）として管理できる

というライブラリだと分かってきたと思います。

ただし、React 単体 では、

• ページ遷移（ルーティング）
• データ取得の仕組み
• 開発環境の初期設定
• 画像の最適化

などを 自分で考えて用意する必要 があります。

そこで登場するのが Next.js です。

---

Next.jsとは？

Next.jsとは、
Reactを使った開発を、より簡単に・実践的にするための環境 を
提供してくれるものです。

Reactをベースにした
JavaScriptのフレームワーク（便利な仕組みの集合体） です。

---

フレームワークのイメージ

• 食材
• レシピ
• 調理器具
• 調理手順

が最初からそろった 料理キット のようなものです。

Next.jsを使えば、

あら不思議！
すぐにアプリ作りを始められる環境が整います。

---

Next.jsの代表的な特徴

① フルスタックなフレームワーク

Next.jsでは、

• フロントエンド（画面表示）
• バックエンド（データのやり取り）

を 同じプロジェクト内 で開発できます。

フロントとバックを行き来しやすく、
学習コストも下がります。

---

② ルーティングシステム（App Router）

Next.jsには、
App Router と呼ばれるルーティング（道筋）の仕組みがあります。

app フォルダの構造が、
そのまま URLのパス になります。

フォルダを作るだけでページが増えるため、
初心者でも理解しやすい設計です。

---

そのほかの便利な機能

そのほかにも、

• ハイブリッドレンダリング
• 画像の最適化

など、便利な機能がたくさんあります。

ここでは詳しく触れませんが、
興味が出てきた方は
公式ドキュメント をぜひ見てみてください。

---

追記：公式ドキュメントについて

正直に言います。

公式ドキュメント、苦手です。
英語だし、小難しいし……。

でも、

• 正しい情報
• 最新の情報

を得られる
一番信頼できる場所 でもあります。

最初から完璧に理解しなくて大丈夫なので、
少しずつ慣れていきましょう。

---

もっと初心者さんへ

公式ドキュメントには、
難しい単語がたくさん出てきます。

最初は、

• レンダリング？
• ルーティング？

と「？」だらけですよね。

1つずつ言葉の理解度を上げていくこと が大切だと思います！
これが読解力につながり！いろんな環境に対応できる！

後日、
「初心者なりに、いいエンジニアになるための考え方」
についてもブログを書く予定なので、
読んでいただけたら嬉しいです。
``