2016-12-09

Connect(); 2016

Volume 31 Number 12

Visual Studio 開発 – Visual Studio for Mac について

Mikayla Hutchinson; 2016

11 月の Connect(); で、Microsoft はプレビュー版の Visual Studio for Mac を発表しました。これは画期的な出来事です。モバイル中心の Xamarin Studio IDE が .NET と C# 向けの真のモバイルファースト、クラウドファーストの開発ツールへと進化を遂げ、Mac に Visual Studio のエクスペリエンスがもたらされます。

Visual Studio ファミリの新メンバー

本質的に、Visual Studio for Mac は Windows バージョンの Visual Studio (以下、単なる「Visual Studio」は Windows バージョンの Visual Studio を指します) を MacOS バージョンにしたものです。Visual Studio で開発を行っていても MacOS を使う必要がある場合、または MacOS を使いたいと考えている場合は、Visual Studio for Mac を使えば苦労しないで開発を進めることができます。UX は Visual Studio の流れを受け継いでいますが、外観は MacOS のネイティブソフトウェアのようにデザインされています。また、完全な IDE は不要でも軽量かつリッチなスタンドアロンのソースエディターが必要な場合は、Windows 向けの Visual Studio と同様、Visual Studio Code を補完的に使用できます。

機能については、Visual Studio for Mac と Visual Studio ファミリの他の製品とは多くの共通点があります。IntelliSense とリファクタリングには Roslyn コンパイラプラットフォームを、プロジェクトシステムとビルドエンジンには MSBuild を使用し、ソースエディターでは TextMate バンドルをサポートします。Xamarin アプリと .NET Core アプリに同じデバッグエンジンを使用し、Xamarin.iOS と Xamarin.Android に同じデザイナーを使用します。

Visual Studio for Mac が重視するのは互換性です。Visual Studio for Mac は新製品で、Visual Studio プロジェクトのすべての種類をサポートしているわけではありませんが、同じ MSBuild ソリューションとプロジェクト形式を使用する点は共通しています。MacOS と Windows を使用するチームメンバーがいる場合や、自身が 2 つの OS を使い分けている場合、両プラットフォーム間でシームレスにプロジェクトを共有できます。プロジェクトを変換したり、移行したりする必要はありません。

モバイルファースト、クラウドファーストの開発

Visual Studio for Mac でサポートされる主たるワークロードは、Xamarin による iOS、Android、および Mac のネイティブ開発と、.NET Core と Azure の統合によるサーバー開発です。Visual Studio for Mac には、現代のユーザーが期待するリッチなネイティブモバイルアプリエクスペリエンスの開発や、そのエクスペリエンスを支えるクラウドベースのサーバーバックエンドの開発に必要なツールがすべて用意されています。

また、使い慣れた C# 言語が完全にサポートされており、最新の C# 7 での生産性向上のための機能強化に対応しています。開発者は、コンパイル済みコードのパフォーマンス、最新のタイプセーフな言語の生産性、各プラットフォーム固有の機能へのアクセス、ライブラリとツールが豊富なエコシステムといった、メリットを享受できます。クライアントとサーバーでコードを共有することで、モバイル領域とクラウド領域にまたがって既存のエクスペリエンスを利用できます。また、すべてのプロジェクトを 1 つのソリューションにまとめることで、ソリューション全体でプロジェクト横断的なリファクタリングとコードナビゲーションを活用できます。

プレビュー版 Visual Studio for Mac でサポートされている言語は C# だけではありません。関数型プログラミングを行う開発者向けに、Visual Studio と同じ F# コンパイラによる優れた F# サポートが用意されています。

iOS、Android、および Mac

モバイル市場が断片化されている現状では、幅広いデバイスをターゲットにできることが重要です。Xamarin Studio をベースにしているため、Visual Studio for Mac には Xamarin プラットフォームによる C# ベースの iOS、Android、および Mac 開発に対するサポートが充実しています。ネイティブ API に完全にアクセスできるため、既存の C# エクスペリエンスやライブラリを活用したり、プラットフォーム間で共通コードを共有したりして、手間のかからない洗練されたネイティブアプリエクスペリエンスを構築できます。

