WordPressユーザー向けのReactJS：基本的な紹介

15年以上の間、WordPressは、単一ページのポートフォリオから本格的なeコマースプラットフォームまで、あらゆるものを構築できる最も人気のある完全なCMSソリューションです。 WordPressは、更新、API、認証、DBレイヤー、ほとんどのフロントエンドなど、すべてのバックエンドインフラストラクチャにPHPを使用しています。 ただし、他の一般的なフレームワークと同様に、WordPressも最近進化を余儀なくされています。

Web用のJavaScriptアプリケーション、デスクトップおよびネイティブモバイルアプリケーションの可能性と能力が高まっていることを考えると、WP REST APIは、WordPressのPHPコアのレガシーとJavaScriptの台頭の間のギャップを埋めようとします。 これは、2つの理由からWordPressにとって大きな一歩だと思います。

1. 既存のWPWebサイトは、React / Vueまたは別のフロントエンドライブラリを使用して、より優れたUIエクスペリエンスを作成できます。
2. 逆に、Web開発者は、選択したスタックと簡単に統合できる業界標準のヘッドレスCMSを入手できます。

それは誰にとってもお互いに有利な状況です。 この記事では、WordPressバックエンド用のReactフロントエンドの構築に力を注いでいきます。 しかし、最初に、WordPress RESTAPIを見てみましょう。

WordPress RESTAPIの基本

WP REST APIの開発は数年前に始まり、当初はスタンドアロンの機能プラグインとして設計されました。 コードネーム「Clifford」のWordPressv4.4は、RESTAPIの実際のインフラストラクチャをWordPressのコアに導入しました。 実際のエンドポイントは、コードネーム「Vaughan」のWordPressv4.7に登場しました。 WP APIを使用すると、WordPressをヘッドレスCMSとして使用できます。これは、使いやすく、安定していて、JSONに適しています。

JSON

WordPressをJavaScriptスタックと統合する場合は、JSONが推奨される形式です。 JSONは、非常に読みやすい構文を使用してデータを効率的に転送する機能を提供するという点でXMLに似ています。

JSONは、実際にはJavaScriptオブジェクトのテキストベースの表現を構成する文字列です。 キーと値のペアのセットにデータを格納します。 WP投稿の簡単なJSONの例は次のようになります–

{
id: 1,
"title": {
"rendered": "Hello World"
  },
  "content": {
"rendered": "Welcome to WordPress. This is your first
post. Edit or delete it, then start blogging!"
  }
}

WP REST APIを使用した完全なJSON応答には、通常、メタデータなど、投稿に関する追加情報が含まれています。 フロントエンドテーマまたはアプリケーションへのプラグインを作成するために必要なものはすべて揃っています。

エンドポイント

WordPressエンドポイントは、一般の人々にとって非常にアクセスしやすいものです。 最新バージョンのWordPressを実行している場合は、URLの末尾に/ wp-json / wp / v2を追加するだけです。 たとえば、ローカルホストにWordPressインスタンスを設定している場合は、 127.0.0.1 / wp-json / wp / v2の基本的なエンドポイントにアクセスできます。 出力を美しくしたい場合は、JSONビューアー拡張機能を使用してJSONをブラウザーできれいに見せることができます。

画面に表示されているデータは、基本的にコンテンツであり、JSON形式のメタ情報です。 ここで行ったことは、ルートを定義し、ブラウザにデータをフェッチするように依頼することです。

ルートとはどういう意味ですか？ ルートは、特定のメソッドにマップされたURLです。 WordPressコアはルートを読み取り、すべての「/」が従う必要のある特定のパスまたはパラメーターを表すことを理解します。

たとえば、エンドポイントは「/ wp-json / wp / v2 / posts / 1」のようになります。ここで、IDが1に等しい投稿をリクエストします。WordPressAPIは非常に広範囲にわたるため、便利です。 これは、Webサイトから任意のデータを取得し、それをエンドポイントに変換する機能に変換されます。 WordPressのほぼすべてのコア機能がサポートされており、今後のすべての機能もサポートされます。 このチュートリアルを書いている時点でサポートされているWordPressAPIのリストは次のとおりです。

テーマ開発者とプラグイン開発者は、アプリケーションのカスタムエンドポイントを作成できます。 利用可能なさまざまなエンドポイントをすべてチェックアウトする場合は、Postmanなどのアプリケーションをダウンロードできます。 これにより、APIを探索するために特別に作成されたGUIが提供されます。 さらに、プラグインに依存することなく、サードパーティのアプリに直接API呼び出しを行うことができます。

例を見てみましょう。 ファイルをアップロードし、その複数のバージョンを維持することは、最新のWebアプリケーションにとって不可欠な要件です。 これは、メディアファイルの場合に特に当てはまります。 WordPressには、これを実行できるプラグインが豊富に用意されています。 ただし、それらを使用するには、WordPressサーバーを呼び出す必要がある場合があります。

