みなさんこんにちは。PLF Membersの開発担当をしております。池ちゃんと申します。このサイトは従来のWordPressの使用をせずに、Reactのフレームワークである。Next.jsを使って作成を行いました。

今回はかなりWEB専門のオタクな話になるかと思いますが、お付き合い頂ければと思います。

ワードプレスは悪いっていう訳ではない

大前提として、私はワードプレスアンチではありません。ワードプレスはこれまでも数えきれない程使ってきました。ワードプレスが分からない人にざっくり説明しますと、ワードプレスはCMSと呼ばれる類の一種です。ワードプレスはブログなどの「コンテンツ」を管理する事ができる便利なシステムだと思って頂ければと思います。

WEBページでワードプレスシェア率は世界で一番だと言われています。皆さんが普段何気なくみているWEBサイトの多くもワードプレスで構築されている可能性が高いです。ワードプレスは本来はブログページの構築用でしたが、最近はコーポレートサイトも作れる柔軟性があるからです。

私もバイトやフリーランス時代は要件の段階でワードプレスを選択されるお客様は非常に多かったです。当時のブログブームも後押しして、ワードプレスの知名度は上がっていきました。そのため、レンタルサーバへワードプレスのインストールを始めて、オリジナルテーマを入れて、最低限のプラグインを入れて～のような形で次々とワードプレスサイトを作っていました。

ワードプレスを脱却してモダンなフレームワークを使いたい！

案件をこなしていた頃は中々ワードプレス以外の技術を学ぶ機会が中々ありませんでしたが、最近は新しいフレームワークを学ぶ機会が増えました。その中で悩んだのがNext.jsを使うか、Nuxt.jsを使うか。でした。当時勉強していた頃はNext.jsとNuxt.jsがシェア率をせめぎ合っていた頃でした。どちらも、用途としては似ています。どっちでも良かったのですが、最初はNuxt.jsの勉強を始めました。

Nuxt Contentが使いたかった

Nuxt.jsを使いたかった理由の一つとして、Nuxtを拡張したNuxt Contentというフレームワークの存在でした。Nuxt Contentの凄いところは、CMSとしての機能を持ちながら、データベースを持たない事です。フロントエンドだけで完結しているのであれば、データベースを新たに借りて、お金が多く発生しないという大きなメリットがありました。

また、フロントエンドの静的なページであれば実質無料のCloudflare pagesという選択肢が生まれます。Cloudflare pagesは静的なページを無料で置けるというチートなシステムです。データベースがないなら無料でブログサイトを作る事ができるというチートをNuxt Contentで作りたいと思いました。

ですが、Nuxt Contentを使うと、まだリリースされたばかりのせいか、Node.js周りで謎のエラーが連発し、とてもデプロイできる状況ではありませんでした。あくまでこれは私の開発環境で起きた事なので、私の端末起因でもあるかもしれないですし、今はバージョンも上がっているのでバグは解消されているかもしれないです。

徐々にNext.jsの人気が上がる

WEB技術の発展はあっという間のもので、私がどのフレームワークにしようか悩んでいると、気が付けばNuxt.jsよりもNext.jsの方が人気になっていきました。となってくると、Nuxt.jsを勉強していましたが、Next.jsについて勉強していこうと思いました。

Nuxt ContentをNext.jsで再現する

Nuxt Contentの面白いところはマークダウンファイルを使う事で記事を生成できるところです。即ち、HTMLの知識が無くても記事を作成できるというところです。また、マークダウンはエンジニアにとってはとても馴染みのある形式です。マークダウンでブログが書ければNuxt Contentと同じ状態になれると思い作りました。

そして、PLF Membersができました

PLF Membersはコストは0円です。先ほどお話した、Cloudflare Pagesを使ってコストを抑えています。また、データベースを持っておらず、マークダウンベースでのコンテンツ管理をしているので、データベースも借りていません。非常にローコストで運用ができています。

まとめ

作ったばかりで今後も色々と実験・改善をしていくかと思います。データベースを借りずにどこまでコンテンツをマネジメントできるか実験も込めています。ポキャラボの情報をしっかり発信していきつつ、システム面も丈夫なものにしていきたいと思います。