半年ほどお世話になった WordPress から卒業しました

本ブログでは WordPress から Vue と SPA を採用してブログを再構築した話を書きます。

• なぜ WordPress から卒業したのか
• 使った技術
• なぜ Vue を選択したのか
• WordPress と自作ブログの違いは？
• 移行してみてのメリット・デメリット

ここら辺を深掘りつつ、自作ブログにしてみようよ！という感じの話をするのでお付き合いください。

なぜ WordPress から卒業したのか

そもそもブログ構築のためになぜ WordPress を選択したかということについてです。大した理由はなくて出勤にかかる時間が 1 時間を超えることがあるぐらいの距離の場所に住んでいたため時間の確保が難しかったために、とりあえずポチポチすれば運用できる手軽さを選択しました。

また、WordPress はレンタルサーバーか自分でサーバーを立てるかできますが、圧倒的安価に使えるレンタルサーバーを選択しました。今の時代に久しぶりに ftp を使いましたが、世の中には一般のかたが WordPress を契約して手軽に HP を作っていることを考えるとまだまだ使われている通信手段かなぁと実感しました。

どのレンタルサーバーを選んだの？

今回は安さ重視で LOLIPOP のレンタルサーバーを選択しましたが、他にもエックスサーバーやさくらのレンタルサーバーなどもあります。何を重要視するかで選択するレンタルサーバーは変わりますが、僕の場合はとにかく手軽にさっさとブログ作って、自分に合っているかどうかを見極めるぐらいの気持ちでやりたかったので、最小構成で月額 250 円と価格的に抑えられる LOLIPOP を選びました。が、各社ざっと調べたぐらいなのでもっと安いところはあったかもしれません。下に今回のレンタルサーバー代について載せておきます。

• 2019 年 10 月から 2020 年 4 月までの半年契約
  • 契約当初はライトプラン - 月額 250 円
  • 途中からスタンダードプラン移行 - 月額 500 円
  • 半年分まとめて払いで 3850 円(内、初期費用 1500 円、移行時の差分徴収 550 円)

半年間ブログを 4000 円で運用できているのなら(運用している当時は)安いかな？と思いました。大してブログに力を入れずに書いて生きるのであれば、別にそのままでも良かったと思います。レンタルサーバーを変えることはあったかもですし、現代であればnoteや、Medium、Qiitaに記事書くという手段もありました。実際 Qiita には少し記事書いてますし。これらのサービスは SEO 無視しても勝手に流入ありますし、データが吹っ飛ぶこともまぁ無いでしょうから安全な気持ちでかけますよね。エンジニアならGitHub PagesやNetlify、Firebase使ってもいいですよね。

なぜ Vue+SPA+Firebase で自作ブログを作ろうと考えたのか

結論から言います、「成長」、「コスト」、「継続性」の 3 つの観点から本ブログを自作で作ることに決意しました。

まずは成長について

僕がこの 20 代で望むことの 1 つとして技術力の成長を掲げています（皆さんにとったら知らんこっちゃですが w）。

僕は DeNA でオープンエンジニアとして 19 卒で採用されています。ゲームや野球などで有名なイメージが強い当社ですがエンジニアリング能力の高さはトップクラスだと思っています。ガラパゴス時代から、mobage やら、現代ではスマホのソシャゲでも日本有数のトラフィックを捌く技術を持った激強のエンジニアの方々がいらっしゃいますし。同期も優秀な人たちばかりです。詳しくは同期の特集が組まれた記事があるので是非読んでみてください！

• LT 会が紡いだ 19 新卒の横の繋がり。きっかけを生んだエンジニア研修の内容は「全員一緒」の真意
• 最終課題は配属先とのマッチング期間。19 新卒エンジニアの配属されるまでとされてから

こういう環境にいて、月額 250 円のレンタルサーバーに立てた WordPress のページ描画速度とかを見ていると遅すぎます！これはもう本当に遅い。ページ遷移するたびに若干の「イラッ」があります（別にキレてないですよ w）。WordPress が悪いというよりかは、月額 250 円のレンタルサーバーなんてそんなものです。なので月額 1000 円ぐらいの超高速に捌けるプランも各社用意しているわけです。

こういった経緯というか気持ち的なものから、記事を書くだけじゃなくて web エンジニアとしての成長を見越したブログ運用へと移行しようと思いました。

次にコストについて

今回はコストを金銭と、運用の 2 つの観点から考えてみようと思います。

1. 金銭コスト

レンタルサーバ代はよくよく考えたら高い。というより技術者にとっては高いと思います。レンタルサーバーが世間に広まっているのは、管理コストや面倒な設定をしなくても一般人が扱える点が最大の理由です。エンジニアが何千時間とプログラムを扱ってきたような時間を月額 1000 円もかからずに HP を運用できるって考えたらめっちゃコスパいいじゃないですか。

