Visual Studio IDE の概要Visual Studio IDE overview

Visual Studio 統合開発環境 (IDE) は、ほぼすべての種類のコードの表示や編集が可能で、アプリをデバッグ、ビルド、発行するために使用できるクリエイティブなランチパッドです。The Visual Studio interactive development environment (IDE) is a creative launching pad that you can use to view and edit code, and then debug, build, and publish an app.

Visual Studio は Windows と Mac で利用できます。Visual Studio is available for Windows and Mac. Visual Studio for Mac は Visual Studio 2017 と同じ機能を多く備え、クロスプラットフォーム アプリとモバイル アプリの開発用に最適化されています。Visual Studio for Mac has many of the same features as Visual Studio 2017, and is optimized for developing cross-platform and mobile apps.

この記事では、Windows 用の Visual Studio 2017 について説明します。This article focuses on Visual Studio 2017 for Windows. IDE の基本的な機能を紹介します。It introduces you to the basic features of the IDE. 簡単なプロジェクトの作成、コーディング支援としての IntelliSense の使用、プログラム実行中の変数の値を確認するためのアプリのデバッグなど、Visual Studio で実行できることをいくつか見ていきます。We'll walk through some things you can do with Visual Studio, including creating a simple project, using IntelliSense as a coding aid, and debugging an app to see the value of a variable during the program's execution. さまざまなツール ウィンドウについても説明します。We'll also take a tour of the various tool windows.

Visual Studio IDE のインストールInstall the Visual Studio IDE

まず、Visual Studio 2017 をダウンロードしてシステムにインストールします。To get started, download Visual Studio 2017 and install it on your system.

モジュラー インストーラーでは、ワークロード (好みのプログラミング言語やプラットフォームで必要な機能のグループ) を選択してインストールできます。The modular installer enables you to choose and install workloads, which are groups of features needed for the programming language or platform you prefer. プログラムの作成手順に従う場合は、インストール時に必ず、[.NET Core クロスプラットフォームの開発] ワークロードを選択します。To follow the steps for creating a program, be sure to select the .NET Core cross-platform development workload during installation. Visual Studio での C++ の概要」などのクイック スタートのトピックに、他のワークロードのインストールの説明があります。The quickstart topics, such as Get started with C++ in Visual Studio, contain instructions for installing other workloads.

Visual Studio インストーラー

Visual Studio を初めて起動する際には、Microsoft アカウント、仕事用アカウント、または学校用アカウントを使ってサインインすることもできます。When you start Visual Studio for the first time, you can optionally sign in using your Microsoft account, or your work or school account.

IDE のツアーTour of the IDE

Visual Studio の全体像を視覚的に確認できるように、次のイメージには Visual Studio で開かれたプロジェクトと使用する可能性の高いいくつかの主なツール ウィンドウが示されています。To give you a high-level visual overview of Visual Studio, the following image shows Visual Studio with an open project along with several key tool windows you will most likely use:

Visual Studio IDE

  • ソリューション エクスプローラーでは、コード ファイルを表示、移動、および管理できます。Solution Explorer lets you view, navigate, and manage your code files. ソリューション エクスプローラーでは、ファイルをソリューションやプロジェクトにまとめ、コードを整理できます。Solution Explorer can help organize your code by grouping the files into solutions and projects.

  • 大部分の時間を費やすことになるエディター ウィンドウではコードが表示され、ソース コードの編集や UI の設計を行うことができます。The editor window, where you'll likely spend a majority of your time, shows your code and enables you to edit source code and design a UI.

  • [出力] ウィンドウには、デバッグ メッセージ、エラー メッセージ、コンパイラの警告、公開状態メッセージなど、Visual Studio の通知が出力されます。The Output window is where Visual Studio sends its notifications, such as debugging and error messages, compiler warnings, publishing status messages, and more. メッセージ ソースごとに独自のタブがあります。Each message source has its own tab.

  • チーム エクスプローラー (VSTS) では、GitTeam Foundation バージョン管理 (TFVC) などのバージョン管理テクノロジを使用して、作業項目を追跡し、コードを他のユーザーと共有できます。Team Explorer (VSTS) lets you track work items and share code with others using version control technologies such as Git and Team Foundation Version Control (TFVC).

