📖

React(Next.js)とは【初心者用】

2024/02/18に公開

JavaScript

個人開発でReact今を使用してきましたが未だに仕組みや不明点が多々あったためこれを機に、今回改めて公式ドキュメントを見返し自分なりに記事にまとめてみました。私自身勉強不足なもので間違っていた情報を記載していた場合は指摘していただけると幸いです。

Reactって何..?

ReactとはMeta社(旧Facebook)とコミュニティによって開発されているUIに特化したJavaScriptのライブラリです。(勘違いされることが多いが言語やフレームワークではない)
https://ja.react.dev/

従来のWebページはhtml/css/jsファイルにコードを記述しページが呼ばれるごとに該当のhtmlファイルを表示し、その中から link href = "" といったような感じでcss/jsファイルなどを読み込んでいました。え?別にこれでwebページ作れるなら良くない?と思う方もいますが、更新処理が頻繁に行われるページやリアルタイムを重視したページなどはこの手法で表示すると以下のような問題点がありました。

問題点

処理速度

・ページを表示するごとに該当のhtmlファイルやその他リソース全てを読み込み表示しなおすためページの表示/遷移が遅い。(変更点以外のDOMもすべて返す)
※DOMとはページを構成する要素でブラウザならF12(開発者モード)を押すことでDOMの中身を見ることが出来ます。

【DOM】

処理速度(React)

・仮想DOMの搭載により更新があるたびすべてのDOMを更新する必要がなくなり、変更があった差分のDOMだけ更新することにより処理が高速になりました。
※Reactは軽量の仮想DOMというものが搭載されており現在表示されているページのDOMとどの箇所が変更されているかの差分をとることが出来る

【現在表示されいるページのDOM】

【ページ更新により現在表示されいるページ文字追加されたDOM】

このページには<p>よろしくお願いします!!</p> が追加されてますね!この追加された箇所のDOMだけを更新することで本来全てのDOMを返していた時に比べるとまるで更新の量が違うことがわかりますね!!これがReactが高速な処理が行える理由です

メンテナンスの難しさ

・類似したUIや文言の変更を行う際(例ヘッダやーフッター等)それぞれのhtmlファイルを一つずつ修正していく手間があり保守性が悪い。
下記のような<div>の中に2個の<div>が入れ子構造になっているものがあるとします。これをもし1つにの入れ子にしようと思った場合3つ分修正しなければいけませんね...。まだ3つで済みますがこれが大規模システムで7,8個ぐらいありほかの個所でも大量にある場合めんどくさすぎます><

sample.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>サンプルです。</p>
    <!--構造は同じのが3つ-->
    <div class="sample-class">
        <div class="sample-class2">
            <div class="sample-class3">
                テストテキスト
            </div>
        </div>
    </div>
    <div class="sample-class">
        <div class="sample-class2">
            <div class="sample-class3">
                テストテキス2
            </div>
        </div>
    </div>
    <div class="sample-class">
        <div class="sample-class2">
            <div class="sample-class3">
                テストテキス3
            </div>
        </div>
    </div>
</body>
</html>

メンテナンスの難しさ(React)

ReactではJsxと言うhtmlとjsが1つのファイルに記述できる拡張子を使うことが多いです。上記のコードをReactで記述すると以下のようになります。Elementコンポーネントを作成しsampleファイルで使い回しそれぞれ引数を渡し短いコードで記述できます。もし<div>の入れ子を3個から2個にしたい場合は、element.jsxファイルの入れ子を修正するだけで済むわけですね!

sample.jsx

import React from 'react'
import Element from 'element.jsx'
const sample = () => {
  return (
    <>
    <p>サンプルです。</p>
    <Element text= "テストテキスト" />
    <Element text= "テストテキス2" />
    <Element text= "テストテキス3" />
    </>
  )
}

export default sample

element.jsx

import React from 'react'

const element = (text) => {
  return (
    <div className='sample-class1'>
        <div className='sample-class2'>
            <div className='sample-class3'>
                {text}
            </div>
        </div>
    </div>
  )
}

export default element

まだまだ解消された問題点はありましたが、【処理速度】,【メンテナンスの難しさ】についてざっくり説明していきました。少しずつバニラのJavaScript/htmlで書くよりReactを使ったほうがいい利点がわかってきたのではないでしょうか。次にReactとほぼセットで使われることが多いNext.jsを交えながら解説していきます。

Next.jsとは

Next.jsはNode.js上に構築されたオープンソースのReactをもとに作られたフレームワークです。...急に出てきたNode.jsて何だよ...?と思うかもしれませんがこれは後程説明しますので今は聞き流してください。そもそもなぜNext.jsが生まれたかというと先ほど紹介したReactにもまだ問題点がありそれを更に使いやすくするためです。
https://nextjs.org/

React問題点

ReactはそもそもJavaScriptのライブラリだと先ほど説明しましたが、従来JavaScriptはクライアントサイドの処理を得意としていました。そのためサーバーサイドの処理は、他の言語と組み合わせながら構築されており開発コストがかかっていました。
※クライアントサイドの処理とはユーザーが目に見える画面のUIを変更したり操作することを指します。
※サーバーサイドの処理とはユーザーが目に見えない処理であるデータベースのアクセスやAPIの通信などを指します

そこでクライアントサイド/サーバーサイドどちらでもJavaScriptでソースを自由にかけるようになればフルスタックの開発が可能になりコストも抑え便利ですよね!ここで出てくるのが先ほど紹介した Node.js です。

Node.jsとは

Node.jsとはJavaScriptをサーバーサイドで自由に実行できる実行環境です。
※Node.jsをよく言語と間違える人がいますが、JavaScriptの実行環境です
https://nodejs.org/en
従来、JavaScriptは主にクライアントサイド、つまりブラウザでの実行に限定されていましたが、Node.jsの中で実行することによりJavaScriptでサーバーサイドの処理も行えるようになりました。そのためReactのフレームワークであるNext.jsはNode.js環境の中でJavaScriptを実行するためアプリケーションの設計にもよりますが実質、JavaScriptの言語1つだけ覚えていればフルスタックな開発が可能になりました。

他にもNext.jsで追加された要素は盛沢山ありますが、今回は入門ということでいずれ別の記事で紹介しようと思います。