演習 - プロジェクトをカスタマイズする

  • 12 分

チームは、ピザの在庫管理アプリの作業を分担しています。 チームメイトは、あなたのために ASP.NET Core Web アプリを作成し、ピザ データをデータベースに読み書きするサービスを既に構築しています。 あなたは、[ピザ リスト] ページの作業を割り当てられています。このページでは、ピザの一覧が表示され、新しいピザをデータベースに追加できます。 まず、プロジェクトの編成方法を理解するために、プロジェクトのツアーを行います。

Note

このモジュールでは、ローカル開発に .NET CLI (コマンド ライン インターフェイス) と Visual Studio Code を使用します。 このモジュールを完了すると、Visual Studio (Windows) または Visual Studio Code (Windows、Linux、macOS) を使用した継続的な開発を使用して、これらの概念を適用できるようになります。

プロジェクト ファイルを取得する

GitHub Codespaces を使用する場合は、ブラウザーでリポジトリを開き、[コード] を選択し、main ブランチに新しい codespace を作成するだけです。

GitHub Codespaces を使用しない場合は、プロジェクト ファイルを取得し、Visual Studio Code で次の手順を使用して開きます。

  1. コマンド シェルを開き、次のコマンド ラインを使用して GitHub からプロジェクトを複製します。

    git clone https://github.com/MicrosoftDocs/mslearn-create-razor-pages-aspnet-core

  2. mslearn-create-razor-pages-aspnet-core ディレクトリに移動し、Visual Studio Code でプロジェクトを開きます。

    cd mslearn-create-razor-pages-aspnet-core
code .

ヒント

互換性のあるコンテナー ランタイムがインストールされている場合は、Dev Containers 拡張機能を使って、ツールがプレインストールされたコンテナーでリポジトリを開くことができます。

チームメイトの作業を確認する

少し時間を取って、ContosoPizza フォルダー内の既存のコードについて理解することにしましょう。 プロジェクトは、dotnet new webapp コマンドを使用して作成された ASP.NET Core Web アプリです。 以下では、チームメイトが行った変更について説明します。

ヒント

これらの変更の確認にあまり時間をかけないでください。 チームメイトは、データベースと、データベースに対してピザを読み書きするサービスを作成する作業を既に完了していますが、UI の変更は行っていません。 次のユニットでは、そのサービスを使用する UI を構築します。

  • プロジェクトに Models フォルダーが追加されました。
    • Models フォルダーには、ピザを表す Pizza クラスが含まれています。
  • プロジェクトに Data フォルダーが追加されてました。
    • Data フォルダーには、データベース コンテキストを表す PizzaContext クラスが含まれています。 これは、Entity Framework Core の DbContext クラスを継承します。 Entity Framework Core は、データベースの操作を容易にするオブジェクト リレーショナル マッパー (ORM) です。
  • プロジェクトに Services フォルダーが追加されました。
    • Services フォルダーには、ピザの一覧表示と追加を行うメソッドを公開する PizzaService クラスが含まれています。
    • PizzaService クラスでは、PizzaContext クラスを使用してピザをデータベースに読み書きします。
    • このクラスは、Program.cs (10 行目) の依存関係挿入に登録されます。

Entity Framework Core では、次のものも生成されました。

  • Migrations フォルダーが生成されました。
    • Migrations フォルダーには、データベース スキーマを作成するコードが含まれています。
  • SQLite データベース ファイル ContosoPizza.db が生成されました。
    • SQLite 拡張機能 がインストールされている場合 (または GitHub Codespaces を使用している場合)、ファイルを右クリックし、[データベースを開く] を選択して、データベースを表示できます。 データベース スキーマは、[エクスプローラー] ペインの [SQLite エクスプローラー] タブに表示されます。

Razor Pages プロジェクトの構造を確認する

プロジェクト内の他のすべてのものは、プロジェクトが作成された時点から変更されていません。 次の表では、dotnet new webapp コマンドで生成されたプロジェクトの構造について説明します。

名前 説明
Pages/ Razor Pages とサポート ファイルが含まれます。 各 Razor ページには、.cshtml ファイルと .cshtml.csPageModel クラス ファイルがあります。
wwwroot/ HTML、JavaScript、CSS などの静的資産ファイルが含まれます。
ContosoPizza.csproj 依存関係などのプロジェクト構成メタデータが含まれます。
Program.cs アプリのエントリ ポイントとして機能し、ルーティングなどのアプリの動作を構成します。

その他の注目すべき観察項目:

  • Razor ページ ファイルとそれらとペアになっている PageModel クラス ファイル

    Razor ページは Pages ディレクトリに格納されます。 前述のとおり、各 Razor ページには、.cshtml ファイルと .cshtml.csPageModel クラス ファイルがあります。 PageModel クラスを使用すると、Razor のロジックとプレゼンテーションを分離できます。このクラスでは、要求のページ ハンドラーを定義し、Razor ページにスコープ設定されたデータ プロパティとロジックをカプセル化します。

  • Pages ディレクトリ構造とルーティング要求

    Razor Pages では、Pages ディレクトリ構造をルーティング要求の規約として使用します。 次の表は、URL をファイル名にマップする方法を示しています。

    URL マップ先の Razor ページ
    www.domain.com Pages/Index.cshtml
    www.domain.com/Index Pages/Index.cshtml
    www.domain.com/Privacy Pages/Privacy.cshtml
    www.domain.com/Error Pages/Error.cshtml

    Pages ディレクトリ内のサブフォルダーは、Razor ページを整理するために使用されます。 たとえば、Pages/Products ディレクトリがある場合、URL にはその構造が反映されます。

    URL マップ先の Razor ページ
    www.domain.com/Products Pages/Products/Index.cshtml
    www.domain.com/Products/Index Pages/Products/Index.cshtml
    www.domain.com/Products/Create Pages/Products/Create.cshtml

  • レイアウトとその他の共有ファイル

    複数のページ間で共有されるファイルがいくつかあります。 これらのファイルによって、共通のレイアウト要素とページ インポートが決定されます。 次の表では、各ファイルの目的を説明します。

    ファイル 説明
    _ViewImports.cshtml 複数のページ間で使用される名前空間とクラスをインポートします。
    _ViewStart.cshtml すべての Razor ページの既定のレイアウトを指定します。
    Pages/Shared/_Layout.cshtml これは、_ViewStart.cshtml ファイルで指定されたレイアウトです。 複数のページ間で共通のレイアウト要素を実装します。
    Pages/Shared/_ValidationScriptsPartial.cshtml すべてのページに検証機能を提供します。

