Hello, world アプリを作成する (JS)Create a "Hello, world" app (JS)

このチュートリアルでは、Windows 10 のユニバーサル Windows プラットフォーム (UWP) を対象にした単純な "Hello, world" アプリを JavaScript と HTML で作る方法について説明します。This tutorial teaches you how to use JavaScript and HTML to create a simple "Hello, world" app that targets the Universal Windows Platform (UWP) on Windows 10. Microsoft Visual Studio プロジェクトを 1 つ開発すれば、あらゆる Windows 10 デバイスで動作するアプリを構築できます。With a single project in Microsoft Visual Studio, you can build an app that runs on any Windows 10 device.

注意

このチュートリアルでは、Visual Studio Community 2017 を使います。This tutorial is using Visual Studio Community 2017. 異なるバージョンの Visual Studio を使っている場合には、見た目が多少異なることがあります。If you are using a different version of Visual Studio, it may look a little different for you.

ここでは、次の方法について説明します。Here you'll learn how to:

  • Windows 10UWP を対象とする新しい Visual Studio 2017 プロジェクトを作る。Create a new Visual Studio 2017 project that targets Windows 10 and the UWP.
  • HTML と JavaScript のコンテンツを追加するAdd HTML and JavaScript content
  • Visual Studio のローカル デスクトップでプロジェクトを実行するRun the project on the local desktop in Visual Studio

はじめに...Before you start...

  • UWP アプリとはWhat's a UWP app?.
  • このチュートリアルを行うには、Windows 10 と Visual Studio 2017 が必要です。To complete this tutorial, you need Windows 10 and Visual Studio 2017. 準備してくださいGet set up.
  • また、Visual Studio の既定のウィンドウ レイアウトを使用することを前提としています。We also assume you're using the default window layout in Visual Studio. 既定のレイアウトを変更した場合は、[ウィンドウ] メニューの [ウィンドウ レイアウトのリセット] を使って、レイアウトをリセットできます。If you change the default layout, you can reset it in the Window menu by using the Reset Window Layout command.

