実際にアプリケーションを作っていきましょう。Visual Studioを起動し、プロジェクトを新規作成します。スタートスクリーン上で、「Visual Studio 11 Express」という表示のタイルを見つけ（図1では右寄りの上部）、これをクリックまたはタッチしてVisual Studioを起動します。Visual Studio 11 Expressでアプリケーションを開発する際には、従来のバージョンのVisual Studioと同様に、ひな型となるプロジェクトテンプレートを選んでプロジェクトを新規作成するところから始めます
メニューバーから［File］→［New Project］の順にクリックして、［New Project］ダイアログボックスを表示させます（図12）。［New Project］ダイアログボックスの左ペインに列挙された言語の選択肢から、JavaScript、Visual Basic、Visual C#、Visual C++に対応していることがわかります。
左ペインで［JavaScript］ノード配下の［Windows Metro Style］を選択し、中央のテンプレートのリストでは「Grid Application」を選択します。プロジェクト名（Name）や保存先（Location）は、任意の名前を指定し、ほかは既定値のままで結構です。ここでは、プロジェクト名を「WinWebApp1」としています。
設定したら［OK］をクリックして、プロジェクトを新規に作成します。プロジェクトが新規作成されると、図13の状態になります。実はこの状態で既に、複数の画像データをマス目状に表示するアプリケーションのコードのひな型がプロジェクト内のファイルに記述されています。
作成したプロジェクトが、どのようなファイルから構成されているか確認してみましょう。図13の右側に表示されたソリューションエクスプローラーのツリーには、このプロジェクトを構成するファイルが、フォルダーごとに分類されてリストアップされています。主なファイルは表1の通りです。HTMLとCSSを用いてUIを実装し、JavaScriptを用いて、制御ロジックを実装します。アプリケーション マニフェスト ファイルは、Metroスタイルアプリケーションのパッケージを構成するために必要な情報を納めたXML形式のファイルです。
プロジェクト内のwinjsフォルダーには、「Windows Library for JavaScript（WinJS）」と呼ばれるライブラリを用意しています。このライブラリは、Windows RuntimeにアクセスするためのJavaScriptのライブラリです。JavaScriptで記述されたMetroスタイルアプリケーションがWindows Runtimeにアクセスするために利用します。
アプリケーションのスタートページに当たるdefault.htmlには、ライブラリを参照するマークアップがあらかじめ記述されています（リスト1）。さらに、JavaScriptプログラムからは、Windows RuntimeのAPIを直接呼び出すこともできます。JavaScriptでMetroスタイルアプリケーションを開発する際には、まずはWinJSを使用し、それで足りない機能についてはWindows RuntimeのAPIを直接呼び出して使うという手順になるでしょう。
現時点のVisual Studio 11 Expressには、HTMLでUIを実装する際にビジュアルなデザインツールで編集する機能はありません。ただし、同じプロジェクトをデザイナ向けツールであるExpression Blend 5に読み込むことで、ビジュアルなデザイン画面でUIを作成できます（図14）。
