React Nativeモバイルエディター - React NativeベースのモバイルGutenbergの始め方（Getting Started for the React Native based Mobile Gutenberg）

前提条件
プロジェクトのクローン
セットアップ
実行
Visual Studio Codeでの開発
ユニットテスト
ユニットテストの作成と実行
エンドツーエンドテスト

前提条件

開発者がプロジェクトのメンテナが現在持っている体験に近づけるために、以下のツールがインストールされていることを確認してください：

git
nvm
Node.js と npm（nvmを使用してインストールしてください）
アプリのAndroidバージョンをコンパイルするための Android Studio
アプリのiOSバージョンをコンパイルするための Xcode
Reactおよびサードパーティの依存関係を取得するために必要な CocoaPods (sudo gem install cocoapods)。

メンテナが使用しているOSプラットフォームはmacOSですが、ツールとセットアップは他のプラットフォームでも使用可能であるべきです。

プロジェクトのクローン

git clone https://github.com/WordPress/gutenberg.git

セットアップ

ここで説明されているコマンドは、クローンしたプロジェクトのトップレベルディレクトリで実行する必要があります。デモアプリを実行する前に、プロジェクトの依存関係をダウンロードしてインストールする必要があります。これは次のコマンドで行います：

nvm install
npm ci
npm run native preios

実行

npm run native start:reset

開発モードでパッケージャー（Metro）を実行します。パッケージャーは、要求するクライアントにアプリバンドルを提供するために実行され続けます。

パッケージャーが実行中の状態で、別のターミナルウィンドウを開き、次のコマンドを使用してAndroidアプリをコンパイルして実行します：

npm run native android

アプリは、接続されたデバイスまたは実行中のエミュレーターで開き、実行中のパッケージャーからJavaScriptコードを取得するはずです。

デフォルトのシミュレーターデバイスを使用してアプリのiOSバリアントをコンパイルして実行するには、次を使用します：

npm run native ios

これにより、Mac上でiOSシミュレーターがインストールされている場合、アプリがiOSシミュレーターで開こうとします。

他のiOSデバイスシミュレーターでの実行

異なるデバイスシミュレーターを使用してアプリをコンパイルして実行するには、次のようにします。--のオプションをreact-native CLIに渡すために、二重の--を使用することに注意してください。

npm run native ios -- -- --simulator="DEVICE_NAME"

たとえば、iPhone Xs Maxで実行したい場合は、次を試してください：

npm run native ios -- -- --simulator="iPhone Xs Max"

利用可能なすべてのiOSデバイスのリストを表示するには、xcrun simctl list devicesを使用します。

デモエディタのカスタマイズ

デフォルトでは、デモエディタはサポートされているほとんどのコアブロックをレンダリングします。これはエディタの機能を示すのに役立ちますが、特定のブロックや機能に集中する際には気が散ることがあります。native.block_editor_propsフックを利用して、packages/react-native-editor/src/setup-local.jsファイルでエディタの初期状態をカスタマイズできます。

例 setup-local.js

/**
 * WordPress dependencies
 */
import { addFilter } from '@wordpress/hooks';
export default () => {
   addFilter(
   'native.block_editor_props',
   'core/react-native-editor',
   ( props ) => {
   return {
   ...props,
   initialHtml,
   };
   }
   );
};
const initialHtml = `
<!-- wp:heading -->
<h2 class="wp-block-heading">Just a Heading</h2>
<!-- /wp:heading -->

トラブルシューティング

Androidエミュレーターが正しく起動しない場合や、Could not initialize class org.codehaus.groovy.runtime.InvokerHelperや類似のものでコンパイルが失敗する場合は、React Nativeのドキュメントの最新の要件に対して開発環境のセットアップを再確認することが役立つかもしれません。たとえば、Android Studioを使用する場合、ANDROID_HOME環境変数を設定し、JDKのバージョンが最新の要件に一致していることを確認する必要があります。

時々、特にpackage.json、Babel設定（.babelrc）やJest設定（jest.config.js）の何かを調整しているとき、変更が期待通りに反映されないことがあります。その場合、metro bunderプロセスを停止し、npm run native start:resetで再起動する必要があるかもしれません。他の時には、NPMパッケージを最初から再インストールしたい場合があり、npm run native clean:installスクリプトが便利です。

Visual Studio Codeでの開発

gutenberg-mobileの開発にVisual Studio Codeを使用する必要はありませんが、推奨されるIDEであり、いくつかの設定があります。

プロジェクトをVisual Studioで最初に開くと、いくつかの推奨拡張機能をインストールするように求められます。これにより、型チェックやデバッグなどのいくつかのことが助けられます。

私たちが使用している拡張機能の1つは、React Native Toolsです。これにより、VSCodeからパッケージャーを実行したり、iOSまたはAndroidでアプリケーションを起動したりできます。また、VSCodeから直接アプリケーションをデバッグするためのブレークポイントを設定できるように、いくつかのデバッグ設定が追加されます。詳細については、拡張機能のドキュメントを参照してください。

ユニットテスト

テストスイートを実行するには、次のコマンドを使用します：

npm run test:native

これにより、jestテストランナーがテストで実行されます。テストはデスクトップ上でNode.jsに対して実行されます。

デバッガーサポートでテストを実行するには、次のCLIコマンドで開始します：

npm run test:native:debug

その後、Chromeでchrome://inspectを開いてデバッガーを接続します（「リモートターゲット」セクションを参照）。テスト/開発中は、デバッガーがブレークするようにコードの任意の場所にdebuggerステートメントを自由に散りばめてください。

ユニットテストの作成と実行

このプロジェクトは、テストにjestを使用するように設定されています。お好きなテスト戦略を設定できますが、jestはすぐに使えます。testsというディレクトリまたは.test.js拡張子を持つテストファイルを作成すると、jestによってファイルが読み込まれます。テストの例はこちらをご覧ください。jestのドキュメントも素晴らしいリソースであり、React Nativeのテストチュートリアルも役立ちます。

エンドツーエンドテスト

ユニットテストに加えて、Mobile Gutenberg (MG)プロジェクトは、エンドユーザーに似た環境で重要なフローのテストを自動化するためにエンドツーエンド（E2E）テストに依存しています。私たちは一般的に速度とメンテナンスの容易さからユニットテストを好みます。しかし、OSレベルの機能（例：複雑なジェスチャー、テキスト選択）や視覚的回帰テスト（例：ダークモード、コントラストレベル）を必要とするアサーションにはE2Eテストを使用します。

E2Eテストは、packages/react-native-editor/__device-testsディレクトリにあります。これらのテストを実行し、貢献するための追加のドキュメントは、テストディレクトリにあります。