メインコンテンツにスキップ

パブリックフォルダの使い方

注記: この機能はreact-scripts@0.5.0以降で使用できます。

HTMLの変更​

publicフォルダにはHTMLファイルが含まれているため、例えばページタイトルを設定するなど、調整することができます。コンパイルされたコードを含む<script>タグは、ビルドプロセス中に自動的に追加されます。

モジュールシステム外の資産の追加​

publicフォルダに他のアセットを追加することもできます。

通常は、JavaScriptファイルでアセットをimportすることをお勧めします。たとえば、スタイルシートの追加と画像とフォントの追加に関するセクションを参照してください。このメカニズムには、多くの利点があります。

  • スクリプトとスタイルシートは、余分なネットワークリクエストを回避するために、縮小化され、まとめてバンドルされます。
  • ファイルが見つからない場合、ユーザーに404エラーが発生する代わりに、コンパイルエラーが発生します。
  • 結果のファイル名にはコンテンツハッシュが含まれているため、ブラウザが古いバージョンをキャッシュすることについて心配する必要はありません。

ただし、モジュールシステムの外部にアセットを追加するために使用できるエスケープハッチがあります。

ファイルをpublicフォルダに配置すると、webpackによって処理され**ません**。代わりに、ビルドフォルダにそのままコピーされます。 publicフォルダ内のアセットを参照するには、PUBLIC_URLと呼ばれる環境変数を使用する必要があります。

index.html内では、次のように使用できます。

<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />

%PUBLIC_URL%プレフィックスでアクセスできるのは、publicフォルダ内のファイルのみです。 srcまたはnode_modulesのファイルを使用する必要がある場合は、このファイルをビルドの一部にする意図を明示的に指定するために、そこにコピーする必要があります。

npm run buildを実行すると、Create React Appは%PUBLIC_URL%を正しい絶対パスに置き換えるため、クライアントサイドルーティングを使用したり、ルート以外のURLでホストしたりする場合でも、プロジェクトは正常に動作します。

JavaScriptコードでは、同様の目的でprocess.env.PUBLIC_URLを使用できます。

render() {
  // Note: this is an escape hatch and should be used sparingly!
  // Normally we recommend using `import` for getting asset URLs
  // as described in “Adding Images and Fonts” above this section.
  return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;
}

このアプローチの欠点を覚えておいてください。

  • publicフォルダ内のファイルは、ポストプロセスや縮小化されません。
  • 見つからないファイルはコンパイル時に呼び出されず、ユーザーに404エラーが発生します。
  • 結果のファイル名にはコンテンツハッシュが含まれないため、変更されるたびにクエリ引数を追加するか、名前を変更する必要があります。

publicフォルダを使用する場合​

通常、スタイルシート、画像、フォントをJavaScriptからインポートすることをお勧めします。 publicフォルダは、あまり一般的ではないケースの回避策として役立ちます。

  • ビルド出力に特定の名前のファイル（manifest.webmanifestなど）が必要な場合。
  • 何千もの画像があり、それらのパスを動的に参照する必要がある場合。
  • pace.jsのような小さなスクリプトをバンドルされたコードの外に含めたい場合。
  • 一部のライブラリはwebpackと互換性がない可能性があり、<script>タグとして含める以外に選択肢がない場合。

グローバル変数を宣言する<script>を追加する場合は、次のセクションのグローバル変数の使用に関するトピックを読んで、それらを参照する方法を確認してください。