LaravelのbladeやSmarty等のテンプレートエンジンからJavaSriptにデータを渡す際のベストプラクティスについて考えてみる

こんにちは。ゆうきと申します。
最近はReactやVueといったフロントエンドのフレームワークが流行っているので、モダンな開発環境で働いている方はテンプレートエンジンを使うことが少なくなっているかもしれませんね。
個人的にはこのフロントとサーバーサイドを切り離す流れはまだまだ続く。。というより、もっともっと加速していくと思っています。

しかしそうは言っても、テンプレートエンジンを用いているシステムもまだまだ多いです。
今回はそんなテンプレートエンジンを使用して開発をする際に悩むことの多い「JavaScriptへのデータの渡し方」について自分なりのベストプラクティスを考えてみました。

そもそもどんなやり方があるの？

さて、テンプレートエンジンからJavaScriptにデータを渡す方法は色々ありますが、パッと思いつくものを紹介します。

その１：inputタグ等のvalue属性内に直接書いちゃう方法

まず最初に思いつくのがこの方法です。

// テンプレートファイル内の記述です
<input id="test" value="{{ $value }}">

↑こんな感じでinputタグのvalueに直書きしちゃうやり方です。JavaScriptでの受け取り方は下の通り

const test = document.getElementById('test').value;

シンプルで分かりやすく、悪くはない。
正直３つ４つくらいの変数を渡したいだけならこれで十分だと思います。
ただ、渡したい変数の数が多くなると、それを受け取るinputタグもかなり多くなるので面倒くさいのが弱点。

その２：scriptタグをべた書きしちゃう方法

こんな感じ

// テンプレートファイル内の記述です
<script>
    const test = {{ $test }}
</script>

これはこれで動きますが、JavaScriptが分離されていないのでちょっと嫌だ。

その３：JSON形式にしたものをHTMLのタグに持たせる方法

こんな感じ

$test = array(
    'user'=> array(
        'id'=> 1,
        'name'=> 'taro',
        'role'=> 'admin',
    ),
);

$test = json_encode($test);

↑テンプレートファイルに渡す前にあらかじめJSONエンコードしておく

// テンプレートファイル内の記述です。
<input id="test" type="text" value="{{ $test }}">

JavaScriptでの受け取り方は下の通り

const test = JSON.parse(document.getElementById('test').value);

JSONエンコードとか、js側でもparseしないといけないとか手間は増えるけど、この方法が一番めんどくさくなくて良いと思う。