Hello, world アプリを作成する (JS)

このチュートリアルでは、Windows 10 のユニバーサル Windows プラットフォーム (UWP) を対象にした単純な "Hello, world" アプリを JavaScript と HTML で作る方法について説明します。 Microsoft Visual Studio プロジェクトを 1 つ開発すれば、あらゆる Windows 10 デバイスで動作するアプリを構築できます。

注意

このチュートリアルでは、Visual Studio Community 2017 を使います。 異なるバージョンの Visual Studio を使っている場合には、見た目が多少異なることがあります。

ここでは、次の方法について説明します。

  • Windows 10UWP を対象とする新しい Visual Studio 2017 プロジェクトを作る。
  • HTML と JavaScript のコンテンツを追加する
  • Visual Studio のローカル デスクトップでプロジェクトを実行する

はじめに...

  • ユニバーサル Windows アプリとは?
  • このチュートリアルを行うには、Windows 10 と Visual Studio 2017 が必要です。 準備してください
  • また、Visual Studio の既定のウィンドウ レイアウトを使用することを前提としています。 既定のレイアウトを変更した場合は、[ウィンドウ] メニューの [ウィンドウ レイアウトのリセット] を使って、レイアウトをリセットできます。

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

  1. Visual Studio 2017 を起動します。

  2. [ファイル] メニューの [新規作成] > [プロジェクト] を選択し、[新しいプロジェクト] ダイアログを開きます。

  3. 左側のテンプレートの一覧で、[インストール済み] > [テンプレート] > [JavaScript] の順に開いた後、[Windows ユニバーサル] を選択して UWP プロジェクト テンプレートの一覧を表示します。

    ユニバーサル テンプレートが表示されない場合は、UWP アプリを作成するためのコンポーネントがない可能性があります。 インストール プロセスを繰り返して UWP サポートを追加することもできます ([新しいプロジェクト] ダイアログで [Visual Studio インストーラーを開く] をクリック)。 「準備」をご覧ください。

  4. [空白のアプリ (ユニバーサル Windows)] テンプレートを選択し、[名前] に「HelloWorld」と入力します。 [OK] を選択します。

    [新しいプロジェクト] ウィンドウ

注意

Visual Studio を初めて使う場合は、[設定] ダイアログ ボックスが表示され、開発者モードを有効にするよう求められることがあります。 開発者モードは、アプリをストアからだけではなく、直接実行するためのアクセス許可など、特定の機能を有効にする特別な設定です。 詳しくは、「デバイスを開発用に有効にする」をご覧ください。 先に進むには、[開発者モード] を選択し、[はい] をクリックしてダイアログ ボックスを閉じます。

開発者モードのアクティブ化ダイアログ

  1. ターゲット バージョンと最小バージョンのダイアログが表示されます。 このチュートリアルでは既定の設定で問題ないため、[OK] を選択してプロジェクトを作成します。

    ソリューション エクスプローラーのウィンドウ

  2. 新しいプロジェクトが開き、そのプロジェクトのファイルが右側のソリューション エクスプローラーのウィンドウに表示されます。 場合によっては、ファイルを表示するために [ソリューション エクスプローラー] タブを選択する必要があります ([プロパティ] タブではありません)。

    ソリューション エクスプローラーのウィンドウ

[空白のアプリ (ユニバーサル Windows)] は最小限のテンプレートですが、多くのファイルが含まれています。 これらのファイルは、JavaScript を使うすべての UWP アプリに必要です。 Visual Studio で作るすべてのプロジェクトには、これらのファイルが必ず含まれます。

ファイルの内容

プロジェクトのファイルを表示して編集するには、ソリューション エクスプローラーでファイルをダブルクリックします。

default.css

  • アプリによって使用される既定のスタイルシート。

main.js

  • 既定の JavaScript ファイル。 index.html ファイル内で参照されます。

index.html

  • アプリの Web ページです。アプリの起動時に読み込まれ、表示されます。

一連のロゴ イメージ

  • Assets/Square150x150Logo.scale-200.png は、スタート メニュー内のアプリを表します。
  • Assets/StoreLogo.png は、Windows ストア内のアプリを表します。
  • Assets/SplashScreen.scale-200.png は、アプリが起動したときに表示するスプラッシュ画面です。

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

エディターで index.html をクリックして選択し、含まれている HTML を次のように変更します。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Hello World</title>
    <script src="js/main.js"></script>
    <link href="css/default.css" rel="stylesheet" />
</head>

<body>
    <p>Click the button..</p>
    <button id="button">Hello world!</button>
</body>

</html>

次のようになります。

プロジェクトの HTML

この HTML では、JavaScript が含まれた main.js を参照し、Web ページの本文に 1 行のテキストと単一のボタンを追加します。 ボタンには、JavaScript が参照できるように ID が設定されます。

手順 3: JavaScript を追加する

次は、JavaScript を追加します。 main.js をクリックして選択し、以下を追加します。

// Your code here!

window.onload = function () {
    document.getElementById("button").onclick = function (evt) {
        sayHello()
    }
}


function sayHello() {
    var messageDialog = new Windows.UI.Popups.MessageDialog("Hello, world!", "Alert");
    messageDialog.showAsync();
}

次のようになります。

プロジェクトの JavaScript

この JavaScript では、2 つの関数を宣言します。 Window.onload 関数は、index.html が表示されたときに自動的に呼び出されます。 この関数は、(宣言されている ID を使用して) ボタンを検出し、onclick ハンドラーを追加します。onclick は、ボタンのクリック時に呼び出されるメソッドです。

2 番目の関数 sayHello() では、ダイアログを作成して表示します。 これは、前の JavaScript 開発で使用した Alert() 関数とよく似ています。

手順 4: アプリを実行する

ここで F5 キーを押すと、アプリを実行できます。 アプリが読み込まれ、Web ページが表示されます。 ボタンをクリックすると、メッセージ ダイアログ ボックスが表示されます。

プロジェクトを実行する

まとめ

これで、Windows 10 と UWP 用の JavaScript アプリを作成できました。 これは極端にシンプルな例ですが、これに好きな JavaScript ライブラリやフレームワークを追加して、独自のアプリを作成することができます。 また、これは UWP アプリなので、ストアに公開できます。 サード パーティのフレームワークを追加する方法の例については、以下のプロジェクトをご覧ください。