【ローコード】Next.js x microCMSで作るブログサービス

最近では、ノーコードやローコードと呼ばれる技術が注目を浴びています。
これらの技術は、様々なシステムやツールを駆使することで実現されます。

ノーコード・ローコードのメリットとして、開発期間の短縮によるコストの低下が挙げられます。
創業したてのスタートアップや新規事業仮説検証段階の方々にとって、大きく貢献する技術だと思います。

今回は、ローコードでブログサービスを構築します。
ブログサービスについては、lolipopやconoha等WordPressの導入まで支援してくれるサーバーが多いのでわざわざローコードで書く必要はないのですが、「WEBサービスに運営者ブログを追加したい」のような場面に使えるローコードを実装していきます。

想定している読者

この記事は、高度なプログラミング知識なしでWEBサービスを構築することを目的としています。
学生のプログラミング学習の一つ、エンジニアのいないスタートアップにプロトタイプ作成ができるエンジニアの養成、簡単にフロントエンドのサービスを公開したい人に是非読んで頂ければ幸いです。

理解できる
・Reactを触ったことがある
・Next.jsを触ったことがある
調べながら構築できる
・progateを何周もして次することがわからない(JavaScriptの理解はある)

この記事で習得できること

・フロントエンドで開発されるWEBアプリの構成
・APIの利用方法
・Next.jsの特徴と使い方

構成

Next.js https://nextjs.org/
Next.jsは、Reactのフレームワークです。
通常のReactでは実装が大変だった機能に対し、多くのソリューションを提供してくれます。
面倒なSSR(Server Side Rendering)や高速に読み込むためのコード分割などを自動でやってくれます。

Vercel https://vercel.com/
Vercelは、静的サイトとサーバーレス関数のためのクラウドプラットフォームです。
Firebaseでいう、HostingとCloud Functions。
AWSでいう、S3とLambdaといったところでしょうか。
Vercelを使うことで、今回採用したNext.jsを動かすことができます。

microCMS https://microcms.io/
microCMSは、日本製のヘッドレスCMSです。
ヘッドレスCMSは、Viewを担当しないので今回ViewはNext.jsで構築します。
microCMSのAPIをNext.jsで受け取り表示するといった流れです。

GitHub https://github.com/
GitHubの説明は省略します。
VercelとGithubを連携することでGitHubのリポジトリをVercelにデプロイできます。

成果物

https://myblog-taupe.vercel.app/

作り方

microCMSでブログ用のAPIを作成する
1. https://microcms.io/から新規登録をする

2. サービス名・サービスIDを決める(なんでも大丈夫です)

3. サービス画像を決める(スキップでいいです)
これで新規登録が完了です。
次にAPIの設定をしていきます。

4. 今回はブログサービスなので以下のAPIを作成
一つの投稿に対して複数のタグが紐づいているイメージです。
posts APIから作成すると後からtags APIとの連携することになるので、先にtags APIを作成すると楽です。
また、今回Next.jsで、mainTagの画像を投稿一覧で表示するため関連性の高いタグをmainTagで定義しておきます。

API名 : tags
エンドポイント : /tags
APIの型 : リスト形式

|     フィールドID     |     表示名     |        種類           | 
-----------------------------------------------------------
|      name         |     タグ名    　|     テキストフィールド     | 
-----------------------------------------------------------
|      image        |     タグイメージ  |     画像 　   　　　　 | 
-----------------------------------------------------------


API名 : posts
エンドポイント : /posts
APIの型 : リスト形式

|     フィールドID     |     表示名     |        種類           | 
-----------------------------------------------------------
|      title        |     タイトル    |     テキストフィールド     | 
-----------------------------------------------------------
|      content      |     コンテンツ   |     テキストエリア 　    | 
-----------------------------------------------------------
|      mainTag      |     メインタグ   |   コンテンツ参照(tags)  | 
-----------------------------------------------------------
|       tags        |      タグ      | 複数コンテンツ参照(tags) | 
-----------------------------------------------------------

5. tags APIに好きなデータを追加

6. posts APIに好きなデータを追加
Next.jsで投稿一覧を表示する際に、mainTagの画像も合わせて表示したいので、関連性の高いタグをmainTagとして投稿に紐付けます。