より大規模にコードを共有する場合は、クロスプラットフォームの Xamarin.Forms UI ライブラリを使用できます。このライブラリは、iOS、Android、MacOS、およびユニバーサル Windows プラットフォーム (UWP) を含む複数のプラットフォームをターゲットにできる、使い慣れたXAML ベースの開発環境を提供し、各プラットフォームのネイティブ UI のマッピングを行います (ただし、UWP 開発がサポートされているのは Visual Studio だけです)。より細かく制御する必要がある場合は、Xamarin.Forms とネイティブツールキットへの直接アクセスを組み合わせて利用して、対応させることができます。また、Xamarin には、NuGet を通じて利用できる、膨大なライブラリのエコシステムがあります。NuGet には、プラットフォーム固有のライブラリ、ネイティブコードへのバインド、移植可能な .NET Standard Library が含まれています。

Visual Studio と同様に、Visual Studio for Mac にも iOS と Android 開発用のドラッグアンドドロップデザイナーがあります。これを使用すると、UI をすばやく組み立ててから微調整できます。Xamarin.Forms には、リッチな XAML IntelliSense と、サイドバイサイドで表示されるリアルタイムのプレビューがあります (図 1 参照)。このデザイナーとリアルタイムのプレビューでは、シミュレーターを使用して、デバイス上でのアプリの表示を正確にレンダリングします。このシミュレーターは、カスタムコントロールにも有効です。

図 1 Xamarin.Forms の XAML のリアルタイムプレビュー

使い慣れたワークスペース

Visual Studio for Mac のワークスペースは、既存の Visual Studio 開発者にとっては、使い慣れた作業環境です。最初に開くと、ようこそページが表示され、最近開いたソリューションの一覧、開発者向けニュースのフィード、および開発の着手に役立つその他の情報も表示されます。

新しいソリューションを作成するには、[File] (ファイル) メニューに移動して、[New Project] (新しいプロジェクト) を選択します。すると、新しいソリューションを含むワークスペースが表示されます。図 2 に示すように、中心的な役割を果たすタブ付きのソースエディターと、その周りに [Solution] (ソリューション)、[Output] (出力)、[Properties] (プロパティ)、[Document Outline] (ドキュメントアウトライン)、[Toolbox] (ツールボックス) など、いくつかのドッキングウィンドウ (「パッド」) があります。Visual Studio と同様、このレイアウトは細かくカスタマイズでき、そのときの作業 (コーディング、デバッグ、またはドラッグアンドドロップデザイナーの使用) に応じて自動的に切り替わります。

図 2Visual Studio for Mac のワークスペース

ツールバーもおなじみのものですが、いくつか大きな違いがあります。

左側に、実行ボタン、アクティブ構成を選択するドロップダウン、実行構成を選択するドロップダウン、ターゲットデバイスを選択するドロップダウンがあります。クロスプラットフォームモバイル開発では、アプリのテストやデバッグを行うデバイスまたはシミュレーターを簡単に切り替えられることが重要です。実行構成は、Visual Studio におけるスタートアッププロジェクトに似ていますが、実行するプロジェクトを切り替えられるだけでなく、独自の名前を付けた実行オプションのセットを作成することもできます。

ツールバーの中央は通知領域です。ここに、ビルドや NuGet パッケージの復元など、さまざまな処理に関するメッセージが表示されます。実行中の処理がある場合には、この通知領域にキャンセルボタンが表示されます。ソフトウェアの更新に関する通知もここに表示されます。ビルドエラー通知など、一部の通知はクリックできます。クリックすると、詳細情報の記載されたパッドが表示されます。

ツールバーの右側には、グローバル検索ボックスがあります。この機能はソリューション内のコマンドやファイルなどの検索に役立ちます。さらに、camelCase フィルタリングシステムによって、すばやくコマンドをアクティブにしたり、ソリューション内のファイルや型に移動するのも非常に簡単になっています。また、ソリューションでフォルダーを指定してファイルを検索することも、NuGet パッケージマネージャーを開いてパッケージを検索することもできます。

