JSforce Web Console の使い方

[JSforce](https://jsforce.github.io/)はJavaScriptからSalesforceのAPIにアクセスするライブラリです。ブラウザで動作するクライアントアプリケーションのみならず、Node.jsを利用してサーバアプリケーションから利用したり、バッチを作成してコマンドラインから起動したりと、さまざまなシーンで利用できます。

アプリケーションの開発のみならず、SalesforceのAPIを学ぶ上でも JSforce は大変有効です。JSforceにはREPLモードというものがあり、インタラクティブにターミナルコンソールからAPIを実行し結果を確かめることができました。また結果はJavaScriptで操作できますので、REPL上で簡単なスクリプトを実行したりすることも容易でした。

なおSalesforce APIをお気軽に試すという用途としてよく知られているものに [Workbench](https://workbench.developerforce.com/)がありますが、こちらはあらかじめ決まったAPIについてUIを提供していますが、あくまでAPIのレスポンスを確かめるといった使い方までであり、コード実行とは連結していませんでした。

ただし、Webインターフェースを介していつでもAPIにアクセスできるというのは、あまりローカルPCにソフトウェアのインストールを行いたくない多くの開発者ユーザにとってはメリットです。特にNode.jsについてはまだインストールしていないSalesforce開発者も多くいることは事実ですので、その点はJSforceの普及にはマイナスでした。

今回紹介する [JSforce Web Console](https://jsforce.github.io/jsforce-web-console/) は、Node.js版JSforceのREPL機能をオンライン環境で利用できるようになったものです。これにより、ローカルPCにNode.jsおよびJSforceをセットアップすることなく、いますぐにJSforceの機能を試して実行することができるようになりました。

## アクセス

最初に[JSforce Web Console](https://jsforce.github.io/jsforce-web-console/)にアクセスすると、まず以下のように表示されます。

![JSforce Web Console-1.jpg](https://qiita-image-store.s3.amazonaws.com/0/6495/e81d2db9-e2d2-b910-95c1-f91d50de2348.jpeg)

Salesforceにログインしてないよ、と言われてますので、指示通り `.authorize` とタイプしてSalesforceに接続します。

するとウィンドウがポップアップしてOAuth2の承認フローが開始されます。ログイン画面では接続するSalesforceのアカウントを入力してログインします。

![salesforce.com.jpg](https://qiita-image-store.s3.amazonaws.com/0/6495/e6d4cbda-ad47-407d-0b37-fabd28ef72d9.jpeg)

「Allow（許可）」ボタンを押してログインすると、接続完了です。画面に "Logged in as: <username@organization>" と表示されていればOKです。

![JSforce Web Console-3.jpg](https://qiita-image-store.s3.amazonaws.com/0/6495/b6508228-95f5-3b44-9807-cf1269d55552.jpeg)

## 使い方

Salesforceへ接続できたら、まずはSOQLでも実行してみましょう。

JSforceでは、APIへの接続に`jsforce.Connection`インスタンスを作成してアクセスしますが、Web Console上ではログイン済みのデフォルトのConnectionインスタンスが既に利用可能になっています。また、このデフォルトインスタンスのメソッドはグローバルの関数としてもアクセスできるようになっています。

そのため、SOQLを実行する`Connection#query()`メソッドを実行するには、以下の文字列をコマンドプロンプトのテキストボックスに入力してリターンキーを押します。

```
query('SELECT Id,Name,Account.Id,Account.Name,StageName,Amount FROM Opportunity')
```

以下のようにSOQLの実行結果が表示されるはずです。

![JSforce Web Console-4.jpg](https://qiita-image-store.s3.amazonaws.com/0/6495/b153b06e-f905-b5ad-5e77-18b301344ad8.jpeg)

結果として返却されたオブジェクトの値はChromeのDev ToolsなどでのConsole表示と同じようにツリー形式で表示されます。マウスクリックでツリーのノードを開閉可能です。

次に、コマンドプロンプトに `descr` まで文字をタイプして、タブキーを押してみてください。するとコマンドプロンプトの内容が `describe` まで補完されて、さらに候補が一覧表示されているのが分かるかと思います（各メソッドの内容についてはAPIリファレンスをご覧ください）。


![JSforce Web Console-5.jpg](https://qiita-image-store.s3.amazonaws.com/0/6495/d10ee3f4-6f7a-c3dc-083c-d5895464d365.jpeg)

`describeSObject('Account')` とタイプして、リターンを押します。SOQLの時と同じように、APIの実行結果はツリー形式で参照できます。

![JSforce Web Console-6.jpg](https://qiita-image-store.s3.amazonaws.com/0/6495/c4cbd91b-0e94-5367-a356-5b18fe94d137.jpeg)

コマンドから実行結果を利用することもできます。実行結果にアクセスするには、出力されているツリーの右端に付いている数字を参照します。たとえば "#2" と書かれている場合、`_2` という変数でアクセスが可能です。

以下は`describeSObject('Account')`の結果にアクセスし、項目のAPI参照名の一覧を抜き出している例です。

![JSforce Web Console-7.jpg](https://qiita-image-store.s3.amazonaws.com/0/6495/30f8b4df-c306-82e2-9b31-a446dcda9f21.jpeg)

なお1つ前のコマンドの実行結果は `_` という変数に格納されます（この辺りはNode.js版のJSforce REPLと同じです）。

以上の実行結果を組み合わせて、カスタム項目だけをクエリするAPIを実行した例が以下になります。

![JSforce Web Console-9.jpg](https://qiita-image-store.s3.amazonaws.com/0/6495/6d2a040c-40bf-99e1-1393-5f49d02cfa99.jpeg)

なお上の例ではES6のArrow Functionという記法を使っていますが、JSforce Web Consoleには[Babel](https://babeljs.io/)が組み込まれていますので、ブラウザのサポートを気にすることなくこういった最新の記述方法も利用することができます（もちろん通常のJavaScriptでも大丈夫です）。


## コマンド一覧

JSforceにはREPLでの作業を行うためのコマンドが備わっています。最初にSalesforceに接続するために利用した`.authorize`コマンドはそのうちの1つです。以下にコマンドの一覧を挙げます。

- **.authorize**      OAuth2の承認フローを開始してSalesforceに接続します
- **.clear**          表示されているログをクリアします
- **.help**           ヘルプを表示しコマンドの一覧を表示します
- **.disconnect**     現在の接続を破棄し、接続情報をレジストリから削除します。
- **.open**           現在接続しているユーザでSalesforceのWebページを開きます。


## 組み込み関数

JSforceのAPI以外にも、Web Console 独自の関数が組み込まれています。以下に組み込み関数の一覧を挙げます。

- **clear()**         表示されているログをクリアします
- **copy(value)**     valueで指定した値をクリップボードにコピーするために、ダイアログをオープンします。（Chrome Dev Toolsの`copy()`と同等の機能)
- **console.log(message)** ログの出力を行います。ブラウザの標準コンソールに出力すると同時に、REPLの出力にも表示されます。
  

## まとめ

JSforce Web Consoleによって、今までNode.js版のJSforceでしか試せなかったことが、いつでもWeb UIを介してできるようになりました。Workbenchでは、APIのレスポンスを確かめたら、あとはひたすらコードをエディタで書いてテストするしかなかったのですが、JSforce Web Console ならばある程度までオンライン上で試行錯誤して行うことができるのがメリットです。

また、Apexでしかコードを実行できないSalesforceの開発者コンソールと違い、もうすこし柔軟なJavaScriptで実行できる、というのは、もう一つのメリットです。もちろん、Tooling APIを使えば、JSforce Web ConsoleからApexを実行するということもできなくはありません。