手順 1. Visual Studio で新しいプロジェクトを作るStep 1: Create a new project in Visual Studio.

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

  2. [ファイル] メニューの [新規作成] > [プロジェクト] を選択し、[新しいプロジェクト] ダイアログを開きます。From the File menu, select New > Project... to open the New Project dialog.

  3. 左側のテンプレートの一覧で、[インストール済み] > [テンプレート] > [JavaScript] の順に開いた後、[Windows ユニバーサル] を選択して UWP プロジェクト テンプレートの一覧を表示します。From the list of templates on the left, open Installed > Templates > JavaScript, and then choose Windows Universal to see the list of UWP project templates.

    ユニバーサル テンプレートが表示されない場合は、UWP アプリを作成するためのコンポーネントがない可能性があります。(If you don't see any Universal templates, you might be missing the components for creating UWP apps. インストール プロセスを繰り返して UWP サポートを追加することもできます ([新しいプロジェクト] ダイアログで [Visual Studio インストーラーを開く] をクリック)。You can repeat the installation process and add UWP support by clicking Open Visual Studio installer on the New Project dialog. 準備」をご覧ください。See Get set up

  4. [空白のアプリ (ユニバーサル Windows)] テンプレートを選択し、[名前] に「HelloWorld」と入力します。Choose the Blank App (Universal Windows) template, and enter "HelloWorld" as the Name. [OK] を選択します。Select OK.

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

注意

Visual Studio を初めて使う場合は、[設定] ダイアログ ボックスが表示され、開発者モードを有効にするよう求められることがあります。If this is the first time you have used Visual Studio, you might see a Settings dialog asking you to enable Developer mode. 開発者モードは、アプリをストアからだけではなく、直接実行するためのアクセス許可など、特定の機能を有効にする特別な設定です。Developer mode is a special setting that enables certain features, such as permission to run apps directly, rather than only from the Store. 詳しくは、「デバイスを開発用に有効にする」をご覧ください。For more information, please read Enable your device for development. 先に進むには、[開発者モード] を選択し、[はい] をクリックしてダイアログ ボックスを閉じます。To continue with this guide, select Developer mode, click Yes, and close the dialog.

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

  1. ターゲット バージョンと最小バージョンのダイアログが表示されます。The target version/minimum version dialog appears. このチュートリアルでは既定の設定で問題ないため、[OK] を選択してプロジェクトを作成します。The default settings are fine for this tutorial, so select OK to create the project.

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

  2. 新しいプロジェクトが開き、そのプロジェクトのファイルが右側のソリューション エクスプローラーのウィンドウに表示されます。When your new project opens, its files are displayed in the Solution Explorer pane on the right. 場合によっては、ファイルを表示するために [ソリューション エクスプローラー] タブを選択する必要があります ([プロパティ] タブではありません)。You may need to choose the Solution Explorer tab instead of the Properties tab to see your files.

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

[空白のアプリ (ユニバーサル Windows)] は最小限のテンプレートですが、多くのファイルが含まれています。Although the Blank App (Universal Window) is a minimal template, it still contains a lot of files. これらのファイルは、JavaScript を使うすべての UWP アプリに必要です。These files are essential to all UWP apps using JavaScript. Visual Studio で作るすべてのプロジェクトには、これらのファイルが必ず含まれます。Every project that you create in Visual Studio contains them.

ファイルの内容What's in the files?

プロジェクトのファイルを表示して編集するには、ソリューション エクスプローラーでファイルをダブルクリックします。To view and edit a file in your project, double-click the file in the Solution Explorer.

default.cssdefault.css

  • アプリによって使用される既定のスタイルシート。The default stylesheet used by the app.

main.jsmain.js

  • 既定の JavaScript ファイル。The default JavaScript file. index.html ファイル内で参照されます。It's referenced in the index.html file.

index.htmlindex.html

  • アプリの Web ページです。アプリの起動時に読み込まれ、表示されます。The app's web page, loaded and displayed when the app is launched.

一連のロゴ イメージA set of logo images

  • Assets/Square150x150Logo.scale-200.png は、スタート メニュー内のアプリを表します。Assets/Square150x150Logo.scale-200.png represents your app in the start menu.
  • Assets/StoreLogo.png は、Microsoft Store 内のアプリを表します。Assets/StoreLogo.png represents your app in the Microsoft Store.
  • Assets/SplashScreen.scale-200.png は、アプリが起動したときに表示するスプラッシュ画面です。Assets/SplashScreen.scale-200.png is the splash screen that appears when your app starts.

手順 2. ボタンを追加するStep 2: Adding a button

エディターで index.html をクリックして選択し、含まれている HTML を次のように変更します。Click on index.html to select it in the editor, and change the HTML it contains to read:

<!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>

次のようになります。It should look like this:

プロジェクトの HTML

この HTML では、JavaScript が含まれた main.js を参照し、Web ページの本文に 1 行のテキストと単一のボタンを追加します。This HTML references the main.js that will contain our JavaScript, and then adds a single line of text and a single button to the body of the web page. ボタンには、JavaScript が参照できるように ID が設定されます。The button is given an ID so the JavaScript will be able to reference it.

手順 3: JavaScript を追加するStep 3: Adding some JavaScript

次は、JavaScript を追加します。Now we'll add the JavaScript. main.js をクリックして選択し、以下を追加します。Click on main.js to select it, and add the following:

// 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();
}

次のようになります。It should look like this:

プロジェクトの JavaScript

この JavaScript では、2 つの関数を宣言します。This JavaScript declares two functions. Window.onload 関数は、index.html が表示されたときに自動的に呼び出されます。The window.onload function is called automatically when index.html is displayed. この関数は、(宣言されている ID を使用して) ボタンを検出し、onclick ハンドラーを追加します。onclick は、ボタンのクリック時に呼び出されるメソッドです。It finds the button (using the ID we declared) and adds an onclick handler: the method that will be called when the button is clicked.

2 番目の関数 sayHello() では、ダイアログを作成して表示します。The second function, sayHello(), creates and displays a dialog. これは、前の JavaScript 開発で使用した Alert() 関数とよく似ています。This is very similar to the Alert() function you may know from previous JavaScript development.

手順 4: アプリを実行するStep 4: Run the app!

ここで F5 キーを押すと、アプリを実行できます。Now you can run the app by pressing F5. アプリが読み込まれ、Web ページが表示されます。The app will load, the web page will be displayed. ボタンをクリックすると、メッセージ ダイアログ ボックスが表示されます。Click on the button, and the message dialog will pop-up.

プロジェクトを実行する

まとめSummary

これで、Windows 10 と UWP 用の JavaScript アプリを作成できました。Congratulations, you've created a JavaScript app for Windows 10 and the UWP! これは極端にシンプルな例ですが、これに好きな JavaScript ライブラリやフレームワークを追加して、独自のアプリを作成することができます。This is a ridiculously simple example, however, you can now start adding your favorite JavaScript libraries and frameworks to create your own app. また、これは UWP アプリなので、ストアに公開できます。And as it's a UWP app, you can publish it to the Store. サード パーティのフレームワークを追加する方法の例については、以下のプロジェクトをご覧ください。For example of how third party frameworks can be added, see these projects: