クイック スタート:JavaScript 用 Azure Blob Storage クライアント ライブラリ v12Quickstart: Azure Blob storage client library v12 for JavaScript

JavaScript 用 Azure Blob Storage クライアント ライブラリ v12 を使用してみましょう。Get started with the Azure Blob storage client library v12 for JavaScript. Azure Blob Storage は、Microsoft のクラウド用オブジェクト ストレージ ソリューションです。Azure Blob storage is Microsoft's object storage solution for the cloud. 手順に従ってパッケージをインストールし、基本タスクのコード例を試してみましょう。Follow steps to install the package and try out example code for basic tasks. Blob Storage は、テキスト データやバイナリ データなどの大量の非構造化データを格納するために最適化されています。Blob storage is optimized for storing massive amounts of unstructured data.

注意

以前の SDK バージョンを使ってみるには、「クイックスタート: JavaScript 用 Azure Blob Storage クライアント ライブラリ」を参照してください。To get started with the previous SDK version, see Quickstart: Azure Blob storage client library for JavaScript.

JavaScript 用 Azure Blob Storage クライアント ライブラリ v12 を使用すると、以下のことができます。Use the Azure Blob storage client library v12 for JavaScript to:

  • コンテナーを作成するCreate a container
  • Azure Storage へ BLOB をアップロードするUpload a blob to Azure Storage
  • コンテナー内のすべての BLOB を一覧表示するList all of the blobs in a container
  • ローカル コンピューターに BLOB をダウンロードするDownload the blob to your local computer
  • コンテナーを削除するDelete a container

API のリファレンスのドキュメント | ライブラリのソース コード | パッケージ (Node Package Manager) | サンプルAPI reference documentation | Library source code | Package (Node Package Manager) | Samples

注意

この記事で説明されている機能は、階層構造の名前空間を持つアカウントで使用できるようになりました。The features described in this article are now available to accounts that have a hierarchical namespace. 制限を確認するには、Azure Data Lake Storage Gen2 に関する既知の問題 の記事を参照してください。To review limitations, see the Known issues with Azure Data Lake Storage Gen2 article.

前提条件Prerequisites

設定Setting up

このセクションでは、JavaScript 用 Azure Blob Storage クライアント ライブラリ v12 を操作するためのプロジェクトの準備について説明します。This section walks you through preparing a project to work with the Azure Blob storage client library v12 for JavaScript.

プロジェクトを作成するCreate the project

blob-quickstart-v12 という名前の JavaScript アプリケーションを作成します。Create a JavaScript application named blob-quickstart-v12.

  1. コンソール ウィンドウ (cmd、PowerShell、Bash など) で、プロジェクト用に新しいディレクトリを作成します。In a console window (such as cmd, PowerShell, or Bash), create a new directory for the project.

    mkdir blob-quickstart-v12
    
  2. 新しく作成された blob-quickstart-v12 ディレクトリに切り替えます。Switch to the newly created blob-quickstart-v12 directory.

    cd blob-quickstart-v12
    
  3. package.json という名前の新しいテキスト ファイルを作成します。Create a new text file called package.json. このファイルには、Node.js プロジェクトが定義されます。This file defines the Node.js project. このファイルを blob-quickstart-v12 ディレクトリに保存します。Save this file in the blob-quickstart-v12 directory. ファイルのコンテンツを次に示します。Here is the contents of the file:

    {
        "name": "blob-quickstart-v12",
        "version": "1.0.0",
        "description": "Use the @azure/storage-blob SDK version 12 to interact with Azure Blob storage",
        "main": "blob-quickstart-v12.js",
        "scripts": {
            "start": "node blob-quickstart-v12.js"
        },
        "author": "Your Name",
        "license": "MIT",
        "dependencies": {
            "@azure/storage-blob": "^12.0.0",
            "@types/dotenv": "^4.0.3",
            "dotenv": "^6.0.0"
        }
    }
    

    必要に応じて、author フィールドにご自身の名前を入力できます。You can put your own name in for the author field, if you'd like.

パッケージをインストールするInstall the package

まだ blob-quickstart-v12 ディレクトリにいる間に、npm install コマンドを使用して、JavaScript パッケージ用 Azure Blob Storage クライアント ライブラリをインストールします。While still in the blob-quickstart-v12 directory, install the Azure Blob storage client library for JavaScript package by using the npm install command. このコマンドでは、package.json ファイルを読み取り、JavaScript パッケージ用 Azure Blob Storage クライアント ライブラリ v12 と、依存しているすべてのライブラリをインストールします。This command reads the package.json file and installs the Azure Blob storage client library v12 for JavaScript package and all the libraries on which it depends.

