のツアー AWS Cloud9 IDE

このトピックでは、 AWS Cloud9 統合開発環境 () の基本ツアーについて説明しますIDE。この演習を最大限に活用するには、以下のステップを順番に実行します。

前提条件

このツアーに参加するには、 AWS アカウントとオープンな AWS Cloud9 開発環境が必要です。これらの操作を行う方法を理解するには、「入門: の基本的なチュートリアル AWS Cloud9」のステップに従います。または、「セットアップ AWS Cloud9」や「での環境の使用 AWS Cloud9」などの個別の関連トピックを試すこともできます。

警告

AWS Cloud9 開発環境があると、 AWS アカウントに料金が発生する可能性があります。これには、 EC2環境EC2を使用している場合の Amazon の料金が含まれます。詳細については、「Amazon EC2料金」を参照してください。

ステップ 1: メニューバー

の上部にあるメニューバー には、ファイルとコードを操作しIDE、IDE設定を変更するための一般的なコマンドが含まれています。また、メニューバーからコードのプレビューと実行も行うことができます。

次のようにメニューバーの端の矢印を選択してメニューバーを非表示にできます。

メニューバーをもう一度表示するには、次のように、メニューバーがあった場所の中ほどにある矢印を選択します。

結果を以下と比較します。

このチュートリアルの次のいくつかのセクションではIDE、 を使用して一連のファイルを使用できます。これらのファイルを設定するには、［File (ファイル)］、［New File (新規ファイル)］の順にクリックします。

次に、次のテキストをコピーして Untitled1 エディタタブに貼り付けます。

fish.txt
--------
A fish is any member of a group of organisms that consist of
all gill-bearing aquatic craniate animals that lack limbs with
digits. They form a sister group to the tunicates, together
forming the olfactores. Included in this definition are
lampreys and cartilaginous and bony fish as well as various
extinct related groups.

ファイルを保存するには、［File (ファイル)］、［Save (保存)］の順に選択します。ファイルに fish.txt と名前を付け、［Save (保存)］を選択します。

これらの手順を繰り返し、2 つ目のファイルを次の内容で cat.txt として保存します。

cat.txt
-------
The domestic cat is a small, typically furry, carnivorous mammal.
They are often called house cats when kept as indoor pets or
simply cats when there is no need to distinguish them from
other felids and felines. Cats are often valued by humans for
companionship and for their ability to hunt.

では、多くの場合、いくつかの方法がありますIDE。たとえば、メニューバーを非表示にするには、端にある矢印を選択する代わりに、［View (表示)］、［Menu Bar (メニューバー)］を選択できます。新規ファイルを作成するには、［File (ファイル)］、［New File (新規ファイル)］を選択する代わりに、Alt-N (Windows/Linux の場合) または Control-N (MacOS の場合) を押すことができます。このチュートリアルの長さを減らすために、1 つの方法についてのみ説明します。に慣れたらIDE、自由に試して、自分に最適な方法を見つけてください。

ステップ 2: ダッシュボード

ダッシュボードを使用すると、各環境にすばやくアクセスできます。ダッシュボードからは、環境の作成、環境を開く、および 環境の設定の変更ができます。

ダッシュボードを開くには、メニューバーで、［AWS Cloud9］、［Go To Your Dashboard (ダッシュボードを開く)］の順に選択します。

環境の設定を表示するには、my-demo-environmentカード内のタイトルを選択します。ダッシュボードに戻るには、ウェブブラウザの ［戻る］ボタン、または ［Environments (環境)］と呼ばれるナビゲーションのパンくずを使用します。

環境IDEの を開くには、my-demo-environmentカード内で開く IDE を選択します。

注記

が再び表示されるIDEまでに数分かかる場合があります。

ステップ 3: ［Environment (環境)］ウィンドウ

［Environment (環境)］ウィンドウには、環境のフォルダとファイルのリストが表示されます。また、隠しファイルなど、さまざまな種類のファイルを表示できます。