WP APIを使用すると、メディア処理ロジックをWordPressから抽象化できます。 すべてのサードパーティAPI呼び出しをフロントエンドから直接行うことができます。これは、関心の分離の点で優れています。 Cloudinaryなどのライブラリを使用して、画像やその他のメディアファイルをその場で操作し、クラウドにアップロードできます。 アップロードすると、画像のURLをWPバックエンドに保存できます。 オプションは無限であり、適切と思われる方法でピースを組み合わせることができます。

WordPressバックエンドをReactに接続する方法を見てみましょう。

React入門

Reactは、Web上でユーザーインターフェイスとインタラクティブアプリケーションを構築するための宣言型フロントエンドライブラリです。 Reactを使用すると、コンポーネントと呼ばれる再利用可能なコードの小さな独立した部分を作成できます。 Reactプロジェクトを作成して、最初のコンポーネントを作成しましょう。

Reactプロジェクトを作成する最も一般的な方法は、create-react-appを実行することです。 CRAは、Reactを学習するための快適な環境を提供し、初心者の場合は新しいシングルページアプリケーションの構築を開始するための最良の方法です。 ES6やwebpackなどの最新のJavaScript機能を使用できるように開発環境をセットアップします。 さらに、create-react-appは、優れた開発者エクスペリエンスを提供し、本番用にアプリを最適化します。

マシンにNode> = 8.xおよびnpm> = 5.2が必要です。 プロジェクトを作成するには、次のコマンドを実行します。


npx create-react-app wp-react-demo


上記のコマンドは、 wp-react-demoという名前のreactアプリケーションの定型テンプレートを作成します。


cd wp-react-demo
npm start


すべてがうまくいけば、http：// localhost：3000 /の開発サーバーで新しく作成されたアプリケーションを提供できるはずです。

create-react-appによって生成されたディレクトリ構造を知りたい場合は、次のようになります。

.
├── README.md
├── package.json
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
├── src
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── index.css
│ ├── index.js
│ ├── logo.svg
│ └── registerServiceWorker.js
└── yarn.lock


パブリックディレクトリには、アプリケーションの起動に必要なすべてのアセットが含まれています。 srcディレクトリには、作業するすべてのJavaScriptファイルが含まれており、そこで多くの時間を費やすことになります。

localhost：3000にアクセスすると、index.htmlファイルがロードされます。 public / index.htmlファイルを開くと、そこには何もありません。 しかし、この行は真ん中のどこかにあります。

<div id="root"></div>

これが、Reactがコンポーネントツリーをアプリケーションのルートにレンダリングする開始点です。

どういう意味ですか？ srcディレクトリに移動し、 index.jsを開きます。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

Reactは、ドキュメント内でIDが「root」の要素を見つけようとし、次にコンポーネントをルートに追加します。 実際には、Appコンポーネントがレンダリングされ、そこから回転するReactロゴが生まれます。 src /App.jsファイルを開くことで確認できます。

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
 render() {
   return (
     <div className="App">
       <header className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
         <h1 className="App-title">Welcome to React</h1>
       </header>
       <p className="App-intro">
         To get started, edit <code>src/App.js</code> and save to reload.
       </p>
     </div>
   );
 }
}

export default App;

これは基本的にコンポーネントがどのように見えるかです。 各コンポーネントは、UIの一部をレンダリングします。 あるコンポーネントを別のコンポーネントの内部で構成することができます。これにより、次のようなコンポーネントツリー構造を取得できます。

render（）内でHTMLを使用できる理由がわからない場合は、それがJSXの魔法です。 JSXはJavaScriptの構文拡張であり、JavaScriptファイルでプレーンHTMLを使用できます。 詳細については、公式ドキュメントをご覧ください。

すべてのHTMLコンテンツを削除してから、

<div>
<h2> WordPress Blog </h2>
</div>

constructor (props){
   super(props);

   this.state = {
     title: {},
     date: "",
     content: {}
   };
 }

componentDidMount() {
       return fetch(`http://wordpress.com/wp-json/wp/v2/posts/`)
       .then((response) => response.json())
       .then((responseJson) => {
        // Update state here         
       })
       .catch((error) => {
         console.error(error);
       });         
 }

const { title, date, content } =  responseJson;

        this.setState({ title, date, content });

render() {
   return (
     <div>
     {this.state.title.rendered}
     </div>
   );
 }
}

<div
    className= "content"
    dangerouslySetInnerHTML={{ __html: this.state.content.rendered }}>
</div>

render() {
   return (
     <div>
       <div>
             <div className="row">
               <div className="leftcolumn">
                 <div className="card">
                   <div className= "title">
                     <h1>{this.state.title.rendered}</h1>
                     <p> {this.state.date} </p>
                   </div>
                
                   <div
                     className= "content"
                     dangerouslySetInnerHTML={{ __html: this.state.content.rendered }} />
                 </div>
               </div>
             </div>
           </div>
     </div>
   );
 }
}

import './App.css';