npm install

アプリのフレームワークを設定するSet up the app framework

プロジェクト ディレクトリで次の操作を行います。From the project directory:

  1. コード エディターで別の新しいテキスト ファイルを開くOpen another new text file in your code editor

  2. require の呼び出しを追加して Azure および Node.js モジュールを読み込むAdd require calls to load Azure and Node.js modules

  3. 極めて基本的な例外処理を含め、プログラムの構造を作成しますCreate the structure for the program, including very basic exception handling

    コードは次のとおりです。Here's the code:

    const { BlobServiceClient } = require('@azure/storage-blob');
    const uuidv1 = require('uuid/v1');
    
    async function main() {
        console.log('Azure Blob storage v12 - JavaScript quickstart sample');
        // Quick start code goes here
    }
    
    main().then(() => console.log('Done')).catch((ex) => console.log(ex.message));
    
  4. blob-quickstart-v12 ディレクトリに新しいファイルを blob-quickstart-v12.js として保存します。Save the new file as blob-quickstart-v12.js in the blob-quickstart-v12 directory.

Azure Portal で資格情報をコピーするCopy your credentials from the Azure portal

サンプル アプリケーションから Azure Storage に対して要求を実行するときは、承認されている必要があります。When the sample application makes a request to Azure Storage, it must be authorized. 要求を承認するには、ストレージ アカウントの資格情報を接続文字列としてアプリケーションに追加します。To authorize a request, add your storage account credentials to the application as a connection string. 次の手順に従って、ストレージ アカウントの資格情報を表示します。View your storage account credentials by following these steps:

  1. Azure portal にサインインするSign in to the Azure portal.

  2. 自分のストレージ アカウントを探します。Locate your storage account.

  3. ストレージ アカウントの概要の [設定] セクションで、 [アクセス キー] を選択します。In the Settings section of the storage account overview, select Access keys. ここでは、アカウント アクセス キーと各キーの完全な接続文字列を表示できます。Here, you can view your account access keys and the complete connection string for each key.

  4. [Key1][接続文字列] の値を見つけ、 [コピー] ボタンを選択して接続文字列をコピーします。Find the Connection string value under key1, and select the Copy button to copy the connection string. すぐ後の手順で、接続文字列の値を環境変数に追加します。You will add the connection string value to an environment variable in the next step.

    Azure portal から接続文字列をコピーする方法を示すスクリーンショット

ストレージ接続文字列の構成Configure your storage connection string

接続文字列をコピーした後、アプリケーションを実行しているローカル マシンの新しい環境変数にそれを書き込みます。After you have copied your connection string, write it to a new environment variable on the local machine running the application. 環境変数を設定するには、コンソール ウィンドウを開いて、お使いのオペレーティング システムの手順に従います。To set the environment variable, open a console window, and follow the instructions for your operating system. <yourconnectionstring> は、実際の接続文字列に置き換えてください。Replace <yourconnectionstring> with your actual connection string.

WindowsWindows

setx AZURE_STORAGE_CONNECTION_STRING "<yourconnectionstring>"

Windows で環境変数を追加した後、コマンド ウィンドウの新しいインスタンスを開始する必要があります。After you add the environment variable in Windows, you must start a new instance of the command window.

LinuxLinux

export AZURE_STORAGE_CONNECTION_STRING="<yourconnectionstring>"

macOSmacOS

export AZURE_STORAGE_CONNECTION_STRING="<yourconnectionstring>"

プログラムの再起動Restart programs

環境変数を追加した後、環境変数の読み取りを必要とする実行中のプログラムをすべて再起動します。After you add the environment variable, restart any running programs that will need to read the environment variable. たとえば、続行する前に、ご使用の開発環境またはエディターを再起動します。For example, restart your development environment or editor before continuing.

オブジェクト モデルObject model

Azure Blob Storage は、大量の非構造化データを格納するために最適化されています。Azure Blob storage is optimized for storing massive amounts of unstructured data. 非構造化データとは、特定のデータ モデルや定義に従っていないデータであり、テキスト データやバイナリ データなどがあります。Unstructured data is data that does not adhere to a particular data model or definition, such as text or binary data. Blob Storage には、3 種類のリソースがあります。Blob storage offers three types of resources:

  • ストレージ アカウントThe storage account
  • ストレージ アカウント内のコンテナーA container in the storage account
  • コンテナー内の BLOBA blob in the container

次の図に、これらのリソースの関係を示します。The following diagram shows the relationship between these resources.

Blob Storage のアーキテクチャ図

