フィーチャーフラグ（Feature Flags）

globalThis.IS_GUTENBERG_PLUGINの紹介

プラグイン用にコードベースがビルドされると、この変数は`````true`````に設定されます。WordPressコア用にビルドする場合は、`````false`````または`````undefined`````に設定されます。  
 <a name="basic-usage"></a>
## 基本的な使用法
<a name="exporting-features"></a>
### 機能のエクスポート
プラグイン専用の関数または定数は、次の三項構文を使用してエクスポートする必要があります：  
``````bash
function myPluginOnlyFeature() {
   // implementation
}
export const pluginOnlyFeature = globalThis.IS_GUTENBERG_PLUGIN
   ? myPluginOnlyFeature
   : undefined;
`

上記の例では、pluginOnlyFeatureエクスポートは、WordPressコアなどの非プラグイン環境ではundefinedになります。

機能のインポート

プラグイン専用の機能をインポートして呼び出そうとしている場合は、エラーを回避するために関数呼び出しをifステートメントでラップすることを確認してください：

import { pluginOnlyFeature } from '@wordpress/foo';
if ( globalThis.IS_GUTENBERG_PLUGIN ) {
   pluginOnlyFeature();
}

動作の仕組み

webpackビルド中に、globalThis.IS_GUTENBERG_PLUGINのインスタンスはwebpackのdefine pluginを使用して置き換えられます。

例えば、次のコードでは –

if ( globalThis.IS_GUTENBERG_PLUGIN ) {
   pluginOnlyFeature();
}

– 変数globalThis.IS_GUTENBERG_PLUGINはプラグイン専用ビルド中にブール値trueに置き換えられます：

if ( true ) {
   // Wepack has replaced `globalThis.IS_GUTENBERG_PLUGIN` with `true`
   pluginOnlyFeature();
}

これにより、ifステートメントの本体内のコードが常に実行されることが保証されます。

WordPressコアでは、globalThis.IS_GUTENBERG_PLUGIN変数はundefinedに置き換えられます。ビルドされたコードは次のようになります：

if ( undefined ) {
   // Webpack has replaced `globalThis.IS_GUTENBERG_PLUGIN` with `undefined`
   pluginOnlyFeature();
}

 <a name="dead-code-elimination"></a>
### デッドコードの排除
本番ビルドでは、webpackはコードを[‘minifies’](https://en.wikipedia.org/wiki/Minification_(programming)し、できるだけ多くの不要なJavaScriptを削除します。  
そのステップの1つは、「デッドコードの排除」として知られるものを含みます。例えば、次のコードが遭遇した場合、webpackは周囲の`````if`````ステートメントが不要であると判断します：  
``````bash
if ( true ) {
   pluginOnlyFeature();
}
`

条件は常にtrueに評価されるため、webpackはそれを削除し、本体にあったコードを残します：

pluginOnlyFeature(); // The `if` condition block has been removed. Only the body remains.

同様に、WordPressコア用にビルドする際、次のifステートメントの条件は常にfalseに解決されます：

if ( undefined ) {
   pluginOnlyFeature();
}

この場合、ミニファイプロセスはifステートメント全体を本体を含めて削除し、プラグイン専用コードがWordPressコアビルドに含まれないようにします。

よくある質問

なぜIS_GUTENBERG_PLUGINを含む式の結果を変数に割り当てるべきではないのか、例えばconst isMyFeatureActive = ! Object.is( undefined, globalThis.IS_GUTENBERG_PLUGIN )?

複雑さを導入すると、webpackのミニファイアがデッドコードを特定し、したがって排除するのを妨げる可能性があります。したがって、機能フラグが意図した通りに機能することを確認するために、このドキュメントの例を使用することをお勧めします。詳細については、デッドコードの排除セクションを参照してください。