Visual Studio には他にも次のような一般的な生産性を高める機能が用意されています。Following are some other popular productivity features in Visual Studio:

  • リファクタリング。これには、変数の名前をインテリジェントに変更する、選んだコード行を別個の関数に移動する、コードを他の場所に移動する、関数パラメーターを並べ替える、などの操作が含まれます。Refactoring includes operations such as intelligent renaming of variables, moving selected lines of code into a separate function, moving code to other locations, reordering function parameters, and more.

    リファクタリング

  • IntelliSense 。コードに関する型情報をエディターに直接表示したり、場合によっては、ちょっとしたコードを自動的に作成したりする、よく使われる機能セットの包括的な用語です。IntelliSense is an umbrella term for a set of popular features that display type information about your code directly in the editor and, in some cases, write small bits of code for you. エディター内のインラインに基本ドキュメントがあるようなもので、これによって、別個のヘルプ ウィンドウで型情報を検索する手間が省けます。It's like having basic documentation inline in the editor, which saves you from having to look up type information in a separate help window. IntelliSense 機能は言語によって異なります。IntelliSense features vary by language. 詳細については、「C# の IntelliSense」、「Visual C++ の IntelliSense」、「JavaScript IntelliSense」、および Visual Basic IntelliSense に関するページを参照してください。For more information, see C# IntelliSense, Visual C++ IntelliSense, JavaScript IntelliSense, and Visual Basic IntelliSense. 次の図は、職場でのいくつかの IntelliSense 機能を示しています。The following illustration shows some IntelliSense features at work:

    Visual Studio のメンバーの一覧

  • クイック起動検索ボックスは、Visual Studio で必要な情報を迅速に見つけるに役立ちます。The Quick Launch search box is a great way to rapidly find what you need in Visual Studio. 探している内容を表す名前を入力するだけで、Visual Studio に結果がリストされ、目的の場所に正確に移動できます。Just start typing in the name of whatever you are looking for, and Visual Studio lists results that take you exactly where you want to go. また、クイック起動にはすべてのワークロードまたは個々のコンポーネントに対応する Visual Studio インストーラーを起動するリンクが表示されます。Quick Launch also shows links that start Visual Studio Installer for any workload or individual component.

    クイック起動検索ボックス

  • 波線は波打った下線で、コード入力時にエラーや潜在的な問題をリアルタイムに警告します。Squiggles are wavy underlines that alert you to errors or potential problems in your code in real time as you type. これにより、コンパイル時や実行時にエラーが検出されるのを待たずに即時に修正できます。This enables you to fix them immediately without waiting for the error to be discovered during compilation or run time. 破線の上に移動すると、エラーに関する追加情報が表示されます。If you hover over the squiggle, you see additional information about the error. 電球とエラーを修正する方法が左余白に表示される場合もあります。A light bulb may also appear in the left margin with actions to fix the error. 詳細については、クイック アクションに関するページを参照してください。For more information, see Quick Actions.

    波線

  • [呼び出し階層] ウィンドウはテキスト エディターのコンテキスト メニューで開き、キャレット (挿入ポイント) の下のメソッドを呼び出す、またはそのメソッドによって呼び出されるメソッドを表示することができます。The Call Hierarchy window can be opened on the text editor context menu to show the methods that call, and are called by, the method under the caret (insertion point).

    [呼び出し階層] ウィンドウ

  • CodeLens。コードへの参照および変更、リンクされたバグ、作業項目、コード レビュー、単体テストをすべて、エディターを離れずに検索できます。CodeLens enables you to find references and changes to your code, linked bugs, work items, code reviews, and unit tests, all without leaving the editor.

    CodeLens

  • [ ピークの定義 ] ウィンドウ。現在のコンテキストから移動せずに、メソッドまたは型の定義インラインが表示されます。The Peek to Definition window shows a method or type definition inline, without navigating away from your current context.

    ピークの定義

  • [ 定義に移動 ] コンテキスト メニュー オプション。関数またはオブジェクトが定義されている場所に直接移動します。The Go To Definition context menu option takes you directly to the place where the function or object is defined. エディターを右クリックすることで、その他のナビゲーション コマンドも使用できます。Other navigation commands are also available by right-clicking in the editor.

    定義へ移動

プログラムの作成Create a program