7. APIリファレンスから、「X-API-KEY」と「エンドポイント」を確認
エンドポイントは、「試してみる」から確認できます。

これで、microCMSの設定は終了です。

Next.jsの環境構築
1. Next.jsの環境を構築
この記事では詳しい環境構築の方法については解説しません。
以下の記事で環境を構築しましょう。

2. GitHubからブログサービスをクローン

$ git clone https://github.com/satokiyoshino/blog_app_nextjs.git

satokiyoshino/blog_app_nextjs

3. 今回のアプリで使用する技術とパッケージ確認
TypeScript
=>マイクロソフトが開発したオープンソース言語で、通常のJavaScriptではできなかった、「静的型付け」ができます。
これにより、実行しなければわからないようなエラーが事前にわかるなど、記述量は増えますがエラーの処理等コストを下げられます。

tailwindcss
=>tailwindcssでは、Utility Firstという考えのもと「.alert」や「.btn」のような既存のコンポーネントを作成するのではなく、「.my-2」や「.flex」のように、CSSに対応したclassを提供しています。
これにより、CSSの記述量を減らしつつ自由なデザインを実装できます。

PostCSS
=>PostCSSは、JavaScript製のツールでCSSを任意にカスタマイズできます。利用法として、CSSファイルの中でネスト構造を持たせることや、ベンダープリフィックスの自動付与ができます。
今回は、Next.jsでtailwindcssを読み込む際に利用します。

他に記載したい細かい技術がいくつかありますが、今回の趣旨と外れるので割愛します。

4. 使用するパッケージのインストール

$ npm install

5. 先ほど確認した「X-API-KEY」と「エンドポイント」を next.config.js内の環境変数に入れる

# /next.config.js

module.exports = {
   env: {
       X_API_URL: 'https://xxxxxxx.microcms.io/api/v1/posts',
       X_API_KEY: '01c8f5xxxxxxxxxxxkaosa'
   }
}

6. ローカル環境で確認する

$ npm run dev

これで、ブログが表示されれば成功です。最後にこのブログサービスを公開します。

Vercelで作成したブログサービスを公開する

1. GitHubで新たにリポジトリを作成する 

2. 先ほどcloneしたブログサービスのリモートリポジトリを変更する

$ git remote rm origin

$ git remote add origin 'your repository'

3. 作成したリポジトリにブログサービスをプッシュする

$ git push origin master

4. Vercelにログインする(GitHubアカウント)

Vercel: Build and deploy the best Web experiences with The Frontend Cloud – Vercel

5. Import Projectから自分のブログサービスのURLを入力する

6. 設定はデフォルトのまま先へ

7. 無事buildされ公開されれば成功

ここで一通り、公開までの手順が終了しました。
いかがでしょう、うまくできましたでしょうか。

作ってみて

ここでは、Next.js内のコードで大切なところを説明します。

getStaticPropsとgetServerSidePropsについて

今回、投稿詳細画面(src/pages/posts/[...id].tsx)では、getServerSidePropsを使用しました。
理由は、getStaticPropsを使用すると、ビルド時に表示したい投稿を用意する必要があり、投稿の更新毎に際ビルドするのは面倒だと考えgetServerSidePropsで投稿データの取得を行いました。

getServerSidePropsでは、リクエスト毎にデータを取ってきてくれるので際ビルドの心配はありません。

しかし調べていると、microCMSを更新した時に、vercelを際ビルドする方法があるらしいです()。

microCMS のコンテンツ更新のタイミングで Vercel (ZEIT Now) を再ビルド・デプロイさせる - ざきの学習帳（旧 zackey推し ）

getStaticPropsとgetServerSidePropsでは、(TTFB)Time to first byteの面でgetStaticPropsの方が優れているため、公式でもリクエスト毎にデータをfetchしなければならない時にだけ利用するよう促しています。

Basic Features: Data fetching | Next.js

getStaticPropsとgetServerSidePropsの使い分けには注意して開発していこうと思います。

最後に

ここまで読んでくださりありがとうございます。
初めての試みでかなり乱文になってしまいました。。
僕自身、スタートアップの創業当初は全然プログラミングできなかったので猛勉強しました。
プログラミングを学習する理由は様々あると思いますが、
駆け出しエンジニアの方の「次なにやればいいの？」という課題に対して一緒に新しい技術を勉強できれば嬉しいです。