チュートリアル : Visual C# または Visual Basic による簡単なアプリケーションの作成Walkthrough: Create a Simple Application with Visual C# or Visual Basic

このチュートリアルを完了すると、Visual Studio を使用してアプリケーションを開発する際に使用できるさまざまなツール、ダイアログ ボックス、およびデザイナーの使用方法を習得できます。By completing this walkthrough, you'll become familiar with many of the tools, dialog boxes, and designers that you can use when you develop applications with Visual Studio. 簡単な "Hello, World" アプリケーションの作成、UI の設計、コードの追加、エラーのデバッグを行いながら、統合開発環境 (IDE) での作業方法について学習します。You'll create a simple "Hello, World" application, design the UI, add code, and debug errors, while you learn about working in the integrated development environment (IDE).

このトピックは、次のセクションで構成されています。This topic contains the following sections:

IDE の構成Configure the IDE

簡単なアプリケーションの作成Create a simple application

アプリケーションのデバッグとテストDebug and test the application

IDE の構成Configure the IDE

Visual Studio を初めて起動すると、サインインが求められます。When you start Visual Studio for the first time, you'll be prompted to sign in. このチュートリアルでは、この手順は任意です。This step is optional for this walkthrough. 次に、開発設定と色テーマの選択を求めるダイアログ ボックスが表示される場合があります。Next you may be shown a dialog box that asks you to choose your development settings and color theme. 既定値のままにして [Visual Studio の開始] を選択します。Keep the defaults and choose Start Visual Studio.

設定を選択するダイアログ ボックスChoose settings dialog box

Visual Studio を起動すると、ツール ウィンドウ、メニューとツール バー、メイン ウィンドウ領域が表示されます。After Visual Studio launches, you'll see tool windows, the menus and toolbars, and the main window space. ツール ウィンドウは、アプリケーション ウィンドウの左側および右側にドッキングされており、上部には クイック起動、メニュー バー、および標準ツール バーがあります。Tool windows are docked on the left and right sides of the application window, with Quick Launch, the menu bar, and the standard toolbar at the top. アプリケーション ウィンドウの中央には、 スタート ページが表示されます。In the center of the application window is the Start Page. ソリューションかプロジェクトが読み込まれると、 [スタート ページ] がある領域にエディターとデザイナーが表示されます。When you load a solution or project, editors and designers appear in the space where the Start Page is. アプリケーションを開発する場合は、ほとんどの時間をこの中央の領域での作業に費やします。When you develop an application, you'll spend most of your time in this central area.

全般設定が適用された IDEIDE with General Settings Applied

簡単なアプリケーションの作成Create a simple application

プロジェクトの作成Create the project

Visual Studio でアプリケーションを作成するには、最初にプロジェクトおよびソリューションを作成します。When you create an application in Visual Studio, you first create a project and a solution. この例では、Windows Presentation Foundation (WPF) プロジェクトを作成します。For this example, you'll create a Windows Presentation Foundation (WPF) project.

