"Hello, World!" を作成するUWP アプリ (XAML)

このチュートリアルでは、Native AOT (Ahead-of-Time) で XAML と C# を使用して、Windows上のユニバーサル Windows プラットフォーム (UWP)用の単純な "Hello, World!" アプリを作成する方法について説明します。 Microsoft Visual Studioで 1 つのプロジェクトを使用すると、サポートされているすべてのバージョンのWindows 10とWindows 11で実行されるアプリをビルドできます。

ここでは、次の方法を学習します。

Visual Studio で新しい UWP プロジェクトを作成します。
スタートページの UI を変更する XAML を記述します。
Visual Studioのローカルデスクトップでプロジェクトを実行します。
SpeechSynthesizer を使用して、ボタンを押したときにアプリを話します。

[前提条件]

ユニバーサル Windows アプリとは?
Visual Studio (およびWindows)をダウンロードします。助けが必要な場合は、設定方法を学んでください。
また、Visual Studioで既定のウィンドウレイアウトを使用していることを前提としています。既定のレイアウトを変更する場合は、[ ウィンドウ レイアウトのリセット] コマンドを使用してウィンドウメニューで リセット できます。

注

このチュートリアルでは、Visual Studio 2026 を使用しています。別のバージョンのVisual Studioを使用している場合は、少し異なって見える場合があります。

手順 1: Visual Studioで新しいプロジェクトを作成する

Visual Studioを起動します。
File メニューから New > Project を選択して、New Project ダイアログを開きます。
Languages ドロップダウンリストから C# を選択し、Project types ドロップダウンリストから UWP を選択して、C# 開発者用の使用可能な UWP プロジェクトテンプレートのリストを表示します。

(UWP テンプレートが表示されない場合は、UWP アプリを作成するためのコンポーネントが見つからない可能性があります。インストールプロセスを繰り返し、Windowsの [スタート] メニューから Visual Studio Installer を開くことで、UWP サポートを追加できます。詳細については、「 UWP 開発のVisual Studioを設定する」を参照してください)。
UWP 空のアプリテンプレートを選択します。

重要

UWP 空のアプリ テンプレートは既定値であり、ネイティブ AOT を使用した最新の.NETを対象とします。 UWP 空のアプリ (.NET ネイティブ) テンプレートが表示される場合、これは古い .NET Native ランタイムを対象とするレガシテンプレートです。最新の.NET テンプレートを使用するアプリは、最新の.NETおよび C# 機能、パフォーマンスの向上、ツールの向上にアクセスできます。相違点の詳細については、「 .NET とネイティブ AOTを使用して UWP アプリを変更する」を参照してください。
Next を選択し、Project name として「HelloWorld」と入力します。 を選択してを作成します。

注

Visual Studioを初めて使用する場合は、Developer モードを有効にするように求める [設定] ダイアログが表示されることがあります。開発者モードは、ストアからのみではなく、アプリを直接実行するアクセス許可など、特定の機能を有効にする特別な設定です。詳細については、「デバイスの開発を有効にする」を参照してください。このガイドを続行するには、[開発者モード]選択し、[はい]クリックして、ダイアログを閉じます。
[ターゲットバージョン]/[最小バージョン]ダイアログボックスが表示されます。このチュートリアルでは既定の設定で問題ないため、[ OK] を 選択してプロジェクトを作成します。
新しいプロジェクトが開くと、そのファイルが右側の ソリューションエクスプローラー ペインに表示されます。ファイルを表示するには、Properties> タブまたは GitHub Copilot Chat タブの代わりにソリューションエクスプローラータブを選択することが必要になる場合があります。

UWP 空のアプリは最小限のテンプレートですが、まだ多くのファイルが含まれています。これらのファイルは、C# を使用するすべての UWP アプリに不可欠です。 Visual Studioで作成するすべての UWP プロジェクトには、それらの要素が含まれています。

ファイルの内容

プロジェクト内のファイルを表示および編集するには、ソリューションエクスプローラー内のファイルをダブルクリックします。フォルダーと同じように XAML ファイルを展開して、関連付けられているコードファイルを表示します。 XAML ファイルは、デザインサーフェイスと XAML エディターの両方を示す分割ビューで開きます。

注