簡単なプログラムを新しく作成してみましょう。Let's dive in and create a new, simple program.

  1. Visual Studio を開きます。Open Visual Studio. メニューで、[ファイル] > [新規作成] > [プロジェクト] を選択します。On the menu, choose File > New > Project.

    メニュー バーで [ファイル]、[新しいプロジェクト] の順に選択します。

  2. [新しいプロジェクト] ダイアログ ボックスには複数のプロジェクト "テンプレート" が表示されます。The New Project dialog box shows several project templates. テンプレートには、特定のプロジェクト タイプに必要な基本的なファイルと設定が含まれています。A template contains the basic files and settings needed for a given project type. [Visual C#][.NET Core] カテゴリを選択し、[Console App (.NET Core)](コンソール アプリ (.NET Core)) テンプレートを選択します。Choose the .NET Core category under Visual C#, and then choose the Console App (.NET Core) template. [名前] テキスト ボックスに「HelloWorld」と入力し、[OK] ボタンを選びます。In the Name text box, type HelloWorld, and then select the OK button.

    .NET Core アプリ テンプレート

    Visual Studio によってプロジェクトが作成されます。Visual Studio creates the project. これは、リテラル文字列 "Hello World!" を表示する Console.WriteLine() メソッドを呼び出す単純な "Hello World" アプリケーションです。It's a simple "Hello World" application that calls the Console.WriteLine() method to display the literal string "Hello World!" コンソール ウィンドウに表示します。in the console window.

    注意

    [.NET Core] カテゴリが表示されない場合は、[.NET Core クロスプラットフォームの開発] ワークロードをインストールする必要があります。If you don't see the .NET Core category, you need to install the .NET Core cross-platform development workload. これを実行するには、[新しいプロジェクト] ダイアログ ボックスの左下側の [Visual Studio インストーラーを開く] リンクをクリックします。To do this, choose the Open Visual Studio Installer link on the bottom left of the New Project dialog. Visual Studio インストーラーが開いたら、[.NET Core クロスプラットフォームの開発] ワークロードまで下にスクロールして選択してから [変更] を選択します。After Visual Studio Installer opens, scroll down and select the .NET Core cross-platform development workload, and then select Modify.

    すぐに次のようなグラフが表示されます。Shortly, you should see something like the following:

    Visual Studio IDE

    アプリケーションの C# コードは領域の大部分を占めるエディター ウィンドウに表示されます。The C# code for your application is shown in the editor window, which takes up most of the space. テキストは、キーワードや型など、コードの異なる要素を示すように自動的に色分けされます。Notice that the text is automatically colorized to indicate different aspects of the code, such as keywords and types. また、コードの縦の小さな点線は互いに一致する括弧を示し、行番号は後でコードの場所を探すのに役立ちます。In addition, small, vertical dashed lines in the code indicate which braces match one another, and line numbers help you locate code later. 小さな四角で囲まれたマイナス記号を選択するとコードが折りたたまれ、折りたたまれている場合は展開できます。You can choose the small, boxed minus signs to collapse or expand code. このコードのアウトライン機能を使用すると、必要のないコードを非表示にして画面を整理できます。This code outlining feature lets you hide code you don't need, helping to minimize onscreen clutter.

    プロジェクト ファイルは右側のソリューション エクスプローラーと呼ばれるウィンドウに一覧表示されます。The project files are listed on the right side in a window called Solution Explorer.

    赤色のボックスを持つ Visual Studio IDE

    他にもメニューやツール ウィンドウが用意されていますが、今は次に進みましょう。There are other menus and tool windows available, but let's move on for now.

  3. アプリを起動します。Now, start the app. そのためには、メニュー バーの [デバッグ] メニューから [デバッグなしで開始] を選択します。You can do this by choosing Start Without Debugging from the Debug menu on the menu bar. あるいは、Ctrl + F5 キーを押します。You can also press Ctrl+F5.

    [デバッグ]、[デバッグなしで開始] メニューを選択

    Visual Studio でアプリがビルドされ、コンソール ウィンドウが開き、メッセージ Hello World! が表示されます。Visual Studio builds the app, and a console window opens with the message Hello World!. これで実行中のアプリができました。You now have a running app!

    コンソール ウィンドウ

  4. コンソール ウィンドウを閉じるには、キーボードで任意のキーを押します。To close the console window, press any key on your keyboard.

  5. 何らかの追加コードをアプリに追加しましょう。Let's add some additional code to the app. Console.WriteLine("Hello World!"); という行の前に次の C# コードを追加します。Add the following C# code before the line that says Console.WriteLine("Hello World!");:

    Console.WriteLine("\nWhat is your name?");
    var name = Console.ReadLine();
    

    このコードはコンソール ウィンドウに What is your name? と表示し、ユーザーがテキストを入力して Enter キーを押すまで待機します。This code displays What is your name? in the console window, and then waits until the user enters some text followed by the Enter key.

  6. Console.WriteLine("Hello World!"); という行を次のコードに変更します。Change the line that says Console.WriteLine("Hello World!"); to the following code:

    Console.WriteLine($"\nHello {name}!");
    
  7. [デバッグ] > [デバッグなしで開始] の順に選択するか、Ctrl + F5 キーを押してアプリを再び実行します。Run the app again by selecting Debug > Start Without Debugging or by pressing Ctrl+F5.

    Visual Studio によってアプリが再度ビルドされ、コンソール ウィンドウが開き、名前を入力するように求められます。Visual Studio rebuilds the app, and a console window opens and prompts you for your name.

  8. コンソール ウィンドウに名前を入力し、Enter キーを押します。Enter your name in the console window and press Enter.

    コンソール ウィンドウの入力

  9. 任意のキーを押してコンソール ウィンドウを閉じ、プログラムの実行を停止します。Press any key to close the console window and stop the running program.

リファクタリングと IntelliSense の使用Use refactoring and IntelliSense

リファクタリングIntelliSense がより効率的なコーディングに役立ついくつかの方法を見てみましょう。Let's look at a couple of the ways that refactoring and IntelliSense can help you code more efficiently.

最初に、変数 name の名前を変更します。First, let's rename the name variable:

  1. 変数 name をダブルクリックして選択します。Double-click the name variable to select it.

  2. 変数の新しい名前として「username」と入力します。Type in the new name for the variable, username.

    変数の周りに灰色のボックスが表示され、余白に電球が表示されることに注意してください。Notice that a gray box appears around the variable, and a light bulb appears in the margin.

  3. 電球アイコンを選択して、使用可能なクイック アクションを表示します。Select the light bulb icon to show the available Quick Actions. ['name' から 'username' へ名前を変更] を選択します。Select Rename 'name' to 'username'.

    Visual Studio での名前変更アクション

    プロジェクト全体で変数の名前が変更され、この場合は 2 か所だけです。The variable is renamed across the project, which in our case is only two places.

    Visual Studio での名前変更リファクタリングを示すアニメーション gif

  4. 次は IntelliSense を試してみましょう。Now let's take a look at IntelliSense. Console.WriteLine($"\nHello {username}!"); という行の下に、「DateTime now = DateTime.」と入力します。Below the line that says Console.WriteLine($"\nHello {username}!");, type DateTime now = DateTime..

    ボックスに DateTime クラスのメンバーが表示されます。A box displays the members of the DateTime class. さらに、現在選択されているメンバーの説明が独立したボックスに表示されます。In addition, the description of the currently selected member displays in a separate box.

    Visual Studio での IntelliSense リスト メンバー

  5. Now という名前のメンバーを、ダブルクリックするか Tab キーを押して選択します。これはクラスのプロパティです。セミコロンを ; 追加してコード行を完了します。Select the member named Now, which is a property of the class, by double-clicking on it or pressing Tab. Complete the line of code by adding a semi-colon ;.

  6. その下に、次のコード行を入力またはコピーします。Below that, type in or copy the following lines of code:

    int dayOfYear = now.DayOfYear;
    
    Console.Write("Day of year: ");
    Console.WriteLine(dayOfYear);
    

    ヒント

    Console.WriteConsole.WriteLine と少し異なり、出力の後に行終端記号を追加しません。Console.Write is a little different to Console.WriteLine in that it doesn't add a line terminator after it prints. つまり、次に出力に送信されるテキストは、同じ書き出されます。That means that the next piece of text that's sent to the output will print on the same line. コードでこれらのメソッドをポイントすると、その説明が表示されます。You can hover over each of these methods in your code to see their description.

  7. 次に、もう一度リファクタリングを使ってコードを少し簡単にします。Next, we'll use refactoring again to make the code a little more concise. DateTime now = DateTime.Now; の行で変数 now をクリックします。Click on the variable now in the line DateTime now = DateTime.Now;.

    その行の余白に小さいドライバー アイコンが表示されることに注意してください。Notice that a little screwdriver icon appears in the margin on that line.

  8. ドライバー アイコンをクリックして、Visual Studio で使用可能な推奨事項を確認します。Click the screwdriver icon to see what suggestions Visual Studio has available. この場合は、全体の動作を変更することなくコードの行を削除するインラインの一時変数リファクタリングが表示されています。In this case, it's showing the Inline temporary variable refactoring to remove a line of code without changing the overall behavior:

    Visual Studio でのインラインの一時変数リファクタリング

  9. [インラインの一時変数] をクリックしてコードをリファクタリングします。Click Inline temporary variable to refactor the code.

  10. Ctrl + F5 キーを押してプログラムを再び実行です。Run the program again by pressing Ctrl+F5. 出力は次のようになります。The output looks something like this:

    プログラムの出力が表示されたコンソール ウィンドウ

コードのデバッグDebug code

コードを記述するときは、実行してバグの存在を確認するために実際にテストする必要があります。When you write code, you need to run it and test it for bugs. Visual Studio のデバッグ システムを使用すると、一度に 1 つのステートメントずつ、コードを実行して必要に応じて変数を検査できます。Visual Studio's debugging system lets you step through code one statement at a time and inspect variables as you go. 指定した条件が True の場合にのみヒットするブレークポイントを設定することができます。You can set breakpoints that are only hit when a specified condition is true. コードの実行中に変数の値などを監視できます。You can monitor the values of variables as the code runs, and more.

ブレークポイントを設定して、プログラムが "実行中" の username 変数の値を見てみましょう。Let's set a breakpoint to see the value of the username variable while the program is "in flight".

  1. Console.WriteLine($"\nHello {username}!"); というコード行を探します。Find the line of code that says Console.WriteLine($"\nHello {username}!");. この行にブレークポイントを設定するには、つまりこの行でプログラムの実行を一時停止するには、エディターの左端の余白をクリックします。To set a breakpoint on this line of code, that is, to make the program pause execution at this line, click in the far left margin of the editor. コード行の任意の場所をクリックしてから、F9 キーを押してもかまいません。You can also click anywhere on the line of code and then press F9.

    余白の左端に赤い円が表示され、コードが赤で強調表示されます。A red circle appears in the far left margin, and the code is highlighted in red.

    Visual Studio でのコード行のブレークポイント

  2. [デバッグ] > [デバッグの開始] を選択するか、F5 キーを押して、デバッグを開始します。Start debugging by selecting Debug > Start Debugging or by pressing F5.

  3. コンソール ウィンドウが表示されて名前を要求されたら、入力して Enter キーを押します。When the console window appears and asks for your name, type it in and press Enter.

    Visual Studio コード エディターにフォーカスが戻り、ブレークポイントを設定したコード行が黄色で強調表示されます。Notice that the focus returns to the Visual Studio code editor and the line of code with the breakpoint is highlighted in yellow. これは、プログラムが実行する次のコード行を示します。This signifies that it's the next line of code that the program will execute.

  4. username 変数をポイントすると、その値が表示されます。Hover your mouse over the username variable to see its value. または、username を右クリックして [ウォッチを追加] を選択し、変数を [ウォッチ] ウィンドウに追加して、そこで値を確認することもできます。Alternatively, you can right-click on username and select Add Watch to add the variable to the Watch window, where you can also see its value.

    Visual Studio でのデバッグ中の変数の値

  5. プログラムを最後まで実行するには、F5 キーを再び押します。To let the program run to completion, press F5 again.

Visual Studio でのデバッグの詳細については、デバッガーの機能ツアーに関するページをご覧ください。To get more details about debugging in Visual Studio, see Debugger feature tour.

Visual Studio をカスタマイズするCustomize Visual Studio

既定の配色テーマの変更など、IDE をカスタマイズすることができます。You can personalize the IDE, including changing the default color theme. 濃色テーマに変更するには:To change to the Dark theme:

  1. メニュー バーから [ツール] > [オプション] の順に選択して、[オプション] ダイアログを開きます。On the menu bar, choose Tools > Options to open the Options dialog.

  2. [環境] > [全般] オプションのページで、[配色テーマ] の選択内容を [濃色] に変更して [OK] を選択します。On the Environment > General options page, change the Color theme selection to Dark, and then choose OK.

    IDE 全体の配色テーマが濃色に変更されます。The color theme for the entire IDE changes to Dark.

    濃色テーマの VS

IDE の他のカスタマイズ方法については、「Visual Studio IDE のカスタマイズ」をご覧ください。To learn about other ways you can personalize the IDE, see Personalize Visual Studio.

詳細情報Learn more

Android または iOS のスマートフォン用のアプリを作成したいですか?Do you want to create an app for an Android or iOS phone? 3D ゲームやクラウド対応のアプリはどうですか?How about a 3D game, or a cloud-enabled app? これらをはじめとする Visual Studio の機能については、「Features of Visual Studio 20171」(Visual Studio 2017 の機能) をご覧ください。To learn about these and other features of Visual Studio, see Features of Visual Studio 2017.

コーディングをすぐに始められる場合は、目次から「Visual Studio を使用して初めての ASP.NET Core Web アプリを作成する」などのクイック スタート トピックを選んでください。If you're just ready to get started coding now, choose one of the Quickstart topics from the table of contents, such as Create your first ASP.NET Core web app.

Microsoft Virtual Academy で無料の Visual Studio コースを見ることもできます。You can also check out the free Visual Studio courses available on Microsoft Virtual Academy.

関連項目See also