［Environment (環境)］ウィンドウを表示または非表示にするには、［Environment (環境)］ボタンを選択します。

[Environment] (環境) ウィンドウおよび [Environment] (環境) ボタンを表示または非表示にするには、メニューバーで [Window] (ウィンドウ)、[Environment] (環境) の順に選択します。

隠しファイルを表示または非表示にするには、［Environment (環境)］ウィンドウで歯車アイコンを選択してから、［Show Hidden Files (隠しファイルを表示する) ］を選択します。

ステップ 4: エディタ、タブ、ペイン

エディタでは、コードの書き込み、ターミナルセッションの実行、IDE設定の変更などの操作を実行できます。開いているファイルやターミナルセッションなどの各インスタンスは、タブとして表示されます。タブはペインにグループ化できます。タブはそのペインの端に表示されます。

タブを表示または非表示にするには、メニューバーで ［View (表示)］、［Tab Buttons (タブボタン)］を選択します。

新しいタブを開くには、タブの並びの端にある ［+］アイコンを選択します。続いて、次のように、使用可能なコマンドのいずれか (［New File (新規ファイル)］など) を選択します。

2 つのペインを表示するには、タブの並びの端にある、ドロップダウンメニューに似たアイコンを選択します。続いて、次のように、［Split Pane in Two Rows (ペインを 2 行に分割する)］を選択します。

単一のペインに戻すには、もう一度ドロップダウンメニューのアイコンを選択し、次のように、1 つの正方形のアイコンを選択します。

ステップ 5: コンソール

コンソールは、タブを作成および管理するための代替の場所です。デフォルトでは、［Terminal］タブが含まれますが、他のタイプのタブを含めることもできます。

コンソールを表示または非表示にするには、メニューバーで ［View (表示)］、［Console (コンソール)］の順に選択します。

コンソールを拡張または縮小するには、次のように、コンソールの端にあるサイズ変更アイコンを選択します。

ステップ 6: ［Open Files (開いているファイル)］セクション

［Open Files (開いているファイル)］セクションには、エディタで現在開いているすべてのファイルが一覧表示されます。［Open Files (開いているファイル)］は、次のように ［Environment (環境)］ウィンドウの一部です。

［Open Files (開いているファイル)］セクションを表示または非表示にするには、メニューバーで ［View (表示)］、［Open Files (開いているファイル)］の順に選択します。

開いているファイルを切り替えるには、リストから目的のファイルを選択します。

ステップ 7: ガーター

ガーターは、エディタの各ファイルの端にあり、ファイルの操作時に行番号やコンテキスト記号などを表示します。

ガーターを表示または非表示にするには、メニューバーで ［View (表示)］、［Gutter (ガーター)］の順に選択します。

ステップ 8: ステータスバー

ステータスバーは、エディタの各ファイルの端にあり、行番号や文字番号、ファイルタイプの設定、スペースおよびタブの設定、および関連エディタ設定などが表示されます。

ステータスバーを表示または非表示にするには、メニューバーで ［View (表示)］、［Status Bar (ステータスバー)］の順に選択します。

特定の行番号に移動するには、目的のファイルのタブを選択します。次にステータスバーで、行番号と文字番号を見つけます (［7:45］のような形式です)。次のように、行番号 (例: 4) を入力して、Enter を押します。

ファイルタイプの設定を変更するには、ステータスバーで異なるファイルタイプを選択します。たとえば、［cat.txt］の場合、［Ruby］を選択して構文の色の変化を確認します。プレーンテキストの色に戻すには、次のように ［Plain Text (プレーンテキスト)］を選択します。

ステップ 9: ［Outline (アウトライン)］ウィンドウ

［Outline (アウトライン)］ウィンドウを使用して特定のファイルの場所にすばやく移動できます。

