当ブログのリニューアルについて
マイケル
みなさんこんにちは！
マイケルです！
エレキベア
こんにちクマ〜〜
マイケル
当ブログ「都会のエレキベア」ですが、この度・・・
マイケル
大幅リニューアル
しました！！！
▲旧・都会のエレキベア
▲新・都会のエレキベア
エレキベア
おめでとうクマ〜〜〜
・・・あれ、でも見た目そんなに変わってないクマね
マイケル
そう見た目はほぼ変わっていないんだけど、WordPressで作られていたブログをNext.jsというReactのフレームワークを使って作り直したから、レスポンス周りがかなり改善されたんだ！
検索処理やページ遷移を行ってみるとかなり感触が違うのが分かると思います。
▲WordPress使用時の挙動
▲Next.js使用時の挙動1
▲Next.js使用時の挙動2
エレキベア
おお〜〜〜
だいぶサクサクになって最近のWebサイトって感じクマ
マイケル
前々からWordPressから脱却したいと考えてはいたんだけど、200記事以上たまった記事を移行するのはコストがかなりかかるので躊躇していました・・・。
しかし、ここ最近はNext.js製のサイトも割と増えて安定してきた印象を受けたので思い切って移行に挑戦してみることにしたというわけです。
エレキベア
なるほどクマ
それに正直、技術スタックを溜める意味でもWordPressいじるよりモダンなフロントエンド技術を扱いたいクマしね
マイケル
そして合わせてになりますが、快適な執筆環境を構築することにも挑戦しました。
これまでMarsEditというツールを使っていたのですが、
・Markdownによるホットリロード
・Mac/Windows両方で執筆可能
とそれ以上の操作感になったと思っています。
▲Markdownによるホットリロード執筆環境を構築した
エレキベア
やっぱ執筆はMarkdownがいいクマね
このブログの会話形式にも対応できてて書きやすそうクマ
マイケル
とはいえ、WordPressでまかなっていた機能をReactで全て一から実装し直すことになるので中々大変な作業でした・・・。
また、執筆環境改善にあたりElectronによるツール開発も行ってみました。
これらは何回かに分けて別の記事にまとめているので、この記事ではそちらを引用しながら概要をまとめていきます！
Next.js移行関連の記事
【Next.js】第一回 WordPressブログをNext.jsに移行する 〜全体設計、環境構築編〜
2023-12-31
【Next.js】第二回 WordPressブログをNext.jsに移行する 〜WordPressデータの移行・表示編〜
2023-12-31
【Next.js】第三回 WordPressブログをNext.jsに移行する 〜Markdown執筆環境構築編〜
2023-12-31
執筆ツール開発関連の記事
【Electron × Vue3】Electron × Vue3 × TypeScript × Vite でツール開発環境を整える
2023-12-31
【Electron × Vue3】画像をリサイズして任意の場所に保存するツールを作る
2023-12-31
【Electron × Vue3】カテゴリ情報のCSVデータを操作するツールを作る
2023-12-31
エレキベア
おおぅ・・・
すごいボリュームクマ・・・
マイケル
プライベートもいろいろバタバタしつつ、数ヶ月かけて取り組んでたからね・・・
また、コードについては公開できる範囲でGitHubに上げているので、同じようにNext.jsに移行したと考えている方はご参考ください！
GitHub - nextjs-elekibear-blog-scripts
エレキベア
コードも中々すごいボリュームクマ・・・
リニューアルを行なった理由
マイケル
まず、そもそもなぜNext.jsへ移行したのかについてですが、
・WordPressへの不満があったから
・執筆環境を改善したかったから
・フロントエンド技術のスキルを向上させたかったから
の三点が主な理由になります。
WordPressへの不満
マイケル
WordPressは非常に便利なフレームワークですが、運用するにあたり下記のような不満がありました。
1. ページ遷移等の動作が重い
マイケル
WordPressだと基本的にページごとにサーバに問い合わせることになるため、どうしてもレスポンスが悪いな・・・と思うことが多々ありました。
エレキベア
めちゃくちゃ遅いわけではないクマが、最近のサイトと比べるとどうしても見劣りするクマね
マイケル
個人ブログ規模だとリアルタイムに反映させないといけない情報はほぼないので、Next.js等のSSG機能を使って静的サイトとして管理することでパフォーマンスが向上できます。
▲SSGによる静的サイト作成のイメージ
エレキベア
Next.js等のフレームワークを使うと無駄な通信を削減できるクマね
2. 更新作業が手間
マイケル
更新作業が多発してしまうことも大きな不満としてありました。
マイケル
WordPress自体の更新もそうですが、テーマやライブラリといった個々の更新作業が中々なコストです。
また、テーマに対して上書きする形でスタイル等も実装していたため、更新の度に表示が崩れてしまうこともありました。
エレキベア
更新作業は必要なことクマが、あまり時間は費やしたくないクマね・・・
3. 個人ブログだと無駄が多い
マイケル
WordPressはコンテンツ管理システムとしてブログ以外にも柔軟に適用できるようになっています。
しかし、それゆえに個人ブログ規模だと無駄が多いという点もあると思います。
エレキベア
楽にいろんなものが作れるのは魅力クマがやはり無駄な部分も多いクマね
マイケル
無駄な通信削減にも通ずる部分はありますが、必要な部分のみ使用してシンプルにしたいという気持ちがありました。
マイケル
そして静的サイトだと無料のホスティングサービスもあるためサーバ代も削減できるのも大きいですね・・・
エレキベア
切実クマ・・・
4. 使用している技術がレガシー
マイケル
WordPressはよくできたフレームワークではあるのですが、使用技術が古いために触っているとストレスが溜まってしまうことが多々ありました。
エレキベア
もうだいぶ長く続いているフレームワーククマからね
マイケル
グローバル変数も多くフレームワーク依存な機能が多いので、ここに学習時間を割きたくないという気持ちが日に日に肥大していきました・・・。
執筆環境の改善
マイケル
そして二つ目は執筆環境を改善したかったという理由があります。
これまでMarsEditというツールを使用して執筆を行なっていたのですが、ここにもやはり不満はありました。
▲MarsEditによる執筆
エレキベア
MarsEditは有名な執筆ツールクマね
マイケル
・OSが現状Macにしか対応していない
・VSCodeに慣れているとHTML記述が苦痛
・執筆環境がツール依存になってしまう
・アップロードしたコンテンツの内容が崩れてしまうことがある
・Markdownで執筆できない
不満点を挙げると上記のようになります。
しかし、それでも画像アップロードやショートカット入力が便利だったため、移行を悩んでいた部分がありました。
エレキベア
便利くまがツールに使われるのは勘弁クマね・・・
マイケル
この辺りも踏まえて、どうせならこのツール以上の執筆環境にできるよう意識しながら環境構築に挑戦しました。
フロントエンド技術のスキル向上
マイケル
そして最後はなんといってもフロントエンド技術のスキルを向上させたかったのが理由です。
時代はjQueryからReact、VueといったUIフレームワークへ移行しているため、エンジニアとして普段からモダンな技術に触れる環境を作りかったのが主な理由です。
エレキベア
WordPressをいじり続けてもエンジニアとしてはあまり恩恵がなさそうクマね
多少大変でも移行する価値はありそうクマ
マイケル
WordPressから脱却して自分で全ての機能を管理できるようにしておけば、今後技術トレンドが移り変わっても都度対応していけるのも大きいですね。
今回の開発でも、今後Next.js等の技術が廃れてもなるべくダメージが少ないよう意識しながら実装を進めました。
エレキベア
長い目で見るなら流行りに乗りすぎるのも危険クマ
Next.jsへの移行作業
移行の流れ
マイケル
実際の移行作業についてですが、
1. 全体の設計と使用ライブラリの選定行う
2. WordPressデータを移行して表示できるようにする
3. Markdown執筆環境を構築する
といった手順で進めました。
マイケル
この辺りはそれぞれ下記記事に分けて記載しているため、詳細は各記事をご参照ください！
【Next.js】第一回 WordPressブログをNext.jsに移行する 〜全体設計、環境構築編〜
2023-12-31
【Next.js】第二回 WordPressブログをNext.jsに移行する 〜WordPressデータの移行・表示編〜
2023-12-31
【Next.js】第三回 WordPressブログをNext.jsに移行する 〜Markdown執筆環境構築編〜
2023-12-31
エレキベア
中々長い道のりクマ〜〜
全体設計と使用ライブラリの選定
マイケル
全体設計については、下記のようにWordPressから必要なデータを抜き出してCSVとして管理する方式にしました。
記事ファイルとCSVデータから記事データを表示する流れとしました。
【Next.js】第一回 WordPressブログをNext.jsに移行する 〜全体設計、環境構築編〜
2023-12-31
▲WordPressのデータをマスタCSVとして抜き出して使用する
エレキベア
最終的に静的サイトを生成してデプロイするクマから、わざわざデータベース管理する必要もなさそうクマね
マイケル
そして使用ライブラリについては下記を使用することにしました。
モダンな環境になるよう、またなるべく無駄なライブラリは入れない というのを意識して選定しました。
該当箇所 | ライブラリ |
|---|---|
フレームワーク | Next.js |
スタイリング | Emotion |
開発環境 | ESLint、Prettier、Storybook |
記事ファイル変換 | テキスト記事：cheerio Markdown記事：react-markdown、gray-matter、rehype-raw |
記事コンテンツ | Prism.js、MathJax、Codepen、X |
エレキベア
ライブラリも入れすぎるとまた大変なことになるクマ
マイケル
そしてこれらの環境を構築して下記のような2カラムレイアウトを作るところまで解説しています。
こちらはGitHubプロジェクトにサンプルを公開しているので、ご参考ください！
▲よくある2カラムレイアウト
GitHub - nextjs-emotion-layout-sample
エレキベア
簡単なアプリを作るところまでクマね
WordPressデータのNext.jsへの移行
マイケル
そして次は設計に従ってWordPressのデータをエクスポート・表示していきます。
・記事一覧ページ
・記事ページ
の二つを主に実装しました。
【Next.js】第二回 WordPressブログをNext.jsに移行する 〜WordPressデータの移行・表示編〜
2023-12-31
▲記事一覧ページ
▲記事ページ
エレキベア
ここで本格的に移行していくクマね
マイケル
合わせて、カテゴリ切替や検索処理といった遷移処理もSPAにして操作感を改善しました。
▲SPAによる表示切替
エレキベア
実際の記事以外はSEOにもほぼ関係ないクマからね
Markdown執筆環境の構築
マイケル
そして最後にMarkdownによる執筆環境を構築します。
最初に紹介した通り、ホットリロードによる執筆ができるようになっています。
【Next.js】第三回 WordPressブログをNext.jsに移行する 〜Markdown執筆環境構築編〜
2023-12-31
▲Markdownによるホットリロード執筆環境を構築した
マイケル
ホットリロード機能はExpressプロジェクトを別途立ち上げて監視するようにしました。
また、画像アップロード、カテゴリの編集についてはプロジェクト側での対応が難しかったためElectronでデスクトップアプリを開発することで対処しました。
【Electron × Vue3】画像をリサイズして任意の場所に保存するツールを作る
2023-12-31
【Electron × Vue3】カテゴリ情報のCSVデータを操作するツールを作る
2023-12-31
▲作成した画像リサイズツール
▲カテゴリ編集ツール
エレキベア
中々本格的なツールクマね
マイケル
このツールを使用しながら執筆している様子が下記になります。
MarsEditに負けず劣らずの執筆感になったかと思っています！
▲画像リサイズツールを使用した執筆
エレキベア
これは執筆も楽しくなるクマ〜〜〜〜
移行を終えた感想
マイケル
移行作業は以上になりますが、ここまで終えた感想としては、想像以上に大変でした・・・。
対応が足りていない箇所もあると思うので、今後もちまちまと手を加えていくと思います。
エレキベア
WordPressのデータをどう移行するか？を考えるのが中々大変だったクマね
マイケル
しかし元の記事データも大方移行できたし、操作感もだいぶ改善されました！
SEO周りにどう影響出るかが不安ではあるけど、手間をかけてもやる価値はあったなと思います！
エレキベア
前のもっさり操作にはもう戻れないクマ〜〜〜
マイケル
そしてなによりこの開発を通じて、
・Next.js
・React
・Electron
・Vue.js
・Express
といったモダンな技術が扱えるようになったことと、
全ての機能を自身で実装、把握できたことはかなり大きかったと思います。
マイケル
Web開発周りがだいぶカバーできるようになったし、フロントエンドのUI周りの設計はゲーム開発にも活かせる部分はかなりあると感じました。
エレキベア
UI周りはフロント技術が一歩出ている印象はあるクマから、触れるようになったのはかなり大きかったクマね
マイケル
またしばらくゲーム開発に戻ろうと思うけど、その内このブログ以外にもWebサイトを立ち上げてみようかと思っています！
おわりに
マイケル
というわけでNext.jsへの移行手順についてでした！
どうだったかな？？
エレキベア
大変だったクマがNext.jsでの開発は楽しいし、
なによりこのサイトが一新されて嬉しいクマ〜〜〜
マイケル
WordPressからの移行はかなり悩みながら進めたので、同じように移行しようとしている方は参考にしていただければ嬉しいです！
マイケル
それでは今日はこの辺で！
アデューー！！
エレキベア
クマ〜〜〜〜〜
【都会のエレキベア】ブログを大幅リニューアル！WordPressからNext.jsに移行するまでの流れをまとめる 〜完〜
