クイック スタート: Visual Studio を使用して初めての Python Web アプリを作成する

適用対象:yesVisual Studio noVisual Studio for Mac

Python IDE としての Visual Studio を紹介する、この 5 ~ 10 分のクイック スタートでは、Flask フレームワークに基づいて Python Web アプリを作成します。 別個の部分からなる手順を通してプロジェクトを作成することが、Visual Studio の基本機能の学習に役立ちます。

Visual Studio をまだインストールしていない場合は、Visual Studio のダウンロード ページに移動し、無料試用版をインストールしてください。 インストーラーでは、必ず [Python 開発] ワークロードを選択します。

Visual Studio をまだインストールしていない場合は、Visual Studio のダウンロード ページに移動し、無料試用版をインストールしてください。 Visual Studio インストーラーで [Python 開発] ワークロードを選択し、インストールの詳細で [Python Web サポート] を選択します。

Screenshot of the Visual Studio Installer with the Python development workload and Python web support selected.

プロジェクトの作成

以降の手順では、アプリケーションのコンテナーとして機能する空のプロジェクトを作成します。

  1. Visual Studio 2019 を開きます。

  2. スタート画面で、 [新しいプロジェクトの作成] を選択します。

  3. [新しいプロジェクトの作成] ダイアログ ボックスの上部にある [検索] フィールドに「Python web」と入力し、真ん中にある一覧で [Web プロジェクト] を選択してから、 [次へ] を選択します。

    Create a new project screen with Python Web Project selectedPython プロジェクト テンプレートが表示されない場合は、Visual Studio インストーラーを実行し、[その他]>[変更] を選び、[Python 開発] ワークロードを選んで、[変更] を選びます。

    Python development workload in the Visual Studio installer

  4. 表示された [新しいプロジェクトを構成します] ダイアログで、 [プロジェクト名] に「HelloPython」を入力し、場所を指定して、 [作成] を選択します ( [ソリューション名][プロジェクト名] と一致するように自動的に設定されます)。

    Configure your new project dialog

  5. 右側のウィンドウのソリューション エクスプローラーで、新しいプロジェクトが開きます。 この時点のプロジェクトは、他のファイルが含まれていないため空です。

    Sreenshot showing the newly created empty project in the Solution Explorer.

  1. Visual Studio 2022 を開きます。

  2. スタート画面で、 [新しいプロジェクトの作成] を選択します。

  3. [新しいプロジェクトの作成] ダイアログ ボックスの上部にある [検索] フィールドに「Python web」と入力します。 一覧で [Web プロジェクト] を選択し、 [次へ] を選択します。

    Screenshot showing the Create a new project screen with Python Web Project selected.

    Python Web プロジェクト テンプレートが表示されない場合は、 [ツール]>[ツールと機能を取得] を選択して、Visual Studio インストーラーを実行します。 インストーラーで [Python 開発] ワークロードを選択し、 [インストールの詳細][Python Web サポート] を選択します。 次に、 [変更] を選択します。

  4. [新しいプロジェクトを構成します] ダイアログ ボックスで、 [プロジェクト名] に「HelloPython」と入力し、場所を指定して、 [作成] を選択します。 [ソリューション名] は、 [プロジェクト名] と一致するように自動的に更新されます。

    Screenshot showing the Configure your new project dialog.

右側のウィンドウのソリューション エクスプローラーで、新しいプロジェクトが開きます。 この時点のプロジェクトは、他のファイルが含まれていないため空です。

Screenshot showing the Solution Explorer with the newly created empty project.

質問:Visual Studio で Python アプリケーション用のプロジェクトを作成する利点は何ですか。

回答: 通常、Python アプリケーションはフォルダーとファイルのみを使用して定義されますが、アプリケーションが大きくなると、この単純な構造が面倒になる可能性があります。 アプリケーションには、自動生成されたファイル、Web アプリケーション用の JavaScript、その他のコンポーネントが含まれる場合があります。 Visual Studio のプロジェクトは、このような複雑さを管理するのに役立ちます。

プロジェクト ( .pyproj ファイル) によって、プロジェクトに関連付けられているすべてのソースとコンテンツ ファイルが識別されます。 .pyproj ファイルを使用して、各ファイルのビルド情報が格納され、ソース管理システムと統合するための情報が保持され、論理コンポーネントにアプリケーションが整理されます。

質問:ソリューション エクスプローラーに表示される "ソリューション" とは何ですか。

