2021/1/11

ブログをリニューアルしました

あけましておめでとうございます。 2021年を迎えましたが、いかがお過ごしでしょうか。私はお陰様で新型コロナウイルスとは無縁で元気です。

昨年の大晦日に密かに当ブログをリニューアルしました。構想から数年経ってしまいましたが無事リニューアルすることができました。覚えている限りで振り返りながら紹介していきます。

リニューアルをした動機

今回、リニューアルをする動機となったのは以下2点。

デザイン変えたい
WordPressつらい

フロントエンドを生業としていて当ブログを実験場として扱おうとしていたのですが、PHP・WordPressを改めて覚える気にならなかった、というのが正直なところです。デザイン変えたいけどWordPressのコード変えるの面倒。バージョン管理もろくにできていない。完全に塩漬けコードと化していました。たしかにWordPressはCMSなので記事の更新はしやすいです。ただ、開発側をしっかり整備していなかったためにコードを触るのを躊躇っていました。ある程度月日が流れたあたりで、「そうだ、リニューアルしよう」と思い立ちそこからリニューアル構想が始まりました。

リニューアルに向けていろんな構想を練った

リニューアルするまでに時間がかかったのは、度重なるやり直しをおこなったからです。

WordPress + Composer

WordPressを使いながらモダンな構成を試みました。自分なりに調べるがベストな方法がイマイチ見つかりませんでした。 AWSだといい感じにできるみたいですが、個人開発ではコスト面でキツイ印象でした。結局バックエンドは何かしらの形で用意する必要があり費用面で抑える方法が見つからず、だんだん興味を失いペンディングになりました。

Strapi + Nuxt

HeadlessCMSを使うとバックエンドとフロントエンドを分けて開発することができることを知りました。 APIデータを取得してフロントでコントロールすることに夢を見ました。

HeadlessCMSは基本的に有料ですがStrapiはOSSで無料だったので試してみることにしました。しかし、バックエンドを自前で用意する必要がありました。そこそこ安く済ませるにはGCPあたりが妥当そうでしたが、コスト面でWordPressを脱却するほどのインパクトがなく断念しました。しかし、もし将来仕事として入って来た場合は積極的に提案してみたい構成だと思いました。

Nuxt v3 + TypeScript

業務でNuxt v2を使うことが多いのですが、Nuxt v3からは書き方が変わるということを知りました。 Vue.jsはTypeScriptと相性が悪いと以前から言われていましたが、Nuxt v3である程度解消されるようです。 TypeScriptを業務で使っておらず挑戦する場を探していたのでちょうどいいと思いやってみました。 @nuxt/contentを使えばHeadlessCMSの時のようにAPIからデータ取得してフロントで構築することができることを知り挑戦しました。とても良かったのですが、プライベートの時間で合間を縫って開発している中で謎のエラーにハマってしまい解決できず時間をものすごく浪費してしまいNuxt v3 + TypeScriptに限界を感じ断念しました。

Next.js + TypeScript

Reactを使った開発に挑戦したいという気持ちは薄らあり、Next.jsの記事をよく見かけるようになっていました。どうせTypeScriptやるなら相性の良いReactでやるか、と考えを改めてNext.js + TypeScriptでやり直すことにしました。 Reactの公式サイトをさっと読みNext.jsのチュートリアルを一通りやりました。 TypeScriptは以前ちょっとだけ勉強したことがあったので少しおさらいをして後はぶっつけ本番で幾度の壁にぶち当たりながら「習うより慣れろ」の精神で突き進めました。最終的にこの構成で念願のリニューアルまでいけたので達成感がありました。

まさか構成をここまで変えることになるとは思いもよらなかったです。もちろん仕事でこのようなやりかたはよくないので事前にしっかり調査・選定をおこないましょう。

リニューアルしたこと

デザイン

before	after

リニューアル前のデザインを作った時点から5年ほど経っていて野暮ったい印象を持っていました。最近のブログサービスのデザインを見ていると、なるべくシンプルにしている印象を持ちました。個性的なデザインでインパクトを出すという考えもありましたが、ヘッダーやフッターなどは個性を出すようにデザインしつつ記事本文などは可読性を意識して構築しました。

技術

WordPressを使ったCMSでの運用からNext.js + TypeScriptを使ったコードベースでの運用に切り替えました。 WordPressは投稿しやすいもののコードの管理が難しい印象でした。モダンフロントエンドを使った運用では開発に近い状態での投稿になり開発者としては馴染みがありました。結果的に投稿も新規開発もGitを意識した方法になるので良かったのではないかと思っています。

廃止した機能

バックエンドでハンドリングするような機能が使えなくなることやリニューアル時点ではいったんミニマム構成にしようという判断のもと、いくつかの機能を搭載していません。

サイト内検索
コメント
関連記事
お問い合わせフォーム

がんばれば搭載できなくもない機能もありますが、必要に応じて追加していこうと思います。

新しいこと

https対応
vercelサーバに切り替え

今では一般的になっているhttpsに対応していなかったので、ようやく対応できました。 WordPressの時はNetowlという会社のファイアバード（現在はStarServer）というレンタルサーバを使用していましたが、リニューアルを期にNext.jsを開発しているVercelという会社の同名のサーバに切り替えました。個人利用の面でいろいろ良さそうです。