これらのリソースとやり取りするには、以下の JavaScript クラスを使用します。Use the following JavaScript classes to interact with these resources:

  • BlobServiceClient:BlobServiceClient クラスを使用して、Azure Storage リソースと BLOB コンテナーを操作できます。BlobServiceClient: The BlobServiceClient class allows you to manipulate Azure Storage resources and blob containers.
  • ContainerClient:ContainerClient クラスを使用して、Azure Storage コンテナーとその BLOB を操作できます。ContainerClient: The ContainerClient class allows you to manipulate Azure Storage containers and their blobs.
  • BlobClient:BlobClient クラスを使用して、Azure Storage BLOB を操作できます。BlobClient: The BlobClient class allows you to manipulate Azure Storage blobs.

コード例Code examples

これらのコード例のスニペットでは、JavaScript 用 Azure Blob Storage クライアント ライブラリを使用して以下を実行する方法を示します。These example code snippets show you how to perform the following with the Azure Blob storage client library for JavaScript:

接続文字列を取得するGet the connection string

以下のコードでは、「ストレージ接続文字列の構成」セクションで作成した環境変数から、ストレージ アカウントに対する接続文字列を取得します。The code below retrieves the connection string for the storage account from the environment variable created in the Configure your storage connection string section.

次のコードを main 関数内に追加します。Add this code inside the main function:

// Retrieve the connection string for use with the application. The storage
// connection string is stored in an environment variable on the machine
// running the application called AZURE_STORAGE_CONNECTION_STRING. If the
// environment variable is created after the application is launched in a
// console or with Visual Studio, the shell or application needs to be closed
// and reloaded to take the environment variable into account.
const AZURE_STORAGE_CONNECTION_STRING = process.env.AZURE_STORAGE_CONNECTION_STRING;

コンテナーを作成するCreate a container

新しいコンテナーの名前を決定します。Decide on a name for the new container. 次のコードでは、確実に一意になるように、コンテナー名に UUID 値を追加します。The code below appends a UUID value to the container name to ensure that it is unique.

重要

コンテナーの名前は小文字にする必要があります。Container names must be lowercase. コンテナーと BLOB の名前付けの詳細については、「Naming and Referencing Containers, Blobs, and Metadata (コンテナー、BLOB、メタデータの名前付けと参照)」を参照してください。For more information about naming containers and blobs, see Naming and Referencing Containers, Blobs, and Metadata.

fromConnectionString メソッドを呼び出して、BlobServiceClient クラスのインスタンスを作成します。Create an instance of the BlobServiceClient class by calling the fromConnectionString method. 次に、getContainerClient メソッドを呼び出して、コンテナーへの参照を取得します。Then, call the getContainerClient method to get a reference to a container. 最後に、create を呼び出して、ストレージ アカウントにコンテナーを実際に作成します。Finally, call create to actually create the container in your storage account.

main 関数の末尾に次のコードを追加します。Add this code to the end of the main function:

// Create the BlobServiceClient object which will be used to create a container client
const blobServiceClient = await BlobServiceClient.fromConnectionString(AZURE_STORAGE_CONNECTION_STRING);

// Create a unique name for the container
const containerName = 'quickstart' + uuidv1();

console.log('\nCreating container...');
console.log('\t', containerName);

// Get a reference to a container
const containerClient = await blobServiceClient.getContainerClient(containerName);

// Create the container
const createContainerResponse = await containerClient.create();
console.log("Container was created successfully. requestId: ", createContainerResponse.requestId);

コンテナーに BLOB をアップロードするUpload blobs to a container

次のコード スニペット:The following code snippet:

  1. BLOB にアップロードするテキスト文字列を作成します。Creates a text string to upload to a blob.
  2. コンテナーを作成する」セクションからの ContainerClient 上で getBlockBlobClient メソッドを呼び出すことで、BlockBlobClient オブジェクトへの参照を取得します。Gets a reference to a BlockBlobClient object by calling the getBlockBlobClient method on the ContainerClient from the Create a container section.
  3. upload メソッドを呼び出して、テキスト文字列データを BLOB にアップロードします。Uploads the text string data to the blob by calling the upload method.

main 関数の末尾に次のコードを追加します。Add this code to the end of the main function:

// Create a unique name for the blob
const blobName = 'quickstart' + uuidv1() + '.txt';

// Get a block blob client
const blockBlobClient = containerClient.getBlockBlobClient(blobName);

console.log('\nUploading to Azure storage as blob:\n\t', blobName);

// Upload data to the blob
const data = 'Hello, World!';
const uploadBlobResponse = await blockBlobClient.upload(data, data.length);
console.log("Blob was uploaded successfully. requestId: ", uploadBlobResponse.requestId);

