プロジェクトの作成
では、ここからプロジェクトを作成していきます。本連載では、いくつかのプロジェクトを作成していきますから、まずはプロジェクト群を格納するフォルダを作っておきましょう。ここでは、cz_aspdotnetとしました。これを、Documents配下でもよいので適当な場所に作っておいて下さい。
ここで、Visual Studio Code(以下、VSCode)を起動しておきます。コマンドの操作は、基本的にVSCodeのターミナル上で行っていきます。
プロジェクトの作成
まず、cz_aspdotnetフォルダに移動します。そして、以下のコマンドでプロジェクトを作成します。
% dotnet new webapp -o RazorPagesSample テンプレート "ASP.NET Core Web App" が正常に作成されました。 このテンプレートには、Microsoft 以外のパーティのテクノロジが含まれています。詳しくは、https://aka.ms/aspnetcore/6.0-third-party-notices をご覧下さい。 作成後の操作を処理しています... /Users/nao/Documents/cz_aspdotnet/RazorPagesSample/RazorPagesSample.csproj で ' dotnet restore ' を実行しています... 復元対象のプロジェクトを決定しています... /Users/nao/Documents/cz_aspdotnet/RazorPagesSample/RazorPagesSample.csproj を復元しました (84 ms)。 正常に復元されました。
ここで使われているdotnetコマンドは、.NET Coreで利用できる汎用のコマンドです。具体的な処理は、ここでのnewのようなサブコマンドが受け持ちます。つまり、dotnet newでひとつのコマンドとなります。dotnet newコマンドの書式は以下のとおりで、テンプレートに基づいてプロジェクトが作成されます。
[構文]dotnet newコマンド
dotnet new <テンプレート名> [オプション] [テンプレートオプション]
<テンプレート名>には、インストールされているテンプレートの中から、作成したいプロジェクトのテンプレートを指定します。ここではwebappを指定しましたが、webappはASP.NET Coreにおける標準的なWebアプリケーションのテンプレートのひとつです。どのようなテンプレートがインストールされているかを知るには、dotnet new --listコマンドを実行します。ただし、このコマンドをそのまま実行すると出力が膨大になるので、名前に「web」を含むものだけに絞って実行してみました。
% dotnet new --list web これらのテンプレートは、入力: 'web' と一致しました テンプレート名 短い名前 言語 タグ -------------------------------------------- ------------ ------- -------------------------- ASP.NET Core Empty web [C#],F# Web/Empty ASP.NET Core Web API webapi [C#],F# Web/WebAPI ASP.NET Core Web App webapp,razor [C#] Web/MVC/Razor Pages ASP.NET Core Web App (Model-View-Controller) mvc [C#],F# Web/MVC Blazor WebAssembly App blazorwasm [C#] Web/Blazor/WebAssembly/PWA Web 構成 webconfig Config
「短い名前」欄にwebapp,razorがある「ASP.NET Core Web App」が採用されることがわかります。言語はC#で、タグに「Web/MVC/Razor Pages」が指定されていることもわかります。今後、異なるタイプのアプリケーションを作りたいというときには、このように出力できるリストを参考にするとよいでしょう。
dotnet newコマンドの詳細なオプションについては、dotnet new --helpコマンドを実行して下さい。上記で指定されていた-oオプションは、テンプレートの出力フォルダを指定します(--outputと同じ)。つまり、カレントフォルダにRazorPagesSampleフォルダを作り、そこにファイルが出力されます。テンプレートオプションはテンプレートごとに指定できるオプションですが、ここでは不要なので割愛します。
ビルドと実行の準備
これで、RazorPagesSampleフォルダに新しいプロジェクトが作成されますので、codeコマンドでこのフォルダに移動しておきます。なお、VSCodeのターミナルでcodeコマンドを-rオプションを付けて実行すると、同じVSCodeインスタンスのまま指定のフォルダに移動し、自動的にVSCodeのエクスプローラーでそのフォルダを開きます。
% code -r RazorPagesSample
[NOTE]macOSでcodeコマンドを実行できるようにする
Windowsでは、codeコマンドがすでにPATHに通っていますので問題ないですが、macOSではPATHが通っておらずそのままでは実行できません。[表示]-[コマンドパレット...]を選択し表示されるドロップダウンで、「shell」と入力します。すると、「シェル コマンド: PATH 内に 'code' コマンドをインストールします」を含む選択肢が表示されますので、それを選択します。「正常にインストールされました」と表示されたら、[OK]をクリックします。これで、ターミナル上からcodeコマンドが実行できます。
[NOTE]C#の実行環境をインストールしておく
VSCodeに、C#の実行環境がインストールされていない場合には、その拡張機能をインストールしておきます。[実行]-[構成の追加...]を選択し、一覧に出てこなければ[拡張機能をインストールする...]を選択します。「拡張機能:マーケットプレース」が展開されますので、「C#」(C# for Visual Studio Code)を探して[インストール]をクリックします。「インストールしています」の表示が消えて「アンインストール」などの表示に変わればインストールは終了です。
VSCodeでプロジェクトのフォルダを開くと、右下に「Required assets to build...」というポップアップが表示されますので、[Yes]をクリックしてビルドとデバッグに必要なアセットをプロジェクトに追加します。プロジェクトのフォルダに.vscodeフォルダが作成され、そこにlaunch.jsonとtasks.jsonが追加されているのを確認しましょう。
また、localhost上での実行のための開発用証明書を受け入れる設定を、以下のようにdotnet dev-certsコマンドで行っておきます(macOSでの出力)。
% dotnet dev-certs https --trust Trusting the HTTPS development certificate was requested. If the certificate is not already trusted we will run the following command: 'sudo security add-trusted-cert -d -r trustRoot -k /Library/Keychains/System.keychain <<certificate>>' This command might prompt you for your password to install the certificate on the system keychain. Password:
macOSの場合は、パスワードを要求されたら、キーチェーンのパスワードを入力します。Windowsの場合は、「Security Warning」のダイアログボックスが表されますので、[Yes]をクリックします。これで、開発用証明書の使用に同意したことになります。
ここまでで、準備は完了です。
実行する
作成したプロジェクトは、すぐに実行できます。実行は、Ctrl+F5キーで行います(デバッガなしの実行)。すると、デフォルトブラウザが起動しトップページが表示されます(図4)。
何もないページですが、ナビゲーション上の「Privacy」リンクをクリックすると、Privacyページに移動します。プロジェクト作成直後は、トップページの「Index」、Privacyページの「Privacy」、そしてエラー画面の「Error」の3つのページが作成されています。