このドキュメントではクイックネットワークで採用しているReact/Next.jsについて効率的に学ぶためのカリキュラムを提供します。Sellca_cms_frontではmicroCMSやVercelも出てきますがこれらも含めてまとめて学習しましょう。
Reactとは
Reactとは、Facebook社が開発したWebサイト上のUIパーツを構築するためのJavaScriptライブラリです。React.jsやReact.JSと呼ばれることもあります。よくAngularJSやjQueryと比較されますが、React自体はフレームワークでなく、あくまでもUIを構築するだけのライブラリです。
現在は「Facebook」や「Instagram」はもちろん、「Yahoo!」「Airbnb」「Reddit」「Netflix」「Slack」「Uber」など、世界中で数多く採用されていて、最も勢いのあるライブラリといえます。オープンソースとしても公開されているので、常に改良が行われ、品質も保たれています。
Reactが急速に伸びている理由は、ほかでは真似できないReactならではの特徴が非常に優れているからだと考えられます。Reactの公式サイトに挙げられている3つの特徴は以下の通りです。
宣言的なView（Declarative）
Reactは、UIの部品に対し「このような表示（見た目）になります」と宣言するように実装できるという特徴を持っています。これは、誰が見てもシンプルで理解しやすいソースコードの作成を可能にした成果であり、デバッグしやすいという利点も生まれました。また、データをどのように配置するかを定義しておくだけで、データの変更を検知し、自動的に表示を更新するといった点もReactならではの特徴です。
コンポーネントベース（Component-Based）
コンポーネントとは構成要素を指す言葉です。Reactでは、部分ごとにコンポーネントを分けることで、カスタマイズしやすくなっています。AngularやjQueryでは、一部を変更する場合でも、全部を変更する必要がありました。しかし、Reactでは変えたい部分だけを変えることができるので、格段に改修や管理、再利用がしやすくなっています。また、大規模なJavaScriptコードも部品化させることで保守性を高め、既存のReactコンポーネントを再利用することで、開発工数を減らすことができます。
一度学習すれば、どこでも使える（Learn Once, Write Anywhere）
Reactは、開発の途中から利用されることを想定して作られています。そのため、新しい機能を追加する場合でも、既存のソースコードを書き換えることなく、開発ができます。どんなWebアプリにもすぐに導入できる手軽さも、大きな特徴のひとつです。
Next.jsとは
最近は、Reactをベースに開発されたJavaScriptのフレームワークであるNext.jsの利用も増えています。Next.jsはReactと異なり、アプリケーションフレームワークとしてWebアプリの土台として利用が可能です。
Next.jsとは、Reactをベースに開発された、フロントエンドフレームワークです。ReactはJavaScript言語を用いた、Webサイト上のUIを構築するためのライブラリで、フレームワークとは、開発を効率化するための枠組みです。
Next.jsは「URLルーティング」と呼ばれるリクエストされたURLに対して呼び出すアクションを決定する仕組みや、Webアプリ開発を効率よくするための機能が多く含まれているのが特長です。
Next.jsとReactの1番の違いは、サーバー機能の有無です。Next.jsはサーバー機能を持っていますが、Reactにはサーバー機能がありません。つまり、Next.jsは単体でWebアプリを動作させることができますが、Reactは別途サーバーを用意する必要があります。サーバーを用意するということは、サーバー用のモジュールをインストールし、ディレクトリ構成などを検討する必要があるため、Reactのほうが学習コストや難易度が高くなります。
2つ目の大きな違いは、Next.jsはURLルーティングを自動生成してくれることです。初期化時に生成されたフォルダにファイルを配置すると、それに合わせてURLが生成されます。
両者の違いを見ると、Next.jsのほうがメリットが大きいように感じられますが、Reactにもメリットはあります。ReactはRuby on Rails（Ruby）や、Django（Python）のフレームワークに組み込むことが可能です。よって、既に構築済みのアプリケーションに導入する際、Reactだと手間がかかりません。
クイックネットワークではSellcaの管理機能としてNext.jsを使っているためNext.jsをやりながらReactを学ぶことにします。
フロントエンド技術で重要な4つのレンダリング方式がありますが、Next.jsの学習でも重要なため紹介しておきます。これらはページごとに選択が可能です。
ページごとに選べるレンダリング方式（CSR、SSR、SSG、ISR）
Next.jsではCSR、SSR、SSG、ISRの4種類のレンダリング方式を各ページごとに選べます。
これにより、各ページのコンテンツに合わせた最適なレンダリングの選択が可能になっています。
CSR（Client Side Rendering）
サーバー側ではなくクライアント側でデータのフェッチやページの生成を行います。素のReactアプリケーションのようなSPA（Single Page Application）はこの方式でレンダリングを行います。最初のローディングの際にHTMLやJavaScriptなど全てのデータを取得する必要があるため、初期のローディングに時間がかかります。同一画面で動きがあるものに多く採用されます。
SSR（Server Side Rendering）
データのフェッチやページの生成をサーバー側で行います。クライアント側は表示するだけになるので、クライアント環境のスペックに依存せずコンテンツの配信が出来ますが、リクエストごとに毎回ページを生成するためサーバー側の負荷は高くなります。コンテンツの更新頻度が高いサービスに向いています。
SSG（Static Site Generation）
SSRとは異なり事前にビルドして全てのページをサーバー側で生成します。毎回ページ生成を行わない分、SSRよりもパフォーマンスが優れていますが、ビルドしないとデータは更新されないので、コンテンツの更新頻度が高いサービスには向いていません。
ISR（Incremental Static Regeneration）
SSGの発展型で、あらかじめ設定した期間ごとにサーバー側で自動で再ビルドします。常に最新のデータを表示する必要があるわけではないが、ある程度更新頻度が高いようなデータを扱う場合に適しています。
microCMS
microCMSはヘッドレスCMSの一種で、CMSのバックエンド部分の機能をシンプルな操作によって作成できる仕組みです。 日本語に対応していることや、WordPressやMovableTypeなどのCMSよりも表示速度が速く、カスタマイズ性も高いことがメリットとして挙げられます。
今回はブログデータの管理機能として使います。
Vercelについて
VercelはReactやVueなどフロントエンド技術に特化した公開用の環境となります。Githubからリポジトリとブランチを指定するだけですぐに自分が作成したアプリを公開できます。後のセクションでサービス公開方法について説明します。
microCMSでサービスを作成する
会員登録を行い、ログインしたらサービス管理の画面を開きます。
「追加」ボタンからサービスを追加。
テンプレートからブログを選択します。
あとはAPIキーとサービスドメインを取得し、手元に控えます。
API設定にエンドポイントの名称があり、こちらも控えておきます。
ブログは自分でレコードを追加しておきます。
APIスキーマにあるフィールドIDは各ブログの表示の際に必要となるため確認しておきます。
以上がmicroCMSの準備でした。
Next.jsアプリの作成
Next.jsのアプリを作成するのは簡単です。Nodeのパッケージツールnpx, npmを使います。
Next.jsのアプリを以下のコマンドで作成します。 next-microcms がアプリ名になり、ディレクトリが作成されるので好きな名前に変更ください。
npx create-next-app next-microcms
こちらを実行するといくつか質問が出てきます。今回は基本的に全部Noで大丈夫です。
Next.jsアプリが作成されました。
microCMSのNodeパッケージのインストール
Next.jsからmicroCMSのデータを操作するのに便利なパッケージがあります。
以下のコマンドからインストールを行います。
npm install microcms-js-sdk
設定諸々
下記のファイルをnext-microcms配下に作成します。
MICROCMS_SERVICE_DOMAIN=service-domain
MICROCMS_API_KEY=api-key
service-domainとapi-keyは手元に控えていたものを記載します。ちなみにシングルクオートやダブルクオートは不要です。
import { createClient } from 'microcms-js-sdk';
export const client = createClient({
serviceDomain: process.env.MICROCMS_SERVICE_DOMAIN,
apiKey: process.env.MICROCMS_API_KEY,
retry: true
});
ここまでがmicroCMSの設定になります。
次の記事で表示や投稿機能を実装してみましょう。
Next.jsとMicroCMSでブログサイトを作成するーPart2（基本編）