コンテナー内の BLOB を一覧表示するList the blobs in a container

listBlobsFlat メソッドを呼び出して、コンテナー内の BLOB を一覧表示します。List the blobs in the container by calling the listBlobsFlat method. この場合、コンテナーに BLOB が 1 つだけ追加されているので、一覧表示操作ではその 1 つの BLOB だけが返されます。In this case, only one blob has been added to the container, so the listing operation returns just that one blob.

main 関数の末尾に次のコードを追加します。Add this code to the end of the main function:

console.log('\nListing blobs...');

// List the blob(s) in the container.
for await (const blob of containerClient.listBlobsFlat()) {
    console.log('\t', blob.name);
}

BLOB をダウンロードするDownload blobs

download メソッドを呼び出して、以前に作成した BLOB をダウンロードします。Download the previously created blob by calling the download method. コード例には、Node.js の読み取り可能なストリームを 1 つの文字列に読み取るために使用される streamToString というヘルパー関数が含まれています。The example code includes a helper function called streamToString which is used to read a Node.js readable stream into a string.

main 関数の末尾に次のコードを追加します。Add this code to the end of the main function:

// Get blob content from position 0 to the end
// In Node.js, get downloaded data by accessing downloadBlockBlobResponse.readableStreamBody
// In browsers, get downloaded data by accessing downloadBlockBlobResponse.blobBody
const downloadBlockBlobResponse = await blockBlobClient.download(0);
console.log('\nDownloaded blob content...');
console.log('\t', await streamToString(downloadBlockBlobResponse.readableStreamBody));

main 関数の "" に、このヘルパー関数を追加します。Add this helper function after the main function:

// A helper function used to read a Node.js readable stream into a string
async function streamToString(readableStream) {
  return new Promise((resolve, reject) => {
    const chunks = [];
    readableStream.on("data", (data) => {
      chunks.push(data.toString());
    });
    readableStream.on("end", () => {
      resolve(chunks.join(""));
    });
    readableStream.on("error", reject);
  });
}

コンテナーを削除するDelete a container

次のコードでは、delete メソッドを使用して、コンテナー全体を削除することで、アプリによって作成されたリソースをクリーンアップします。The following code cleans up the resources the app created by removing the entire container using the delete method. 必要に応じてローカル ファイルを削除することもできます。You can also delete the local files, if you like.

main 関数の末尾に次のコードを追加します。Add this code to the end of the main function:

console.log('\nDeleting container...');

// Delete container
const deleteContainerResponse = await containerClient.delete();
console.log("Container was deleted successfully. requestId: ", deleteContainerResponse.requestId);

コードの実行Run the code

このアプリでは、テキスト文字列が作成され、BLOB ストレージにアップロードされます。This app creates a text string and uploads it to Blob storage. 例では、コンテナー内の BLOB を一覧表示し、BLOB をダウンロードして、ダウンロードしたデータを表示します。The example then lists the blob(s) in the container, downloads the blob, and displays the downloaded data.

コンソール プロンプトから、blob-quickstart-v12.py ファイルが格納されているディレクトリに移動し、次の node コマンドを実行してアプリを実行します。From a console prompt, navigate to the directory containing the blob-quickstart-v12.py file, then execute the following node command to run the app.

node blob-quickstart-v12.js

アプリの出力は、次の例のようになります。The output of the app is similar to the following example:

Azure Blob storage v12 - JavaScript quickstart sample

Creating container...
         quickstart4a0780c0-fb72-11e9-b7b9-b387d3c488da

Uploading to Azure Storage as blob:
         quickstart4a3128d0-fb72-11e9-b7b9-b387d3c488da.txt

Listing blobs...
         quickstart4a3128d0-fb72-11e9-b7b9-b387d3c488da.txt

Downloaded blob content...
         Hello, World!

Deleting container...
Done

デバッガーでコードをステップ実行し、プロセス全体について Azure portal 上でチェックします。Step through the code in your debugger and check your Azure portal throughout the process. コンテナーが作成されていることを確認するために、チェックを行います。Check to see that the container is being created. コンテナー内で BLOB を開いて、コンテンツを表示することができます。You can open the blob inside the container and view the contents.

次のステップNext steps

このクイックスタートでは、JavaScript を使用して BLOB をアップロード、ダウンロード、および一覧表示する方法について説明しました。In this quickstart, you learned how to upload, download, and list blobs using JavaScript.

チュートリアル、サンプル、クイック スタートなどのドキュメントについては、次のページを参照してください。For tutorials, samples, quick starts and other documentation, visit: