LoginSignup
42
21

More than 3 years have passed since last update.

Boilerplate と Template は何が違うのでしょうか?

Posted at

疑問: BoilerplateTemplate は何が違うのでしょうか?

結論

  • Boilerplate は、実際のテキストや画像を提供する。コピー&ペーストしたら使える。
  • Template は、文書の構造やレイアウトを提供する。コピー&ペーストだけではなく中身を埋めてもらうことを想定している。

ようだ。以下辺りを読んでみた。(ざっくり翻訳し引用。)

What's the difference between a boiler plate and a template?
What is boilerplate and why do we use it? Necessity of coding style guide

Boilerplate と Template の違いは何か?
Boilerplate とはコピー&ペーストで文書に追加するだけのもの。Boilerplate は、条件や注意事項などを記載し、言葉を使い回している契約書によく見られる。

大まかに言えば、Template とは、新しいオブジェクトを作成するためのモデルやパターンのこと。ライティングの世界では、履歴書などの標準化されたフォームであり、ライターが自分のバージョンを作り上げるために使用するもの。

Boilerplate とは異なり、Template は特定の用途に合わせて作られる。
Template も Boilerplate も、使い方を誤ると、ビジネス文書を堅苦しく、人工的なものにしてしまう。

しかしもちろん文脈によりけりでもありそう。以下まとめる。

Boilerplate とは

ボイラープレートコード

コンピュータプログラミングでは、殆ど、または全く変化することなく、複数の場所で繰り返される定型コードのセクションのこと。冗長な言語を使用する場合、プログラマーはコードを少しだけ書くだけでも多くのコードを作成する必要がある。このような定型コードはボイラープレートと呼ばれる

例えば以下は、「HTMLのボイラープレート」。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <title></title>
</head>
<body>

</body>
</html>

Boilerplate 例

Template

一方のテンプレート

文書などのコンピュータデータを作成する上で雛形となるデータ、あるいは雛形そのもの。
最も抽象的なテンプレートは、レイアウトのみのデータで、テキストを流し込むことでレイアウトつき文書となる。

そういえばデザインパターンにもあった。

テンプレートエンジン
テンプレート (プログラミング)

Template 例

しかし注意してみると

例に上げた HTML5 Boilerplate、よく見ると
image.png
most popular front-end template と書いてある。いやいや、よく見ると HTML email boilerplate
image.png

downloadable email marketing templates と言っている ... :upside_down:
Boilerplate ひな型 というブログを引用すると以下らしい。

「あのさ、意味は大体分かってるんだけど、どうしてボイラーが出てくるの?」
「さあねえ。どうしてだろう。考えたことなかったよ。テンプレートと同じ意味なんだけどね。」
「うん、知ってる。でもそれじゃ、どうしてテンプレートって呼ばないのかな。」
「ちょっと気取った(edgy)言い方をしたい時に使う表現なんだよ。」

まとめ

  • Boilerplate は、実際のテキストや画像を提供する。コピー&ペーストしたら使える。
  • Template は、文書の構造やレイアウトを提供する。コピー&ペーストだけではなく中身を埋めてもらうことを想定している。

総合して冒頭のとおりそう書いたが大事なのは文脈を読んで、自身のサイトづくりに、モックアップづくりに、提供者の意図を考えて活用することだとおもう。以上、参考になればさいわいです。

42
21
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
42
21