WPF プロジェクトを作成するにはTo create the WPF project

  1. 新しいプロジェクトを作成します。Create a new project. メニュー バーで [ファイル][新規][プロジェクト] の順にクリックします。On the menu bar, choose File, New, Project....

    メニュー バーで、[ファイル]、[新規作成]、[プロジェクト] の順に選択します。On the menu bar, choose File, New, Project

  2. Visual Basic か Visual C# の WPF アプリ テンプレートを選択します。その方法としては、たとえば、左側のペインで [インストール済み][Visual C#][Windows クラシック デスクトップ] の順に選択してから、中央のペインで [WPF アプリ (.NET Framework)] を選択します。Choose the Visual Basic or the Visual C# WPF App template by choosing in the left pane Installed, Visual C#, Windows Classic Desktop, for example, and then choosing WPF App (.NET Framework) in the middle pane. 下部の [新しいプロジェクト] ダイアログで、プロジェクトに HelloWPFApp という名前を付けます。Name the project HelloWPFApp at the bottom of the New Project dialog.

    C# WPF プロジェクトの作成、HelloWPFAppCreate a C# WPF Project, HelloWPFApp

    Visual Studio は HelloWPFApp というプロジェクトとソリューションを作成し、ソリューション エクスプローラーは各種ファイルを表示します。Visual Studio creates the HelloWPFApp project and solution, and Solution Explorer shows the various files. WPF デザイナーには、MainWindow.xaml のデザイン ビューと XAML ビューが分割ビューで表示されます The WPF Designer shows a design view and a XAML view of MainWindow.xaml in a split view. 分割線をスライドして、それぞれのビューの表示範囲を増減できます。You can slide the splitter to show more or less of either view. ビジュアル ビューか XAML ビューの一方のみを表示することも選択できます。You can choose to see only the visual view or only the XAML view. (詳細については、「Windows フォーム開発者向け WPF デザイナー」を参照してください。)次の項目が ソリューション エクスプローラーに表示されます。(For more information, see WPF Designer for Windows Forms Developers.) The following items appear in Solution Explorer:

    HelloWPFApp ファイルを読み込んだソリューション エクスプローラーSolution Explorer with HelloWPFApp files loaded

    プロジェクトは、作成後にカスタマイズできます。After you create the project, you can customize it. [プロパティ] ウィンドウ ( [表示] メニュー上) を使って、プロジェクト項目、コントロール、およびアプリケーション内のその他の項目に関するオプションを表示して変更できます。By using the Properties window (found on the View menu), you can display and change options for project items, controls, and other items in an application.

MainWindow.xaml の名前を変更するにはTo change the name of MainWindow.xaml

それでは、MainWindow に具体的な名前を付けましょう。Let's give MainWindow a more specific name.

  1. ソリューション エクスプローラーで、MainWindow.xaml を選択します。In Solution Explorer, select MainWindow.xaml. [プロパティ] ウィンドウが表示されるはずですが、表示されない場合は、[表示] メニューを選択し、[プロパティ ウィンドウ] 項目を選択します。You should see the Properties window, but if you don't, choose the View menu and then the Properties Window item.
  2. [File Name] プロパティを Greetings.xamlに変更します。Change the File Name property to Greetings.xaml.

    ファイル名が強調表示されたプロパティ ウィンドウProperties window with File Name highlighted

    ソリューション エクスプローラーに表示されているこのファイルの名前が Greetings.xaml になり、入れ子になっているコード ファイルの名前が Greetings.xaml.vb または Greetings.xaml.cs になります。Solution Explorer shows that the name of the file is now Greetings.xaml, and the nested code file is now named Greetings.xaml.vb or Greetings.xaml.cs. このコード ファイルは、.xaml ファイル ノードの下に入れ子になっており、相互に密接に関連していることが示されます。This code file is nested under the .xaml file node to show they are closely related to each other.

ユーザー インターフェイス (UI) のデザインDesign the user interface (UI)

このアプリケーションに 3 種類のコントロール (TextBlock コントロール、2 つの RadioButton コントロール、および Button コントロール) を追加します。We will add three types of controls to this application: a TextBlock control, two RadioButton controls, and a Button control.

TextBlock コントロールを追加するにはTo add a TextBlock control

  1. [表示] メニュー、 [ツールボックス] 項目の順に選択し、 [ツールボックス] ウィンドウを開きます。Open the Toolbox window by choosing the View menu and the Toolbox item.

  2. [ツールボックス] で、[コモン WPF コントロール] ノードを展開し、TextBlock コントロールを表示します。In the Toolbox, expand the Common WPF Controls node to see the TextBlock control.

    TextBlock コントロールを強調表示したツールボックスToolbox with the TextBlock control highlighted

  3. TextBlock 項目を選択してデザイン サーフェイス上のウィンドウにドラッグし、TextBlock コントロールをデザイン サーフェイスに追加します。Add a TextBlock control to the design surface by choosing the TextBlock item and dragging it to the window on the design surface. ウィンドウの上部付近の中央にコントロールを配置します。Center the control near the top of the window.

    ウィンドウは次の図のようになります。Your window should resemble the following illustration:

    グリーティング フォームの TextBlock コントロールTextBlock control on the Greetings form

    XAML マークアップは、次のようになります。The XAML markup should look something like the following:

    <TextBlock HorizontalAlignment="Center" TextWrapping="Wrap" VerticalAlignment="Center" RenderTransformOrigin="4.08,2.312" Margin="237,57,221,238"><Run Text="TextBlock"/><InlineUIContainer><TextBlock TextWrapping="Wrap" Text="TextBlock"/>  
    