ですがやはりエンジニアなら自分が扱ってるシステムのコストやパフォーマンスには気にすべきです。今回コストを考える段階では技術選定とか何も考えていませんでしたが、Firebase or Netlify に Hosting するようにすればほぼほぼ無料で運用できます。必要なのはドメイン代ぐらいです。ドメインはレンタルサーバーで運用していてもかかるので、自作で Web ページを Vue や React で作れば無料で運用できると言っても過言ではありません。

ちなみに、Firebase Hosting は以下のような料金体系です。

Spark(無料)プラン

• 1GB 保存
• 10GB 転送

Blaze(従量課金)プラン

• $0.026/GB
• $0.15/GB

普通に個人ブログを気軽に運用するレベルでは間違いなく無料で十分です。他にも Firestore(DB)や CloudFunction なども提供されていますが、これらも個人レベルなら無料で事足りるくらい太っ腹ですよね。本当に良い時代になった。

2. 運用コスト

WordPress には特有の制限があります。plugin を追加したり、オリジナルテーマを作っているとファイル構成を気にしたり、WordPress が用意している関数を使うことで若干便利にしたり。他にもありますが、これらは WordPress が前もって用意していたり多くの開発者によって作られていたりしますが、こう言ったツールを使う場合、内部的にどうなっているのかわかりません。コード見れば？という話ですが、ブログを運用するためだけに、どんなレベルの人が作ったかもわからないものを見ますか？個性出せないけど、みんなが使っている Plugin 使いますか？

1 つ 1 つは許せることでも、積み重なるとコスト(ストレス)になります。しかも個人ブログでそのコストを払っても良いかと考え直してみると答えは No でした。

あと、これだけは言っておきたいですが、管理者画面の挙動遅すぎませんか？安いサーバーだからですかね。

最後に継続性について

このまま WordPress を運用しておいて数年、数十年と続けて行けるかどうかという点についてです。楽観的に考えれば、まぁいけるんじゃ無いか？という感じです。が、例えば今回と同じように技術的な観点から WordPress で良いのかどうかを半年に一回ぐらい悩むことになったり、データの保持で悩むのが目に見えていました。

僕の場合は WordPress の設定で GCS へと DB のデータや、ファイルを丸ごとコピーするバッチを走らせていました。バックアップの種類ごとにサイズや更新頻度を考えながら、毎日・毎週バックアップするものを作っていました。ここら辺は大した実装何もせずにできる恩恵はありました。とはいえ、そもそもこのサーバーが壊れたり、乗り換えたりとなった時に復旧するために必要な手順が多いです。Firebase や Netlify に Hosting しておける状態にしておけばほぼコマンド一発で web に表示することができる状態には戻せます。

WordPress では DB に保存するはずのブログの内容は、HeadlessCMS を使うことで解決ができました。Vue を使う場合には公式がButterCMS を用いたブログの構築手順を作成しているぐらいですが、今回は国産の microCMS を使いました。詳しくは後ほど。これによって永続化する必要のあるデータは全てクラウド上で扱うことができるようになりました。そして何より、WordPress から脱却することでメリットを感じているのは markdown で記事を書くことができるようになったことです。これは地味に大事。普段使っている記述方法でブログを作れるとコストが少なくてすみますし、リッチエディタや wysiwyg を使わずにキーボードから手を離さないで書くことができます。markdown なら最近のエディタなら画面分割しながら出来上がりの想像ができるのも良い点ですよね。

これによって他の CMS に乗り換えたとしても、保存するデータの形を変えずに済むので移行作業も将来的に楽になると想像できます。WordPress でバックアップした xml のデータは markdown に変換できますが、所々 WordPress のタグが残ってしまうのが厄介でした。こんなこともあり、やはり markdown で管理できることはメリットが地味に大きいです。

技術選定とか自作ブログのメリット・デメリットなどについて

ここまで長々と WordPress からなぜ脱却しようと思ったかという話を繰り広げてきましたが、ここからはようやく技術選定と、実際に自作ブログを作ってみて感じた WordPress との違い、そしてメリット・デメリットなどを述べていこうと思います。

使った技術

本ブログでは以下の技術を用いて作られています。

• NuxtJS + Vue.js
• SPA (Single Page Application)
• SSR (Server Side Rendering)
• Buefy
• Firebase
• HeadlessCMS(microCMS)

それぞれの細かい説明は公式を見て欲しい感がありますが、僕なりの理解で簡単に説明するとNuxtJSは Vue.js を用いたフレームワークです。vue-router や vuex などのライブラリが最初から込み込みで入っていて、一定のルールに従えばよしなに設定してくれます。WordPress でも同じようなところはありますが、どうせ従うなら現時点でモダンな技術です。正直ブログ書くだけなら vuex とかまったく必要ないですが状態管理が必要になるような複雑なことはもう少し先の未来にこのブログでやってみようという野望は抱いています。

SPA は単一の Web ページでアプリケーションを構成する構造の名称のことですが、わかりやすい挙動のことで言うならば、ページ遷移するたびにページが更新されないでしょうか。このブログ読んでいる方でよく知らないと言う方はページ上部の方から僕のブログのリンクを辿ってみてください。意味がわかると思います。普段なら更新するページが、さくっと遷移しているだけのような感覚になりますね。それです。