[Outline] (アウトライン) ウィンドウおよび [Outline] (アウトライン) ボタンを表示または非表示にするには、メニューバーで [Window] (ウィンドウ)、[Outline] (アウトライン) の順に選択します。

［Outline (アウトライン)］ウィンドウの機能を確認するために、hello.rb という名前のファイルを作成します。以下のコードをファイルにコピーして保存します。

def say_hello(i)
  puts "Hello!"
  puts "i is #{i}"
end

def say_goodbye(i)
  puts "i is now #{i}"
  puts "Goodbye!"
end

i = 1
say_hello(i)
i += 1
say_goodbye(i)

［Outline (アウトライン)］ウィンドウの内容を表示または非表示にするには、［Outline (アウトライン)］ボタンを選択します。

［Outline (アウトライン)］ウィンドウで、次のように ［say_hello(i)］を選択してから ［say_goodbye(i)］を選択します。

ステップ 10: ［Go (移動)］ウィンドウ

［Go (移動)］ウィンドウを使用して、エディタでファイルを開き、記号の定義に移動し、コマンドを実行して、エディタのアクティブなファイルの行に移動します。

［Go (移動)］ウィンドウの内容を表示するには、［Go (移動)］ボタン (拡大鏡アイコン) をクリックします。

[Go] (移動) ウインドウおよび [Go] (移動) ボタンを表示または非表示にするには、メニューバーで [Window] (ウインドウ)、[Go] (移動) の順に選択します。

［Go (移動)］ウィンドウを開いた状態で、次の操作を実行できます。

• スラッシュ (/) に続けてファイル名の一部またはすべてを入力する。一致するファイルが一覧表示されたら、ファイルを選択してエディタで開きます。たとえば、「/fish」と入力すると、fish.txt が表示されます。「/.txt」と入力すると、fish.txt と cat.txt が表示されます。

  注記

  ファイルの検索範囲には、［Environment (環境)］ウィンドウの隠しファイルと隠しフォルダは含まれません。

• アットマーク (@) に続けて記号の名前を入力する。一致する記号が一覧表示されたら、記号を選択してエディタの該当箇所に移動します。たとえば、エディタで hello.rb ファイルが開いてアクティブになっている場合、「@hello」と入力すると say_hello(i) が表示され、「@say」と入力すると say_hello(i) と say_goodbye(i) の両方が表示されます。

  注記

  エディタでアクティブになっているファイルが、サポートされている言語プロジェクトの一部である場合、記号の検索範囲は現在のプロジェクトになります。それ以外の場合、記号の検索範囲はエディタのアクティブなファイルに限定されます。詳細については、「 TypeScript サポートと機能の強化」を参照してください。

• ドット (.) に続けてコマンド名を入力する。コマンドが一覧表示されたら、コマンドを選択して実行します。たとえば、「.closetab」と入力して Enter キーを押すと、エディタの現在のタブが閉じられます。使用可能なコマンドのリストについては、「のコマンドリファレンス AWS Cloud9 IDE」を参照してください。

• コロン (:) に続けて数字を入力し、エディタのアクティブなファイルの該当する行番号に移動する。たとえば、エディタで hello.rb ファイルが開いてアクティブになっている場合、「:11」と入力すると、そのファイルの行番号 11 に移動します。

現在のキーボードモードとオペレーティングシステム別に、これらの各アクションのキー割り当てを確認するには、メニューバーの ［Go (移動)］メニューの利用可能な各 ［Go To (移動)］コマンドを参照してください。

ステップ 11: ［Immediate (即時)］タブ

即時タブを使用すると、コードの JavaScript小さなスニペットをテストできます。［Immediate (即時)］タブの動作を確認するには、次の手順を実行します。

1. メニューバーで ［Window (ウィンドウ)］、［New Immediate Window (新しい即時ウィンドウ)］の順に選択して ［Immediate (即時)］タブを開きます。