[Solution] (ソリューション) パッドは、Visual Studio のソリューションエクスプローラーとよく似ていて、ソリューションやプロジェクトの構造、およびそれに含まれるファイルを調査、管理できます。コンテキストメニューには、ソリューションツリー内の項目に対する、コンテキスト固有のさまざまなコマンドが用意されています。たとえば、プロジェクトへのファイルの追加、プロジェクトからのファイルの削除、プロジェクト参照の編集、フォルダーでターミナルウィンドウを開く、特定のプロジェクトのビルド/デバッグなどです。

[Errors] (エラー) パッドには、ビルドに関する警告とエラーが表示されるほか、分割ビューでビルドログの出力を見ることができます。Visual Studio とは異なり、すべての種類の出力が表示される 1 つの統一パッドはありません。たとえば、[Application Output] (アプリケーションの出力) パッドにはアプリを実行またはデバッグしたときのアプリの出力が表示され、[NuGet Console] (NuGet コンソール) パッドには NuGet 処理のログが表示されます。[Properties] (プロパティ) パッドには、現在フォーカスがある項目または選択している項目のプロパティがコンテキストに応じて表示されます。[Properties] (プロパティ) パッドを使用して、[Solution] (ソリューション) パッド内のファイルのビルドアクションを表示したり、変更したりできます。

中央にあるのは、Visual Studio for Mac の中核であるソースエディターです。ここには、Visual Studio ファミリの製品に期待するすべての機能が揃っています。図 3 に、.NET Core プロジェクトにおける C# IntelliSense と構文の強調表示を示します。コードの折りたたみ、入力中にリアルタイムで行われるエラーに対する下線表示や候補表示、構成可能な自動書式設定、コードナビゲーションコマンド、数々の強力なリファクタリングツールなども用意されています。

図 3 .NET Core プロジェクトにおける IntelliSense

エディターの機能はすべてが既定で有効になっているわけではありません。Visual Studio for Mac の設定は、[Preferences] (ユーザー設定) ダイアログで変更できます。このダイアログには、[Visual Studio] メニューからアクセスできます。これは、Visual Studio の [ツール] メニューからアクセスできる [オプション] ダイアログに相当し、Visual Studio for Mac の動作を好みに応じてカスタマイズする際に役立つオプションが豊富に用意されています。

単体テストは NUnit を使用してサポートされます。他のテストランナーは拡張機能を通じて接続できます。アセンブリ内で検出されたテストは [Unit Tests] (単体テスト) パッドに表示されます。[Unit Tests] (単体テスト) パッドにアクセスするには、[View] (表示)、[Pads] (パッド) メニューの順に移動します。ソースエディターには、Git バージョン管理も統合されており、エディター下部のタブの行から、現在のファイルのログ、差分、および変更履歴ビューにアクセスできます。

もう少しヒントやテクニックを使ってスピードを上げたい場合には、Xamarin Evolve 2016 の筆者のセッション「Xamarin Studio のエキスパートになる」(xmn.io/xs-expert、英語) をご覧ください。このセッションの内容は、Visual Studio for Mac にそのまま当てはめることができます。

核はオープンソース

Xamarin Studio と同様、Visual Studio for Mac は、マイクロソフトが精力的に開発しているオープンソースの MonoDevelop IDE をベースにしています。Visual Studio for Mac はすべて C# で作成されており、リッチな拡張モデルを備えています。この拡張モデルを使用して、単純なエディターコマンドからまったく新しい言語やプロジェクトの種類までさまざまな機能を追加できます。C# 編集、Xamarin.iOS、Xamarin.Android、ASP.NET Core などの中核機能でさえ、拡張機能として実装されています。

