ゼロから学ぶ React, Next.js①【React Foundations】 Introduction & Chapter1
React, Next.jsを触れたことがない方向けに、React, Next.jsの基礎を学ぶための記事になります。
公式チュートリアルはこちら
では始めていきましょう！
React の基礎
Next.js を効果的に学ぶためには、JavaScript、React、および関連する Web 開発の概念に精通していることが役立ちます。しかし、JavaScript と React は広大なトピックです。Next.js を使い始める準備ができたかをどうやって知ることができますか？
React 基礎コースへようこそ！この初心者に優しい、例示中心のコースでは、Next.js の前提知識について説明します。ステップバイステップでシンプルなプロジェクトを構築します。最初は JavaScript アプリケーションから始め、それを React と Next.js に移行していきます。
各セクションは前のセクションの上に構築されているので、すでに知っていることに応じてどこから始めるかを選択できます。
前提知識
このチュートリアルでは、HTML、CSS、JavaScript の知識を前提としており、React の知識は必要ありません。すでに React に精通している場合は、React から Next.js への章にスキップするか、ダッシュボードアプリのコースを受講してください。
システム要件
このコースを始める前に、以下がインストールされていることを確認してください。
-
Node.js 18.17.0以降がインストールされていること。 - オペレーティングシステム：macOS、Windows（WSL を含む）、または Linux。
- VSCode または選択した別のテキストエディター。
会話に参加しよう
Next.js またはこのコースに関連することで質問がある場合は、Discord のコミュニティで聞いてみてください。
【Chapter 1】 React と Next.js について
Next.js は柔軟な React フレームワーク であり、高速でフルスタックな Web アプリケーション を作成するための構成要素を提供します。
しかし、これは正確には何を意味するのでしょうか？React と Next.js が何であるか、そしてそれらがどのように Web アプリケーションの構築に役立つかについて、少し時間をかけて説明しましょう。
Web アプリケーションの構成要素
モダンなアプリケーションを構築する際には、いくつかの点を考慮する必要があります。例えば以下のようなことです。
- ユーザーインターフェース - ユーザーがアプリケーションをどのように利用し、操作するか。
- ルーティング - ユーザーがアプリケーションの異なるパーツ間をどのように移動するか。
- データフェッチ - データがどこに存在し、どのように取得するか。
- レンダリング - 静的または動的なコンテンツをいつ、どこで描画するか。
- インテグレーション - 使用するサードパーティのサービス（CMS、認証、支払いなど）と、それらへの接続方法。
- インフラストラクチャ - アプリケーションコードをデプロイ、保存、実行する場所（サーバーレス、CDN、エッジなど）をどこにするか。
- パフォーマンス - エンドユーザー向けにアプリケーションを最適化する方法。
- スケーラビリティ - チーム、データ、トラフィックの増加に伴い、アプリケーションをどのように適応させるか。
- 開発者エクスペリエンス - アプリケーションの構築と維持に対するチームの経験。
アプリケーションの各部分について、自前で実装するか、パッケージ、ライブラリ、フレームワークなどの他のツールを使用するかを決める必要があります。
React とは？
React は、インタラクティブなユーザーインターフェース を構築するための JavaScript ライブラリ です。
ユーザーインターフェース（UI）とは、ユーザーが画面上で見て操作する要素（下図のLogoやNavなど）のことを指します。
メモ：インタラクティブとは
ユーザーとアプリのやりとりによって、アプリケーションの状態が変化することを指します。
ライブラリとは、React が UI を構築するための便利な関数（API）を提供するものの、それらの関数をアプリケーションのどこで使用するかは開発者に委ねられていることを意味します。
React が成功した理由の一つは、アプリケーション構築の他の側面については比較的柔軟であることです。Next.js を含む、サードパーティ製のツールとソリューションが繁栄するエコシステムが生まれました。
しかし、これは完全な React アプリケーションを一から構築するにはある程度の努力が必要であることも意味します。開発者はツールの構成に時間を費やし、一般的なアプリケーションの要件に対するソリューションを再発明する必要があります。
Next.js とは？
Next.js は、Web アプリケーションを作成するための構成要素を提供する React フレームワーク です。
フレームワークとは、Next.js が React に必要なツールと構成を処理し、アプリケーションに追加の構造、機能、最適化を提供することを意味します。
React を使用して UI を構築し、Next.js の機能を段階的に採用して、ルーティング、データフェッチ、キャッシングなどの一般的なアプリケーションの要件を解決できます。これらすべては、開発者とエンドユーザーのユーザー体験を向上させながら行えます。
個人の開発者であろうと、大規模なチームの一員であろうと、React と Next.js を使用して、完全にインタラクティブで、非常に動的で、高性能な Web アプリケーションを構築できます。
次の章では、React と Next.js を使い始める方法について説明します。
次の章
Discussion