2. ［Immediate (即時)］タブで何らかのコードを実行します。これを実行するには、以下のコードをウィンドウに入力します。行 1 を入力した後に Shift-Enter を押して、行 2 の後でも再度押します。行 3 の後で Enter を押します。(行 1 または行 2 を入力した後で Enter ではなく Shift-Enter を押すと、コードが意図したよりも前に実行されます)

   for (i = 0; i <= 10; i++) { // Press Shift-Enter after typing this line.
     console.log(i)            // Press Shift-Enter after typing this line.
   }                           // Press Enter after typing this line. The numbers 0 to 10 will be printed.

   

ステップ 12: プロセスリスト

［Process List (プロセスリスト)］には、すべての実行中のプロセスが表示されます。プロセスを停止したり、それ以上実行を望まないプロセスを強制終了することもできます。［Process List (プロセスリスト)］ウィンドウの動作を確認するには、次の手順を実行します。

1. メニューバーで ［Tools (ツール)］、［Process List (プロセスリスト)］を選択して ［Process List (プロセスリスト)］を表示します。

2. プロセスを検索します。［Process List (プロセスリスト)］で、プロセスの名前を入力します。

3. プロセスを停止または強制終了します。プロセスのリストでプロセスを選択し、［Kill (停止)］または ［Force Kill (強制終了)］を選択します。

ステップ 13: 設定

設定には以下の設定が含まれます。

• エディタでソフトタブを使用するかどうか、無視するファイルタイプ、PHPおよび Python などの言語のコード完了動作など、現在の環境のみの設定。

• 環境ごとのユーザー設定。色、フォント、エディタの動作など。

• キー割り当て。ファイルやエディタの操作で使用するショートカットキーの組み合わせなど。

• IDEの全体的なテーマ。

設定を表示するには、メニューバーで、［AWS Cloud9］、［Preferences (設定)］の順に選択します。次のような内容が表示されます。

ステップ 14: ターミナル

で 1 つ以上のターミナルセッションを実行できますIDE。ターミナルセッションを開始するには、メニューバーで、［Window (ウィンドウ)］、［New Terminal (新しいターミナル)］の順に選択します。または、［Console (コンソール)］タブの横にある 「プラス」アイコンを選択し、［New Terminal (新しいターミナル)］を選択します。

ターミナルでは、以下のコマンドの実行を試すことができます。たとえば、ターミナルで、echo $PATH と入力してから、Enter を押して、PATH 環境変数の値を出力します。

次のコマンドの実行を試すこともできます。たとえば、以下のようなコマンドを試します。

• pwd。現在のディレクトリへのパスを出力します。

• aws --version を使用して、 のバージョン情報を出力します AWS CLI。

• ls -l。現在のディレクトリについての情報を出力します。

ステップ 15: ［Debugger (デバッガー)］ウィンドウ

［Debugger (デバッガー)］ウィンドウを使用してコードをデバッグできます。たとえば、コード全体を一度に一部分ずつ段階を追って実行し、経過に伴う変数の値を確認したり、コールスタックを調べたりできます。

注記

この手順は、いずれかの基本的なチュートリアルステップ 2: の基本ツアー IDEの と似ています。 IDE

[Debugger] (デバッガー) ウィンドウおよび [Debugger] (デバッガー) ボタンを表示または非表示にするには、メニューバーで [Window] (ウィンドウ)、[Debugger] (デバッガー) の順に選択します。

このチュートリアルでは、以下を実行して、デバッガーウィンドウと一部の JavaScript コードを試すことができます。

1. ターミナルセッションで次のコマンドを実行して、環境内の Node.js がインストールされていることをチェックします。node --version。Node.js がインストールされている場合、Node.js バージョン番号が出力に表示され、この手順のステップ 3 ( JavaScript 「コードを書き込む」) に進むことができます。

