ステップ 1: PagesList コンポーネントを構築する

最初に、ページのリストを表示する最小限の React コンポーネントを構築しましょう: 

  1. function MyFirstApp() {
  2.    const pages = [{ id: 'mock', title: 'Sample page' }]
  3.    return <PagesList pages={ pages }/>;
  4. }
  6. function PagesList( { pages } ) {
  7.    return (
  8.    <ul>
  9.    { pages?.map( page => (
  10.    <li key={ page.id }>
  11.    { page.title }
  12.    </li>
  13.    ) ) }
  14.    </ul>
  15.    );
  16. }

このコンポーネントはまだデータを取得せず、ハードコーディングされたページのリストのみを表示します。ページをリフレッシュすると、次のように表示されるはずです:

ページのリストを作成する（Building a list of pages） - img1

ステップ 2: データを取得する

ハードコーディングされたサンプルページはあまり役に立ちません。実際の WordPress ページを表示したいので、WordPress REST API から実際のページのリストを取得しましょう。

始める前に、実際に取得するページがあることを確認しましょう。WPAdmin 内で、サイドバーメニューを使用してページに移動し、少なくとも 4 つまたは 5 つのページが表示されていることを確認してください:

ページのリストを作成する（Building a list of pages） - img2

表示されない場合は、いくつかのページを作成してください – 上のスクリーンショットと同じタイトルを使用できます。必ず 公開 し、保存 するだけではないようにしてください。

データが用意できたので、コードに入っていきましょう。WordPress コア API と連携するためのリゾルバー、セレクター、アクションを提供する @wordpress/core-data パッケージを活用します。@wordpress/core-data は @wordpress/data パッケージの上に構築されています。

ページのリストを取得するために、getEntityRecords セレクターを使用します。大まかに言えば、正しい API リクエストを発行し、結果をキャッシュし、必要なレコードのリストを返します。使用方法は次のとおりです: 

  1. wp.data.select( 'core' ).getEntityRecords( 'postType', 'page' )

ブラウザの開発者ツールでこのスニペットを実行すると、null が返されるのがわかります。なぜですか？ページは最初に セレクター を実行した後に getEntityRecords リゾルバーによってのみリクエストされます。少し待って再実行すると、すべてのページのリストが返されます。

注: このタイプのコマンドを直接実行するには、ブラウザがブロックエディターのインスタンスを表示していることを確認してください（任意のページで構いません）。そうでないと、select( 'core' ) 関数は利用できず、エラーが発生します。

同様に、MyFirstApp コンポーネントはデータが利用可能になるとセレクターを再実行する必要があります。これがまさに useSelect フックの役割です: 

  1. import { useSelect } from '@wordpress/data';
  2. import { store as coreDataStore } from '@wordpress/core-data';
  4. function MyFirstApp() {
  5.    const pages = useSelect(
  6.    select =>
  7.    select( coreDataStore ).getEntityRecords( 'postType', 'page' ),
  8.    []
  9.    );
  10.    // ...
  11. }
  13. function PagesList({ pages }) {
  14.    // ...
  15.    <li key={page.id}>
  16.    {page.title.rendered}
  17.    </li>
  18.    // ...
  19. }

index.js 内で import ステートメントを使用していることに注意してください。これにより、プラグインは wp_enqueue_script を使用して依存関係を自動的にロードできます。coreDataStore への参照は、ブラウザの開発者ツールで使用する同じ wp.data 参照にコンパイルされます。

