ロジコヤ

1. はじめに

オンライン教材 > Next.jsで作るチャットアプリ

React

JavaScriptフレームワーク

高機能で大規模なフロントエンド開発では、JavaScriptフレームワークでの開発は必須です。その代表格として「React」「Vue.js」「Angular」があります。

Reactとは

「React」はFacebookが開発したJSフレームワークです。

React公式サイト（日本）

Reactの特徴

コンポーネントベースの開発
仮想DOM
リアクティブ
JSXなどの機能拡張

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

Reactはコンポーネントベースの開発が必須で、UIをコンポーネント（小さな部品）に分割しながらプログラミングします。

コンポーネントを組み合わせで再利用可能かつ、保守性が向上し、大規模なアプリを構築できます。

仮想DOM

ReactはVirtual DOM（仮想DOM）という概念を使用し、変更された部分だけを実際のDOMに反映することで、パフォーマンスが格段に向上します。サーバーサイドプログラム（PHP、Ruby、Java、Pythonなど）では、サーバーでDOMをレンダリングするためサーバー負荷が発生する傾向があります。

リアクティブ（Reactive）

大規模アプリケーションになるとリアルタイム性を要求されるようになります。サーバサイドとフロントエンドでデータを高速に処理する必要があります。リアクティブはデータの更新があるとすぐに反応してリアルタイムで反映される仕組みです。

JSX

JSX は React で使用されるJavaScriptの拡張構文で、JavaScriptの中にXMLやHTMLのようなマークアップを記述できます。拡張子は .jsx です。

TypeScriptサポート

React では大規模開発の効率化で使用される TypeScript もサポートしています。拡張子は通常ファイルが .ts 、JSXでは .tsx になります。

ホットリローディング

Hot Reloading（ホットリローディング）は、コードを保存したときにリアルタイムで反映させる仕組みです。アプリケーションを再起動せずに、ファイルを保存するたびにリアルタイム更新できます。

Next.js

Next.jsとは

Next.js は React を拡張したフレームワークで、サーバーサイドレンダリング、静的サイト生成、ルーティング、APIルーティングなど多くの機能を搭載しています。

主な特徴

SSRとSSG

Next.js は、サーバーでコンテンツを動的に生成する SSR（サーバーサイドレンダリング） や、静的サイト生成する SSG（スタティックサイトジェネレーション） に対応しています。SSRやSSGを利用することで、サイトのページを事前にレンダリングして、高速なページ読み込みを実現します。