Visual Studio や Visual Studio Code と同様、Visual Studio for Mac の C# サポートは、オープンソースの Roslyn コンパイラプラットフォームによって実現されています。Visual Studio でおなじみの IntelliSense とまったく同じエクスペリエンスに加えて、エディター内でのリアルタイムアナライザー機能やコード修正機能が用意されています。Visual Studio for Mac には既定で、アナライザーとコード修正の Refactoring Essentials コレクションが含まれています。

Visual Studio for Mac では、TextMate バンドルを使用しますが、さまざまな言語の編集をサポートしています。TextMate には、構文の強調表示とシンプルな IntelliSense があります。Visual Studio for Mac には、Visual Studio Code で使われているオープンソースの TextMate バンドルがいくつか含まれています。

ASP.NET Core アプリの作成

Visual Studio for Mac を使ってどれほど簡単にスピードアップできるかを示すために、簡単な ASP.NET Core バックエンドの作成方法を説明します。このバックエンドは、仮想の「共有 To Do リスト」モバイルアプリ用のもので、複数のユーザーに項目の追加を許可し、投稿された項目をすべてのユーザーが閲覧できるようにします。

本稿はプレリリース版の Visual Studio for Mac を使用して執筆しているため、正式リリース版では UI の細部が異なる可能性があることに注意してください。ただし、ここで説明するアプローチや考え方はそのまま当てはまります。

Visual Studio for Mac をインストールして開いたら、ようこそページでまず [New Solution] (新しいソリューション) をクリックします。[New Project] (新しいプロジェクト) ダイアログが開きます。[Cloud] (クラウド) セクションに移動したら、[ASP.NET Core Web Application] (ASP.NET Core Web アプリケーション) テンプレートを選んで [Next] (次へ) をクリックし、[Web API] テンプレートを選択します。Web API テンプレートは、モバイルバックエンドに最適な RESTful Web サービスを作成します。Web フロントエンドは、後でプロジェクトにビューを追加して作成できます。

最後に、プロジェクトの名前として「HelloVSMac」を指定して、[Create] (作成) をクリックします。Visual Studio for Mac は、.NET テンプレートエンジンを使用してプロジェクトを作成し、プロジェクトを開いて、そのプロジェクトが依存する NuGet パッケージを復元します。[Solution] (ソリューション) パッドのプロジェクトで[Tools] (ツール)、[Edit File] (ファイルの編集) コンテキストメニューを使用し、プロジェクトファイルをエディターで開くと、それが理解しやすい MSBuild ベースの最小限のプロジェクトファイルであることがわかります。ファイルを直接編集して保存すると、修正したバージョンが Visual Studio for Mac に自動的に読み込まれます。

[Solution] (ソリューション) パッドでプロジェクトを見てみましょう。重要な項目は以下のとおりです。

パッケージ: プロジェクトの NuGet パッケージの依存関係です。ASP.NET Core、.NET Core Framework、およびプロジェクトをビルドする MSBuild ターゲットはすべて、NuGet パッケージを通じてインストールされます。

Program.cs: Web アプリのエントリポイントです。ASP.NET Core アプリはプログラムなので、アプリの中心には、WebHost を作成、ビルド、実行する Main メソッドのエントリポイントがあります。

Startup.cs: WebHost に渡された Startup クラスを定義します。このクラスには、アプリの初期化メソッドが含まれます。

appsettings.json: アプリの構成設定です。これは、ASP.NET の web.config に相当する ASP.NET Core のファイルです。

このチュートリアルでは、これらのファイルはそのままにし、Views フォルダー内の ValuesController.cs を見ます。このファイルには、ValuesController クラスが含まれており、ValuesController クラスは [Route("api/[controller]")] ルートに登録されています。[controller] は、クラス名のプレースホルダーで、実際は api/values ルートです。

非常に単純な ToDoItem クラスと ToDoList ストレージクラスの定義から始めます。ToDoList は静的なので、要求間で共有できます。実際のアプリでは、これにはデータベースを使用しますが、当面はこれで十分です。また、コントローラークラスの名前を ToDoController に変更し (これで、ルートを api/todo にします)、Get メソッドと Post メソッドをストレージに接続し、使用しない他のコントローラーメソッドを消去します。その結果を、図 4 に示します。

