スクールのポータルサイトにブログ機能を追加した振り返り

投稿日: 2024年09月30日

Tips

要約

スクール内で匿名の満足度・要望アンケートを実施し、高い満足度を得た結果、ブログ機能を開設することになった。
ブログの運用には、Next.jsを用いたサーバーコンポーネントや動的OGP生成などの技術を活用し、生徒が記事を書ける環境を整えた。
今後は記事の一覧や検索機能、コメント機能などの追加を検討しており、生徒同士の交流を促進したいと考えている。

こんにちは。

先日、スクール内にて匿名式の満足度・要望アンケートを実施させていただきました。

ご協力いただいた皆様、ありがとうございました。
みなさんかなり満足度は高い回答をいただいて嬉しかったのですが、
僕が気づけていなかった点のご指摘もあり、今後1つずつ改善していきたいと思っています。

設問の1つに「スクール内ブログを書いてみたいか」を聞かせていただき、
いただいた回答内では「書きたい」が100%だったので、早速作ってみることにしました。

やりたいことは、こんな感じ。

メインの運用目的は、学んだことの言語化＋アウトプットによる知識の定着
生徒さん誰でも記事を書ける
記事の内容は、技術的な内容（各章の攻略のコツなど）、オリジナルアプリ開発振り返り、転職活動の振り返りなど。内容はスクールに関係なくてもOK
ShiftB会員以外も記事を読める形で公開（転職活動などでも見せれる形に）
個人ブログやQiitaやZennへの記事流用、その逆も可

開発期間2日でしたが、
頑張った点や学びのあった点など、まとめていきます。

デザイン

Figmaでざっくりとだけ、作りました。

ブログ機能、いざ運用開始してみたものの、あまり使う人がいないという未来も考えられたので、
まずはできるだけミニマム機能で出そうと思いました。

スマホデザインは作らずに実装しましたw

開発

基本的な技術構成は、Next.js + Supabase + Prismaで、
皆さんが学習している内容と同じです。

今回の開発で悩んだポイントや、初めてやって勉強になった点を4つ紹介します。

1. 記事をどこで書くか

記事を書く画面をどうしようか一番の悩みで、エディタを0から作っても楽しそうですが、
「ミニマム機能でリリース」を考えた時に、
エディタを作るのはかなり時間がかかりますし、
かといって突貫実装でエディタがお粗末だと、使いづらいから書かない、となってしまえば本末転倒。
今回はmicroCMSの管理画面で記事を書いて、それをポータルサイト上で閲覧する方式にしました。

ただし、誰が書いたのかなど、ポータルサイト上のユーザー情報と紐付けたかったので、
microCMSのアカウントは皆さん共通にしつつ、
記事を書く画面に「ポータルサイトのユーザーID」の入力欄を設け、
これを各自、執筆時に入力いただくことで、ユーザー情報と紐づけることにしました。

もしブログ文化が定着して長く続きそうであれば、
将来的にはエディタを開発し、ポータルサイト内で記事を書けるようにして、
microCMSの記事データも移行しようと思います。

2. サーバーコンポーネント

Next.jsのv.13から登場した新機能で、文字通りサーバー側でコンポーネントの処理を実行するというもの。

この記事でサーバーコンポーネントの詳しい説明はしないですが、
ブログサイトであればSEO面も意識したいので、
クローラーが直接HTMLを解析できるサーバーコンポーネント（SSR）は必須だなということで、使いました。

一昔前はSSRという書き方がメインでしたが、サーバーコンポーネントの概念がでて、だいぶ開発しやすくなっていました。（やってることはほぼ同じ）

ざっくり、Reactコンポーネント内で以下のような書き方ができます。

const Page = async ({ params: { id } }: Props) => {
  const profile = await prisma.profile.findUnique({
    where: {
      id,
    },
  });

  return (
    <div className="">{profile?.name}</div>
  );
};

サーバー側で実行されるので、マウントなどの概念がなく、故にコンポーネントの関数を非同期（async）にできます。

また、apiリクエストなど行わず、直接コンポーネントからprismaを使ってデータを取得できます。

この処理がクライアント側で行われてしまうと、DBのURLなどが露出してしまうのでセキュリティ的にNGなのですが、
このコンポーネントがサーバーサイドで実行されるので、セキュリティ上も問題なく、かつ処理も早く、さらにはクライアント側の処理の量も減らせるというメリットがあります。

とても良い機能なのですが、React初学者にはあまりお勧めできないかもしれません。
現状、Next.jsでバックエンド含めて作っている会社さんってまだまだ少ないです。
バックエンドはRubyやPHP、とプロジェクトごと分けているところが多く、
その場合、Next.jsを使うメリットはあまりなく、クライアントコンポーネントのみでの開発が主流です。
なので、初学のうちはあまり手を出さない方がスキルの汎用性的にはおすすめです。
（ShiftBのカリキュラムでもサーバーコンポーネントは扱わず、全てuse clientしてもらっているのもこの理由です。）