React・Next.js
プログラミング講座

最初の「初心者向け予習セクション10回」では予習言語のPerlを通して手続型言語の予習を7回行ってからオブジェクト指向型言語のJavaScript基礎を3回学びます。このセクションを通して「手続型とオブジェクト指向型の両言語の基礎」を学び、「アプリケーション・応用プログラム制作の基礎」を学びます。

次の「2.Ajax・fetchセクション5回」では、サーバーとの「非同期通信」を行う「Ajax・fetchの基礎」を学びます。続けて「Ajax・fetchの応用」編としてライブラリを使わない生JavaScriptによる「JSON簡易名簿」と「JSON掲示板」を制作しながら、「fetch()関数とDOMオブジェクトの基礎」を学びます。

最後の「3.MERNスタック-Reactセクション10回」ではMySQLの代わりになる「M（MongoDB）」NoSQL、PHPの代わりになる「E（Expressサーバー）」、「R（Reactフロントエンド）」、「Node.js」の頭文字からなる「MERNスタック」を順番に学びます。最終的には「JWT（JSON Web Token）」による認証機能付き「React簡易名簿」と「React掲示板」を制作します。さらに作成したプロジェクトをGoogle CloudのFirebase仮想アプリ環境に「デプロイ」し、インターネット上での動作確認を行います。

上記「初心者向けMERN-React25回講座」と同じ。

上記「初心者向けMERN-React25回講座」と同じ。

上記「初心者向けMERN-React25回講座」と同じ。

Next.jsの基礎練習ではReact講座で作成した「React簡易名簿」をReactと共通の「Page Router」版に修正し、さらにNext.jsオリジナルの「App Router」版に修正していきます。このときSEO対策に強いと言われるアクセス時にHTML化する「SSR」や、ビルド時にHTML化する「SSG」、定期的にHTML化する「ISR」についても学び、最終的にExpressサーバー機能を「API Routes」に移行し、「Server Action」との連携によるフルスタックアプリの「NextJs簡易名簿」と「NextJs画像掲示板」を制作します。

Next.jsのリファレンス練習でよく登場する「ToDoアプリ」を1個作れるようになっても、いきなり大規模サイトは作れません。そこで複数アプリから成立するECサイト全体を作ることで、大規模サイト開発への足がかりとします。最終的に「買い物カゴ付き書籍ショッピングサイト」「Stripeカード決済機能付き書籍オーダーフォーム」「商品登録管理サイト」「発送日登録機能付き注文データ一覧サイト」の全機能を作成し、「MongoDB Atlas」と「Vercel」を使ってインターネット上に「デプロイ」し、動作確認を行います。