なんだか少し寒いような気がします。風邪ではないはず、たいがーです。

梅雨入りしそうなお天気になってきました。私は一日目でも書いた通り、趣味で写真を撮っています。昨日も撮りに行ったのですが、曇り空で非常に撮りにくかったです。雨の日は家に籠りたくなりますね。

この一日目の体験記、600PVを超え、様々な方に見ていただいています。本当にありがとうございます…今見ると、読みにくいところも多く、恥ずかしい気持ちになりますね。笑

さて、今日は前回までに作成していたSlack bot用のスクリプトの修正を行いつつ、もう一つ新しいことをやってみました！

EC2のインスタンスのクラス一覧を表示する

ほぼ初めてのJavaScript

利用可能なEC2のインスタンスタイプの一覧を正確に出力するAPIがないそうで、Cloud Autoamtorで利用するEC2のインスタンスタイプの値はこれまで手動で管理されていたそうです。その解決策の一つとして、AWSマネジメントコンソールのEC2インスタンスを作成する画面から、取ってくるというのが今回のお題です。

「いい感じでJSONで出力出来たらいいよね。」というお話でした。しかし、私は「…何から、どうすればいいですか？」状態だったので、参考になりそうなページのURLをIssueに貼っていただきました。今回はJavaScriptから取りたいクラスを指定して一覧にするようでした。

「JavaScript…ほぼ触ったことがないレベル…どこからすれば…」と完全に固まりかけていましたが、少しずつ進めてみます。今回はChromeの開発者ツールのコンソールを使って作業していきます。

応用できるところはしていこう

AWSマネジメントコンソールのEC2インスタンスの選択画面は、表の形(テーブル)で表記されています。また、インスタンスのクラスは同じ行にかかれているので、そのあたりfor文で回せば取ってこれそうな予感がしますね。まずは、その方法からやってみました。まず、EC2インスタンスの表をIDで指定していきます。

table = document.getElementById("gwt-debug-instanceTypeList");

次に行を指定したいのですが、どうすればいいのかわかりませんでした。すると、社員さんが一度これを実行してみたらわかりやすいかもしれないと、ヒントを教えてくださいました。

trs = table.children[2].children;

一度出力してみると、テーブル内の情報が出力されました。これをもとに進めていきます。変数の数え方など、すこしPythonと考え方が似ているところはあるので、今までの知識を使いながら進めていきます。

表内のデータすべてに処理をする

今後、インスタンスタイプが追加された時にも利用できるようにfor文は個数を限定してではなく、表に入っているすべてのインスタンスタイプに対して処理を回したい。今回は、foreachを教えていただきました。しかし、うまく使いこなせなかったため、for文で解いていきました。

欲しい情報だけ抜き取ることが出来るように、指定する範囲をどんどん狭めていきます。そして、それを出力します。

for(let i = 0; i < trs.length; i++){
    instancetype=trs[i].children[2].children[0].children[0].children[0].innerText;
    console.log(instancetype);
};

これで、すべてのインスタンスタイプを出力することが出来ましたが、出来たら見やすいようにJSONで出力できるようにしていきます。空の配列を用意し、出力結果をその配列に入れていくようにしました。

instancetypes=[]
​
for(let i = 0; i < trs.length; i++){
    instancetype_name=trs[i].children[2].children[0].children[0].children[0].innerText;
    instancetypes.push(instancetype_name);
    console.log(instancetypes);
};

最初に実行した際、間違ってconsole.logをfor文の中に入れてしまっていたため、この構文が163回目が実行されました。あまりにたくさん出力されたため、少し笑ってしまいました。訂正して出力してみます。

table = document.getElementById("gwt-debug-instanceTypeList");
trs = table.children[2].children;
instancetypes=[]
​
for(let i = 0; i < trs.length; i++){
    instancetype_name=trs[i].children[2].children[0].children[0].children[0].innerText;
    instancetypes.push(instancetype_name);
};
console.log(JSON.stringify(instancetypes));

なぜか表示されない実行結果

