案件評判
PugはJavaScriptで使用されるHTMLを出力するためのテンプレートエンジンです。以前は「Jade」という名前で親しまれておりました。Hamlに影響を受けていることからでHTMLのコード量を大幅に減らせることができるという利点があります。この記事ではPugを理解するために初心者でも分かる特徴、名前の由来、基礎知識について簡単に解説していきます。
Pugとは主にJavaScriptで使用されるテンプレートエンジンです。Pugを使用することでHTMLを効率よくコーディングすることができます。Hamlの影響を強く受けてJavaScriptやNode.jsで使用することを目的に誕生しました。特徴として『閉じタグが不要』『少ない記述』『ファイルの分割管理』などが挙げられます。閉じタグが不要となるため記述にインデントの使用が重要となります。Pugを使用することでHTMLのコード量を大幅に減らせることができるという点でも高い人気を集めております。
テンプレートエンジンとはテンプレートとなる部分とデータモデルで表現される入力データを合成し、成果ドキュメントを出力するソフトウェアです。デザイン部分とロジック部分を切り離して作業できるといった利点があることから重宝されております。テンプレートエンジンの主な構成要素として『データモデル』『ソーステンプレート』『成果ドキュメント』が挙げられます。
テンプレートエンジンの役割や種類などについて解説された記事はこちら＞＞
JavaScriptとはネットスケープコミュニケーションズ社によって1995年に誕生したプログラミング言語の一種でその中でもオブジェクト指向スクリプト言語に区分されます。主な目的として動的な機能をWebページに生成するためのプログラミング言語として開発されました。Webサイト、Webアプリ、ゲームなど様々な用途に活用できるため注目を集めております。
名称にJavaが含まれるためJavaの仲間と誤解を生むこともありますがJavaScriptは全く異なるプログラム言語です。開発当時サン・マイクロシステムズ社が開発したプログラミング言語『Java』が大きな注目を集めていたことや同社との業務提携を行った背景もありJavaにちなんだ名称が付けられました。JavaScriptフレームワークの代表的な種類としてjQuery、AngularJS、Vue.jsなどが挙げられます。
HTMLとはWebページを作成するためのマークアップ言語です。正式名称は『HyperText Markup Language（ハイパーテキストランゲージ）』であり、それぞれの頭文字をとって略称した呼び名で親しまれております。HTMLではWebページを構成するにあたって見出しや段落の作成などのドキュメント構造の作成や編集、フォントや文字色の指定などといった見た目の作成や編集といったことを実現できます。またハイパーリンクと呼ばれるURLを参照しテキストや画像に他のWebページへの導線となる役割を与える機能も用意されております。
Pugの読み方は『パグ』です。ロゴは名前の通り犬種のパグを採用しております。以前まで「Jade」という名称を使用しておりました。名称変更の理由は「Jade」が既に商標登録をされていた兼ね合いでチーム内で協議した結果『Pug（パグ）』を採用したようです。
Pugの特徴を見ていきましょう。
Pugはタグ閉じ不要という特徴があります。PugはHTMLと違いタグ閉じという概念が存在しません。代わりにインデントを使い、マークアップする範囲を指定します。これは強く影響を受けたテンプレートエンジンでもある『Haml』の大きな特徴でもあります。
Pugは少ない記述で済むという特徴があります。閉じタグが不要であることや変数が使えるなどコード量を大幅に削減できます。コード量の削減によって記述ミスなどのヒューマンエラーの軽減にもつながるという利点があります。
Pugはファイルの分割管理ができるという特徴があります。ヘッダーやフッターといった共通部分を分割して管理することができ、Sassと同様に別ファイルを読み込んで書き出せるのが非常に便利です。
Pug以外の代表的なJavaScript環境向けテンプレートエンジンを見ていきましょう。
EJSとは主にJavaScriptで使用されるテンプレートエンジンです。EJSを利用することでHTMLをヘッダーやフッターで分割して管理することやHTML内でループ処理を書いて簡単に記述できるなどを実現できます。JavaScriptを使用してHTMLマークアップを生成できるシンプルなテンプレート言語と捉えると分かりやすいでしょう。特徴として『JavaScriptのようにHTMLを書ける』『シンプルで分かりやすい』『レイアウト機能がある』などが挙げられます。
Nunjucksとは主にJavaScriptで使用されるテンプレートエンジンです。NunjucksはEJSと同じHTMLベースの構文であり、JinjaというPython向けテンプレートエンジンに影響を受けております。それもありNunjucksはPythonで記述することも可能です。FireFoxブラウザを開発、運営するMozilla製であることでも知られております。特徴として『高性能で高速』『強力な機能』『シンプルな記述』などが挙げられます。
Nunjucksの公式サイトはこちら＞＞
Nunjucksの特徴や名前の由来などの基礎知識について解説された記事はこちら＞＞
Handlebars.jsとは主にJavaScriptで使用されるテンプレートエンジンです。Handlebars.jsを使用することでJavaScriptの値を参照し、HTMLを生成することができます。シンプルで分かりやすいことからJSユーザーに人気を集めております。同じくJavaScript向けテンプレートエンジンである『Mustache』のスーパーセットとして誕生しました。また「if」「unless」「each」 など分かりやすいキーワードを用いることができます。特徴として『高速な実行環境』『学習コストが低い』『クライアントサーバ、サーバサイドの両方で対応』などが挙げられます。
Handlebars.jsの公式サイトはこちら＞＞
Handlebars.jsの特徴やMustacheとの違いなどの基礎知識について解説された記事はこちら＞＞
Edge.jsとは主にJavaScriptで使用されるテンプレートエンジンです。Edge.jsを使用することでHTMLを効率よくコーディングすることができます。また「Node.js」と「.NET」の各プラットフォームにて相互に使用できる環境を実現します。C#からでもNode.js経由で使用できるなど汎用性が高いです。特徴として『レイアウト機能の完備』『Node.js で.NETライブラリが使用できる』『学習コストが低い』などが挙げられます。
Pugを理解するために初心者でも分かる特徴、名前の由来、基礎知識などを簡単に解説させていただきました。Pugを一言で表すと『Hamlの影響を強く受けてJavaScriptやNode.jsで使用することを目的に誕生したテンプレートエンジン』です。特徴として『閉じタグが不要』『少ない記述』『ファイルの分割管理』などが挙げられます。Pugについてこの記事に書かれている最低限の内容は理解をしておくようにしましょう。
マークアップ言語を理解する！初心者でも分かる歴史、…
.NET Coreを理解する！初心者でも分かる歴史…
組み込み系システム開発を理解する！種類や特徴、組み…
Windows10/11アカウント作…
精算幅を理解する！超過・控除に関する…
WindowsFormsを理解する！…
支払いサイトを理解する！フリーランス…
Db2を理解する！初心者でも分かる歴…
WPFを理解する！初心者でも分かる特…
フリーランスのHTMLコーダー（HT…
Oracle RACを理解する！初心…