WordPressと長く付き合ってきて、最近はVue.jsが好きという方 多いと思います。（私です)
WordPress と Vue.js はどのような関係で付き合うのか良いか？
そもそも付き合えるのか？について週末 悶々といろいろ試していました。という日記です。
２つの方向性を考えてみた
1. WordPress REST API + Nuxt.js (SSR) 方向
2. php + Vue.js で超シンプルな 脱jQuery的 お付き合い
バックとフロントの分離
稼働中WordPressメディアのリニューアル等の際に、そのままバックエンドとして分離、隠してしまって、
フロントからAPIで取得する、というようなストーリーを想定。
モダンjsフレームワークでメディアというと、JAM Stack思想のもと、contentfulのようなヘッドレスcmsと、SSG。
Netlifyに置き、「爆速！素敵！PWAも行っちゃう？」 のようなひとつ理想郷と思います。
コーポレートサイト等、ニュースだけ用CMS のような小規模用途であれば、この方法は良さそうですが、
ブログ、メディア的な場合には、ライター複数人が管理画面に参加するため、SSGでの運用は現実的に思えない。
個人的に仕事として、メディアとしての用途が多いため、
Nuxt.js のSSRでブログメディア的なものをとりあえず hello world してみます。
1. WordPress REST API + Nuxt.js (SSR) 方向
今回はありものだけで簡単にトライします。
前提
・npm , vue-cli , heroku cli などの依存パッケージはインストール済み。
・データの入ったwordpressサイトを一つ用意する。(なんでもよい)
※ コードは端折ります。
nuxtのプロジェクトを用意
同じようなコンセプトのリポジトリがいくつかありました。 4つほど試して、今回はこちらが良さそうでした。
https://github.com/krestaino/nuepress
肝心のAPI連携部分は store/index.js にかかれていました。
state.wordpressAPI の値を自分のサイトへ変更して、 axiosで REST APIを叩き、Nuxtで展開する形です。
$ npm run dev で ＼(^o^)／ できたー。
SSRは無料のheroku等へ。モダンなブログがサクッと誕生しました。
実際には
シングルポストタイプの超単純なブログであれば、上記をちょっと改造して「完成あっぱれ！」ですが、実際のWordPressでは、そのサイト毎異なるデータをあつかっており、事情もまちまち。
- カスタムフィールド / カスタムポストタイプ / カスタムタクソノミー
- ウィジェット / メニュー
- テーマオプション
- Contact Form 7
- seo系プラグイン
- 人気記事・ランキング
- 認証方法
- 著者の権限
…などなど
特にブログメディアの場合は「seo命」。パーマリンク設定や metaタグ類も超シビアです。
大変じゃね？
WordPress REST API は、どうにも非常に細かい事情を加味するにはガッツリ受け側で工夫が必要そうというのが今の印象です。
WordPress側で、カスタムエンドポイントを自作したり、プラグインによっては REST API サポートの追加プラグインを出していたりするが、まちまち。全て個別に調べる必要がありそうです。
やるとなると、相当の覚悟と体力をもって臨まないと、できなそうということは解りました。
そしてサーバー費用は倍 (か それ以上?)。
なんか本当にこれをやる必要があるのかで、心が一回くじけました。
すでに完成しているwordpressを再発明してまで、受けたいvueの恩恵とは？ ...判断ミス感すごい。
もう少し体力があるときに、続きをトライしてみます。 orz
2. php + Vue.js で超シンプルな 脱jQuery的 お付き合い
wordpressからデータを取るのではなく、あくまでレンダリングはphpにまかせ、webpackから css と js を /wp-content/theme に吐き出してあげるだけ。そうそう、ちょこっと使えるのが、Vueの魅力。
「当然 vuex , vue-router とかも使わない感じじゃね」
「SFCは使ってもよさそうだけど、なんかソースの散らばり方が気持ち悪い。コンポーネントいらなくね？」
「となるとWebpackいらなくね？ cdnでよくね？」
「むしろjsあんま書かなくね？」
「………… jQueryでよくね？」 |дﾟ)ﾁﾗｯ
無論サイトの目的にもよりますが。ブログユースではこんな印象です。
結論
相当な覚悟でガチらない限りは、いらない感がすごい。。
やはり、アプリ は アプリ、wordpress は wordpress と割り切るのが幸せかもしれない。
「こうやるといい感じだよ」
「私はこうやったよ」 等
ご意見いただけると嬉しいです。読んで頂きありがとうございます。