回答: Visual Studio のソリューションは、1 つまたは複数の関連プロジェクトを 1 つのグループとして管理できるコンテナーです。 ソリューションには、プロジェクトに固有ではない構成設定が格納されます。 ソリューション内のプロジェクトは、相互に参照することもできます。 たとえば、Python アプリ プロジェクトを実行すると、Python アプリによって使用される C++ 拡張機能など、第 2 のプロジェクトが自動的にビルドされます。

Flask ライブラリをインストールする

Python の Web アプリは、ほぼ常に、Web 要求のルーティングや応答の整形といった低レベルの詳細を処理するために、多くの使用可能な Python ライブラリのいずれかを使います。 Visual Studio には、Web アプリ用のテンプレートが多数用意されています。 このクイックスタートでは、これらのテンプレートの 1 つを後で使用します。

Visual Studio によってこのプロジェクトに使用される既定の "グローバル環境" に、次の手順を使用して Flask ライブラリをインストールします。

  1. プロジェクトの [Python 環境] ノードを展開して、プロジェクトの既定の環境を表示します。

    Solution explorer showing the default environment

  2. 環境を右クリックして、 [Python パッケージの管理] を選択します。このコマンドを選ぶと、 [パッケージ (PyPI)] タブ上に [Python 環境] ウィンドウが開きます。

  3. 検索フィールドに「flask」と入力します。 検索ボックスの下に Flask が表示される場合、この手順はスキップできます。 それ以外の場合、 [実行コマンド: pip install flask] を選択します。 管理者特権に関するすべてのプロンプトに同意し、Visual Studio の [出力] ウィンドウで進行状況を確認します。 (グローバル環境のパッケージ フォルダーが C:\Program Files のように保護された領域内にある場合は、昇格のプロンプトが表示されます)。

    Installing the Flask library using pip install

  1. プロジェクトの [Python 環境] ノードを展開して、プロジェクトの既定の環境を表示します。

    Screenshot showing the default environment in Solution Explorer.

  2. 環境を右クリックして、 [Python パッケージの管理] を選択します。 このコマンドを選ぶと、[パッケージ (PyPI)] タブ上に [Python 環境] ウィンドウが開きます。

  3. 検索フィールドに「flask」と入力します。 検索ボックスの下に Flask が表示される場合、この手順はスキップできます。 それ以外の場合は、 [実行コマンド: pip install flask] を選択します。

    Screenshot that shows installing the Flask library using pip install.

    グローバル環境パッケージ フォルダーが C:\Program files のような保護された領域にある場合、昇格時のプロンプトが表示されます。 管理者特権のプロンプトをすべて承諾します。 Visual Studio の [出力] ウィンドウで進行状況を確認します。

インストールが済むと、ソリューション エクスプローラーの環境にライブラリが表示されます。これは、Python コードでそれを使用できることを意味します。

Flask library installed and showing in Solution Explorer

Screenshot that shows the Flask library installed and showing in Solution Explorer.

注意

開発者は通常、グローバル環境にライブラリをインストールするのではなく、特定のプロジェクトのライブラリをインストールする "仮想環境" を作成します。 Visual Studio のテンプレートによって通常、このオプションが与えられます。それについては、「クイック スタート - Visual Studio のテンプレートから Python プロジェクトを作成する」に説明があります。

質問:利用できる他の Python パッケージの詳細はどこで確認できますか。

回答:Python Package Index を参照してください。

コード ファイルの追加

最小限の Web アプリを実装するための Python コードを追加する準備ができました。

  1. ソリューション エクスプローラーでプロジェクトを右クリックし、[追加]>[新しい項目] を選びます。

  2. 表示されるダイアログ ボックスで、 [空の Python ファイル] を選択し、「app.py」という名前を付けて、 [追加] を選択します。 エディター ウィンドウでファイルが自動的に開きます

  3. 次のコードをコピーして、app.py に貼り付けます。

    from flask import Flask
    
    # Create an instance of the Flask class that is the WSGI application.
    # The first argument is the name of the application module or package,
    # typically __name__ when using a single module.
    app = Flask(__name__)
    
    # Flask route decorators map / and /hello to the hello function.
    # To add other resources, create functions that generate the page contents
    # and add decorators to define the appropriate resource locators for them.
    
    @app.route('/')
    @app.route('/hello')
    def hello():
        # Render the page
        return "Hello Python!"
    
    if __name__ == '__main__':
        # Run the app server on localhost:4449
        app.run('localhost', 4449)
    
  1. ソリューション エクスプローラーでプロジェクトを右クリックし、[追加]>[新しい項目] を選びます。

  2. 表示されるダイアログで、 [空] を選択します。 [名前] に「app.py」と入力して、 [追加] を選択します。 エディター ウィンドウでファイルが自動的に開きます

  3. 次のコードをコピーして、app.py に貼り付けます。

    from flask import Flask
    
    # Create an instance of the Flask class that is the WSGI application.
    # The first argument is the name of the application module or package,
    # typically __name__ when using a single module.
    app = Flask(__name__)
    
    # Flask route decorators map / and /hello to the hello function.
    # To add other resources, create functions that generate the page contents
    # and add decorators to define the appropriate resource locators for them.
    
    @app.route('/')
    @app.route('/hello')
    def hello():
        # Render the page
        return "Hello Python!"
    
    if __name__ == '__main__':
        # Run the app server on localhost:4449
        app.run('localhost', 4449)
    