XAML とは拡張可能なアプリケーションマークアップ言語 (XAML) は、アプリのユーザーインターフェイスを定義するために使用される言語です。手動で入力することも、Visual Studioデザインツールを使用して作成することもできます。 .xaml ファイルには、ロジックを含む .xaml.cs コードビハインドファイルがあります。 XAML と分離コードを組み合わせることで、完全なクラスが作成されます。詳細については、「XAML の概要」を参照してください。

App.xaml と App.xaml.cs にする

App.xaml は、アプリ全体で使用されるリソースを宣言するファイルです。
App.xaml.csは、App.xaml のコードビハインドファイルです。コードビハインドページと同様に、InitializeComponent メソッドを呼び出すコンストラクタが含まれています。 InitializeComponent メソッドは記述しません。これはVisual Studioによって生成され、主な目的は XAML ファイルで宣言された要素を初期化することです。
App.xaml.csは、アプリのエントリポイントです。
App.xaml.csには、アプリのアクティブ化と中断を処理するメソッドも含まれています。

MainPage.xaml

MainPage.xaml は、アプリの UI を定義する場所です。 XAML マークアップを使用して要素を直接追加することも、Visual Studioによって提供されるデザインツールを使用することもできます。
MainPage.xaml.cs は MainPage.xaml のコードビハインドページです。ここで、アプリロジックとイベントハンドラーを追加します。
これら 2 つのファイルを組み合わせて、MainPage 名前空間の Page から継承する HelloWorld という新しいクラスを定義します。

Package.appxmanifest

アプリの名前、説明、タイル、スタートページなど、アプリを記述するマニフェストファイル。
アプリに含まれる依存関係、リソース、ファイルの一覧が含まれます。

ロゴ画像のセット

アセット/Square150x150Logo.scale-200.png と Wide310x150Logo.scale-200.png は、スタートメニューのアプリ (中またはワイドサイズ) を表します。
Assets/Square44x44Logo.png は、スタートメニュー、タスクバー、タスクマネージャーのアプリ一覧でアプリを表します。
アセット/StoreLogo.png は、Microsoft Store内のアプリを表します。
アセット/SplashScreen.scale-200.png は、アプリの起動時に表示されるスプラッシュ画面です。
資産/LockScreenLogo.scale-200.png は、システムがロックされているときに、ロック画面でアプリを表すために使用できます。

手順 2: ボタンを追加する

デザイナービューの使用

ページにボタンを追加しましょう。このチュートリアルでは、前に示したファイルの一部 (App.xaml、MainPage.xaml、MainPage.xaml.cs) のみを操作します。

MainPage.xaml をダブルクリックして、XAML エディターで開きます。

注

モダン .NETを使用する UWP 空のアプリ テンプレートを使用する場合、デザインビューは表示されません。 XAML デザインビューを使用して UWP プロジェクトを操作する場合は、代わりに UWP 空のアプリ (.NET ネイティブ) テンプレートを使用できます。既に説明したように、UWP 空のアプリ (.NET ネイティブ) テンプレートは、UWP 空のアプリ テンプレートとは少し異なりますが、基本的な構造は同じです。主な違いは、UWP ブランクアプリ (.NET Native) テンプレートがネイティブ .NET を使用してアプリをコンパイルすることです。モダン .NET テンプレートを使用する利点については、「 .NET とネイティブ AOT を使用して UWP アプリを変更する」を参照してください。
MainPage.xaml の <Grid> 要素に次の XAML コードを追加します。これを入力するか、コピーしてここから貼り付けることができます。
```
<Button x:Name="button" Content="Button" HorizontalAlignment="Left" Margin = "152,293,0,0" VerticalAlignment="Top"/>
```
この時点で、非常に単純なアプリを作成しました。これは、アプリをビルド、デプロイ、起動し、その外観を確認するのに適したタイミングです。アプリは、ローカルコンピューター、シミュレーターまたはエミュレーター、またはリモートデバイスでデバッグできます。 Visual Studioのターゲットデバイスメニューを次に示します。

既定では、アプリはローカルコンピューター上で実行されます。ターゲットデバイスメニューには、デスクトップデバイスファミリのデバイスでアプリをデバッグするためのオプションがいくつか用意されています。
- HelloWorld (ローカルコンピューターで実行されます)
- WSL
- 新しいエミュレーターのダウンロード...
アプリを実行して、ボタンの動作を確認します。ローカルコンピューターでデバッグを開始するには、メニューで デバッグ | デバッグの開始 項目を選択するか、ツールバーの HelloWorld ラベル付きデバッグ開始ボタンをクリックするか、F5キーを押します。