図 4 コントローラーと単純な共有 To Do リストストレージ

[Route("api/[controller]")]
public class ToDoController : Controller
{
  [HttpGet]
  public IEnumerable<ToDoItem> Get()
  {
    return ToDoList.GetAll();
  }
  [HttpPost]
  public void Post([FromBody]ToDoItem item)
  {
    ToDoList.Add(item);
  }
}
public class ToDoItem
{
  public string Title { get; set; }
}
public static class ToDoList
{
  static List<ToDoItem> list = new List<ToDoItem>();
  public static void Add(ToDoItem item)
  {
    lock (list) { list.Add(item); }
  }
  public static IEnumerable<ToDoItem> GetAll()
  {
    lock (list) { return list.ToArray(); }
  }
}

これで、非常に小規模ながらも、完全な RESTful Web サービスの完成です。では、試してみましょう。

Post メソッド内にブレークポイントを設定し、アプリのデバッグを開始します。アプリが起動すると、ASP.NET Core 組み込み kestrel Web サーバーからの出力が [Output] (出力) パッドに表示されます (既定はポート 5000)。しかし、アプリは要求を受け取るまで、それ以外の処理はしません。Web ブラウザーを開いて 127.0.0.1:5000/api/todo を確認できますが、これは単なる空の配列です。

図 5 .NET Core プロジェクトのデバッグ

このサービスにはまだモバイルクライアントがないので、MacOS のターミナルアプリを開き、curl を使用して POST 要求をアプリに送信します。

$ curl -H "Content-type: application/json" -X POST -d '{ title: "build
  mobile app" }' 127.0.0.1:5000/api/todo

これで、デバッガーのブレークポイントがトリガーされます。要求の JSON 本文から自動的に解析され、ToDoItem オブジェクトに変換された値を検査できます。Visual Studio for Mac が自動的にデバッグレイアウトになり、予想どおりのデバッガーパッドが表示されます ([Stack] (スタック)、[Locals] (ローカル)、[Threads] (スレッド)、[Breakpoints] (ブレークポイント) など)。

ここで、ターミナルに戻って curl を使用し、Get メソッドにアクセスします。すると、追加された項目を含む JSON 配列が表示されます。

$ curl 127.0.0.1:5000/api/todo
[{"title":"build mobile app"}]

次の手順は、モバイルアプリの構築ですが、それについては皆さんが調べてみてください。ASP.NET Core の詳細については、asp.net/get-started (英語) を参照することをお勧めします。Xamarin 開発の詳細については、developer.xamarin.com (英語) に優れた資料が豊富に用意されています。Visual Studio for Mac に関するドキュメントはまだ数が少ないのですが、ほとんどの Xamarin Studio ドキュメントがそのまま当てはまります。多くの場合、Visual Studio のドキュメントも利用できます。

まとめ

この短い概要説明で皆さんが Visual Studio for Mac に興味を持ち、クラウドやモバイル開発に使用する MacOS IDE として選択していただけたらさいわいです。 Mac をお持ちの場合、VisualStudio.com (英語) からプレビュー版をダウンロードして、試してみることをお勧めします。ぜひ、ご感想をお聞かせください。Visual Studio for Mac のプレビューとその後の参考になるフィードバックをお待ちしています。

Mikayla Hutchinson は、マイクロソフトで Xamarin プラットフォームのシニアプログラムマネージャーを務めています。以前は、Xamarin Studio のモバイルツールと Web ツールを開発しており、MonoDevelop の中核をなす開発者でした。Twitter (@mjhutchinson、英語) で彼女をフォローしてください。

この記事のレビューに協力してくれたマイクロソフト技術スタッフの Larry O’Brien および Lluis Sanchez に心より感謝いたします。
Larry O'Brien は、Microsoft で Xamarin ドキュメンテーショングループの一員として働いています。長年、執筆者および編集者の両方として、ソフトウェア開発に関する出版分野で活発に活動しています。

次の方法で共有