2. Node.js をインストールする必要がある場合は、以下を実行します。

   1. 次の 2 つのコマンドを一度に 1 つずつ実行して、環境に最新の更新があることを確認し、Node Version Manager (nvm) をダウンロードします。 (nvm は、Node.js バージョンのインストールと管理に役立つシンプルな Bash シェルスクリプトです。 詳細については、「 の Node Version Manager」を参照してください GitHub。）

      Amazon Linux の場合:

      sudo yum -y update
      curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.0/install.sh | bash

      Ubuntu Server の場合:

      sudo apt update
      curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.0/install.sh | bash

   2. テキストエディタを使用してシェルプロファイルファイル (たとえば ~/.bashrc) を更新し、nvm をロードできるようにします。例えば、 の環境ウィンドウでIDE歯車アイコンを選択し、お気に入り でホームを表示 を選択します。このステップを繰り返して、［Show Hidden Files (隠しファイルを表示する)］も同様に選択します。

   3. ~/.bashrc ファイルを開きます。

   4. ファイルの末尾に次のコードを入力するか貼り付けて、nvm のロードを有効にします。

      Amazon Linux の場合:

      export NVM_DIR="/home/ec2-user/.nvm"
      [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm.

      Ubuntu Server の場合:

      export NVM_DIR="/home/ubuntu/.nvm"
      [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm.

   5. ファイルを保存します。

   6. そのターミナルセッションを閉じて、新しいセッションを開始します。次に、次のコマンドを実行して Node.js の最新バージョンをインストールします。

      nvm install node

3. デバッグする JavaScript コードを書き込みます。たとえば、ファイルを作成し、そのファイルに次のコードを追加して、hello.js として保存します。

   var i;
   
   i = 10;
   
   console.log("Hello!");
   console.log("i is " + i);
   
   i += 1;
   
   console.log("i is now " + i);
   console.log("Goodbye!");

4. コードにブレークポイントをいくつか追加します。たとえば、ガーターで、行 6 と行 10 の横のマージンを選択します。次のように、各行番号の横に赤い円が表示されます。

   

5. これで、 JavaScript コードをデバッグする準備が整いました。これを試すには、以下を実行します。

   1. ［Debugger (デバッガー)］ウィンドウの内容を表示または非表示にするには、次のステップに示すように ［Debugger (デバッガー)］ボタンを選択します。

   2. コードの実行中に i という変数の値を確認します。［Debugger (デバッガー)］ウィンドウの ［Watch Expressions (ウォッチ式)］で、［Type an expression here (ここに式を入力)］を選択します。次のように文字 i を入力して、Enter を押します。

      

   3. コードの実行を開始します。次のように、［Run (実行)］、［Run With (次で実行)］、［Node.js］の順に選択します。

      

   4. コードは行 6 で実行を一時停止します。［Debugger (デバッガー)］ウィンドウの ［iWatch Expressions (表現を見る)］に 値が表示されます。現在は 10 です。

      

   5. 次のように、［Debugger (デバッガー)］ウィンドウで、［Resume (再開)］を選択します。青い矢印アイコンです。

      

   6. コードは行 10 で実行を一時停止します。［Debugger (デバッガー)］ウィンドウに、今度は i の新しい値が表示されます。現在は 11 です。

   7. ［Resume (再開)］を再度選択します。コードが最後まで実行されます。次のように、出力がコンソールの ［hello.js］タブに表示されます。

      

結果を以下と比較します。

結論

警告

AWS Cloud9 開発環境があると、 AWS アカウントに料金が発生する場合があることに注意してください。これには、 EC2環境EC2を使用している場合の Amazon の料金が含まれます。詳細については、「Amazon EC2料金」を参照してください。

親セクション (「IDE の操作」) には、試すことができる追加のトピックがあります。ただし、 のツアー AWS Cloud9 IDEが終了し、環境が不要になった場合は、「」で説明されているように、必ず とその関連リソースを削除してください環境を削除する。