はじめに（読み飛ばしてOK）
時間の流れは早いもので、気づけば開発経験2年以上になっていました。なっしーです！
練習にSpringを使ったWebアプリを作っているので、その話をしようと思います。
今回はThymeleafと一緒にHandlebarsを使っている話をします。
想定読者層
- Springを学び始めた人
- Thymeleafだけでは表現の限界を感じている人
環境
- Spring（Spring Boot）
- Thymeleafを使用
Handlebarsとは？
Handlebarsは、JavaScriptで利用できるテンプレートエンジンです。
Thymeleafと同じように、サーバーから渡されたデータをHTMLに埋め込んでくれるものです。
ThymeleafはSSR（サーバーサイドレンダリング）を行えます。
一方、HandlebarsはCSR（クライアントサイドレンダリング）を得意としています。
レンダリングとは
HTMLやCSS、JavaScriptなどを合体させて、ユーザーが読める形にする過程を（ブラウザ）レンダリングと言います。
（※レンダリングという単語は広義では「データを処理することで画像や音楽、テキストを表示できるようにすること」を指していたりします。）
SSRとCSRの違い
SSRは文字通りサーバー側で、CSRはクライアント（Webブラウザ）側でHTMLをレンダリングします。
平たく言うと、組み立ての作業場所が違うってことですね。
違いを表にしてみましょう。
| SSR | CSR | |
|---|---|---|
| レンダリング場所 | サーバー | クライアント |
| 初回のページ表示 | 速い | 遅い |
| ロード後のページ遷移速度 | 遅い | 速い |
| SEO | 強い | 弱い |
Thymeleafでは毎回サーバーでページのすべてをレンダリングする必要がある一方、Handlebarsでは1度ロードされた後はテンプレート部分をクライアント側でレンダリングできます。
この2つを使い分けることで、良い感じのページを作ろうってことです！
使い分け
Handlebarsは主に、データ量が多く、ページングやローディングの表示をさせたいものに使います。
それ以外は基本的にThymeleafを使っています。
Handlebarsには非同期通信で取ってきたデータを渡しています。
例えば、ECサイトであれば商品ページで商品の情報だけ非同期処理とHandlebarsを使って、クライアント側で表示できるようにする…といったようなことをしています。
そうすることで、ページングなどの処理が簡単に実装できます。
そして、商品情報以外の部分（≒あまり変化がないもの）はThymeleafでSSRしておけば効率が良いですよね！
Handlebarsの基本的な使い方
公式ドキュメント
使い方を知るにはHandlebarsの公式ドキュメント↑を見るのが一番早いです。
とてもシンプルなテンプレートエンジンなので、ドキュメントが英語で書かれていても容易に理解できるなぁと個人的に思っています。
シンプル大好き。
データバインド（データをHTMLに埋め込むもの）やifやeachなどの基本的な処理はもちろん、自分で好きな処理を作ることもできます。
ネストされたデータも取り扱えます。
自由度が高くて学習コストが低いところが気に入っています。
終わりに
Handlebarsは、Thymeleafだけだと物足りない、かといってイマドキなフロントエンドフレームワークを本気で導入するほどじゃない…みたいなときにピッタリなライブラリだったと思います。
皆さんも一度使ってみてください！
ここまで読んでいただき、ありがとうございます！なっしーでした！