こんにちは。
以前にNext.jsでmicroCMSを連携させた個人開発ミニアプリを作成した記事を書きました。
上記の記事の中でも少し触れていますが、Next.jsとmicroCMSとの連携を通してMVCモデルの概念について知ることができました。
この記事で備忘録としてMVCモデルについて学べたことを記載していきたいと思います。
MVCモデルについて
Model, View, Controllerの3つから構成されているソフトウェア・Webシステムの設計モデルのこと。
-
Model(モデル)：データベースと連携してデータを取得したりデータを加工したりする役割を担う部分。
- CMSでいう「記事投稿」のロジックや機能がModel。
- 記事投稿ページでデータを追加・更新・削除等をするのはModelのシステムがデータベースと連携することで成立しているイメージ。
-
View(ビュー)：ユーザーに見える場所のロジックを担う部分。
- システムから与えられた値によって動的に表示する内容を切り替える。動的にHTMLを生成する。
- Next.jsならReact、WordPressならWP関数を用いた(ページ名).PHPがビューにあたるイメージ。
-
Controller(コントローラー)：ModelとViewを繋ぐ部分。
- ユーザーからのリクエストに応じてデータの取得を依頼したり、モデルから渡されたデータをビューに渡したりする。
- ページ上に存在するUIからの値の登録(例：フォーム)などもContollerの領域。
MVCモデルと「ヘッドレスCMS」の関係
microCMSをはじめとしたヘッドレスCMSはフロント部分とバックエンド部分が分離されたCMSと定義することができる。
具体的には、microCMSはそれ自体の表示部分の機構を持たず、他のアプリケーション内でmicroCMS内で登録したデータの内容を表示させることを前提としている。
Next.jsとの連携でいうと、microCMSで登録したデータを表示させるロジックはmicroCMS自体ではなくNext.js側がもっているということ。
つまりヘッドレスCMSはMVCモデルでいうViewを持たない(Viewを分離している)CMSと考えることができる。
Next.js×microCMSの構成をMVCモデルで考えてみる
ここまでの考察を踏まえてNext.js内でmicroCMSのデータをブログ形式で表示させるアプリケーションの構造を考えてみる。
アプリの要件
- microCMS上で記事のデータ(見出し、サムネ、本文)を登録する
- microCMSのコンテンツAPIをNext.jsと連携させることでmicroCMSのデータをNext.js内で使うことを可能にしている
- 記事データを表示させるロジックはNext.js内の
page.tsxで実装されている
MVCモデルの考え方を適用させるなら
- Model：microCMS、microCMSの記事データ登録機能
-
View：Next.js内の
page.tsx -
Controller：Next.js内でAPIを取得する部分。 App Routerでいうと
app/api/(ディレクトリ)/route.tsxにあたる部分
という考え方になると思われる。(私は上記の考え方で理解した)
さいごに
ここまで読んでくださりありがとうございます。
MVCモデルはWebアプリケーションで高頻度で見かける設計モデルだったので、microCMSとNext.jsでの実装を通して概念を大まかにでも掴めたのは良い勉強になりました。
この経験を活かして今後のWebシステム作成やアプリケーション作成に活かしていきたいです。
参考記事