WordPressとVue.jsを組み合わせて非同期でブログ記事を検索して表示させる方法

こんにちは。CTO / CMOの美土路です。
普段はSEOの記事が多いのですが、今回は技術系のブログにしたいと思います。

世間では断然、Reactが流行しておりますが、javascriptを少し理解してきた人からすれば、まだまだ学習コストは高く、二の足を踏んでしまっている方も多いはず。
そこで、少しReactに対して気持ちが後ろ向きになってしまっているWEBデザイナーで、jQueryもある程度の理解が進んでいる人であれば、私は「Vue.js」をオススメします。

Vue.jsとは

Vue.jsは、ウェブアプリケーションの構築に使用されるJavaScriptフレームワークです。その主な特徴は、ビュー層に焦点を当てた設計と、再利用可能なコンポーネントの概念に基づいています。これにより、開発者は既存のプロジェクトにVue.jsを組み込むことが容易になり、また、大規模なシングルページアプリケーションをゼロから構築することも可能です。

Vue.jsは、JavaScript、CSS、HTMLを基にしたテンプレートを使用して、ユーザーインターフェースのコンポーネントを作成します。これらのコンポーネントは、アプリケーション全体で再利用可能で、コードの再利用と保守性を向上させます。また、Vue.jsはTypeScriptとも互換性があります。

Vue.jsの公式ドキュメンテーションは、初心者から経験豊富な開発者まで、すべてのレベルのユーザーに対して非常に役立つリソースです。ここでは、Vue.jsの基本的な概念から高度な機能まで、詳細に説明されています。

公式ドキュメンテーションはこちらからアクセスできます
・Vue.js公式ドキュメンテーション

なぜVue.jsがおすすめなのか

Vue.jsのおすすめポイントは数多くありますが、その中でも特に注目すべきは以下の4つです。

学習コストが低い

Vue.jsは、その設計思想とドキュメンテーションの明確さから、初心者でも比較的容易に学ぶことができます。HTML、CSS、JavaScriptの基本的な知識があれば、Vue.jsの基本的な概念を理解し、簡単なアプリケーションを作成することが可能です。

コンポーネント指向

Vue.jsはコンポーネントベースのフレームワークであり、再利用可能なコンポーネントを作成してアプリケーションを構築することができます。これにより、コードの再利用性と保守性が向上します。

柔軟性

Vue.jsは非常に柔軟なフレームワークであり、小規模なプロジェクトから大規模なシングルページアプリケーションまで、様々な種類のプロジェクトに対応できます。また、他のライブラリや既存のプロジェクトと組み合わせて使用することも可能です。

活発なコミュニティ

Vue.jsは世界中の開発者から支持を受けており、活発なコミュニティと広範なエコシステムを持っています。これにより、問題が発生した際には、コミュニティからのサポートを受けることが可能です。

WordPressとVue.jsを組み合わせる

前述したようにHTMLやCSS、Javascripの基本的な知識があれば簡単なアプリケーションを作成することができます。

そこで今回はWordpressのREST APIを使って記事をVue.jsで非同期で取得し、かつ記事の検索をリアルタイムで表示する方法をご紹介します。

WordPressとVue.jsを組み合わせて記事を表示

ということで早速コードを書いてきました。
以下のプレビューに表示された検索窓から記事の検索をすると、ページ遷移などせずにリアルタイムで検索結果が返ってきていると思います。 「リース」だったり「テスト」だったりリースの記事にありそうなタイトルや本文なら拾ってくると思います。

HTMLには「v-プレフィックス」を使う

HTMLやCSSで何かしていることはありませんが、HTMLだけあまり見慣れない「v-」という文字列があると思います。

Vue.jsでは、特別な属性を使ってテンプレートに動的な振る舞いを追加します。これらの特別な属性は「v-プレフィックス」で始まるため、Vue.jsのディレクティブと呼ばれます。以下に、いくつかの主要なディレクティブを紹介します。

v-bind: 属性を動的にバインドします。
たとえば、＜img v-bind:src=”imageSrc”＞とすると、imageSrcの値が＜img＞タグのsrc属性にバインドされます。

v-model: フォーム入力とデータを双方向にバインドします。
たとえば、＜input v-model=”message”＞とすると、ユーザーが入力した値がmessageに保存され、messageの値が変更されると入力フィールドの値も更新されます。

v-if: 条件に基づいて要素を表示または非表示にします。
たとえば、＜p v-if=”showMessage”＞Hello!＜/p＞とすると、showMessageがtrueのときにのみ＜p＞タグが表示されます。

v-for: 配列の要素ごとに要素を繰り返します。
たとえば、＜li v-for=”item in items”＞{{ item }}＜/li＞とすると、itemsの各要素に対して＜li＞タグが作成されます。

これらのディレクティブを使用することで、Vue.jsはデータとDOMを効率的に同期させ、動的なユーザーインターフェースを作成します。

Javascriptの記述

ある程度Javascriptを理解できている人ではあれば、今回のコードもそれなりに意味はわかるかと思います。
それなりにわかれば簡単なVue.jsでの操作はほぼできます。

このコードでは、Vue.jsとlodashをCDNから読み込み、非同期で検索結果を取得して表示するVue.jsのコンポーネントを作成しています。
実際のプロジェクトではエラーハンドリングやデータのバリデーションなど、さらなる処理が必要になる場合がありますが、今回はサンプルの一例となっています。

また、WordPress REST APIはデフォルトではアイキャッチ画像（特集画像）を含まないため、それを含めるためには少し手を加える必要があります。
まず、WordPressのテーマのfunctions.phpファイルに以下のフィルタを追加します。これにより、REST APIのレスポンスにアイキャッチ画像のURLが含まれるようになります。

function insert_thumbnail_url() {
    register_rest_field('post',
        'featured_image_url',
        array(
            'get_callback'    => 'get_thumbnail_url',
            'update_callback' => null,
            'schema'          => null,
        )
    );
}

function get_thumbnail_url($post) {
    if(has_post_thumbnail($post['id'])) {
        $imgArray = wp_get_attachment_image_src(get_post_thumbnail_id($post['id']), 'full');
        $imgURL = $imgArray[0];
        return $imgURL;
    } else {
        return false;
    }
}

add_action('rest_api_init', 'insert_thumbnail_url');

ほんの少しのコードでリッチな表現に

これだけシンプルな記述でちょっとリッチな感じが増したと思いませんか？
クライアントが少しでも喜んでくれたり、ビックリしてくれたりすると、「コーダーしててよかったー」って気持ちになります。

今回はほんの一例ではありましたが、今後も少しずつWordPressにVue.jsを実装した記事を書いていければと思っていますのでよろしければ次回もよろしくお願いします。

サンプルのページも作成してみたのでよければどうぞ。
https://wreath-ent.co.jp/sample/vue/