メインコンテンツへスキップ

スクリプト編集画面の使い方(Monacoエディタ)


    ServiceNowでBusiness RuleやScript Includeを書くとき、主役になるのがスクリプトを入力する画面です。この画面はUtahリリース以降、Monacoエディタに置き換わりました。VS Codeと同じ編集エンジンなので、コードを書き慣れた人には馴染みのある操作がそのまま使えます。

    一方で、いつもの右クリックが効かないなど、最初に戸惑う場面もあります。ショートカットキーや定型文の呼び出し方を知っているかどうかで、スクリプトを書く速さはかなり変わります。

    この記事では、Monacoエディタの基本操作とServiceNow独自の補助機能を、実機のスクリーンショットとあわせてまとめます。想定読者は、ServiceNowでスクリプトを書く機会があり、この編集画面の操作にまだ慣れていない人です。

    対象は初級者です。

    この記事の内容は ServiceNow の PDI(Personal Developer Instance)Zurich リリースの OOTB(初期設定)で確認しています。実環境では権限やカスタマイズにより結果が変わります。

    この記事で分かること

    • スクリプト編集画面がUtah以降Monacoエディタに変わった経緯

    • 右クリックが効かない代わりにShift+Alt+Mでメニューを開く方法

    • コマンドパレット(F1)、検索・置換、折りたたみ、複数カーソルなどのキー操作

    • help + Tabで呼び出すSyntax Editor Macrosと、gs.から始まる入力補完の仕組み

    • エディタの設定まわりで確認しておきたいポイント

    • Business Rule・Script Include・Client Script・Fix Scriptでの共通点と違い

    • 短い修正とローカル開発(VS Code拡張)を使い分ける考え方

    Monacoエディタとは何か

    スクリプトを持つレコードは、一覧からクリックして開きます。


    画像

    開いたフォームのAdvancedタブに切り替えると、スクリプト欄がMonacoエディタとして表示されます。


    画像

    見た目はVS Codeそのものです。

    Business RuleやScript Includeのスクリプトフィールドは、Utahリリース以降Monacoエディタに置き換わりました。MonacoはMicrosoftが開発している編集エンジンで、VS Codeの中身と同じものです。それより前のServiceNowでは、別のスクリプトエディタが使われていました。ServiceNow公式ドキュメントでも、スクリプトフィールドで使うコードエディタとして案内されています(Code editor(ServiceNow Docs))。Monaco自体の詳しい仕様はMonaco Editorプロジェクト公式サイトにまとまっています。

    Monaco化によって、シンタックスハイライトや入力補完の精度が上がっています。VS Codeを使った経験がある人なら、キーボード操作の多くがそのまま通用するはずです。ツールバーには検索・保存・ヘルプなどのアイコンボタンが並び、行番号の左には折りたたみ用の三角マークが表示されます。

    このエディタが画面にどれくらいの量を読み込んでいるかも見ておきます。Business Ruleを新規作成する画面をPDIで実測すると、1,361,221バイトありました。1つの入力フォームとしては、かなり重い部類です。エディタ本体のスクリプトや入力補完用の定義が、1画面にまとめて読み込まれているためと考えられます。

    1メガ超えは軽くありません。

    VS Codeと共通の土台であること

    MonacoはVS Codeと共通の操作を数多く持っています。括弧を1つ選ぶと対になる括弧が自動的にハイライトされる、入力中に閉じ括弧やクォートが自動補完される、といった見た目の挙動もVS Codeと同じです。キーボード操作の多くは、公開されているVS Codeのドキュメントがそのまま参考になります(Keyboard Shortcuts Reference(VS Code Docs))。

    右クリックが効かない場面

    Monacoエディタは、スクリプトフィールドの中で右クリックをしても、いつものコンテキストメニューが出ません。ブラウザ標準の右クリックメニューが代わりに割り込んでくることもあります。ServiceNowを長く使ってきた人ほど、最初にここでつまずきます。

    慣れの問題です。

    代わりに使うのがShift+Alt+Mです。このキーを押すと、右クリックで出るはずだったコンテキストメニュー(切り取り・貼り付け・コマンドの実行など)が、キーボード操作で開きます。右クリックが使えないと分かった時点で、まずこのキーを覚えておくと迷いません。

    コピーや貼り付けだけなら、右クリックに頼らずCtrl+CやCtrl+Vでも操作できます。それ以外のコマンドを呼び出したいときに、Shift+Alt+Mのコンテキストメニューの出番になります。

    迷わず押せます。

    コマンドパレットで操作を探す(F1)

    操作に迷ったときに使えるのがコマンドパレットです。スクリプトフィールドにカーソルを置いた状態でF1を押すと、Monacoが持つコマンドの一覧が、名前で検索できる形で開きます。

    万能の入り口です。

    コマンド名の一部を打ち込めば候補が絞り込まれます。折りたたみや行の削除など、名前さえ分かればどんなコマンドも呼び出せます。ショートカットキーを覚えていなくても、コマンドパレットからその場で実行できる、操作の入り口として役に立つ機能です。VS Codeを使ったことがある人には見慣れた画面のはずです。

    よく使う操作をキー操作で覚える

    ここからは、公開されているMonaco/VS Codeの情報をもとに、この編集画面でよく使う操作をキー操作つきで整理します。似た操作を毎回メニューから探すより、キーで呼び出すほうが速く、入力のリズムも崩れません。

    コード補完(IntelliSense)

    gs. のように打つと、そのオブジェクトが持つメソッド名の候補が一覧表示されます。候補が自動で出ない場合や、途中で消えてしまった場合は、Ctrl + Spaceで呼び出し直せます。入力補完の精度は書きかけのコードの状態に左右されるため、候補の中身は自分の環境で確かめるのが確実です。

    検索と置換

    Ctrl + Fで検索ボックスが開き、Ctrl + Hに切り替えると置換ができます。長いスクリプトの中で特定の変数名を探したり、まとめて書き換えたりするときに使う機能です。行単位でコメントを付けたり外したりしたいときは、対象の行にカーソルを置いてCtrl + /を押します。複数行を選択してから押せば、選んだ範囲をまとめてコメントアウトできます。

    地味に速いです。

    括弧の対応表示

    カーソルを括弧の上に置くと、対になる括弧が自動でハイライトされます。ネストが深いif文やfunctionの終わりを目で追うとき、この表示だけで対応関係が分かるので便利です。キー操作というより、Monacoが常に働かせている表示機能です。

    小さいですが役立つ表示です。

    コードの折りたたみ

    行番号の左にある三角マークをクリックすると、その範囲を折りたためます。折りたたみのキー操作はCtrl + Shift + [、展開はCtrl + Shift + ]です。長い関数の中身を一時的に隠せば、全体の構造を見渡しやすくなります。

    長い関数ほど効きます。

    複数カーソルでの同時編集

    Alt + クリックで、クリックした位置に新しいカーソルを追加できます。Ctrl + Dは、カーソル位置の単語や選択範囲と同じ文字列を、次の一致箇所も含めて選択できる操作です。似た変数名を複数箇所まとめて書き換えたいとき、1行ずつ修正するより速く終わります。

    修正時間を短縮できます。

    整形はショートカットのほうが安全

    スクリプトの見た目を整えたいとき、エディタ上部のツールバーにある整形ボタンを押す人が多いはずです。ただし、タブとスペースが混在したスクリプトでは、このボタンを押すとインデントが崩れるという報告があります。

    崩れを避けたいときは、整形したい範囲をドラッグで選んでから、Ctrl + Kに続けてCtrl + Fを押す方法が安全です。このショートカットは選択範囲だけを整形するので、意図しない箇所まで書き換わる心配がありません。範囲を選ばずに実行すると、カーソルのある位置を基準に整形が動きます。

    全画面表示のアイコン

    ツールバーの右端には、外向きの矢印が付いたアイコンボタンがあります。実機で確認できたのはボタンの見た目までで、正式な名称や挙動はツールチップで確認するのが確実です。画面を広く使いたいときに押してみる価値はあります。

    小さな工夫です。

    ここまでのキー操作を一覧にまとめました。


    画像

    ServiceNow独自の支援機能

    Monaco本体の機能に加えて、ServiceNowのスクリプトフィールドには独自の補助機能もいくつか乗っています。

    定型文をhelp + Tabで呼び出す(Syntax Editor Macros)

    フィールドの中でhelpと入力してTabキーを押すと、Syntax Editor Macros(定型文の一覧)が展開されます。これは、よく使うAPIやコード片をあらかじめ登録しておき、短い呼び名から呼び出す仕組みです。ゼロから書き始めるより、まずhelpと打ってTabを押すほうが早いこともあります。ServiceNowの公式ドキュメントでも、この動きが説明されています。マクロのキーワードを入力してTabキーを押すと、そのマクロのテキストがスクリプトフィールドに挿入される、という内容です。詳しい仕様はSyntax editor macros(ServiceNow Docs)にまとまっています。

    覚えると時短になります。

    APIの候補表示とgs.から始まる入力補完

    gsやcurrentのような、頻出のグローバルオブジェクトの後ろにドットを打つと、そのオブジェクトが持つメソッド名の候補が一覧表示されます。Monacoベースの入力補完なので、綴りを覚えていなくても候補から選べる場面が増えます。候補の網羅性はAPIやテーブルによって差があるため、目当てのメソッドが出ないときはAPIリファレンスもあわせて確認すると安全です。

    候補は目安です。

    構文エラー・警告の表示

    閉じ忘れた括弧やセミコロンの位置など、構文上の誤りがあると、該当行の左側に赤い波線や記号が表示されます。保存する前に気づけるので、実行してからエラーログを探す手間を減らせるのが利点です。表示される警告の種類や厳しさは、ECMAScriptのモード設定によって変わると考えられます。

    早期発見につながります。

    フィールドごとの注記や制限

    編集画面には、テーブルや状況に応じた注記が表示されることがあります。たとえばClient Scriptの新規作成画面では、次のような注意書きが表示されました。


    画像

    新しいClient Scriptはstrict modeで動作し、DOMへの直接アクセスやjQuery・windowオブジェクトへのアクセスが既定で無効になる、という内容です。フォーム側で「Isolate script」を設定すればスクリプト単位で無効化でき、glide.script.block.client.globalsというシステムプロパティで全体の既定値を変えられる、とも案内されています。エディタ自体は共通でも、テーブルごとに周辺の制約が違う一例です。

    画面ごとに事情があります。

    エディタの設定を変える

    編集画面そのものの見た目や動作にも、変更できる項目があります。さきほどのClient Scriptの注記に出てきたglide.script.block.client.globalsのように、システムプロパティ(sys_properties)で挙動が切り替わる項目が存在するのは確かです。

    一方で、インデントの幅や自動補完のオン・オフといった細かい設定項目まで一覧化されているドキュメントは、今回の調査範囲では見つかりませんでした。プロパティ名や既定値を断定して書くと誤った情報になりかねないので、この記事では踏み込みません。設定を変えたい場合は、システムプロパティの一覧やインスタンスのサポート窓口で、自分の環境の値を確認してください。

    断定は避けます。

    どのテーブルで使えるか

    Monacoエディタは、スクリプトを持つテーブルの編集画面で共通して使われています。代表的なのは、Business Rule・Script Include・Client Script・Fix Scriptです。テーブルによって用意されている周辺の設定項目は違いますが、スクリプト本体を書く部分の操作は同じMonacoエディタです。


    画像


    画像


    画像


    画像

    数字はすべて実機の値です。

    PDIで件数を数えると、有効なBusiness Ruleは5,641件、Script Includeは4,828件でした。Client Scriptは2,585件、Fix Scriptは954件です。日常的にスクリプトフィールドを開く機会が多いのは、この中でもBusiness RuleとClient Scriptです。Script Includeの内訳や呼び出し方法については、別の記事でくわしく扱っています。

    画面をまたいでも操作が変わらないのは、実務では地味に助かる点です。Business Ruleで覚えたショートカットは、Script IncludeやClient Scriptを開いたときもそのまま使えます。テーブルごとにエディタの癖を覚え直す必要がありません。それぞれのテーブルの基本的な使い方や、Fix ScriptとBackground Scriptの使い分けは、別の記事で扱っています。テーブルごとの公式ドキュメントの起点は次のとおりです。

    実務での使い分け

    同じエディタでも、修正の規模によって向き不向きがあります。

    短い修正はこの画面で完結させる

    1行の条件変更や、メッセージ文言の修正程度であれば、ブラウザのままで十分です。開いてすぐ直せて、保存もそのまま反映されます。バージョン管理はUpdate Set単位になりますが、小さな修正のたびにローカル環境を立ち上げるよりも早く終わります。

    早さが決め手です。

    長いスクリプトはローカルエディタという選択肢

    数百行を超えるスクリプトや、複数のScript Includeにまたがる修正では、ブラウザの入力欄だけで作業するのは負担が大きくなります。この場合に有効なのが、ローカルのVS Codeへ同期して編集する方法です。ServiceNowは公式のVS Code拡張機能を配布しています。インスタンスとのファイル同期や、Glide APIの入力補完にも対応済みです。詳細はServiceNow Extension for VS Code(Visual Studio Marketplace)で確認できます。手元の使い慣れたエディタで整形・検索・バージョン管理ツールと組み合わせられるのが利点です。

    つまずきやすい点

    保存し忘れ

    スクリプトを直したあと、Updateボタンを押さずに画面を離れてしまうことがあります。変更した直後は反映された気になりやすいので、保存ボタンを押したかどうかは毎回目で確認したほうが安全です。

    基本ですが侮れません。

    スコープ違い

    スコープアプリケーションに属するScript Includeは、そのスコープの外から開くと編集できません。実機で確認すると、次のような画面になりました。


    画像

    「このレコードはScoped App Clientアプリケーションに属しており編集できません」という注記が表示され、フォームの項目もグレーアウトしています。スコープをまたいで呼び出したい場合は、Accessible fromの設定を確認するか、対象のアプリケーションスコープに切り替えてから開き直すという対処が必要です。アプリケーションスコープの考え方はApplication scope(ServiceNow Docs)にまとまっています。

    Update Setに入る・入らない

    デフォルトのグローバルスコープで作業している場合、スクリプトの変更は現在アクティブなUpdate Setに記録されます。ただし、Update Setを切り替え忘れたまま作業すると、意図しないUpdate Setに変更が混ざってしまうので注意が必要です。複数人で同じインスタンスを触る環境では、作業前にアクティブなUpdate Setを確認する習慣が事故を防ぎます。

    確認は一手間です。

    大きなスクリプトで重くなる

    数千行規模の巨大なScript Includeを開くと、入力の反応が遅れることがあります。Business Ruleの新規作成画面だけで1メガバイトを超える読み込みが発生する点は、さきほど触れたとおりです。スクリプト自体が長くなるほど、構文チェックや入力補完の処理対象も増えるため、動作が重く感じられる場面が出てくると考えられます。処理を分割してScript Include側に切り出すなど、1つのスクリプトを肥大化させない設計も選択肢に入ります。

    設計で防げます。

    よくある質問

    Monacoエディタで右クリックしたい場面が多いのですが、設定で戻せますか

    確認した範囲では、右クリックの挙動を設定で戻す項目は見当たりませんでした。ブラウザ標準のメニューに頼らず、Shift+Alt+Mでコンテキストメニューを開く操作を覚えるほうが早く慣れます。

    コマンドパレットで見つけたコマンドを、キー操作として覚えられますか

    コマンドパレット自体は名前検索での実行を前提にした機能です。頻繁に使うコマンドであれば、この記事の一覧やVS Codeの公式ドキュメントで対応するキー操作を調べておくと、毎回パレットを開く手間が省けます。

    Syntax Editor Macrosは自分で追加できますか

    ServiceNowの用語としてはSyntax editor macroと呼ばれ、管理者側で登録・追加できる仕組みが用意されていると案内されています。具体的な登録手順は、この記事の検証範囲では確認していません。

    Script Includeがグレーアウトして編集できないのはなぜですか

    多くの場合、自分がいま作業しているスコープと、そのScript Includeが属するスコープが違うことが原因です。つまずきやすい点で触れたとおり、対象のアプリケーションスコープに切り替えるか、Accessible fromの設定を確認してください。

    大きなスクリプトで動作が重いとき、何を確認すればよいですか

    まずスクリプトの行数や、呼び出しているAPIの数を疑うのが手順として自然です。1つの関数に処理を詰め込みすぎていないか、共通処理をScript Include側に切り出せないかを見直すと、編集時の負担も実行時の負担も減らせることがあります。

    見直しが近道です。

    用語

    • Monacoエディタ … Microsoftが開発するコードエディタ。VS Codeの中身と同じ編集エンジンで、Utah以降のServiceNowスクリプトフィールドに採用されている

    • コマンドパレット … F1で開く、コマンドを名前検索して実行する画面

    • Syntax Editor Macros … helpと入力してTabを押すと展開される、ServiceNow独自の定型文機能

    • IntelliSense … 入力中の文脈からメソッド名やプロパティ名の候補を表示する、Monaco/VS Code共通の入力補完機能

    • スコープアプリケーション … 他のアプリケーションから隔離された名前空間。属するスコープの外からはスクリプトを編集できない

    • Update Set … スクリプトを含むカスタマイズの変更をまとめて記録し、他インスタンスへ移送するための単位

    参考リンク(公式ドキュメントURL)

    検証範囲外のこと

    • キー操作の多くは、公開されているMonaco/VS Codeの情報をもとに書いており、1つずつ実機で押して確認したわけではありません。折りたたみ・複数カーソル・整形などのキーは、この前提で読んでください。

    • help + Tabで定型文が展開される点、およびgs.で入力補完の候補が出る点も、実際にキーを押しての確認はしていません。

    • ツールバーの整形ボタンでインデントが崩れるという報告は伝聞情報で、自分では再現していません。

    • 全画面表示に見えるアイコンの正式名称や挙動、ツールチップの文言までは確認していません。

    • エディタの設定項目のうち、システムプロパティ以外(表示テーマや入力補完の詳細設定など)の存在は確認できていません。

    • Now Assistなど生成AIを使ったコード支援機能は、追加ライセンスが前提になる場合があるため、この記事の検証範囲には含めていません。

    まとめ

    Monacoエディタまわりの操作をまとめました。


    画像

    Monacoエディタは、VS Codeの操作感をServiceNowに持ち込んだ画面です。右クリックが効かない点と、テーブルごとに周辺の注記が違う点さえ覚えておけば、あとは公開されている操作方法がそのまま通用します。

    慣れれば手が止まりません。

    短い修正はブラウザの中で完結させ、規模が大きくなってきたらローカルのVS Code拡張に切り替える。この使い分けを持っておくと、スクリプトを書く場面ごとに迷いが減ります。

     
     
    ServiceNowのPDI(Personal Developer Instance)を実機で観察して、Noteに記事を書いています 実装・運用・教育の現場視点で淡々と記録中です リクエストがあればその記事も書きます 個人の観察日記です

    あなたへのおすすめ