【初心者学習メモ】フラグメントを活用したフロントエンド開発
こんにちは。エンジニア研修中の IT 初心者です。今回は研修や個人開発で学んだ 「フラグメントを活用したフロント作成」 について、自分なりにまとめてみます。Qiita 記事としては備忘録的な意味合いが強いですが、同じように学んでいる方の参考になれば嬉しいです。
フラグメントとは？
Webアプリケーションで「フラグメント」と言うと、画面の一部をテンプレート化した断片的な部品を指します。
例えば Spring Boot + Thymeleaf では、fragments/ ディレクトリに HTML のパーツを切り出しておき、他の画面で th:replace などを使って再利用できます。React/Vue などのコンポーネントと似ていますが、テンプレートエンジンを用いた静的部品化と考えるとイメージしやすいです。
フラグメントを使うメリット
-
コードの重複を削減できる
ヘッダーやフッター、サイドバーなどを一度作って全ページで呼び出せる。 -
保守性が高まる
デザイン変更があっても、フラグメントの1ファイルを修正すれば全画面に反映される。 -
役割を分離できる
画面全体のレイアウトと、個別機能のUI部品を切り分けられる。 -
チーム開発がやりやすい
「フラグメントごとに担当者を分ける」といった作業分担が可能。
実際の例：投稿カードのフラグメント化
SNSアプリを例にすると、投稿カード（ユーザー名、本文、コメント数、いいね数を表示する部分）は多くの画面に登場します。
フラグメント化する前
各 HTML にほぼ同じコードをコピペしていました。修正時には全ページを直さなければならず、手間とミスが発生します。
フラグメント化した後
fragments/post.html を作り、そこに投稿カードのマークアップをまとめて記述。
<!-- fragments/post.html -->
<div class="post-card">
<div class="author">[[${post.author.name}]]</div>
<div class="body">[[${post.body}]]</div>
<div class="footer">
<span class="comments">コメント ([[${post.commentCount}]])</span>
</div>
</div>
呼び出し側は次のようにシンプルになります：
<div th:replace="fragments/post :: post-card"></div>
コメント一覧画面のフラグメント分割
もう少し複雑な例としてコメントツリー画面を考えます。
- 投稿ヘッダー部分
- コメントリスト部分
- コメント入力フォーム
これらをフラグメントに分割すると、それぞれの責務が明確になります。
<!-- fragments/comment-list.html -->
<div class="comment" th:each="comment : ${comments}">
<span class="author">[[${comment.author.name}]]</span>
<p class="body">[[${comment.body}]]</p>
</div>
メイン画面では呼び出すだけ：
<div th:replace="fragments/comment-list :: comment-list"></div>
CSS/JSとの組み合わせ
フラグメントを使うと HTML が部品化されるので、CSS や JS も役割ごとに分けて管理すると分かりやすくなります。
- post.css → 投稿カード用スタイル
- comments.css → コメントツリー用スタイル
- comments.js → コメント開閉などのインタラクション
こうすることで「この画面で何が使われているか」を追いやすくなり、不要な読み込みも減らせます。
実装して感じた課題
- 粒度の決め方が難しい
細かくしすぎるとファイルが増えすぎて逆に把握しにくい。逆に大きすぎると再利用性が下がる。 - データの受け渡し設計が重要
フラグメントは UI 部品なので、必要な DTO をどう渡すか考える必要がある。 - バックエンドとの依存
Thymeleaf の場合は Java DTO に依存するため、変更があればフラグメントも修正が必要。
学んだこと
- フラグメントは「フロントの部品化」を実現する便利な仕組み。
- 特に SNS アプリのように UI パターンが繰り返される場合に効果大。
- 一方で、粒度やデータ受け渡しを考えないと逆に複雑になる。
まとめ
初心者なりにフラグメントを活用してみて、「共通部分をまとめるだけで開発効率が全然変わる」ことを実感しました。
React/Vue のコンポーネントに比べるとシンプルですが、Spring Boot + Thymeleaf 環境では十分に威力を発揮します。
今後は「フラグメント × テンプレートレイアウト」を組み合わせて、もっと大規模な画面構成も練習してみたいと思います。