本記事ではウェブサイトの作り方に悩んでいる人に向けて、ReactとNext.jsでウェブサイトを作る方法を紹介します。
ReactとNext.jsはプログラムの道具箱のようなもので、ウェブサイトを作るときに必要な部品が揃っています。
そのため、ウェブサイトをより効率的に開発することができます。また、ReactやNext.jsは多くのサービスでも採用されているため、将来的なスキルアップにもつながるかと思います。
Reactは、ユーザーインターフェースの構築に特化しており、Next.jsは静的サイトジェネレーターとして機能します。この組み合わせは、ウェブサイトのパフォーマンスを向上させることができ、SEOにも優れています。この記事では、ReactとNext.jsを使用してウェブサイトを開発するための基礎について解説します。
ぜひ、この記事を参考にして、ウェブサイトの開発を楽しんでください！
目次
Reactとは
Reactは、ウェブサイトを構築するためのライブラリです。
コンポーネントと呼ばれる小さな部品を組み合わせて作ります。
人気のあるUIライブラリであり、多くの企業が採用しています。
また、モバイルアプリケーションの開発をできるReact Nativeというフレームワークもあります。
| 初出 | 2013年 |
|---|---|
| 開発者 | Meta（旧Facebook） |
| ベース | JavaScript |
以下は、Reactについての概要です。
仮想DOM
仮想DOMとは、ブラウザ上の実際のDOMと同じ構造を持ち、JavaScriptで扱えるオブジェクトのことです。
Reactは仮想DOMを使うことで、UIのパフォーマンスを改善しレンダリングの速度を向上させます。
コンポーネントベースのアーキテクチャ
Reactは、コンポーネントベースのアーキテクチャを採用しています。
UIを独立した部品（コンポーネント）に分割し、それらを組み合わせて再利用可能なコードを作成することができます。
これによりUIを簡単に再利用でき、コンポーネントを組み合わせることで複雑なUIを構築できます。
JSX
Reactでは、JavaScriptのコード内にHTMLのようなマークアップができるようになっています。
JSXは、Reactの仮想DOMと結びついて、効率的なUIの作成と更新をサポートします。
単方向データバインディング
Reactは親コンポーネントから子コンポーネントへデータを渡し、子コンポーネントでは受け取ったデータを変更せずに表示する仕組みです。
そのため、コンポーネントの状態が予測可能で保守性が高いアプリケーションを開発できます。
Fluxアーキテクチャ
Reactは、Fluxと呼ばれるアーキテクチャを提供しています。
これにより、アプリケーション内のデータフローを制御し、アプリケーションの保守性を高めることができます。
Next.jsとは
Next.jsはReactをベースにした、サーバーサイドレンダリング（SSR）や静的サイト生成（SSG）をサポートするフレームワークです。
| 初出 | 2016年 |
|---|---|
| 開発者 | Guillermo Rauch |
Next.jsはReactが提供するUIコンポーネントを活用して、高速でSEOに強く、拡張性の高いウェブアプリケーションを簡単に開発することができます。また、Next.jsには、APIルート、ファイルシステムルーティング、自動的なコードスプリッティングなどの機能があり、ウェブアプリケーションの開発をよりスムーズにおこなうことができます。
また、Next.jsは静的サイト、動的なアプリケーション、eコマースサイト、ブログなど、さまざまなモダンなフロントエンド開発において広く使われています。
ReactとNext.jsを組み合わせるメリットについて
ReactとNext.jsを組み合わせてウェブサイトを作るメリットは、以下の通りです。
ページの表示速度を速くする
Next.jsはサーバーサイドレンダリングをサポートしており、Reactと組み合わせることで、初期の表示速度を高速にすることができます。
サーバーサイドレンダリングにより、初期表示に必要なHTMLがサーバーから生成され、クライアントのブラウザに返されます。
これにより、初期表示速度を高速化することができます。
開発効率の向上
Reactは、コンポーネントベースのUIライブラリであり、コードの再利用性が高くなっています。
また、Next.jsは、ルーティングやデータフェッチ、ホットリロードなどの機能を提供しています。
これにより、ReactとNext.jsを組み合わせることで、開発効率を向上させることができます。
SEO対策の強化
クライアントサイドで動作するアプリケーションでは、検索エンジンのクローラーがHTMLを取得する前にJavaScriptが動作するため、クローラーに正しくインデックスされない可能性があります。
一方、サーバーサイドレンダリングを採用することで、検索エンジンのクローラーが正しくHTMLを取得できるため、SEO対策が強化されます。
開発コミュニティの活発化
ReactとNext.jsは、世界中で広く使われており、多くの開発者が開発コミュニティに参加しています。
これにより、質問や問題解決に対する情報が多く共有され、開発効率を向上させることができます。
ReactとNext.jsでシンプルなウェブサイトを作る
ReactとNext.jsの基礎を紹介したところで、次は実践的なコーディングをおこなっていきたいと思います。
以下の手順に従って、ReactとNext.jsを使ったシンプルなウェブサイトを作ってみましょう。
1. Node.jsのインストール
ReactとNext.jsを使うには、Node.jsをインストールする必要があります。
https://nodejs.org/ja/
—————-
node ver20.2.0
npm ver9.6.6
（2024/12 現在）
—————-
2. プロジェクトの作成
プロジェクトの作成は1行で済みます。
1 2 3 | npx create-next-app website |
これで、websiteという名前のプロジェクトが作られます。
以下のコマンドで作られたwebsiteディレクトリに移動し、開発用モードで起動します。
1 2 3 4 | cd website npm run dev |
ターミナルの画面にローカルホストのURLが表示されるので、そこに飛ぶとローカルの環境でページが表示されるかと思います。
1 2 3 | url: http://localhost:3000 |
以下のような画面が表示されていればインストール完了です。
3. コンポーネントの作成
Reactでは、コンポーネントを作成することで、再利用性の高いコードを書くことができます。
例えば、以下のようなHeaderコンポーネントを作成してみます。
website直下にcomponentというフォルダを作り、header.jsというファイルを作成し、以下のようなコードを記入します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | import React from "react"; const Header = () => { return ( <header> <h1>My Website</h1> <nav> <ul> <li><a href="/">Home</a></li> <li><a href="/about/">About</a></li> </ul> </nav> </header> ); }; export default Header; |
4. ページの作成
ReactとNext.jsではページごとにコンポーネントを作成します。
例えば、pages/indes.jsを以下のように書き換えてみます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | import React from "react"; import Header from "../component/header"; const Home = () => { return ( <> <Header /> <main> <h2>トップページ</h2> <p>トップページです。</p> </main> </> ); }; export default Home; |
これでヘッダーの読み込まれたページが作成されるかと思います。
上記のソースでは要素が<>で囲われていますが、これは最上位の要素は1つである必要があるためです。
<>を記入せず、Headerとmainの2要素が最上位にあるとエラーになってしまいます。
同様に、Aboutページも作成します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | import React from "react"; import Header from "../component/header"; const About = () => { return ( <> <Header /> <main> <h2>About</h2> <p>Aboutページです。</p> </main> </> ); }; export default About; |
ReactとNext.jsで使えるCSSの種類について
ReactとNext.jsで使えるCSSの種類はいくつかあります。
グローバルスタイル
グローバルスタイルのファイルを以下のように_app.jsファイル内で読み込むとサイト全体で使用できます。
1 2 3 | import '../styles/globals.css' |
CSS Modules
ReactやNext.jsでよく使われるスタイリングの方法の1つで、クラス名をユニークなものにして衝突を防止するための仕組みです。
CSSファイルをモジュール化し、import文を使って読み込むことで、スタイルが重複しないようになります。
1 2 3 | import styles from 'styles/header.module.css' |
CSS-in-JS
CSS-in-JSは、CSSをJavaScriptのコードとして書く手法の総称で、Styled Componentsのようなライブラリも含まれます。
CSS-in-JSを使うことで、スタイルとコンポーネントが密接に結びつき、コンポーネント単位でスタイルを管理することができます。
1 2 3 4 5 6 7 8 9 10 | <p> <style jsx> p { font-weight: bold; text-align: center; } </style> </p> |
インラインスタイル
CSSを要素に直書きする方法です。
1 2 3 4 5 6 7 8 | <p style={{ font-weight: 'bold', text-align: 'center', }} > |
リンク方法
Next.jsでのリンク方法にはLinkコンポーネントを使用した方法とaタグを使用した方法の2種類があります。
Linkコンポーネントを使用した方法
LinkコンポーネントはNext.jsにおける重要な機能の1つで、内部リンクの場合には基本的にこちらを使用します。
1 2 3 4 5 6 7 | import Link from 'next/link' <Link href="/contact/"> お問い合わせはこちら </Link> |
ボタンにクラスを付与する場合にはテキストをaタグで囲み、そのaタグに対してクラスを付与します。
なお、aタグをLinkコンポーネントで囲むと以下のようなエラーが出ることがあります。
Error: Invalid <Link> with <a> child. Please remove <a> or use <Link legacyBehavior>.
Learn more: https://nextjs.org/docs/messages/invalid-new-link-with-extra-anchor
そのため、以下のように「legacyBehavior」プロパティをLinkコンポーネントに追加し、Linkコンポーネントがaタグを囲わないようにします。
1 2 3 4 5 6 7 | import Link from 'next/link' <Link href="/contact/" legacyBehavior> <a className='c-btn01'>お問い合わせはこちら</a> </Link> |
aタグを使用した方法
基本的に外部リンクの場合にはaタグを使用します。
1 2 3 | <a href="https://example.com" target="_blank" rel="noopener noreferrer">example.com</a> |
Linkコンポーネントとaタグの違い
Linkコンポーネントもaタグもページ遷移するという点では同じですが、
aタグの場合は通常のブラウザによる遷移となり、都度ページの読み込みが発生します。
しかし、Linkコンポーネントの場合、クライアントサイドでのページ遷移となり、遷移時のページ再読み込みが発生せず、高速に移動することが可能です。
Linkコンポーネントとaタグによるページ遷移を比較したものが以下になります。
上がLinkコンポーネントによるページ遷移、下かaタグによる遷移です。
Linkコンポーネントの方が早いことは一目瞭然です。
そのため、内部リンクの場合にはLinkコンポーネントを使用しましょう。
画像の表示について
ReactとNext.jsで画像を表示するには、以下のような方法があります。
publicフォルダに画像を配置して、imgタグで表示する方法
publicフォルダに配置した画像をimgタグで表示する方法です。
例えば、publicフォルダに”images”というフォルダがあり、その中に”example.jpg”というファイルがある場合、以下のように記述します。
1 2 3 | <img src="/images/example.jpg" alt=""> |
Imageコンポーネントを使って画像を表示する方法
Imageコンポーネントを使って画像を表示する方法もあります。
この方法では、画像の最適化やサーバーサイドレンダリングの恩恵を受けることができます。
例えば、”images”というフォルダに”example.jpg”というファイルがある場合、以下のように記述します。
1 2 3 4 5 6 7 8 9 10 11 | import Image from 'next/image'; function Example() { return ( <div> <Image src="../public/images/example.jpg" alt="Example" width={800} height={450} /> </div> ); } |
このようにImageコンポーネントを使用することで画像の最適化や遅延ロード、自動リサイズなどの機能を利用することができます。
また、サーバーサイドレンダリングにより、初期表示のパフォーマンスも向上させることができます。
ルーティングの設定
Next.jsには組み込みのルーティング機能があります。
pagesディレクトリ内に開発されたファイルのパスに基づいて、自動的にルーティングが行われます。
例えば、pages/about.jsというファイルを開発すると、”/about/”のURLに対して自動的にそのコンポーネントが表示され、追加のライブラリを使用する必要がありません。
おわりに
ReactとNext.jsを使ってウェブサイトを開発するための基礎的なステップを解説しました。
ReactとNext.jsの組み合わせは、ウェブサイト開発においてとても便利だということが伝わったかと思います。
ReactとNext.jsを使ったウェブサイト開発は、スムーズな開発プロセスと高速なパフォーマンスを実現することができます。
Reactは柔軟性が高く、再利用可能なコンポーネントの作成に向いています。
Next.jsは、SEOを向上させるためのSSRや静的サイト生成など、多くの機能を提供しています。
ぜひ、記事を参考にして、効率的かつ高品質なウェブサイトを作ってみてください。