気付いているかもしれませんが、 [追加]>[新しい項目] ダイアログ ボックスには、Python クラス、Python パッケージ、Python 単体テスト、web.config ファイルなど、Python プロジェクトに追加できる他の種類のファイルが多数表示されます。 一般に、これらの "項目テンプレート" は、便利な定型コードで素早くファイルを作成する優れた方法です。

質問:Flask の詳細はどこで確認できますか。

回答:Flask 文書を参照してください。まずは Flask クイック スタートからお読みください。

アプリケーションの実行

  1. ソリューション エクスプローラーで、app.py を右クリックして、ドロップダウン メニューから [スタートアップ ファイルとして設定] を選択します。 このコマンドによって、アプリの実行時、Python で起動するコード ファイルが特定されます。

    Setting the startup file for a project in Solution Explorer

    Screenshot that shows setting the startup file for a project in Solution Explorer.

  2. ソリューション エクスプローラーでプロジェクトを右クリックして、 [プロパティ] を選択します。 [プロパティ] メニューから [デバッグ] タブを選択し、 [ポート番号] プロパティを 4449 に設定します。 この設定によって、Visual Studio では、コードの app.run 引数に合わせ、localhost:4449 でブラウザーが起動されます。

  3. [デバッグ]>[デバッグなしで開始] を選択するか、Ctrl+F5 キーを押すと、変更がファイルに保存されて、アプリが実行されます。

  4. コマンド ウィンドウに、"Running in https://localhost:4449" (https://localhost:4449 で実行中) というメッセージが表示されます。 ブラウザー ウィンドウで localhost:4449 が開かれ、"Hello, Python!" というメッセージが表示されます。コマンド ウィンドウにステータス 200GET 要求も表示されます。

    ブラウザーが自動的に開かない場合は、任意のブラウザーを起動して localhost:4449 にアクセスします。

    コマンド ウィンドウに Python 対話型シェルのみが表示される場合、または画面でそのウィンドウが短時間点滅する場合は、スタートアップ ファイルとして app.py が設定されていることを確認します。

  5. localhost:4449/hello に移動し、/hello リソースのデコレーターも機能することをテストします。 再び、GET 要求と状態 200 がコマンド ウィンドウに表示されます。 他の URL も試し、コマンド ウィンドウに状態コード 404 が表示されることを確認します。

  6. コマンド ウィンドウを閉じてアプリを停止してから、ブラウザー ウィンドウを閉じます。

質問: [デバッグなしで開始] コマンドと [デバッグの開始] コマンドの違いは何ですか?

回答: Visual Studio デバッガーのコンテキストでアプリを実行するには、 [デバッグの開始] を使用します。 デバッガーを使用すると、ブレークポイントを設定したり、変数を調べたり、コードを 1 行ずつステップ実行したりできます。 デバッグを可能にするフックのため、デバッガーではアプリの実行が遅くなることがあります。

[デバッグなしで開始] では、コマンド ラインから実行したかのように、デバックのコンテキストなしで、アプリが直接実行されます。 また、 [デバッグなしで開始] を使用すると、ブラウザーが自動的に起動され、プロジェクトのプロパティの [デバッグ] タブで指定されている URL に移動します。

次の手順

Visual Studio から初めての Python アプリを実行できました。おめでとうございます。 Python IDE としての Visual Studio の使用について、少しですが学習しました。

このクイック スタートで実行した手順はかなり汎用的です。これは自動化できるし、自動化すべきであると思ったことでしょう。 そのような自動化は、Visual Studio プロジェクト テンプレートの役目です。 この記事のものと似た Web アプリを、さらに少ない手順で作成する方法については、テンプレートを使用した Python プロジェクトの作成のクイックスタートに関する記事を参照してください。

対話型ウィンドウの使用、デバッグ、データの視覚化、Git の操作など、Visual Studio での Python についての詳細なチュートリアルを続けて行うには、Visual Studio での Python の使用のチュートリアルに関する記事を参照してください。

Visual Studio のその他の機能は下のリンクからご覧いただけます。