iMacros×JavaScript：Visual Studio Codeの導入方法と使い方【PART.2】

iMacrosで用意されているデフォルトのエディタでJavaScriptを書くと不便なことがたくさんあります。

特にiimの行頭にmacro += "と行末に" + "\n";を追加する作業など行数が多くなると大変です。

そのためVisual Studio Code（ビジュアルスタジオコード）にエディタを変えれば開発が凄く楽になります。

1. Visual Studio Codeとは？

Microsoft社が開発したオープンソースのテキストエディタです。

実際の画面はこんな感じです。

なぜ使うのかと言いますと、iMacrosのデフォルトエディタに付いていない便利機能が大量にあります。

上記の機能は一部ですが、使うことによって大幅な時間短縮ができます。

特にデバッグ（エラー箇所を見つける）作業時に役に立ちます。

2. Visual Studio Codeの導入方法

少し時間が掛かりますが、この作業は一度切りなのでできるだけ導入しましょう。

それでは順番に導入方法をご説明していきます。

ソフトをインストール

日本語表記に変更

続いて英語を日本語に変更するために拡張機能を追加します。

Macrosフォルダを開く

iMacrosのプログラム（マクロ）が入っているMacrosフォルダを開きます。

一度開けば記憶されるので次回からはこの作業はいらなくなります。

手順は以下の通りです。

3. Visual Studio Codeの使い方

筆者がよく使う機能を順番にご紹介します。

①行頭や行末にコードを一括追加

iMacrosで作ったコードをJavaScriptで使う場合macro += "と" + "\n";を書かないと動きません。もし行数が多くなるとペースト回数が増えて大変になります。

そんな時ショートカットキーを活用すれば以下のように何行あってもすぐに終わります。

※上記はGoogleにテイラボと検索して、テイラボのサイト内でimacrosと検索するあまり意味のないマクロです。

行頭の選択方法

SHIFT+ALT+CTRL押しながら▼▲で範囲を選択する。
もしくはSHIFT+ALT押しながら左クリックで範囲指定する。

この方法は矩形（くけい）選択と呼ばれています。ほとんどのエディタについている機能です。

行末の選択方法

マウスで範囲を指定した後にSHIFT+ALT+Iを押す。

②1画面に複数表示

複数表示することによって作業効率が上がります。

使い方は左側に編集前、右側に編集中などに分けると変更箇所が分かりやすいです。

③CTRL+Sで上書き保存

iMacrosのデフォルトエディターに上書き保存の機能がありますが、保存場所を指定する画面が毎回表示されて面倒です。

それとSave ＆ Closeを押すと名前の通りエディターが閉じてしまいます。

Visual Studio Codeの場合はCTRL+Sを押すと、そのままの画面で上書き保存できるので凄く便利です。

動画では少しわかりにくいですが、CTRL+Sを押すと画面左上2箇所が変化します。

④使用変数を一覧で表示（アウトライン）

アウトラインにある変数をクリックするとその場所まで移動してくれます。
※変数とは文字や数値を保管しておく入れ物の名前です。

上記のマクロは「メルカリ×iMacrosで自動再出品できる無料ツール」の記事に載せています。

コードが短い場合は意味がないですが、長くなった場合に役に立つ機能です。

⑤右端に全体プレビュー表示（ミニマップ）

こちらも上項目のアウトラインと同じくコードが長い場合、移動が凄く楽になります。

4. まとめ

最初はあまり良さが分かりにくいと思いますが、長く使えば使うほど良さが分かってきます。

今回はJavaScriptとiMacrosを使うための説明をしましたが、ほぼすべてのプログラミング言語に対応しています。

今後、もし他の言語でプログラミングする場合でもVisual Studio Codeエディターが使えますので入れて損はないと思います。

おすすめ記事

iMacrosに必要なFirefox、SmoothCSVの導入方法と初期設定（保存版）【PART.1】 iMacros：コマンド一覧と使い方（大量のサンプルマクロあり）【PART.10】