Visual Studio Code を使用した初めての関数の作成Create your first function using Visual Studio Code

Azure Functions を使用すると、最初に VM を作成したり Web アプリケーションを発行したりしなくても、サーバーレス環境でコードを実行できます。Azure Functions lets you execute your code in a serverless environment without having to first create a VM or publish a web application.

この記事では、Microsoft Visual Studio Code で Visual Studio Code 用 Azure Functions 拡張機能を使用して、ローカル コンピューター上で "hello world" 関数を作成し、テストする方法について説明します。In this article, you learn how to use the Azure Functions extension for Visual Studio Code to create and test a "hello world" function on your local computer using Microsoft Visual Studio Code. その後、Visual Studio Code から関数コードを Azure に発行します。You then publish the function code to Azure from Visual Studio Code.

Visual Studio プロジェクトの Azure Functions コード

現在、この拡張機能では、C#、JavaScript、Java、Python の関数がサポートされています。The extension currently supports C#, JavaScript, Java, and Python functions. この記事と次の記事の手順では、JavaScript と C# の関数のみをサポートしています。The steps in this article and the article that follows support only JavaScript and C# functions. Visual Studio Code を使用して Python 関数を作成および発行する方法については、「Deploy Python to Azure Functions (Azure Functions に Python をデプロイする)」を参照してください。To learn how to use Visual Studio Code to create and publish Python functions, see Deploy Python to Azure Functions. Visual Studio Code を使用して PowerShell 関数を作成および発行する方法については、「Azure で初めての PowerShell 関数を作成する」を参照してください。To learn how to use Visual Studio Code to create and publish PowerShell functions, see Create your first PowerShell function in Azure.

この拡張機能は現在プレビュー段階にあります。The extension is currently in preview. 詳細については、Visual Studio Code 用 Azure Functions 拡張機能のページをご覧ください。To learn more, see the Azure Functions extension for Visual Studio Code extension page.

前提条件Prerequisites

このクイック スタートを完了するには、以下が必要です。To complete this quickstart:

Azure サブスクリプションをお持ちでない場合は、開始する前に無料アカウントを作成してください。If you don't have an Azure subscription, create a free account before you begin.

Azure Functions 拡張機能をインストールするInstall the Azure Functions extension

Azure Functions 拡張機能を使用すると、関数を作成してテストし、Azure にデプロイすることができます。You can use the Azure Functions extension to create and test functions and deploy them to Azure.

  1. Visual Studio Code で [拡張機能] を開き、azure functions を検索するか、Visual Studio Code でこのリンクを選択します。In Visual Studio Code, open Extensions and search for azure functions, or select this link in Visual Studio Code.

  2. [インストール] を選択して、Visual Studio Code に拡張機能をインストールします。Select Install to install the extension for Visual Studio Code:

    Azure Functions の拡張機能をインストールする

  3. Visual Studio Code を再起動し、アクティビティ バーの Azure アイコンを選択します。Restart Visual Studio Code and select the Azure icon on the Activity bar. サイド バーに Azure Functions 領域が表示されます。You should see an Azure Functions area in the Side Bar.

    サイド バーの Azure Functions 領域

関数を使用して Functions プロジェクトを作成するCreate your Functions project with a function

