トップページにも書きましたが、僕はJavaScriptなんかどっちかっつーと「全く分からん」に近いポンコツです。 node.jsも名前しか知りませんでした。
そのポンコツがNuxt.jsマスターになるまで(予定)の第1回です。
最初は、
なぜ脱WordPressしたかったのか？
なぜNuxt.jsを選んだのか？
をお話しようと思います。
WordPressの上でな！
※ 注意
この物語はポンコツ(僕)がもがき苦しみながらNuxt.jsでどうにかサイトを作っていくお話です。
ある程度以上の知識がある人から見るともはや喜劇かコント。
もし万が一、僕と同じようなことで悩んでいる人、困っている人がいましたら、笑いをかみ殺しながら読んでみてください。
お役に立てると嬉しいです。
(いるのか！？)
このページの目次
WordPressをやめたかった理由
表示が遅い…
これが最大の理由です。
いや、常に遅いわけではないのですが、たまに数秒かかってました。
GoogleのPageSpeed InsightsやLighthouseの指示に従って、画像やCSS/JSを改善したりいろいろやってみましたがそれでも遅い時は遅い。
それもそのはず、WordPressは動的表示する仕組みだったからです。
WordPressは動的HTML出力
WordPressはPHPで動いているシステムで、ページ読み込みのたびにPHPがごりごりプログラムを動かした上で、最終的なHTMLを出力しています。
これを動的出力と言うそうです。
ページが読み込まれると、WordPress自体、追加しているプラグイン、使用しているテーマがそれぞれプログラムとして動き、必要とあらばデータベースへアクセスし、最終的なHTMLを出力します。
このせいで、「WordPressを軽くしたいなら余計なプラグイン外せ！」と言われるわけです。
今のサーバスペックだと1秒もかからない処理でしょうが、アクセスが集中した時？タイミングの問題？で、表示が遅くなることがあるんでしょうたぶん。
動的出力にはメリットもある
どこのブログにでもあるものだと「人気の投稿」機能。
あれは動的出力ならではの機能だと思います。
一般的にはどうやってんのかなアレ。
WP-PostViewsとかの表示数でソートしてるのかな。
(独学が過ぎるので一般的なセオリーを知らないプロセス)
データベースにあるWP-PostViewsが記録した数値を参照して、リアルタイムの人気記事ランキングを作る。
まさに動的です。 ダイナミック。
静的なHTMLでは逆立ちしてもできないことでしょう(たぶん)。
その他のWordPressのデメリット
利用者が多い故のセキュリティの問題
WordPressは利用者がめちゃくちゃ多いので、ハッキング？クラッキング？をする人からすると対象が多い分、狙う価値が高いです。
つまり、セキュリティを抜かれるリスクが高い。
動的出力故のセキュリティの問題
WordPressってログインして管理しますよね。
この管理部分をバックエンドというそうですが、バックエンドがサーバ側にあるせいで、セキュリティ抜かれると不正なプログラムを走らせることができます。 そんでデータベースの改竄とか。
静的HTMLならそもそもこのリスクがありません。 生のHTMLが置いてあるだけだから。
他にもプラグイン依存度が高いとプラグインが更新され続けてくれなければ困るとか、その他ちょこちょこ。
僕的には「遅い！」を第一に、「セキュリティのリスク！」の2点が気になっている部分でした。
静的出力を含め、表示速度を改善できる仕組みを探した
WordPressを静的出力するプラグイン
まず真っ先に考えたのは「WordPressで静的出力できないか？」です。
これが可能なら既存の財産をフル活用することができます。 静的な意味で。
調べてみたらそういうプラグインがあるようで、WP2Staticというのは最近でも更新されているそうな。
さっそく導入。
機能的には、ローカルの開発環境で記事を書いて、それをアップロードする仕組み？
FTPやらGitHubにアップロードする機能がついているようでした。
さっそくエクスポート開始！
「Process completed」と表示されるも、対象フォルダには「.wp2static_safety」というファイルがあるだけ…。
どういうこっちゃ…。
説明は英語…(英語苦手)。
とりあえず候補には残しつつ、他のも調べてみよう。
生のHTMLファイルに直書き
従来の、HTMLファイルを1個1個書いていく方法です。
これはね、秒で断念しました。
だって、ヘッダ/フッタ/サイドバーなんかの共通部分に更新入った時どうすんのよ。
間違いなく速いんだろうけど、メンテナンス性が悪すぎる。
静的出力できるCMSを探してみた
CMSというのはコンテンツ・マネジメント・システムの略で、WordPressもこの一種。
WordPress以外で静的出力できるCMSがないか探してみると、ありました。 【Movable Type】というCMS。 かなり有名なやつみたいです。
しかし有料。
うーむ…
いや、明らかに自分に合ってると分かるならお金払うんだけど…。
これも保留。
次に何故かNext.js
どういう流れだったか。
確か「AMP＝速い」と思っていたのが、「GoogleやTwitterから飛ばなかった場合はAMPは別に速くない」みたいな情報を見つけて、「え、マジ？じゃーどうすんの？」と調べていたところにサーバーサイドレンダリングなるものを発見。 それを導入するとサイト内で次のページを表示する時もAMPが高速表示されるんだとか。
「よし！WordPressでサーバーサイドレンダリングだ！」という発想に至りました。
ですが、たぶんこれはかなり意味不明な発想で(今もあまり理解していない)、当然そんな方法は見つけられず。
(サーバーサイドレンダリングは、JavaScriptが表示しているHTMLを、クライアント端末ではなくサーバ側で処理する仕組みですたぶん)
AMP公式にサーバーサイドレンダリングについての説明があり、「Next.jsとかいいよー」って書いてあったのでNext.jsが一躍最有力候補に。
(Nuxt.jsじゃなくてNext.jsの方です)
普段こんな選び方は絶対にしないんですが、今回はあまりにも何もかんも分からない状態だったので、とりあえず1個何かやってみて、ちょっと事情が分かった状態で再調査予定でした。
Gatsby.jsというのがスゴイらしい
Next.jsについて調べていると、NextはReact.jsというフレームワーク？の発展版？みたいなものらしく、その辺をわけも分からず調べていると、同じReactベースのフレームワークでGatsby.jsというのがあるそうな。
このGatsbyを紹介していたブログがそれはもうめっちゃ熱くGatsbyについて語っていて、「これからの時代はGatsbyさえあればブログもサイトもベストプラクティス！」みたいな感じ。
(別の人に聞いても条件つきでその通りと)
なんのこっちゃ分かってないポンコツなのに、そのノリにあてられて「Gatsby最高だな！これからGatsby一択でしょ！」と思わされてしまいました。
有力候補。
とまぁ、こんな酷い理解状態でしばらく調査を続けていました。
万が一このページをエンジニアさんが見ているなら、いかに僕が何も知らないポンコツか分かっていただけたんじゃないかと思います…。
最終的には知りあいに聞いてNuxt.jsを選択
上のような混沌とした状態で調査を続けても、ReactもVueもAngularも「何をする何なのか」も分かっていなかったので、もちろん答えなど出るわけはなく…。
やむなく知りあい(以下、アニキ)に聞いたところ、Nuxt.jsを勧められました。 アニキはおそらくバックエンドのエンジニアで、フロントエンドはそんなに詳しくないから改めて調べるよと言ってもらって、僕の意味不明だったであろう悩みを全部聞いてくれた上で調べてきてくれました。
Nuxt.jsを勧められた理由①：日本語文献が豊富
あー…。
最高。
そう、そこは大事だよアニキ。
Nuxt.jsを勧められた理由②：Vue.jsが今後標準になっていく可能性
Nuxt.jsというのは、先ほどのGatsbyのベースReactとは違い、Vue.jsというのをベースにしているんだそうです。
(意味不明なのでVue＝プレステ、React＝セガサターンかみたいに捕らえました)
で、このVue.jsというのが今後jQueryに変わるくらい浸透していく可能性があると。
そうなった際にReactベースのフレームワークだけに慣れていると、それまでの学習コストが無駄になってしまう可能性があると。
うん、でかい要素ですね。
Nuxt.jsを勧められた理由③：オレがやりたいことに向いている
静的HTMLでの速度アップが最大の目的でしたが、そうは言うてもデータベース参照してなんやらかんやらしたいし、フォームも欲しいし、ログイン機能とかもつけたくなるかもしれないし、という話をしたところ、その要件だとGatsbyはそんなに向いていないと言われました。
最終的にはいろいろ触って、案件によってベストな選択肢を選べるようになりたいと思っていますが、できない可能性ももちろんあるので(時間がない)、自分に合ってそうなフレームワークを希望…。
とまぁこんないい加減な理由でNuxt.jsでの開発を決定しました。
「いい加減」じゃないな。 「人間味溢れる」と読み替えてください。
それでもWordPressにメリットを感じている
そんなこんなでとりあえずNuxt.jsで開発を始めたんですが、この記事公開時点でしょっぼい1ページはどうにか完成しています。
(いずれ紹介予定です)
今はまだVueやらReactにできることが全然理解できていないので間違っている可能性大ですが、ちょっと触ってみて思ったのは…
やっぱWordPressってすっげーよ…。
WordPressってあんなにも簡単にページ追加して、プラグインでMETAの設定してーってできるのに、それに比べるとNuxt.jsの学習コストはすんごい高いなと感じています。
あと、現時点で一番大きいと思っているのが、コンテンツの管理について。
WordPressはコンテンツ・マネジメント・システムなんて言うだけあって、コンテンツの管理はものすごい楽で便利だと思います。
(WordPressに限らずCMS全般がそうなんだと思います)
今Nuxtで開発していますが、コンテンツ管理においてNuxtがWordPressを上回る姿は全く想像できないです。
今の段階での印象は「ブログならWordPress最強！」、「それ以外はJavaScriptのフレームワークが便利な場合がある」程度の認識ですが、さぐりさぐり勉強していきたいと思います！
以上、WordPressからお届けしました！
Nuxt.js 開発環境構築編の目次