ステップ 2: IDE のベーシック演習 - AWS Cloud9

ステップ 2: IDE のベーシック演習

(前のステップ: ステップ 1: 環境を作成する)

チュートリアルのこのパートでは、AWS Cloud9 IDE を使用してアプリケーションを作成およびテストする方法をいくつか紹介します。

  • editor (エディタ)]ウィンドウを使用して、コードを作成および編集できます。

  • terminal (ターミナル)]ウィンドウまたは[Run Configuration (実行設定)]ウィンドウを使用して、デバッグせずにコードを実行できます。

  • Debugger (デバッガー)]ウィンドウを使用してコードをデバッグできます。

JavaScript および Node.js エンジンを使用して、これらの 3 つのタスクを実行します。他のプログラミング言語については、「チュートリアルおよびサンプル」を参照してください。

環境の準備をする

JavaScript コードの実行とデバッグに必要なツールのほとんどはインストール済みです。ただし、このチュートリアルでは追加の Node.js パッケージが必要です。以下のようにインストールします。

  1. メニューバー (AWS Cloud9 IDE の上部) で、[Window (ウィンドウ)]、[New Terminal (新しいターミナル)]を選択します (または既存のターミナルウィンドウを使用します)。

  2. ターミナルウィンドウ (IDE の下部にあるタブの 1 つ) では、以下のように入力します。

    npm install readline-sync

    結果が以下のようになることを確認します (npm WARN メッセージも表示される場合は、無視してもかまいません)。

    + readline-sync@1.4.10 added 1 package from 1 contributor and audited 5 packages in 0.565s found 0 vulnerabilities

コードを記述する

コードを記述することから始めます。

  1. メニューバーで[File (ファイル)]、[New File (新規ファイル)]の順に選択します。

  2. 以下の JavaScript を新しいファイルに追加します。

    var readline = require('readline-sync'); var i = 10; var input; console.log("Hello Cloud9!"); console.log("i is " + i); do { input = readline.question("Enter a number (or 'q' to quit): "); if (input === 'q') { console.log('OK, exiting.') } else{ i += Number(input); console.log("i is now " + i); } } while (input != 'q'); console.log("Goodbye!");
  3. File (ファイル)]、[Save (保存)]の順に選択し、ファイルを hello-cloud9.js として保存します。

コードを実行する

次に、コードを実行できます。

使用しているプログラミング言語によっては、コードを実行できる方法が複数あります。このチュートリアルで使用している JavaScript は、ターミナルウィンドウまたは[Run Configuration (実行設定)]ウィンドウを使用して実行できます。

[Run Configuration (実行設定)]ウィンドウを使用してコードを実行するには

  1. メニューバーで、[Run (実行)]、[Run Configurations (実行設定)]、[New Run Configuration (新しい実行設定)]の順に選択します。

  2. 新しい[設定の実行]ウィンドウ (IDE の下部にあるタブの 1 つ) で、[コマンド]フィールドの hello-cloud9.js を入力し、[実行]を選択します。

  3. Run Configuration (実行設定)]プロンプトがアクティブであることを確認してから、プロンプトで番号を入力してアプリケーションを操作します。

  4. Run Configuration (実行設定)]ウィンドウにコードの出力が表示されます。出力は以下のようになります。


                [Run Configuration (実行設定)]でコードを実行する。

ターミナルウィンドウを使用してコードを実行するには

  1. 先ほど使用したターミナルウィンドウに移動します (または新しいターミナルウィンドウを開きます)。

  2. ターミナルウィンドウのプロンプトで「ls」と入力し、コードファイルがファイルのリストにあることを確認します。

  3. プロンプトで「node hello-cloud9.js」と入力して、アプリケーションを起動します。

  4. プロンプトで番号を入力して、アプリケーションを操作します。

  5. ターミナルウィンドウにコードの出力が表示されます。出力は以下のようになります。


                [Run Configuration (実行設定)]でコードを実行する。

コードをデバッグする

最後に、[Debugger (デバッガー)]ウィンドウを使用してコードをデバッグできます。

  1. 行 10 の横のマージンを選択して、行 10 のコード (if (input === 'q')) にブレークポイントを追加します。以下のように、その行番号の横に赤い円が表示されます。

    
                        コードにブレークポイントを追加する。
  2. IDE の右側で[Debugger]ボタンをクリックして、Debuggerウィンドウを開きます。または、メニューバーで[Window (ウィンドウ)]、[Debugger (デバッガー)]の順に選択します。

    次に、[Debugger] (デバッガー) ウィンドウの [Watch Expressions] (ウォッチ式) セクションで [Type an expression here] (ここに式を入力) を選択して、input 変数を監視します。

    
                        [Debugger (デバッガー)]ウィンドウでウォッチを設定する。
  3. コードを実行するために先ほど使用した[Run Configuration (実行設定)]ウィンドウに移動します。[Run(実行) ]を選択します。

    または、新しい [Run Configuration] (設定の実行) ウィンドウを開き、メニューバーから [Run] (実行)、[Run With] (次で実行)、[Node.js] の順に選択して、コードの実行を開始できます。

  4. Run Configuration (実行設定)]プロンプトで番号を入力し、コードが行 10 で一時停止することを確認します。[Debugger (デバッガー)]ウィンドウに、[Watch Expressions (ウォッチ式)]に入力した値が表示されます。

    
                        プログラムがブレークポイントで停止する。
  5. Debugger (デバッガー)]ウィンドウで、[Resume (再開)]を選択します。これは、前のスクリーンショットで強調表示されている青い矢印アイコンです。

  6. 設定の実行ウィンドウで停止を選択し、デバッガーを停止します。

    
                        デバッガーを停止する。

次のステップ

ステップ 3: クリーンアップする