ウェブで Cloud Storage 参照を作成する
コレクションでコンテンツを整理
必要に応じて、コンテンツの保存と分類を行います。
ファイルは Cloud Storage バケットに保存されます。このバケット内のファイルは、ローカル ハードディスク上のファイル システムや Firebase Realtime Database 内のデータと同様の階層構造で表されます。アプリからファイルにアクセスするには、そのファイルへの参照を作成します。作成した参照を使うと、データのアップロードやダウンロード、メタデータの取得や更新、ファイルの削除などを行うことができます。参照は特定のファイルまたは階層内の上位ノードをポイントします。
Firebase Realtime Database を使用したことがある場合は、これらのパスになじみがあると思います。ファイルデータの格納場所は Realtime Database ではなく Cloud Storage になります。
参照を作成する
ファイルをアップロード、ダウンロード、または削除したり、メタデータを取得または更新したりするには、操作を行うファイルへの参照を作成する必要があります。参照はクラウド内のファイルへのポインタと考えることができます。参照は軽量なので、必要な数をいくつでも作成でき、複数の操作で再利用することもできます。
参照を作成するには、getStorage()
を使用して Storage サービスのインスタンスを取得します。次に、このサービスを引数に指定して ref()
を呼び出します。この参照は、Cloud Storage バケットのルートをポイントします。
Web
import { getStorage, ref } from "firebase/storage";
// Get a reference to the storage service, which is used to create references in your storage bucket
const storage = getStorage();
// Create a storage reference from our storage service
const storageRef = ref(storage);
Web
// Get a reference to the storage service, which is used to create references in your storage bucket
var storage = firebase.storage();
// Create a storage reference from our storage service
var storageRef = storage.ref();
ツリーの下位(例: 'images/space.jpg'
)への参照を作成できます。これを行うには、ref()
を呼び出すときに、このパスを 2 番目の引数として渡します。
Web
import { getStorage, ref } from "firebase/storage";
const storage = getStorage();
// Create a child reference
const imagesRef = ref(storage, 'images');
// imagesRef now points to 'images'
// Child references can also take paths delimited by '/'
const spaceRef = ref(storage, 'images/space.jpg');
// spaceRef now points to "images/space.jpg"
// imagesRef still points to "images"
Web
// Create a child reference
var imagesRef = storageRef.child('images');
// imagesRef now points to 'images'
// Child references can also take paths delimited by '/'
var spaceRef = storageRef.child('images/space.jpg');
// spaceRef now points to "images/space.jpg"
// imagesRef still points to "images"
参照を使って階層内を移動する
parent
プロパティと root
プロパティを使用して、ファイル階層を上に移動することもできます。parent
は 1 つ上のレベルに移動し、root
は最上位に移動します。
Web
import { getStorage, ref } from "firebase/storage";
const storage = getStorage();
const spaceRef = ref(storage, 'images/space.jpg');
// Parent allows us to move to the parent of a reference
const imagesRef = spaceRef.parent;
// imagesRef now points to 'images'
// Root allows us to move all the way back to the top of our bucket
const rootRef = spaceRef.root;
// rootRef now points to the root
Web
// Parent allows us to move to the parent of a reference
var imagesRef = spaceRef.parent;
// imagesRef now points to 'images'
// Root allows us to move all the way back to the top of our bucket
var rootRef = spaceRef.root;
// rootRef now points to the root
child()
、parent
、root
を複数つなげて参照を返すことができます。例外は root
の parent
で、これは null
になります。
Web
import { getStorage, ref } from "firebase/storage";
const storage = getStorage();
const spaceRef = ref(storage, 'images/space.jpg');
// References can be chained together multiple times
const earthRef = ref(spaceRef.parent, 'earth.jpg');
// earthRef points to 'images/earth.jpg'
// nullRef is null, since the parent of root is null
const nullRef = spaceRef.root.parent;
Web
// References can be chained together multiple times
var earthRef = spaceRef.parent.child('earth.jpg');
// earthRef points to 'images/earth.jpg'
// nullRef is null, since the parent of root is null
var nullRef = spaceRef.root.parent;
参照のプロパティ
fullPath
、name
、bucket
プロパティを使用して参照を調べ、参照がポイントしているファイルの詳細を知ることができます。これらのプロパティは、ファイルの完全なパス、ファイル名、ファイルが格納されているバケットを取得します。
Web
import { getStorage, ref } from "firebase/storage";
const storage = getStorage();
const spaceRef = ref(storage, 'images/space.jpg');
// Reference's path is: 'images/space.jpg'
// This is analogous to a file path on disk
spaceRef.fullPath;
// Reference's name is the last segment of the full path: 'space.jpg'
// This is analogous to the file name
spaceRef.name;
// Reference's bucket is the name of the storage bucket where files are stored
spaceRef.bucket;
Web
// Reference's path is: 'images/space.jpg'
// This is analogous to a file path on disk
spaceRef.fullPath;
// Reference's name is the last segment of the full path: 'space.jpg'
// This is analogous to the file name
spaceRef.name;
// Reference's bucket is the name of the storage bucket where files are stored
spaceRef.bucket;
参照の制約事項
参照のパスと名前には、有効な Unicode 文字を任意の順序で含めることができますが、次のような一定の制約があります。
- UTF-8 でエンコードする場合、
reference.fullPath
の全体の長さを 1~1,024 バイトにする必要があります。
- 改行またはラインフィード文字は使用できません。
#
、[
、]
、*
、?
は使用しないでください。これらの文字は、Firebase Realtime Database や gsutil などの他のツールではうまく機能しません。
例
Web
import { getStorage, ref } from "firebase/storage";
const storage = getStorage();
// Points to the root reference
const storageRef = ref(storage);
// Points to 'images'
const imagesRef = ref(storageRef, 'images');
// Points to 'images/space.jpg'
// Note that you can use variables to create child values
const fileName = 'space.jpg';
const spaceRef = ref(imagesRef, fileName);
// File path is 'images/space.jpg'
const path = spaceRef.fullPath;
// File name is 'space.jpg'
const name = spaceRef.name;
// Points to 'images'
const imagesRefAgain = spaceRef.parent;
Web
// Points to the root reference
var storageRef = firebase.storage().ref();
// Points to 'images'
var imagesRef = storageRef.child('images');
// Points to 'images/space.jpg'
// Note that you can use variables to create child values
var fileName = 'space.jpg';
var spaceRef = imagesRef.child(fileName);
// File path is 'images/space.jpg'
var path = spaceRef.fullPath;
// File name is 'space.jpg'
var name = spaceRef.name;
// Points to 'images'
var imagesRef = spaceRef.parent;
次に、Cloud Storage にファイルをアップロードする方法を学習しましょう。
特に記載のない限り、このページのコンテンツはクリエイティブ・コモンズの表示 4.0 ライセンスにより使用許諾されます。コードサンプルは Apache 2.0 ライセンスにより使用許諾されます。詳しくは、Google Developers サイトのポリシーをご覧ください。Java は Oracle および関連会社の登録商標です。
最終更新日 2025-08-27 UTC。
[null,null,["最終更新日 2025-08-27 UTC。"],[],[],null,["\u003cbr /\u003e\n\nYour files are stored in a\n[Cloud Storage](//cloud.google.com/storage) bucket. The\nfiles in this bucket are presented in a hierarchical structure, just like the\nfile system on your local hard disk, or the data in the Firebase Realtime Database.\nBy creating a reference to a file, your app gains access to it. These references\ncan then be used to upload or download data, get or update metadata or delete\nthe file. A reference can either point to a specific file or to a higher level\nnode in the hierarchy.\n\nIf you've used the [Firebase Realtime Database](/docs/database), these paths should\nseem very familiar to you. However, your file data is stored in\nCloud Storage, **not** in the Realtime Database.\n\nCreate a Reference\n\nIn order to upload or download files, delete files, or get or update metadata,\nyou must create a reference to the file you want to operate on. A reference\ncan be thought of as a pointer to a file in the cloud. References are\nlightweight, so you can create as many as you need, and they are also reusable for\nmultiple operations.\n\nTo create a reference, get an instance of the Storage service using\n`getStorage()` then call `ref()` with the service as an argument.\nThis reference points to the root of your Cloud Storage bucket. \n\nWeb \n\n```javascript\nimport { getStorage, ref } from \"firebase/storage\";\n\n// Get a reference to the storage service, which is used to create references in your storage bucket\nconst storage = getStorage();\n\n// Create a storage reference from our storage service\nconst storageRef = ref(storage);https://github.com/firebase/snippets-web/blob/467eaa165dcbd9b3ab15711e76fa52237ba37f8b/snippets/storage-next/create-reference/storage_create_ref.js#L8-L14\n```\n\nWeb \n\n```javascript\n// Get a reference to the storage service, which is used to create references in your storage bucket\nvar storage = firebase.storage();\n\n// Create a storage reference from our storage service\nvar storageRef = storage.ref();https://github.com/firebase/snippets-web/blob/467eaa165dcbd9b3ab15711e76fa52237ba37f8b/storage/create-reference.js#L6-L10\n```\n\nYou can create a reference to a location lower in the tree,\nsay `'images/space.jpg'` by passing in this path as a second argument when\ncalling `ref()`. \n\nWeb \n\n```javascript\nimport { getStorage, ref } from \"firebase/storage\";\n\nconst storage = getStorage();\n\n// Create a child reference\nconst imagesRef = ref(storage, 'images');\n// imagesRef now points to 'images'\n\n// Child references can also take paths delimited by '/'\nconst spaceRef = ref(storage, 'images/space.jpg');\n// spaceRef now points to \"images/space.jpg\"\n// imagesRef still points to \"images\" \nhttps://github.com/firebase/snippets-web/blob/467eaa165dcbd9b3ab15711e76fa52237ba37f8b/snippets/storage-next/create-reference/storage_create_ref_child.js#L8-L19\n```\n\nWeb \n\n```javascript\n// Create a child reference\nvar imagesRef = storageRef.child('images');\n// imagesRef now points to 'images'\n\n// Child references can also take paths delimited by '/'\nvar spaceRef = storageRef.child('images/space.jpg');\n// spaceRef now points to \"images/space.jpg\"\n// imagesRef still points to \"images\" \nhttps://github.com/firebase/snippets-web/blob/467eaa165dcbd9b3ab15711e76fa52237ba37f8b/storage/create-reference.js#L18-L25\n```\n\nNavigate with References\n\nYou can also use the `parent` and `root` properties to navigate up the\nfile hierarchy. `parent` navigates up one level,\nwhile `root` navigates all the way to the top. \n\nWeb \n\n```javascript\nimport { getStorage, ref } from \"firebase/storage\";\n\nconst storage = getStorage();\nconst spaceRef = ref(storage, 'images/space.jpg');\n\n// Parent allows us to move to the parent of a reference\nconst imagesRef = spaceRef.parent;\n// imagesRef now points to 'images'\n\n// Root allows us to move all the way back to the top of our bucket\nconst rootRef = spaceRef.root;\n// rootRef now points to the root \nhttps://github.com/firebase/snippets-web/blob/467eaa165dcbd9b3ab15711e76fa52237ba37f8b/snippets/storage-next/create-reference/storage_navigate_ref.js#L8-L19\n```\n\nWeb \n\n```javascript\n// Parent allows us to move to the parent of a reference\nvar imagesRef = spaceRef.parent;\n// imagesRef now points to 'images'\n\n// Root allows us to move all the way back to the top of our bucket\nvar rootRef = spaceRef.root;\n// rootRef now points to the root \nhttps://github.com/firebase/snippets-web/blob/467eaa165dcbd9b3ab15711e76fa52237ba37f8b/storage/create-reference.js#L33-L39\n```\n\n`child()`, `parent`, and `root` can be chained together multiple times, as\neach returns a reference. The exception is the `parent` of `root`, which\nis `null`. \n\nWeb \n\n```javascript\nimport { getStorage, ref } from \"firebase/storage\";\n\nconst storage = getStorage();\nconst spaceRef = ref(storage, 'images/space.jpg');\n\n// References can be chained together multiple times\nconst earthRef = ref(spaceRef.parent, 'earth.jpg');\n// earthRef points to 'images/earth.jpg'\n\n// nullRef is null, since the parent of root is null\nconst nullRef = spaceRef.root.parent;https://github.com/firebase/snippets-web/blob/467eaa165dcbd9b3ab15711e76fa52237ba37f8b/snippets/storage-next/create-reference/storage_navigate_ref_chain.js#L8-L18\n```\n\nWeb \n\n```javascript\n// References can be chained together multiple times\nvar earthRef = spaceRef.parent.child('earth.jpg');\n// earthRef points to 'images/earth.jpg'\n\n// nullRef is null, since the parent of root is null\nvar nullRef = spaceRef.root.parent;https://github.com/firebase/snippets-web/blob/467eaa165dcbd9b3ab15711e76fa52237ba37f8b/storage/create-reference.js#L47-L52\n```\n\nReference Properties\n\nYou can inspect references to better understand the files they point to\nusing the `fullPath`, `name`, and `bucket` properties. These properties\nget the full path of the file, the name of the file,\nand the bucket the file is stored in. \n\nWeb \n\n```javascript\nimport { getStorage, ref } from \"firebase/storage\";\n\nconst storage = getStorage();\nconst spaceRef = ref(storage, 'images/space.jpg');\n\n// Reference's path is: 'images/space.jpg'\n// This is analogous to a file path on disk\nspaceRef.fullPath;\n\n// Reference's name is the last segment of the full path: 'space.jpg'\n// This is analogous to the file name\nspaceRef.name;\n\n// Reference's bucket is the name of the storage bucket where files are stored\nspaceRef.bucket;https://github.com/firebase/snippets-web/blob/467eaa165dcbd9b3ab15711e76fa52237ba37f8b/snippets/storage-next/create-reference/storage_ref_properties.js#L8-L22\n```\n\nWeb \n\n```javascript\n// Reference's path is: 'images/space.jpg'\n// This is analogous to a file path on disk\nspaceRef.fullPath;\n\n// Reference's name is the last segment of the full path: 'space.jpg'\n// This is analogous to the file name\nspaceRef.name;\n\n// Reference's bucket is the name of the storage bucket where files are stored\nspaceRef.bucket;https://github.com/firebase/snippets-web/blob/467eaa165dcbd9b3ab15711e76fa52237ba37f8b/storage/create-reference.js#L60-L69\n```\n\nLimitations on References\n\nReference paths and names can contain any sequence of valid Unicode characters,\nbut certain restrictions are imposed including:\n\n1. Total length of `reference.fullPath` must be between 1 and 1024 bytes when UTF-8 encoded.\n2. No Carriage Return or Line Feed characters.\n3. Avoid using `#`, `[`, `]`, `*`, or `?`, as these do not work well with other tools such as the [Firebase Realtime Database](/docs/database) or [gsutil](https://cloud.google.com/storage/docs/gsutil).\n\nFull Example \n\nWeb \n\n```javascript\nimport { getStorage, ref } from \"firebase/storage\";\n\nconst storage = getStorage();\n\n// Points to the root reference\nconst storageRef = ref(storage);\n\n// Points to 'images'\nconst imagesRef = ref(storageRef, 'images');\n\n// Points to 'images/space.jpg'\n// Note that you can use variables to create child values\nconst fileName = 'space.jpg';\nconst spaceRef = ref(imagesRef, fileName);\n\n// File path is 'images/space.jpg'\nconst path = spaceRef.fullPath;\n\n// File name is 'space.jpg'\nconst name = spaceRef.name;\n\n// Points to 'images'\nconst imagesRefAgain = spaceRef.parent;https://github.com/firebase/snippets-web/blob/467eaa165dcbd9b3ab15711e76fa52237ba37f8b/snippets/storage-next/create-reference/storage_ref_full_example.js#L8-L30\n```\n\nWeb \n\n```javascript\n// Points to the root reference\nvar storageRef = firebase.storage().ref();\n\n// Points to 'images'\nvar imagesRef = storageRef.child('images');\n\n// Points to 'images/space.jpg'\n// Note that you can use variables to create child values\nvar fileName = 'space.jpg';\nvar spaceRef = imagesRef.child(fileName);\n\n// File path is 'images/space.jpg'\nvar path = spaceRef.fullPath;\n\n// File name is 'space.jpg'\nvar name = spaceRef.name;\n\n// Points to 'images'\nvar imagesRef = spaceRef.parent;https://github.com/firebase/snippets-web/blob/467eaa165dcbd9b3ab15711e76fa52237ba37f8b/storage/create-reference.js#L75-L93\n```\n\nNext, let's learn how to\n[upload files](/docs/storage/web/upload-files) to\nCloud Storage."]]