テキスト ブロックのテキストをカスタマイズするにはTo customize the text in the text block

  1. XAML ビューで、TextBlock のマークアップを探し、Text 属性をIn the XAML view, locate the markup for TextBlock and change the Text attribute:

    Text="Select a message option and then choose the Display button."
    
  2. 必要に応じて、TextBlock をもう一度中央揃えし、Ctrl-s を押すか [ファイル] メニュー項目を使って変更を保存します。Re-center the TextBlock if necessary, and save your changes by pressing Ctrl-s or using the File menu item.

次に、2 つの RadioButton コントロールをフォームに追加します。Next, you'll add two RadioButton controls to the form.

オプション ボタンを追加するにはTo add radio buttons

  1. [ツールボックス] で、RadioButton コントロールを探します。In the Toolbox, find the RadioButton control.

    RadioButton コントロールをオンにした [ツールボックス] ウィンドウToolbox window with RadioButton control selected

  2. RadioButton 項目を選択してデザイン サーフェイス上のウィンドウにドラッグし、RadioButto コントロールを 2 つデザイン サーフェイスに追加します。Add two RadioButton controls to the design surface by choosing the RadioButton item and dragging it to the window on the design surface. TextBlock コントロールの下にボタンが並んで表示されるように、ボタンを移動します (ボタンを選択し、方向キーを使います)。Move the buttons (by selecting them and using the arrow keys) so that the buttons appear side by side under the TextBlock control.

    ウィンドウは、次のようになります。Your window should look like this:

    テキストブロックと 2 つのオプション ボタンのあるグリーティング フォームGreetings form with textblock and two radiobuttons

  3. 左側の RadioButton コントロールの [プロパティ] ウィンドウで、[Name] プロパティ ([プロパティ] ウィンドウの一番上のプロパティ) を HelloButton に変更します。In the Properties window for the left RadioButton control, change the Name property (the property at the top of the Properties window) to HelloButton.

    RadioButton プロパティ ウィンドウRadioButton properties window

  4. 右側の RadioButton コントロールの [プロパティ] ウィンドウで、[Name] プロパティを GoodbyeButton に変更し、変更を保存します。In the Properties window for the right RadioButton control, change the Name property to GoodbyeButton, and then save your changes.

これで、各 RadioButton コントロールの表示テキストを追加できます。You can now add display text for each RadioButton control. 次の手順では、RadioButton コントロールの [Content] プロパティを更新します。The following procedure updates the Content property for a RadioButton control.

各オプション ボタンの表示テキストを追加するにはTo add display text for each radio button

  1. デザイン サーフェイスで、HelloButton のショートカット メニューを開きます。HelloButton の右マウス ボタンを押し、[テキストの編集] を選択し、'Hello' と入力します。On the design surface, open the shortcut menu for HelloButton by pressing the right mouse button on HelloButton, choose Edit Text, and then enter 'Hello'.

  2. GoodbyeButton のショートカット メニューを開きます。GoodbyeButton の右マウス ボタンを押し、[テキストの編集] を選択し、'Goodbye' と入力します。Open the shortcut menu for GoodbyeButton by pressing the right mouse button on GoodbyeButton, choose Edit Text, and then enter 'Goodbye'.

チェックマークが既定で付けられるようにラジオ ボタンを設定するにはTo set a radio button to be checked by default

