Visualforceタグに頼らずJS処理を共通化したい

はじめに

20画面ほどで共通のJS処理を書くことになりました。
共通化しないと保守性が大変なことになるので、共通化の方法を模索しました。

前提条件

• reRenderを使ってコントローラーで更新した変数をJS処理で使いたい

• 以下のようなVisualforceタグは使いたくない（※理由はボツ案にて）

  • apex:component
  • apex:include

使えた案

ApexでJSのコードを作成し、JSの処理でscriptタグ化

例）

public String jsScript {get; private set;}
〜〜〜〜
this.jsScript = 'console.log(\\"test\\");';
this.jsScript += 'console.log(\\"test\\");';

<div id="script_div">
</div>
<script>
    const script = document.createElement("script");
    script.innerHTML = "{!jsScript}";

    const script_div = document.getElementById("script_div");
    script_div.appendChild(script);
</script>

ボツ案

apex:component・apex:includeなどのVisualforceタグ

• 原因は分からないですが、複数アプリにてapex:componentのapex:attributeを用いた場合、親ページの変数がコンポーネントに渡らないことが稀にありました
• apex:includeなども上述の現象が起こらないという確証は持てず、プロダクションコードに乗せるべきではないと判断し、候補から外れた次第です

JSファイルを静的リソースに作成し、読み込む

• マージフィールドに入れている変数をJSの連想配列などに代入し、JS内にマージフィールドが無い状態を作ってからファイル化
• reRenderしても再描画されず、変数の値が更新されないのでボツ

Apex内でscriptタグを作成し、出力

public String jsScript {get; private set;}  
〜〜〜〜
this.jsScript = '<script>console.log("test");</script>';  

• エスケープされるのでボツ

カスタム表示ラベルにscriptタグを記述し、出力

• エスケープされるのでボツ

カスタム表示ラベルにHTMLタグ・scriptタグを記述し、出力

• エスケープされるのでボツ
• 余談ですが、カスタム表示ラベルにHTMLタグは書けなくなったようです
  • カスタム項目の表示ラベルの HTML の表示の無効化 (更新、適用済み)

最後に

開発が終わるまでにもっとスマートな方法が出れば、追記します！

参考文献

JavaScriptで動的にscriptタグを差し込んだり、実行する方法 | つかびーの技術日記