プロジェクトを初めて実行する

プロジェクトを実行して、実際の動作を確認しましょう。

  1. エクスプローラー で ContosoPizza フォルダーを右クリックし、[統合ターミナルで開く] を選択します。 これにより、プロジェクト フォルダーのコンテキストでターミナル ウィンドウが開きます。

  2. ターミナル ウィンドウに次のコマンドを入力します。

    dotnet watch

    このコマンドは、次の操作を行います。

    • プロジェクトをビルドします。
    • アプリを起動します。
    • ファイルの変更を監視し、変更が検出されたらアプリを再起動します。

  3. IDE により、ブラウザーでアプリを開くように求められます。 [ブラウザーで開く] を選択します。

    ヒント

    ターミナル ウィンドウで URL を見つけてアプリを開くこともできます。 Ctrl キーを押したまま URL をクリックして、ブラウザーで開きます。

  4. レンダリングされたホーム ページを IDE の Pages/Index.cshtml と比較します。

    • ファイル内の HTML、Razor 構文、C# コードの組み合わせを確認します。
      • Razor 構文は、@ 文字で示されています。
      • C# コードは、@{ } ブロックで囲まれています。 ファイルの先頭にあるディレクティブをメモします。
      • @page ディレクティブは、このファイルが Razor ページであることを指定します。
      • @model ディレクティブは、ページのモデルの種類を指定します (この場合は、Pages/Index.cshtml.cs で定義されている IndexModel)。
    • C# コード ブロックを確認します。
      • このコードでは、ViewData ディレクトリ内の Title 項目の値を "ホーム ページ" に設定します。
      • ViewData 辞書は、Razor ページと IndexModel クラスの間でデータを渡すために使用されます。
      • 実行時には、Title の値を使用してページの <title> 要素が設定されます。

アプリをターミナル ウィンドウで実行したままにしておきます。 以降のユニットでこれを使用します。 Contoso Pizza アプリを実行しているブラウザー タブもそのままにしておきます。 アプリに変更を加えると、ブラウザーが自動的に更新され、変更が表示されます。

ランディング ページをカスタマイズする

ピザ アプリとの関連性を高めるために、ランディング ページにいくつかの変更を加えてみましょう。

  1. Pages/Index.cshtml で、C# コード ブロックを次のコードに置き換えます。

    ViewData["Title"] = "The Home for Pizza Lovers";
TimeSpan timeInBusiness = DateTime.Now - new DateTime(2018, 8, 14);

    上記のコードでは次の操作が行われます。

    • ViewData ディレクトリ内の Title 項目の値を "Pizza Lovers のホーム" に設定します。
    • 開業からの経過時間を計算します。

  2. HTML を次のように変更します。

    • <h1> 要素を次のコードに置き換えます。

      <h1 class="display-4">Welcome to Contoso Pizza</h1>

    • <p> 要素を次のコードに置き換えます。

      <p class="lead">The best pizza in town for @Convert.ToInt32(timeInBusiness.TotalDays) days!</p>

    上記のコードでは次の操作が行われます。

    • 見出しを "Contoso Pizza へようこそ" に変更します。
    • 開業からの経過日数を表示します。
      • @ 文字は、HTML から Razor 構文に切り替えるために使用されます。
      • Convert.ToInt32 メソッドは、timeInBusiness 変数の TotalDays プロパティを整数に変換するために使用されます。
      • Convert クラスは、System 名前空間の一部であり、ContosoPizza.csproj ファイル内の <ImplicitUsings> 要素によって自動的にインポートされます。

  3. ファイルを保存します。 アプリが実行されているブラウザー タブは自動的に更新され、変更が表示されます。 GitHub Codespaces を使用している場合、ファイルは自動的に保存されますが、ブラウザー タブを手動で更新する必要があります。

重要

ファイルを保存するたびに、dotnet watch を使用してターミナル ウィンドウを注意深く監視してください。 場合によっては、コードに "Rude 編集" と呼ばれる変更が含まれていることがあります。 これは、変更したコードが、アプリケーションを再起動しないと再コンパイルできないことを意味します。 アプリを再起動するように求められたら、y キー (はい) または a キー (常時) を押します。 いつでもターミナル ウィンドウで Ctrl+C キーを 2 回押すことでアプリケーションを停止してから、再度 dotnet watch を実行することで再起動することができます。

Razor ページの最初の変更が完了しました。 次のユニットでは、ピザの一覧を表示する新しいページをアプリに追加します。