ちゃそです。

自分の成果物を他人に見せられるような状態にしたいと思い、このポートフォリオサイトを作りました。参考になるかはわかりませんが、今まで使ったことのないGraphQLやWordpressについて学べるいい機会となったのでまとめていきます。

ポートフォリオサイトに求めること

作品を見てもらうのと同時に、エンジニアとしての自分を知ってもらうのが最大の目的と考えています。これを達成するためには、

• 技術ブログがある
• 自分の成果物を見せられる
• 技術への理解度を示せる

ことが必要となると思いました。それなら自分でWebサイトを立ち上げるのが技術やデザインについての知識を示すことができつつ、表現の自由度が高くて良いのではと考えたので作成に至りました。

余談

SANKOUという、Webデザインギャラリーが見られるページを記事を作成する中で見つけたのですが、上の上すぎて流石に絶望しました。。。デザインにセンスがあると、単純に訴求効果が上がるのはずるいよs。

https://sankoudesign.com

設計

フロントエンドにはNext.jsを採用しました。

https://nextjs.org

理由は使ってみたかったからと、日本語ドキュメントが豊富だったから。先人の多さは開発の速さに直結します。ReactコンポーネントライブラリにはMantineを採用しました。

https://mantine.dev

簡単に使えるコンポーネント・フックが豊富なのと、開発が盛ん(どれくらい盛んかというとドキュメントを見ようとページを覗く度にパッチが入っているくらい)でスーパー使いやすい感じ。

CMSとしてWordpressを採用しました。理由としてはコンテンツ作成ツールとしてかなり成熟しているオープンソースであるのと、プラグインが豊富かつ簡単に加えられる点が魅力的と感じたからです。Wordpressは記事制作のみに終始するHeadless CMSという形式ですね。

最後にフロントエンドからCMSの記事を取得する方法についてですが、REST APIとGraphQLで迷ったのですがGraphQLを採用することにしました。理由としてはクエリを柔軟に設定できること、エンドポイントは単一で良いこと、あとは単純に新しいものに触れてみたいからです。今までの開発や企業のAPIでは、REST APIを使う・使われていることが多く、GraphQLに触ることは皆無でした。幸いにもWordpressにはWPGraphQLというWordpressプラグインがあり、導入するだけでCMSとして使えるGraphQLを提供してくれます、よちよちういです。GraphQLは良いかもしれないのでサーバー側で作れるようになりたいですね。

最終的には

• フロント → Next.js x Mantine
• CMS → WordPress(GraphQL)

みたいな感じで作成しました。

終わり

以上、本ブログを作成するにあたって使った技術紹介でした。