---
title: 高度なJavaScriptコード拡張機能
description: 高度なJavaScriptコード拡張機能を使用して、構文チェック、コード差分、GitHub統合、および公開ワークフローを保護するドラフトモードを備えたエンリッチメントされたエディタでJavaScript ES5コードを記述します。
url: https://docs.tealium.com/ja/iq-tag-management/extensions/extensions-list/advanced-javascript-code-extension/
---
## 前提条件
* utag v4.38以降。`utag.js`テンプレートを更新する方法については、ナレッジベースの記事[最新バージョンのutag.jsへの更新のベストプラクティス](https://support.tealiumiq.com/en/support/solutions/articles/36000363470)を参照してください。
* この拡張機能を公開するには、[JavaScript Draft Promotion]()のプロファイルレベルの権限が必要です。
これはJavaScriptコード拡張機能の高度なバージョンです。基本的なニーズについては、[JavaScriptコード拡張機能](https://docs.tealium.com/javascript-code-extension/)を参照してください。
### JavaScriptコード拡張機能の比較
次の表は、JavaScriptコード拡張機能と高度なJavaScriptコード拡張機能の主な違いを強調し、あなたのニーズに最適なものを選ぶのに役立ちます。
| 機能 | JavaScriptコード拡張機能 | 高度なJavaScriptコード拡張機能 |
| ----- | ----- | ----- |
| エディタ | 基本テキストエディタ | 構文チェックとコード差分を備えた高度なコードエディタ |
| 公開ワークフロー | [公開場所](https://docs.tealium.com/manage-extensions/) | [ドラフトを承認して公開する] (#publish-workflow) |
| リモートコード統合 | [Tealium API v3](https://docs.tealium.com/iq-javascript-extension-api/) |[GitHubリポジトリへのリンク](#working-with-github) |
| 権限 | アカウントレベル | プロファイルレベル |
## 動作原理
JavaScriptコード拡張機能には、ドラフトと公開キューを使用する独自の公開ワークフローがあります。ドラフトはコードの進行中のバージョンであり、プロファイルを保存すると保存されますが、デフォルトでは公開ファイルには含まれません。公開キューを使用すると、ドラフトを公開用にマークでき、それによって読み取り専用になり、次回の対応する環境への公開に含まれます。
高度なJavaScriptコード拡張機能の公開ワークフローは、コードが準備が整うまで公開されないことを保証します。また、各環境に公開されたコードを確認し、ドラフトと環境間のコードを比較することもできます。
GitHubでJavaScriptコード拡張機能を使用する方法については、[GitHubへのリンクについて]()を参照してください。
### ドラフト
公開されたプロファイルに影響を与えることなく、コードの異なるバージョンを維持するためにドラフトを使用します。ドラフトは、環境を指定して**公開の承認**ワークフローを使用する場合にのみ公開されます。
ドラフトはJavaScriptコードの名前付きバージョンです。拡張機能の各インスタンスは最大20のドラフトを保持できます。ドラフトはプロファイルが保存されるたびに保存されますが、特定の環境の公開キューに明示的に追加された場合にのみ公開されます。これにより、コードを編集し、進行中の作業を保存することができます（たとえ不完全であっても）、公開環境に影響を与えることなく。
### 公開ワークフロー
高度なJavaScriptコード拡張機能には、公開されるコードをより安全かつ詳細に制御するための独自の公開ワークフローがあります。デフォルトではドラフトは公開されません。
ドラフトを公開キューに追加するには、[JavaScript Draft Promotion permission]()が必要です。
次のワークフローを使用します：
1. 新しいドラフトを追加し、カスタムJavaScriptコードを記述します。プロファイルを保存すると、ドラフト内のコードが保存されますが、公開されません。この方法でコードの作業を続け、公開する準備が整うまで続けます。
1. 公開する準備ができたら、一つ以上の公開環境でドラフトの公開を承認します。ドラフトは読み取り専用モード（ロックアイコンによって示されます）に入り、選択した環境への次の公開時に再び編集可能になりますが、ライブラリでは除外されます。ドラフトの隣のロックの色は、対応する環境の隣のアイコンの色と一致します。
1. ドラフトが公開されると、ライブコードは対応する公開環境でのみレビュー可能です（読み取り専用モード）。公開環境で直接コードを編集することはできません。変更を加えるには、ドラフトを編集し、公開ワークフロープロセスを繰り返します。
### コードエディタの機能
高度なJavaScriptコード拡張機能は、次の便利な機能を提供するインターフェースに組み込まれたAce Editorを使用しています：
* **構文チェック**
入力中に構文エラーや警告を表示します。マージンには、注意が必要な影響を受ける行を示すための便利なアイコンが表示されます。
* **構文ハイライト**
JavaScriptの構文ハイライト。
* **自動インデントとアウトデント**
入力時の自動インデント。`tab`キーと`shift+tab`キーのバインディングをサポートします。
* **コード折りたたみ**
コードのブロックを折りたたんで、気を散らすものを排除し、変更に集中します。
* **フルスクリーンモード**
**コードエディタ**ウィンドウをフルスクリーンモードに拡大して、大規模なコードプロジェクトに取り組みます。
### コード実行
ドラフトが公開されると、コードは`utag`ファイルのいずれかに追加されます（スコープに応じて）。コードはコードエディタに表示される通りに実行されますが、グローバル変数との競合を防ぐために次の無名関数でラップされます：
``` javascript
function(a, b)
{
// ここでJavaScriptコード拡張機能の内容が実行されます
}
```
関数に渡される2つのパラメータは：
* `a` - イベントタイプ（"view"または"link"またはカスタム値）
* `b` - `utag_data`への参照で、`b.VARIABLE_NAME="somevalue"`としてUDO値を構成できます。
グローバル変数を上書きしないように、すべての変数参照のスコープを適切に構成してください。
## 拡張機能の使用
始める前に、[拡張機能の動作方法]()について熟知してください。
拡張機能が追加されたら、以下に説明するようにドラフトを作成します。
### ドラフトの操作
ドラフトを使用して拡張機能にJavaScriptコードを追加します。
ドラフトを作成するには：
1. サイドバーの**ドラフト**の下で**+ 追加**をクリックします。
1. テキストウィンドウにJavaScriptコードを入力または貼り付けます。
1. 変更を保存してプロファイルを保存します。
ドラフトを操作する際に利用可能な機能は次のとおりです：
* **ドラフト名**：ドラフトの名前を構成します。名前はサイドバーにアルファベット順に表示されます。
* **リセット**：最後にプロファイルを保存して以来、ドラフトに加えられたすべてのコード編集を元に戻します。
* **削除**：ドラフトを削除します。元に戻すには、保存せずにプロファイルを更新します。
* **比較Diff**：ドラフトを別のドラフトまたは公開環境と比較します。
* **公開キューに追加**：一つ以上の公開環境でドラフトを公開するためにマークします。
### 下書きを公開する
下書きを公開するには2段階のプロセスが必要です。まず、拡張機能で下書きを公開環境の公開キューに追加する必要があります。次に、プロファイルをターゲット環境に公開します。
デフォルトでは、下書きは公開キューに明示的に追加されない限り、公開に含まれません。
下書きを公開するには：
1. サイドバーで公開する下書きを選択します。
1. **公開キューに追加...** をクリックします。
1. 公開場所の横にあるチェックボックスを選択します。
1. **続行**をクリックします。
下書きは読み取り専用モードになり（鍵アイコンによって示されます）、キューに入れた公開環境がサイドバーと下書きの詳細に表示されます。
1. プロファイルを保存して公開し、公開キューに合わせた公開ターゲットを選択します。
公開された下書きは、サイドバーの対応する公開環境でアクティブなコードとして表示されます。
### コードを比較する
下書きまたは公開環境を他の下書きまたは公開環境と比較します。比較ウィンドウには、異なる各行にハイライトされたコードのバージョンが並んで表示されます。例えば、ProdとQA、Draft 1とDraft 2、またはDraft 1とProdを比較します。
### GitHubを使う
次のセクションでは、GitHubリポジトリのファイルを参照する方法について説明します。この機能を使用して、拡張機能で直接コードを書く代わりに行います。
GitHubのファイルを操作するには、GitHubアカウントをiQタグ管理アカウントにリンクする必要があります。詳細については、[GitHubへのリンク]()を参照してください。
#### GitHubファイルを追加する
GitHubリポジトリからファイルを参照するには：
1. JavaScript Code拡張の左パネルで、GitHub Filesの隣にある**+ 追加**をクリックします。
ファイルのURLを入力するように求められます。
1. たとえば、`https://github.com/your_account/your_repository/blob/master/Tealium.js`のURLを入力します。
1. **ファイルを追加**をクリックすると、コードが拡張機能で参照されます。
プライベートリポジトリ内のファイルにアクセスするには、リポジトリスコープが選択された個人アクセストークンを使用してGitHubアカウントをリンクする必要があります。
#### ファイルを下書きモードにコピーする
GitHubを通じて追加されたファイルは読み取り専用であり、編集することはできません。これらのファイルを編集するには、GitHubで直接編集するか、ファイルを下書きモードにコピーして下書きコピーを編集します。
ファイルを下書きモードにコピーして編集し、公開する前に保存するには、次の手順を使用します：
1. **下書き**モードにコピーするファイルを選択します。
1. **下書きにコピー**をクリックして、ファイルの内容を新しい下書きテンプレートにコピーします。
1. 名前を入力して**Enter**を押します。
新しい名前を入力するか、同じ名前を保持します。
同じ名前を保持する場合、名前はファイル名と同じです。たとえば、GitHubのファイル名が`Tealium.js`の場合、最初のコピーは`Tealium.js`になります（その名前の下書きがまだ存在しない場合）。次のコピーは`Tealium.js-1`, `Tealium.js-2`などと名付けられます。
1. コピーを開いて編集します。
1. **保存**をクリックします。
#### ファイルを同期する
参照されたファイルの新しいバージョンがある場合、ファイルを同期する必要があります。JavaScript Code拡張のビューを展開して、参照されたファイルを同期します。
公開が承認されたファイルを含むすべてのGitHubファイルは、拡張機能を開くと同期を試みます。
次の手順を使用して、公開が承認されたファイルを含むファイルを手動で同期します：
1. 同期するファイルを選択します。
1. **ファイルを同期**をクリックして、リポジトリから最新のファイルを取得します。
更新されたファイルは、ファイルが最新であることを示す緑のチェックマークとともに、時間と日付が表示されます。
GitHubのファイルを操作する場合、操作しているファイル名は常にインターフェースの上部に表示されます。完全なファイルパスを表示するには、ファイル名の上にマウスを置きます。
#### ファイルを公開キューに追加する
公開キューに追加されたファイルは同期できず、ファイル名の横にロックアイコンが表示されます。公開キューに追加されたファイルを同期しようとすると、新しいバージョンに同期できないことを示す警告アイコンが表示されます。
JavaScript Draft Extensionを使用する場合と同様に、ファイルを公開キューに追加するには、次の手順を使用します：
1. 公開キューに追加するファイルを選択します。
1. **公開の承認**をクリックすると、ファイルの状態にタイムスタンプとユーザー名が表示され、ファイルが公開された環境が新しい行で表示されます。
## ベストプラクティス
この拡張機能を最大限に活用し、一般的な間違いを避けるための次のヒントを使用してください：
* **`