この手順では、2 つのラジオ ボタンのいずれかが常に選択されるように、HelloButton に既定でチェックマークが付けられるように設定します。In this step we'll set HelloButton to be checked by default so that one of the two radio buttons is always selected.

XAML ビューで、HelloButton のマークアップを見つけ、IsChecked 属性を追加します。In the XAML view, locate the markup for HelloButton and add an IsChecked attribute:

IsChecked="True"

最後に追加する UI 要素は、Button コントロールです。The final UI element that you'll add is a Button control.

Button コントロールを追加するにはTo add the button control

  1. [ツールボックス]で、 Button コントロールを探し、デザイン サーフェイスの RadioButton コントロールの下に追加します。デザイン ビュー内のフォームにドラッグすると追加されます。In the Toolbox, find the Button control, and then add it to the design surface under the RadioButton controls by dragging it to the form in the design view.

  2. XAML ビューで、Button コントロールの [Content] の値を Content="Button" から Content="Display"に変更し、変更を保存します。In the XAML view, change the value of Content for the Button control from Content="Button" to Content="Display", and then save the changes.

    マークアップは、次の例のようになります。The markup should resemble the following example:
    <Button Content="Display" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="215,204,0,0"/>

    ウィンドウは次の図のようになります。Your window should resemble the following illustration.

    コントロール ラベルのあるグリーティング フォームGreetings form with control labels

Display ボタンのコードの追加Add code to the Display Button

このアプリケーションを実行すると、ユーザーがラジオ ボタンを選択した後で [Display] ボタンを選択したときに、メッセージ ボックスが表示されます。When this application runs, a message box appears after a user chooses a radio button and then chooses the Display button. 1 つのメッセージ ボックスには "Hello" と表示され、もう 1 つメッセージ ボックスには "Goodbye" と表示されます。One message box will appear for Hello, and another will appear for Goodbye. この動作を作成するために、Greetings.xaml.vb または Greetings.xaml.cs の Button_Click イベントにコードを追加します。To create this behavior, you'll add code to the Button_Click event in Greetings.xaml.vb or Greetings.xaml.cs.

メッセージ ボックスを表示するコードの追加Add code to display message boxes

  1. デザイン サーフェイスで、 [Display] ボタンをダブルクリックします。On the design surface, double-click the Display button.

    Greetings.xaml.vb または Greetings.xaml.cs が開き、Button_Click イベントにカーソルが表示されます。Greetings.xaml.vb or Greetings.xaml.cs opens, with the cursor in the Button_Click event.

    Private Sub Button_Click_1(sender As Object, e As RoutedEventArgs)  
    
    End Sub  
    
    private void Button_Click_1(object sender, RoutedEventArgs e)  
    {  
    
    }  
    
  2. 次のコードを入力します。Enter the following code:

    If HelloButton.IsChecked = True Then  
        MessageBox.Show("Hello.")  
    ElseIf GoodbyeButton.IsChecked = True Then 
        MessageBox.Show("Goodbye.")  
    End If  
    
    if (HelloButton.IsChecked == true)
    {
         MessageBox.Show("Hello.");
    }
    else if (GoodbyeButton.IsChecked == true)
    {
        MessageBox.Show("Goodbye.");
    }
    
  3. アプリケーションを保存します。Save the application.

アプリケーションのデバッグとテストDebug and test the application

次に、アプリケーションをデバッグしてエラーを探し、両方のメッセージ ボックスが正しく表示されることをテストします。Next, you'll debug the application to look for errors and test that both message boxes appear correctly. 以下の指示にデバッガーをビルドして起動する方法が示されていますが、詳細については、後で「WPF アプリケーション (WPF) のビルド」および「Debugging WPF」(WPF のデバッグ) を参照することもできます。The following instructions tell you how to build and launch the debugger, but later you might read Building a WPF Application (WPF) and Debugging WPF for more information.

エラーの検出と修正Find and fix errors

この手順では、前に MainWindow.xaml ファイルの名前を変更することで引き起こしたエラーを見つけます。In this step, you'll find the error that we caused earlier by changing the name of the MainWindow.xaml file.