Visual Studio Code の Azure Functions プロジェクト テンプレートでは、Azure の関数アプリに発行できるプロジェクトを作成します。The Azure Functions project template in Visual Studio Code creates a project that can be published to a function app in Azure. 関数アプリを使用すると、リソースを管理、デプロイ、および共有するための論理ユニットとして関数をグループ化できます。A function app lets you group functions as a logical unit for management, deployment, and sharing of resources.

  1. Visual Studio Code で、F1 キーを押してコマンド パレットを開きます。In Visual Studio Code, press F1 to open the command palette. コマンド パレットで、Azure Functions: Create new project... を検索して選択します。In the command palette, search for and select Azure Functions: Create new project....

  2. プロジェクト ワークスペースのディレクトリの場所を選択し、 [選択] をクリックします。Choose a directory location for your project workspace and choose Select.

    注意

    これらの手順は、ワークスペースの外部で実行するように設計されています。These steps were designed to be completed outside of a workspace. ここでは、ワークスペースに含まれるプロジェクト フォルダーは選択しないでください。In this case, do not select a project folder that is part of a workspace.

  3. プロンプトに従って、次の情報を入力します。Following the prompts, provide the following information:

    PromptPrompt Value 説明Description
    Select a language for your function app project (関数アプリ プロジェクトの言語を選択してください)Select a language for your function app project C# または JavaScriptC# or JavaScript この記事は C# と JavaScript をサポートしています。This article supports C# and JavaScript. Python についてはこの Python の記事を、PowerShell についてはこの PowerShell の記事を参照してください。For Python, see this Python article, and for PowerShell, see this PowerShell article.
    Select a template for your project's first function (プロジェクトの最初の関数のテンプレートを選択してください)Select a template for your project's first function HTTP トリガーHTTP trigger 新しい関数アプリで HTTP トリガー関数を作成します。Create an HTTP triggered function in the new function app.
    Provide a function name (関数名を指定してください)Provide a function name HttpTriggerHttpTrigger Enter キーを押して既定の名前を使用します。Press Enter to use the default name.
    Provide a namespace (名前空間を指定してください)Provide a namespace My.FunctionsMy.Functions (C# のみ) C# クラス ライブラリには名前空間が必要です。(C# only) C# class libraries must have a namespace.
    承認レベルAuthorization level FunctionFunction 関数の HTTP エンドポイントを呼び出すには関数キーが必要です。Requires a function key to call the function's HTTP endpoint.
    Select how you would like to open your project (プロジェクトを開く方法を選択してください)Select how you would like to open your project Add to workspace (ワークスペースに追加)Add to workspace 現在のワークスペースに関数アプリを作成します。Creates the function app in the current workspace.

Visual Studio Code によって、新しいワークスペースに関数アプリ プロジェクトが作成されます。Visual Studio Code creates the function app project in a new workspace. このプロジェクトには、host.json および local.settings.json 構成ファイルと、言語固有のプロジェクト ファイルが含まれています。This project contains the host.json and local.settings.json configuration files, plus any language-specific project files.

関数アプリ プロジェクトの HttpTrigger フォルダーにも、新しい HTTP トリガー関数が作成されます。A new HTTP triggered function is also created in the HttpTrigger folder of the function app project.

関数をローカルで実行するRun the function locally

Azure Functions Core Tools を使用すると、ローカルの開発用コンピューター上で Azure Functions プロジェクトを実行できます。Azure Functions Core Tools lets you run an Azure Functions project on your local development computer.

  1. 関数をテストするには、関数コードにブレークポイントを設定し、F5 キーを押して関数アプリ プロジェクトを開始します。To test your function, set a breakpoint in the function code and press F5 to start the function app project. Core Tools からの出力がターミナル パネルに表示されます。Output from Core Tools is displayed in the Terminal panel.

  2. ターミナル パネルで、HTTP によってトリガーされる関数の URL エンドポイントをコピーします。In the Terminal panel, copy the URL endpoint of your HTTP-triggered function.

    Azure のローカル出力

  3. HTTP 要求の URL をブラウザーのアドレス バーに貼り付けます。Paste the URL for the HTTP request into your browser's address bar. この URL にクエリ文字列 ?name=<yourname> を追加して、要求を実行します。Append the query string ?name=<yourname> to this URL and execute the request. ブレークポイントに到達すると、実行が一時停止されます。Execution is paused when the breakpoint is hit.

  4. 実行を続行したときの、GET 要求に対するブラウザーの応答を次に示します。When you continue the execution, the following shows the response in the browser to the GET request:

    ブラウザーでの関数 localhost の応答

  5. デバッグを停止するには、Shift キーを押しながら F5 キーを押します。To stop debugging, press Shift + F5.

関数がローカル コンピューター上で正常に動作することを確認したら、プロジェクトを Azure に発行します。After you've verified that the function runs correctly on your local computer, it's time to publish the project to Azure.

Azure へのサインインSign in to Azure

アプリを発行するには、Azure にサインインしておく必要があります。Before you can publish your app, you must sign in to Azure.

  1. [Azure: Functions] 領域で、 [Azure にサインイン...] を選択します。アカウントがない場合は、無料の Azure アカウントを作成することができます。In the Azure: Functions area, choose Sign in to Azure.... If you don't already have one, you can Create a free Azure account.

    ブラウザーでの関数 localhost の応答

  2. メッセージが表示されたら、 [Copy & Open](コピー & 開く) を選択するか、表示されたコードをコピーし、ブラウザーで https://aka.ms/devicelogin を開きます。When prompted, select Copy & Open, or copy the displayed code and open https://aka.ms/devicelogin in your browser.

  3. [デバイスのログイン] ページにコピーしたコードを貼り付け、Visual Studio Code のサインインを確認して、 [続行] を選択します。Paste the copied code in the Device Login page, verify the sign in for Visual Studio Code, then select Continue.

  4. Azure アカウントの資格情報を使用してサインインを完了します。Complete the sign in using your Azure account credentials. 正常にサインインしたら、ブラウザーを閉じてかまいません。After you have successfully signed in, you can close the browser.

Azure にプロジェクトを発行するPublish the project to Azure

Visual Studio Code を使用すると、関数プロジェクトを Azure に直接発行できます。Visual Studio Code lets you publish your functions project directly to Azure. このプロセスでは、Azure サブスクリプションに関数アプリと関連リソースを作成します。In the process, you create a function app and related resources in your Azure subscription. 関数アプリは、関数の実行コンテキストを提供します。The function app provides an execution context for your functions. プロジェクトがパッケージ化され、Azure サブスクリプション内の新しい関数アプリにデプロイされます。The project is packaged and deployed to the new function app in your Azure subscription.

既定で、Visual Studio Code では関数アプリの作成に必要なすべての Azure リソースが作成されます。By default, Visual Studio Code creates all of the Azure resources required to create your function app. これらのリソースの名前は、選択した関数アプリの名前に基づきます。The names of these resources are based on the function app name you choose. 作成したリソースを完全に管理する必要がある場合は、代わりに高度なオプションを使用して発行することができます。If you need to have full control of the created resources, you can instead publish using advanced options.

このセクションでは、Azure で新しい関数アプリを作成することを想定しています。This section assumes that you are creating a new function app in Azure.

重要

既存の関数アプリに発行すると、Azure のそのアプリのコンテンツが上書きされます。Publishing to an existing function app overwrites the content of that app in Azure.

  1. Visual Studio Code で F1 を押して、コマンド パレットを開きます。In Visual Studio Code, press F1 to open the command palette. コマンド パレットで、Azure Functions: Deploy to function app... を検索して選択します。In the command palette, search for and select Azure Functions: Deploy to function app....

  2. サインインしていない場合、Azure にサインインするよう求められます。If not signed-in, you are prompted to Sign in to Azure. 無料の Azure アカウントを作成することもできます。You can also Create a free Azure account. ブラウザーから正常にサインインしたら、Visual Studio Code に戻ります。After successful sign in from the browser, go back to Visual Studio Code.

  3. 複数のサブスクリプションがある場合、関数アプリ用の [サブスクリプションを選択] してから、 [+ Create New Function App in Azure](+ Azure で新しい Function App を作成) を選択します。If you have multiple subscriptions, Select a subscription for the function app, then choose + Create New Function App in Azure.

  4. 関数アプリを識別するグローバルに一意の名前を入力し、Enter キーを押します。Type a globally unique name that identifies your function app and press Enter. 関数アプリ名の有効な文字は、a-z0-9- です。Valid characters for a function app name are a-z, 0-9, and -.

    Enter キーを押すと、次の Azure リソースがサブスクリプションに作成されます。When you press Enter, the following Azure resources are created in your subscription:

    • リソース グループ :作成された Azure リソースがすべて含まれます。Resource group: Contains all of the created Azure resources. 名前は関数アプリの名前に基づきます。The name is based on your function app name.
    • ストレージ アカウント :関数アプリの名前に基づいた一意の名前で、Standard Storage アカウントが作成されます。Storage account: A standard Storage account is created with a unique name that is based on your function app name.
    • ホスティング プラン :サーバーレス関数アプリをホストするために、従量課金プランが米国西部リージョンに作成されます。Hosting plan: A consumption plan is created in the West US region to host your serverless function app.
    • 関数アプリ:プロジェクトはこの新しい関数アプリにデプロイされ、そこで実行されます。Function app: Your project is deployed to and runs in this new function app.

    関数アプリが作成され、展開パッケージが適用されると、通知が表示されます。A notification is displayed after your function app is created and the deployment package is applied. この通知の [View Output](出力の表示) を選択すると、作成済みの Azure リソースなど、作成とデプロイの結果が表示されます。Select View Output in this notification to view the creation and deployment results, including the Azure resources that you created.

  5. [Azure: Functions] 領域に戻り、サブスクリプションの下にある新しい関数アプリを展開します。Back in the Azure: Functions area, expand the new function app under your subscription. [Functions] を展開し、 [HttpTrigger] を右クリックして [Copy function URL](関数 URL のコピー) を選択します。Expand Functions, right-click HttpTrigger, and then choose Copy function URL.

    新しい HTTP トリガーの関数 URL をコピーします

Azure で関数を実行するRun the function in Azure

  1. 出力パネルから HTTP トリガーの URL をコピーします。Copy the URL of the HTTP trigger from the Output panel. この URL には、code クエリ パラメーターに渡される関数キーが含まれています。This URL includes the function key, which is passed to the code query parameter. 前と同様に、この URL の末尾にクエリ文字列 ?name=<yourname> を追加してから、要求を実行します。As before, make sure to add the query string ?name=<yourname> to the end of this URL and execute the request.

    HTTP によってトリガーされる関数を呼び出す URL は、次の形式である必要があります。The URL that calls your HTTP-triggered function should be in the following format:

     http://<functionappname>.azurewebsites.net/api/<functionname>?code=<function_key>&name=<yourname> 
    
  2. HTTP 要求のこの新しい URL をブラウザーのアドレス バーに貼り付けます。Paste this new URL for the HTTP request into your browser's address bar. 関数によって返されたリモート GET 要求に対するブラウザーでの応答を次に示します。The following shows the response in the browser to the remote GET request returned by the function:

    ブラウザーでの関数の応答

次の手順Next steps

Visual Studio Code を使用して、HTTP によってトリガーされる単純な関数を含む関数アプリを作成しました。You have used Visual Studio Code to create a function app with a simple HTTP-triggered function. 次の記事では、出力バインディングを追加してその関数を拡張します。In the next article, you expand that function by adding an output binding. このバインディングでは、HTTP 要求の文字列が Azure Queue Storage キュー内のメッセージに書き込まれます。This binding writes the string from the HTTP request to a message in an Azure Queue Storage queue. 次の記事では、作成したリソース グループを削除してこれらの新しい Azure リソースをクリーンアップする方法も説明します。The next article also shows you how to clean up these new Azure resources by removing the resource group you created.