実行結果を見ようとすると、なぜかundefinedになり、表示がされなくなりました。原因はfilter。

検証している時に、どこにインスタンスタイプが書いてあるのかを調べるため設定した、filterがかかったままになっていたため、表示されなかったようでした。filterの中身を消すと、結果を表示することが出来ました！下記は東京リージョンで利用可能なインスタンスタイプの一覧です。

["t1.micro","t2.nano","t2.micro","t2.small","t2.medium","t2.large","t2.xlarge","t2.2xlarge","t3.nano","t3.micro","t3.small","t3.medium","t3.large","t3.xlarge","t3.2xlarge","m5a.large","m5a.xlarge","m5a.2xlarge","m5a.4xlarge","m5a.12xlarge","m5a.24xlarge","m5d.large","m5d.xlarge","m5d.2xlarge","m5d.4xlarge","m5d.12xlarge","m5d.24xlarge","m5d.metal","m5.large","m5.xlarge","m5.2xlarge","m5.4xlarge","m5.12xlarge","m5.24xlarge","m5.metal","m4.large","m4.xlarge","m4.2xlarge","m4.4xlarge","m4.10xlarge","m4.16xlarge","m3.medium","m3.large","m3.xlarge","m3.2xlarge","m1.small","m1.medium","m1.large","m1.xlarge","c5n.large","c5n.xlarge","c5n.2xlarge","c5n.4xlarge","c5n.9xlarge","c5n.18xlarge","c5d.large","c5d.xlarge","c5d.2xlarge","c5d.4xlarge","c5d.9xlarge","c5d.18xlarge","c5.large","c5.xlarge","c5.2xlarge","c5.4xlarge","c5.9xlarge","c5.18xlarge","c4.large","c4.xlarge","c4.2xlarge","c4.4xlarge","c4.8xlarge","c3.large","c3.xlarge","c3.2xlarge","c3.4xlarge","c3.8xlarge","c1.medium","c1.xlarge","cc2.8xlarge","g2.2xlarge","g2.8xlarge","g3s.xlarge","g3.4xlarge","g3.8xlarge","g3.16xlarge","p2.xlarge","p2.8xlarge","p2.16xlarge","p3.2xlarge","p3.8xlarge","p3.16xlarge","p3dn.24xlarge","r5a.large","r5a.xlarge","r5a.2xlarge","r5a.4xlarge","r5a.12xlarge","r5a.24xlarge","r5d.large","r5d.xlarge","r5d.2xlarge","r5d.4xlarge","r5d.12xlarge","r5d.24xlarge","r5d.metal","r5.large","r5.xlarge","r5.2xlarge","r5.4xlarge","r5.12xlarge","r5.24xlarge","r5.metal","r4.large","r4.xlarge","r4.2xlarge","r4.4xlarge","r4.8xlarge","r4.16xlarge","r3.large","r3.xlarge","r3.2xlarge","r3.4xlarge","r3.8xlarge","x1.16xlarge","x1e.xlarge","x1e.2xlarge","x1e.4xlarge","x1e.8xlarge","x1e.16xlarge","x1e.32xlarge","x1.32xlarge","m2.xlarge","m2.2xlarge","m2.4xlarge","z1d.large","z1d.xlarge","z1d.2xlarge","z1d.3xlarge","z1d.6xlarge","z1d.12xlarge","z1d.metal","d2.xlarge","d2.2xlarge","d2.4xlarge","d2.8xlarge","i2.xlarge","i2.2xlarge","i2.4xlarge","i2.8xlarge","i3.large","i3.xlarge","i3.2xlarge","i3.4xlarge","i3.8xlarge","i3.16xlarge","i3.metal","i3en.large","i3en.xlarge","i3en.2xlarge","i3en.3xlarge","i3en.6xlarge","i3en.12xlarge","i3en.24xlarge"

公式からのAPIがない時はそのような対処もできるのか、という点でもすごく勉強になった課題でした。

久しぶりのJavaScriptでしたが、Pythonとも似ているところがあって面白かったです！違う言語を触ってみるのもたのしいなぁと感じた一日でした。