デバッグを開始し、エラーを見つけるにはTo start debugging and find the error

  1. [デバッグ][デバッグの開始]の順に選択して、デバッガーを起動します。Start the debugger by selecting Debug, then Start Debugging.

    [デバッグ] メニューの [デバッグの開始] コマンドStart Debugging command on the Debug menu

    [ブレーク モード] ウィンドウが表示されます。[出力] ウィンドウに、IOException が発生し、リソース 'mainwindow.xaml' が見つけられないことが示されます。A Break Mode window appears, and the Output window indicates that an IOException has occurred: Cannot locate resource 'mainwindow.xaml'.

  2. [デバッグ][デバッグの停止] の順に選択し、デバッガーを停止します。Stop the debugger by choosing Debug, Stop Debugging.

    [デバッグ] メニューの [デバッグの停止] コマンドStop Debugging command on the Debug menu

    このチュートリアルの最初で MainWindow.xaml の名前を Greetings.xaml に変更しましたが、このコードではアプリケーションのスタートアップ URI として mainwindow.xaml が指定されたままになっているため、プロジェクトを起動できません。We renamed MainWindow.xaml to Greetings.xaml at the start of this walkthrough, but the code still refers to mainwindow.xaml as the startup URI for the application, so the project can't start.

スタートアップ URI として Greetings.xaml を指定するにはTo specify Greetings.xaml as the startup URI

  1. ソリューション エクスプローラーで、App.xaml ファイル (C# プロジェクトの場合) または Application.xaml ファイル (Visual Basic プロジェクトの場合) を開きます。In Solution Explorer, open the App.xaml file (in the C# project) or the Application.xaml file (in the Visual Basic project).

  2. StartupUri="MainWindow.xaml"StartupUri="Greetings.xaml" に変更し、変更を保存します。Change StartupUri="MainWindow.xaml" to StartupUri="Greetings.xaml", and then save the changes.

デバッガーを再度起動します (F5 を押します)。Start the debugger again (press F5). アプリケーションの Greetings ウィンドウが表示されます。You should see the Greetings window of the application. アプリケーション ウィンドウを閉じ、デバッグを停止します。Now close the application window to stop debugging.

ブレークポイントを使用してデバッグするにはTo debug with breakpoints

ブレークポイントをいくつか追加することで、デバッグ中にコードをテストできます。You can test the code during debugging by adding some breakpoints. ブレークポイントを追加するには、[デバッグ][ブレークポイントの設定/解除] の順に選択するか、中断するコード行の横のエディター ウィンドウの左端の余白をクリックするか、F9 を押します。You can add breakpoints by choosing Debug, Toggle Breakpoint, by clicking in the left margin of the editor next to the line of code where you want the break to occur, or by pressing F9.

ブレークポイントを追加するにはTo add breakpoints

  1. Greetings.xaml.vb または Greetings.xaml.cs を開き、MessageBox.Show("Hello.") という行を選択します。Open Greetings.xaml.vb or Greetings.xaml.cs, and select the following line: MessageBox.Show("Hello.")

  2. [デバッグ][ブレークポイントの設定/解除]の順に選択して、メニューからブレークポイントを追加します。Add a breakpoint from the menu by selecting Debug, then Toggle Breakpoint.

    [デバッグ] メニューの [ブレークポイントの設定/解除] コマンドToggle Breakpoint command on the Debug menu

    コード行の横の、エディター ウィンドウの左端の余白部分に、赤い円が表示されます。A red circle appears next to the line of code in the far left margin of the editor window.

  3. MessageBox.Show("Goodbye.")という行を選択します。Select the following line: MessageBox.Show("Goodbye.").

  4. F9 キーを押してブレークポイントを追加し、F5 キーを押してデバッグを開始します。Press the F9 key to add a breakpoint, and then press F5 to start debugging.

  5. [Greetings] ウィンドウで、 [Hello] オプション ボタンを選択してから、 [Display] ボタンを選択します。In the Greetings window, choose the Hello radio button, and then choose the Display button.

    MessageBox.Show("Hello.") という行が黄色で強調表示されます。The line MessageBox.Show("Hello.") is highlighted in yellow. IDE の下部では、[自動変数]、[ローカル]、 [ウォッチ] の各ウィンドウが左側にまとめてドッキングされ、[呼び出し履歴]、[ブレークポイント]、[コマンド]、[イミディエイト]、 [出力] の各ウィンドウが右側にまとめてドッキングされます。At the bottom of the IDE, the Autos, Locals, and Watch windows are docked together on the left side, and the Call Stack, Breakpoints, Command, Immediate, and Output windows are docked together on the right side.

  6. メニュー バーで [デバッグ][ステップ アウト]の順に選択します。On the menu bar, choose Debug, Step Out.

    アプリケーションの実行が再開され、メッセージ ボックスに "Hello" と表示されます。The application resumes execution, and a message box with the word "Hello" appears.

  7. メッセージ ボックスの [OK] を選択して閉じます。Choose the OK button on the message box to close it.

  8. [Greetings] ウィンドウで、 [Goodbye] オプション ボタンを選択し、 [Display] ボタンを選択します。In the Greetings window, choose the Goodbye radio button, and then choose the Display button.

    MessageBox.Show("Goodbye.") という行が黄色で強調表示されます。The line MessageBox.Show("Goodbye.") is highlighted in yellow.

  9. F5 キーを押してデバッグを続行します。Choose the F5 key to continue debugging. メッセージ ボックスが表示されたら、メッセージ ボックスの [OK] を選択して、閉じます。When the message box appears, choose the OK button on the message box to close it.

  10. アプリケーション ウィンドウを閉じ、デバッグを停止します。Close the application window to stop debugging.

  11. メニュー バーで、 [デバッグ][すべてのブレークポイントを無効にする]の順に選択します。On the menu bar, choose Debug, Disable All Breakpoints.

アプリケーションのリリース バージョンのビルドBuild a release version of the application

すべてが機能することを確認したら、アプリケーションのリリース ビルドを準備できます。Now that you've verified that everything works, you can prepare a release build of the application.

ソリューション ファイルをクリーンアップし、リリース バージョンをビルドするにはTo clean the solution files and build a release version

  1. メイン メニューで、[ビルド][ソリューションのクリーン] の順に選択して、前のビルドで作成された中間ファイルと出力ファイルを削除します。On the main menu, select Build, Clean solution to delete intermediate files and output files that were created during previous builds. この作業は必須ではありませんが、デバッグ ビルドの出力がクリーンアップされます。This is not necessary, but it cleans up the debug build outputs.

    [ビルド] メニューの [ソリューションのクリーン] コマンドThe Clean Solution command on the Build menu

  2. ツールバー上のドロップダウン コントロール (現時点で [デバッグ] になっている) を使って、HelloWPFApp のビルド構成を [デバッグ] から [リリース] に変更します。Change the build configuration for HelloWPFApp from Debug to Release by using the dropdown control on the toolbar (it says "Debug" currently).

    [解放] を選択した標準ツール バーThe Standard toolbar with Release selected

  3. [ビルド] を選択し、[ソリューションのビルド] を選択してソリューションをビルドします。Build the solution by choosing Build, then Build Solution.

    [ビルド] メニューの [ソリューションのビルド] コマンドBuild Solution command on the Build menu

このチュートリアルは完了しました。Congratulations on completing this walkthrough! ビルドした .exe は、ソリューションとプロジェクトのディレクトリ (...\HelloWPFApp\HelloWPFApp\bin\Release\) の下にあります。You can find the .exe you built under your solution and project directory (...\HelloWPFApp\HelloWPFApp\bin\Release\). その他の例については、「Visual Studio Samples」を参照してください。If you want to explore more examples, see Visual Studio Samples.

関連項目See Also

Visual Studio 2017 の新機能 What's New in Visual Studio 2017
Visual Studio を使用した開発の開始 Get Started Developing with Visual Studio
生産性に関するヒントProductivity Tips