アプリがウィンドウで開き、最初に既定のスプラッシュ画面が表示されます。スプラッシュ画面は、イメージ (SplashScreen.png) と背景色 (アプリのマニフェストファイルで指定) によって定義されます。

スプラッシュ画面が消え、アプリが表示されます。次のようになります。
Windows キーを押して Start メニューを開き、 All を選択してすべてのアプリを表示します。アプリをローカルに展開すると、[ スタート ] メニューのプログラムの一覧にアプリが追加されます。後で (デバッグモードではなく) アプリを再度実行するには、[ スタート ] メニューでアプリを選択できます。

まだそれほど多くはありませんが、これで初めての UWP アプリを作成し、ローカルコンピューターに展開できました。
デバッグを停止するには:

ツールバーの [ デバッグの停止 ] ボタン () をクリックします。

–又は–

[ デバッグ ] メニューの [ デバッグの停止] をクリックします。

–又は–

アプリウィンドウを閉じます。
Contentの値を Button から Hello, world! に変更して、ボタンのテキストを変更します。
```
<Button x:Name="button" Content="Hello, world!" HorizontalAlignment="Left" Margin = "152,293,0,0" VerticalAlignment="Top"/>
```
アプリをもう一度実行すると、ボタンが更新され、新しいテキストが表示されます。

手順 3: イベントハンドラー

"イベントハンドラー" は複雑に思われますが、イベントが発生したときに呼び出されるコードの別の名前です (ユーザーがボタンをクリックするなど)。

まだ実行していない場合は、アプリの実行を停止します。
XAML エディターで Click の入力を開始すると、使用可能なイベントの一覧Visual Studio表示されます。一覧から [クリック] を選択します。
次に、一覧から <New Event Handler> を選択します。これにより、分離コードファイル (MainPage.xaml.cs) に新しいイベントハンドラーメソッドが作成され、XAML コードのボタン要素に Click イベントが追加されます。

XAML エディターは、XAML コード内のボタン要素に Click イベントを自動的に追加します。
```
<Button x:Name="button" Content="Hello, world!" HorizontalAlignment="Left" Margin = "152,293,0,0" VerticalAlignment="Top" Click="button_Click"/>
```
これにより、分離コードファイル (MainPage.xaml.cs) にイベントハンドラーも追加されます。イベントハンドラーは、ボタンがクリックされたときに呼び出されるメソッドです。メソッドの名前は button_Clickであり、 object sender と RoutedEventArgs eの 2 つのパラメーターがあります。
```
private void button_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{

}
```
Click イベントは、ボタンの標準的なイベントです。ユーザーがボタンをクリックすると、 button_Click メソッドが呼び出されます。
MainPage.xaml.cs のコードビハインドページでイベントハンドラーコードを編集します。ここで興味深いものが得られます。これを変更してみましょう。次のようになります。
```
private async void button_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
    var mediaElement = new MediaElement();
    var synth = new Windows.Media.SpeechSynthesis.SpeechSynthesizer();
    Windows.Media.SpeechSynthesis.SpeechSynthesisStream stream = await synth.SynthesizeTextToStreamAsync("Hello, World!");
    mediaElement.SetSource(stream, stream.ContentType);
    mediaElement.Play();
}
```
メソッドシグネチャに async キーワードが含まれていることを確認してください。または、アプリを実行しようとするとエラーが発生します。

私たちは何をしましたか?

このコードでは、いくつかのWindows API を使用して音声合成オブジェクトを作成し、言うテキストを提供します。 (SpeechSynthesis の使用の詳細については、Windows ランタイム (WinRT) API ドキュメントの SpeechSynthesis 名前空間を参照してください)。

アプリを実行してボタンをクリックすると、コンピューター (または電話) は文字どおり "Hello, World!" と表示されます。

概要

これで、最新の.NETでWindows用の最初の UWP アプリが作成されました。

アプリで使用するコントロールをレイアウトするために XAML を使用する方法については、グリッドのチュートリアルを試すか、次の手順に進んでください。

フィードバック

このページはお役に立ちましたか?

Last updated on 2026-01-26