useSelect は 2 つの引数を取ります: コールバックと依存関係。大まかに言えば、依存関係または基盤となるデータストアが変更されるたびにコールバックを再実行します。[https://developer.wordpress.org/block-editor/reference-guide/packages/packages-data/#useselect] で [useSelect] について詳しく学ぶことができます。

まとめると、次のコードが得られます: 

  1. import { useSelect } from '@wordpress/data';
  2. import { store as coreDataStore } from '@wordpress/core-data';
  3. import { decodeEntities } from '@wordpress/html-entities';
  5. function MyFirstApp() {
  6.    const pages = useSelect(
  7.    select =>
  8.    select( coreDataStore ).getEntityRecords( 'postType', 'page' ),
  9.    []
  10.    );
  11.    return <PagesList pages={ pages }/>;
  12. }
  14. function PagesList( { pages } ) {
  15.    return (
  16.    <ul>
  17.    { pages?.map( page => (
  18.    <li key={ page.id }>
  19.    { decodeEntities( page.title.rendered ) }
  20.    </li>
  21.    ) ) }
  22.    </ul>
  23.    )
  24. }

投稿タイトルには &aacute; のような HTML エンティティが含まれる場合があるため、decodeEntities 関数を使用して、それらを á のようなシンボルに置き換える必要があります。

ページをリフレッシュすると、次のようなリストが表示されるはずです:

ページのリストを作成する（Building a list of pages） - img3

ステップ 3: テーブルに変換する

  1. function PagesList( { pages } ) {
  2.    return (
  3.    <table className="wp-list-table widefat fixed striped table-view-list">
  4.    <thead>
  5.    <tr>
  6.    <th>Title</th>
  7.    </tr>
  8.    </thead>
  9.    <tbody>
  10.    { pages?.map( page => (
  11.    <tr key={ page.id }>
  12.    <td>{ decodeEntities( page.title.rendered ) }</td>
  13.    </tr>
  14.    ) ) }
  15.    </tbody>
  16.    </table>
  17.    );
  18. }

ページのリストを作成する（Building a list of pages） - img4

ステップ 4: 検索ボックスを追加する

ページのリストは今のところ短いですが、成長するにつれて扱いが難しくなります。WordPress の管理者は通常、この問題を検索ボックスで解決します – 私たちも実装しましょう！

まず、検索フィールドを追加します: 

  1. import { useState } from 'react';
  2. import { SearchControl } from '@wordpress/components';
  4. function MyFirstApp() {
  5.    const [searchTerm, setSearchTerm] = useState( '' );
  6.    // ...
  7.    return (
  8.    <div>
  9.    <SearchControl
  10.    onChange={ setSearchTerm }
  11.    value={ searchTerm }
  12.    />
  13.    {/* ... */ }
  14.    </div>
  15.    )
  16. }

input タグを使用する代わりに、SearchControl コンポーネントを活用しました。これがその見た目です:

ページのリストを作成する（Building a list of pages） - img5

フィールドは空の状態で始まり、内容は searchTerm ステート値に保存されます。useState フックに不慣れな場合は、React のドキュメント で詳しく学ぶことができます。

これで、searchTerm に一致するページのみをリクエストできます。

WordPress API ドキュメント を確認したところ、/wp/v2/pages エンドポイントは search クエリパラメータを受け入れ、それを使用して 文字列に一致する結果を制限します。では、どのように使用できますか？次のように、getEntityRecords にカスタムクエリパラメータを第 3 引数として渡すことができます: 

  1. wp.data.select( 'core' ).getEntityRecords( 'postType', 'page', { search: 'home' } )

ブラウザの開発者ツールでそのスニペットを実行すると、/wp/v2/pages?search=home へのリクエストがトリガーされ、/wp/v2/pages だけではなくなります。

これを useSelect 呼び出しに反映させましょう: 

  1. import { useSelect } from '@wordpress/data';
  2. import { store as coreDataStore } from '@wordpress/core-data';
  4. function MyFirstApp() {
  5.    // ...
  6.    const { pages } = useSelect( select => {
  7.    const query = {};
  8.    if ( searchTerm ) {
  9.    query.search = searchTerm;
  10.    }
  11.    return {
  12.    pages: select( coreDataStore ).getEntityRecords( 'postType', 'page', query )
  13.    }
  14.    }, [searchTerm] );
  16.    // ...
  17. }

searchTerm は、提供された場合、search クエリパラメータとして使用されます。searchTerm は、useSelect 依存関係のリスト内にも指定されており、getEntityRecords が searchTerm の変更時に再実行されることを確認します。

最後に、すべてを組み合わせた MyFirstApp の見た目は次のようになります: 

  1. import { useState } from 'react';
  2. import { createRoot } from 'react-dom';
  3. import { SearchControl } from '@wordpress/components';
  4. import { useSelect } from '@wordpress/data';
  5. import { store as coreDataStore } from '@wordpress/core-data';
  7. function MyFirstApp() {
  8.    const [searchTerm, setSearchTerm] = useState( '' );
  9.    const pages = useSelect( select => {
  10.    const query = {};
  11.    if ( searchTerm ) {
  12.    query.search = searchTerm;
  13.    }
  14.    return select( coreDataStore ).getEntityRecords( 'postType', 'page', query );
  15.    }, [searchTerm] );
  17.    return (
  18.    <div>
  19.    <SearchControl
  20.    onChange={ setSearchTerm }
  21.    value={ searchTerm }
  22.    />
  23.    <PagesList pages={ pages }/>
  24.    </div>
  25.    )
  26. }

これで！結果をフィルタリングできるようになりました:

ページのリストを作成する（Building a list of pages） - img6

core-data を使用する代わりに API を直接呼び出す

少し立ち止まって、私たちが取ることができた別のアプローチの欠点を考えてみましょう – API を直接操作することです。API リクエストを直接送信したと想像してみてください: 

  1. import apiFetch from '@wordpress/api-fetch';
  2. function MyFirstApp() {
  3.    // ...
  4.    const [pages, setPages] = useState( [] );
  5.    useEffect( () => {
  6.    const url = '/wp-json/wp/v2/pages?search=' + searchTerm;
  7.    apiFetch( { url } )
  8.    .then( setPages )
  9.    }, [searchTerm] );
  10.    // ...
  11. }

core-data の外で作業する場合、ここで 2 つの問題を解決する必要があります。

まず、順序が乱れた更新です。「About」を検索すると、A、Ab、Abo、Abou、About をフィルタリングする 5 つの API リクエストがトリガーされます。これらのリクエストは、開始した順序とは異なる順序で完了する可能性があります。search=A が search=About の後に解決される可能性があり、そのために間違ったデータを表示することになります。

Gutenberg データは、背後で非同期部分を処理することで助けます。useSelect は最新の呼び出しを記憶し、期待されるデータのみを返します。

次に、各キーストロークが API リクエストをトリガーします。About を入力し、それを削除して再入力すると、データを再利用できるにもかかわらず、合計 10 のリクエストが発行されます。

Gutenberg データは、getEntityRecords() によってトリガーされた API リクエストの応答をキャッシュし、次回の呼び出しで再利用します。これは、他のコンポーネントが同じエンティティレコードに依存している場合に特に重要です。

全体として、core-data に組み込まれたユーティリティは、典型的な問題を解決するように設計されているため、アプリケーションに集中できます。

ステップ 5: ローディングインジケーター

検索機能には 1 つの問題があります。まだ検索中か、結果がないのかはっきりしません:

ページのリストを作成する（Building a list of pages） - img7

Loading… や No results のようなメッセージがあれば、状況が明確になります。これを実装しましょう！まず、PagesList は現在のステータスを認識する必要があります: 

  1. import { SearchControl, Spinner } from '@wordpress/components';
  2. function PagesList( { hasResolved, pages } ) {
  3.    if ( !hasResolved ) {
  4.    return <Spinner/>
  5.    }
  6.    if ( !pages?.length ) {
  7.    return <div>No results</div>
  8.    }
  9.    // ...
  10. }
  12. function MyFirstApp() {
  13.    // ...
  15.    return (
  16.    <div>
  17.    // ...
  18.    <PagesList hasResolved={ hasResolved } pages={ pages }/>
  19.    </div>
  20.    )
  21. }

カスタムローディングインジケーターを構築する代わりに、Spinner コンポーネントを活用しました。

ページセレクター hasResolved の状態を知る必要があります。hasFinishedResolution セレクターを使用して確認できます:

wp.data.select('core').hasFinishedResolution( 'getEntityRecords', [ 'postType', 'page', { search: 'home' } ] )

セレクターの名前と そのセレクターに渡したのと全く同じ引数 を取り、データがすでに読み込まれている場合は true を、まだ待機中の場合は false を返します。これを useSelect に追加しましょう: 

  1. import { useSelect } from '@wordpress/data';
  2. import { store as coreDataStore } from '@wordpress/core-data';
  4. function MyFirstApp() {
  5.    // ...
  6.    const { pages, hasResolved } = useSelect( select => {
  7.    // ...
  8.    return {
  9.    pages: select( coreDataStore ).getEntityRecords( 'postType', 'page', query ),
  10.    hasResolved:
  11.    select( coreDataStore ).hasFinishedResolution( 'getEntityRecords', ['postType', 'page', query] ),
  12.    }
  13.    }, [searchTerm] );
  15.    // ...
  16. }

最後の問題が 1 つあります。タイプミスをして getEntityRecords と hasFinishedResolution に異なる引数を渡すことは簡単です。それらが同一であることが重要です。このリスクを取り除くために、引数を変数に格納します: 

  1. import { useSelect } from '@wordpress/data';
  2. import { store as coreDataStore } from '@wordpress/core-data';
  3. function MyFirstApp() {
  4.    // ...
  5.    const { pages, hasResolved } = useSelect( select => {
  6.    // ...
  7.    const selectorArgs = [ 'postType', 'page', query ];
  8.    return {
  9.    pages: select( coreDataStore ).getEntityRecords( ...selectorArgs ),
  10.    hasResolved:
  11.    select( coreDataStore ).hasFinishedResolution( 'getEntityRecords', selectorArgs ),
  12.    }
  13.    }, [searchTerm] );
  15.    // ...
  16. }

そして、これで完了です！

すべてを結びつける

すべての要素が揃いました、素晴らしい！アプリの完全な JavaScript コードは次のとおりです: 

  1. import { useState } from 'react';
  2. import { createRoot } from 'react-dom';
  3. import { SearchControl, Spinner } from '@wordpress/components';
  4. import { useSelect } from '@wordpress/data';
  5. import { store as coreDataStore } from '@wordpress/core-data';
  6. import { decodeEntities } from '@wordpress/html-entities';
  8. function MyFirstApp() {
  9.    const [ searchTerm, setSearchTerm ] = useState( '' );
  10.    const { pages, hasResolved } = useSelect(
  11.    ( select ) => {
  12.    const query = {};
  13.    if ( searchTerm ) {
  14.    query.search = searchTerm;
  15.    }
  16.    const selectorArgs = [ 'postType', 'page', query ];
  17.    return {
  18.    pages: select( coreDataStore ).getEntityRecords(
  19.    ...selectorArgs
  20.    ),
  21.    hasResolved: select( coreDataStore ).hasFinishedResolution(
  22.    'getEntityRecords',
  23.    selectorArgs
  24.    ),
  25.    };
  26.    },
  27.    [ searchTerm ]
  28.    );
  30.    return (
  31.    <div>
  32.    <SearchControl onChange={ setSearchTerm } value={ searchTerm } />
  33.    <PagesList hasResolved={ hasResolved } pages={ pages } />
  34.    </div>
  35.    );
  36. }
  38. function PagesList( { hasResolved, pages } ) {
  39.    if ( ! hasResolved ) {
  40.    return <Spinner />;
  41.    }
  42.    if ( ! pages?.length ) {
  43.    return <div>No results</div>;
  44.    }
  46.    return (
  47.    <table className="wp-list-table widefat fixed striped table-view-list">
  48.    <thead>
  49.    <tr>
  50.    <td>Title</td>
  51.    </tr>
  52.    </thead>
  53.    <tbody>
  54.    { pages?.map( ( page ) => (
  55.    <tr key={ page.id }>
  56.    <td>{ decodeEntities( page.title.rendered ) }</td>
  57.    </tr>
  58.    ) ) }
  59.    </tbody>
  60.    </table>
  61.    );
  62. }
  64. const root = createRoot(
  65.    document.querySelector( '#my-first-gutenberg-app' )
  66. );
  67. window.addEventListener(
  68.    'load',
  69.    function () {
  70.    root.render(
  71.    <MyFirstApp />
  72.    );
  73.    },
  74.    false
  75. );

残るはページをリフレッシュして、新しいステータスインジケーターを楽しむだけです:

ページのリストを作成する（Building a list of pages） - img8

ページのリストを作成する（Building a list of pages） - img9

次は何ですか？