SSR は主に OGP 対策のために必要になる技術です。SPA では単一の Web アプリケーションで構成されるため、ページ遷移する際に url は変わっていますが、そのページの index.html が存在しているわけではなく、非同期的にページの内容を取得してレンダリングされるため、JavaScript を解釈しないクローラーは SEO 的に不利なのです。なので、ページ毎に異なるタイトルやサムネを設定することができないのです。これを解決するために、NuxtJS では SSR 機能をつけることができ、ローカル PC 上でアプリケーションをビルドするときに必要なページの index.html を生成することができるのです。これを Server Side Rendring と呼びます。これのおかげで JavaScript を解釈できないクローラーでも index.html の header 部分を解釈してくれるのです。

Beufyは Vue と Bulma を合わせた CSS フレームワークです。NuxtJS でアプリを生成するときに複数の選択をする事が可能ですが、対して考えずに Buefy にしました。あえて理由に挙げるとしたら Bulma は Bootstrap などと違って CSS のみで動作するので Vue と相性が良いと思っています。Vue は styled component を持っていて、CSS をコンポーネントに閉じる事ができるので CSS との相性が良いのです。正直自作で CSS 書いても良いかなと思っていたぐらいなので、ブログに使えそうなカードやその他グリッドシステムがあれば十分でした。

Firebase は公式を読んでみてください。Firebase は公式見た方がわかりやすいです。

最後に HeadlessCMS(microCMS)ですが、WordPress とかも CMS と呼ばれていて何が違うのでしょうか。それはとても簡単な違いです。CMS は Contents Management System の略称ですが、WordPress などはコンテンツを表示する機能を持っていますが、HeadlessCMS はコンテンツを保持する機能はあれども表示する機能は持ち合わせていません。これは表示する部分と、何を表示するかという責任を分離させる事ができる点でとてもメリットです。このブログで考えるならば、この記事をどんなデザインでどこに表示させるかということと、このブログ自体の中身をどこに保持するかは疎結合にする事ができます。これによって、僕はデザインを変えてもブログの文章本体に影響を与えることはありませんし、ブログの文章の保存先を変えたとしてもデザインに影響が出ることはありません。markdown で保持しているわけですから。

なぜ Vue を選択したのか

さて、現在 JavaScript を用いた web フロントエンドフレームワークは React か Vue です(異論はありそうですが、僕は宗教戦争をするつもりは一切ありません。)。2 つのフレームワークは設計思想が大分異なります。雑にいうならば React は開発者を厳しく育て、Vue は開発者を甘やかして育てるような両極端な思想を持っています。個人的に TypeScript を使えるかどうかは判断基準になりそうです。Vue は version3 からは TypeScript が導入される予定ですが、現時点では使えません。

僕は最近は静的型付け言語に慣れてしまってきたので、型のない言語を扱うときは不安になってしまいます。そう考えると Vue という選択肢はあり得なかったのですが、次の 2 点において Vue を使うという判断を下しました。

1. Vue.js の経験値がほぼ 0 だったから学びたかった
2. 日本においては React よりも Vue.js の方が浸透すると予想しているから

ぶっちゃけ、どっちでもよかったです。それぐらい言語的な選択に意思を持ち合わせていません。React は Redux を使った事があり状態管理の仕方ぐらいは扱った事があったので Vue.js に比べると少し知っている事が多かったです。なのでほぼ未知の Vue.js に対する好奇心が強かったこと、型付け言語(Scala)におけるコミュニティが衰退する理由となった話を読み、日本では優しい言語の方が広まるだろうと予想してる。というだけです。別に React でもよかったです。

WordPress と自作ブログの違いは？

僕が実際に自作ブログをホスティングして運用を開始してみて感じている違いを列挙しておきます

• ページ描画速度
• markdown 楽だし、楽しい
• 機能追加は面倒なときある
• 愛着が 100 倍
• なんとなく堂々と人にブログのこと言える

めちゃくちゃ浅いこと言ってる w

まぁ、WordPress でブログを書いてた頃に比べて、圧倒的にブログ書くのが楽しくなっているという事実はかなり重要だなと思う。

移行してみてのメリット・デメリット

WordPress と自作ブログの違いは？と多少かぶるところもありますがメリットデメリットをまとめておきます

ちょっと自作ブログによった評価しすぎている感がしてきた。そんなつもりは無かったのですが、この自作ブログを作り始めたのが 2020 年 3 月からで、2 週間 ~ 3 週間で形になったことを考えるといろんな観点から見てもコスパがよかったのではないかと思います。

まとめ

長々と書きましたが、WordPress から自作ブログ作ってみたくなったのではないでしょうか。具体的なブログ構築方法や各種設定方法などの実用的なことは部分的にかいつまんでブログを書いていこうと思っていますが、今回はこれぐらいにして自作ブログの良さをお伝えして終わりにしようと思います。

ブログって、プログラム書いてる時と同じぐらい集中しちゃいますね。もうこんな寝る前の時間になってしまいました。おやすみなさい。また次のブログで〜！