制作実績お見積フォームHTMLWordPressEC累計コーディング数:15028ページホーム>Web制作>Pug(Jade)って何だ?特徴や基本的な使い方の解説Pug(Jade)って何だ?特徴や基本的な使い方の解説Web制作2017年05月26日Pug(Jade)の特徴やメリット、基本的な使い方、導入方法についてまとめました。Pugをご存じない方にもご理解いただけるように、できるだけ丁寧に解説していきますね。Pugの基礎知識まずはPugの基礎知識から見ていきましょう。Pugの特徴やメリットについてもまとめています。Pugとは?Pug(旧Jade)とは、HTMLを書くためのJavaScriptテンプレートエンジンです。Templates)の一つとして知られ、同じくHTML系のテンプレートエンジンであるHamlに影響を受けたとされています。※Hamlについては、話が逸れるのでここでは割愛します。興味のある方は、下のリンクからHamlの公式サイトをご覧ください。HamlPugの機能を一言で言うと、HTMLの記述を効率化してくれるということに尽きます。具体的には、どのように効率化してくれるのでしょうか?例えば、下のようなHTMLコードがあるとします。一般的なHTMLコードですね。<p>Pugのテストページです。</body></html>これをPugを使って書くと、下のようになります。Pugのテストページです。コードの分量や行数が減っていることがおわかりいただけるでしょうか?(ちょっと見た目は変わりましたが、それについては後述します。)これが、Pugを使う最大のメリットです。普通にHTMLを書くよりも、かなり少ないコード量で済ませることができるのです。コーディングが効率化できますし、それに付随したいろいろなメリットが得られます。お気づきの方もいるかもしれませんが、CSSで言うところのScssやLessなんかに似ていますね。Scssについては下の記事で解説しているので、よろしければそちらの記事もご覧ください。主な特徴Pugの主な特徴やメリットについて、もう少し踏み込んで解説していきます。コード量が減る上でも述べたように、Pugを導入することでHTMLのコード量を大幅に減らすことができます。コード量を減らせるのでしょうか?記事後半で詳しく解説をしますが、閉じタグがないことや変数が使えること、HTMLのインクルードができることなどがあげられます。タグを使わない代わりに、改行やインデントを利用してコードを書いていきます。このあたりの書き方は、Pythonと似ていますね。通常のHTMLとは書き方が異なるので、もちろんPugを学ぶ工数は必要になります。それを大きく上回るメリットがあると言えるでしょう。得られるメリットコード量が減ることに付随して、得られるメリットがあります。代表的なものを列挙しておきましょう。制作スピードが上げられる書き間違いが減る不具合の削減につながる保守にかかる工数、コストが減らせる制作スピードが上げられるコードが減ると、エンジニアの工数を減らすことにつながります。そのため、Web制作のスピードアップが期待できます。時間がかかるのは、Pugを導入する時やエンジニアがPugに慣れていない初期段階だけ。その後は、圧倒的にスピードアップしていけるでしょう。書き間違いが減るPugを導入すると、書き間違いを減らすことができるでしょう。その理由は、書くべきコードが減るから。コード量が増えれば、それだけヒューマンエラーの確率が高くなってしまうものです。Pugは自動でHTMLを展開してくれるので、書き間違いも減るのです。不具合の削減につながる不具合を減らせることもメリットの一つです。ここで言っている不具合とは、文法のミスや書き間違いなどによるもののこと。PugはHTMLを簡易的に書くことができるので、文法上のミスが発生しにくくなります。人的な不具合を減らすことにも役立ってくれるのです。保守にかかる工数、コストが減らせるPugを導入すると、保守もしやすくなると言えるでしょう。コードが減るということは、保守すべき対象が減らせるということ。保守にかかる手間を減らすことができるのです。その分だけ、コストダウンも期待できるようになります。デメリットは?Pugのいいところばかり見てきましたが、デメリットはないのでしょうか?こういったツールにつきものなのですが、文法や使い方に慣れるまでの学習コストは必要です。チームで開発を行っている場合は、エンジニアやデザイナーがPugを使えるようになってもらう必要もあるでしょう。記法そのものはHTMLをベースにしているので、抵抗なく習得していけるはず。HTMLが使えるのであれば、Pugにもすぐに慣れることができるでしょう。HTMLでコードを管理している場合、Pugに置き換えるのはそれなりに手間がかかることも考えられます。嬉しいことに、Pugに直接HTMLコードを書いても全く問題なく出力をしてくれます。ケースバイケースですが、Pug導入にかかる工数はそれほど膨らまないとも言えるでしょう。Pugの導入方法それではPugの使い方に入っていきましょう。Pugを導入する方法から。ここではMacにPugを導入するとして、解説していきますね。下の手順を、ステップバイステップで進めていきます。HomebrewをインストールするnodebrewをインストールするNode.jsをインストールするPugをインストールするPugを導入して実際に動かすのは難しくはないので、ぜひトライしてみてくださいね。HomebrewをインストールするPugを動かすには、Node.jsが必要です。runtimeNode.jsは手動でインストールしてもいいのですが、Macで使えるパッケージ管理ツールのHomebrewを使ってインストールしていきましょう。Xcodeが必要です。こちらはすでにインストールされているとして、話を進めていきます。Homebrewをインストールするには、公式サイトにあるスクリプトをターミナルで実行してください。用パッケージマネージャーHomebrewのインストールが終わったら、下のコマンドを打ってください。brew.」と表示されれば、Homebrewのインストールは正常にできたと言えます。nodebrewをインストールするHomebrewを使って、nodebrewというパッケージをインストールします。nodebrewとは、Node.jsのバージョン切り替えやインストールができるパッケージのことです。managernodebrewを使わなくてもいいのですが、便利なのでその方法で進めていきましょう。下のコマンドを打って、nodebrewをインストールします。nodebrewnodebrewのインストールが終わったら、下のコマンドを打って確認しておきましょう。0.9.7正しくバージョンが表示されればインストール成功です。Node.jsをインストールするnodebrewが使えるようになったので、Node.jsのインストールに入っていきます。はじめに、インストール可能なNode.jsのバージョンを確認しておきましょう。下記のコマンドを実行すると、nodebrewでインストール可能なNode.jsのバージョンがリストアップされます。ls-remote例えば、v7.10.0のバージョンをインストールする場合は下のコマンドを実行します。v7.10.0最新版でよければ、下のようにしてください。latest下のようになれば、Node.jsの最新版のインストールが成功です。successfully下のコマンドで、インストールされたNode.jsの一覧を見てみましょう。none正しくインストールされていますね。下のコマンドを実行して、インストールしたNode.jsを有効化します。v7.10.0もう一度、listコマンドを実行してみます。v7.10.0currentが埋まりましたね。インストールしたNode.jsが有効化されました。次に、実行パスを通します。~/.bashrcwhoamiのところは、ホームディレクトリ名と差し替えてください。ターミナルを再起動して、下記のコマンドを入力。指定したNode.jsのバージョンが表示されれば、OKです。-vv7.10.0Pugのインストールではnpmを使うので、念のためnpmの動作確認をしておきましょう。-v3.3.12正しくバージョン情報が表示されました。これでPugをインストールする準備が整いました。Pugをインストールするそれでは、Pugのインストールに入っていきましょう。GitHubPugをインストールするには、ターミナルから下のコマンドを実行すればOK。今回はグローバルに使いたいので、「-g」をつけています。-gインストールが完了したら、下のコマンドで動作チェックをしておきましょう。1.0.0-alpha6正常にPugがインストールできたようです。これで、Pugを使う準備が整いました。Pugの使い方Pugがインストールできたところで、実際にコードを見ながら基本的な使い方を見ていきましょう。最初に、Pugの基本文法として、主なものを下にまとめておきます。閉じタグは書かない改行とインデントで入れ子を表現するIDにはシャープ(#)を、classにはドット(.)を使う属性は括弧内に「属性名=”値”」と書く半角スペースの後にタグ内のテキストを書く以降は、この基本文法を頭に入れながら読み進めていただければと思います。基本的な書き方Pugの基本的な書き方を順に見ていきましょう。※ここからは、Pugのコードと、それをコンパイルしたHTMLのコードを順に載せていきます。実際にPugを使いながら読み進めていくと、きっと理解が深まると思いますよ!DOCTYPE宣言、言語コード、文字コードDOCTYPEの宣言は、下のように記述します。html>続いて、headの中に言語コードを追加します。</head></html>だんだんとHTMLコードらしくなってきましたね。ここで注意して欲しいのは、インデントです。入れ子にする場合は、タブの個数によって入れ子の深さが決まってきます。下のように記述すると、正しくない入れ子構造になってしまいます。charset="utf-8"></html>HTMLの3行目と4行目に注目してください。本来はheadタグに入るべき文字コードの指定が、headタグの外に出てしまっています。文字コードの指定をheadタグ内に入れたければ、文字コードの部分でインデントを1つ増やさなければいけないのです。ここはPugを使う時にとても大事な部分になります。マスターしてくださいね。CSS、JSの読み込み外部のCSSファイルやJavaScriptファイルを読み込む場合は、下のように記述します。src="js/functions.js"></script>括弧の中に、「属性値=”値”」と記載されていることに注目してください。titleタグ、ヘッダータグtitleタグは、半角スペースを使って下のように書きます。Pugの使い方<title>Pugの使い方</title>ヘッダータグも同様です。Pugの基本記法<h1>Pugの基本記法</h1>pタグなども同様に、半角スペースの後にテキストを書きます。改行をしたい場合は下のように記述をします。ここではPugの使い方を説明しています。基本的な記法から解説しましょう。ここではPugの使い方を説明しています。基本的な記法から解説しましょう。ここではPugの使い方を説明しています。基本的な記法から解説しましょう。ここではPugの使い方を説明しています。基本的な記法から解説しましょう。</p>ID、クラス要素にIDやクラスを付ける時の書き方です。これはCSSと同じように、半角シャープと半角ドットを使って記述します。Pugの使い方について説明しています。class="sample-class">Pugの使い方について説明しています。</p>IDやクラスが複数ある場合は、半角カンマで区切って記述をします。Pugの使い方について説明しています。sample-class3">Pugの使い方について説明しています。</p>inputinputについても同様で、括弧の中に属性を列挙していけばOKです。その際、それぞれの属性の間は半角スペースで区切ります。size="10"/>なお、上の例のように属性が複数ある場合は、下のように改行をして記述をしてもOKです。出力結果は変わりません。size="10"/>コメントアウト次はコメントアウトです。Pugの場合はコメントアウトが2種類あります。HTMLに書き出すコメントと、書き出さないコメントです。HTMLに書き出すコメント。HTMLに書き出さないコメント。HTMLに書き出すコメント。-->コンパイルするコンパイルの方法です。Pugは.pugという拡張子がついたファイルを、.htmlファイルにコンパイルをして使います。試しにindex.pugというファイルを作成して、コンパイルしてみましょう。適当なフォルダにindex.pugというファイルを作って、下のコードを書き込みます。Pugのテストページです。ターミナルでカレントディレクトリに移動したあと、下のコードを実行してみてください。index.htmlコンパイルが実行され、index.pugと同じ階層(ディレクトリ)に、index.htmlというファイルが生成されたかと思います。ファイルを開いてみましょう。id="container"><p>Pugのテストページです。</p></div></body></html>HTMLコードが生成されていますね。これでコンパイルが完了です。ところで、いちいち上のコマンドを実行するのは手間ですよね。そこで、下のようにすることでpugファイルを監視できるようになります。pugファイルに変更があった場合、自動でコンパイルを行ってくれるので便利です。C」を押すことで、監視を止めることができます。コードを整形する上でPugのコンパイルを行いましたが、HTMLコードが1行で見づらかったかと思います。そこで、HTMLコードを整形してみましょう。コンパイル時に、下のようにすればOKです。--pretty生成されたファイルを見ると、キチンと整形されたHTMLが生成されていることがわかります。<p>Pugのテストページです。</body></html>インクルードするPugの基本的な記法や使い方を見てきましたが、さらに2つ。インクルードと継承もご紹介しましょう。この2つを使うと、Pugをさらに便利に使うことができます。Webページは一般的に、ヘッダーやフッター、サイドバーなどの共通部分から構成されています。全てのページで同じコードを書くのは、非効率ですよね。そこでインクルードの登場です。共通部分は他のファイルに移しておき、必要な時に読み込む。コーディングが楽になりますし、保守や改修が格段にしやすくなります。このように、他のファイルからコードを読み込むことをインクルードと呼ぶのです。具体例を見ていきましょう。元の状態のコードです。ファイルをインクルードする方法です。色が変わっている部分、すなわちヘッダー部分をheader.pugというファイルに移しましょう。メニュー3ヘッダー部分を取り除いた結果、index.pugは下記のようになりました。ここにあるように、他ファイルをインクルードするにはincludeを使います。ファイルをインクルードする方法です。index.pugをコンパイルすると、下のようにheader.phgがインクルードされた結果が出力されます。<p>ファイルをインクルードする方法です。</body></html>上の例ではヘッダー部分のみを書き出してパーツ化をしましたが、もちろんその他の共通部分をインクルードしてもいいでしょう。継承する上ではファイルをインクルードする方法についてご紹介しましたが、さらにPugでは継承を行うことができます。継承はオブジェクト指向の言語で頻繁に登場するので、ご存じの方も多いかと思いますが、簡単に解説しておきましょう。Javaなどのオブジェクト指向の言語では、クラスとして共通で使いたい部分をスーパークラス(親クラス)とします。共通部分を利用したい場合は、スーパークラスの特徴を引き継ぎ、サブクラス(子クラス)とするのです。このように、他のオブジェクトに書かれている特徴を利用することを継承と呼びます。Pugにもこれと同じ機能が備わっています。共通部分が書かれているPugファイルを読み込んで、そこに書かれている特徴を引き継ぐことことができるのです。いうことで、具体的に例をあげながら見ていきましょう。下のindexファイルを見てください。メニュー3ここから共通した内容を抜き出し、下のような親ファイルをつくります。これが継承元となるファイルで、スーパークラスにあたるものです。ハイライトしているblockの部分が、継承先で置き換わる部分です。ここではtitleとheading1、navitemsの3箇所が置き換わることになります。navitemsさて、親ファイルに共通部分を抜き出したあとのindexファイルはどうなったでしょうか?下を見てみてください。メニュー3随分と簡潔になりましたね!extendsの後に継承するファイルを指定します。ここでは先ほど作成した_layout.pugを継承しています。その後ろに、_layout.pugでblockを使って指定していた部分の内容を列挙していきます。blockの名称で対応させているので、一字一句間違えないように書いてくださいね。これをコンパイルすると、下のようなHTMLが出力されます。_layout.pugを継承したindex.pugがコンパイルされて、index.htmlが出力されたということになります。</body></html>Webページの骨組みを親ファイルに書いておき、各ページでは継承を使って対応する箇所を埋めていくイメージになります。継承を使うことで、書かなければいけないコードをさらに減らすことができますし、ページ改修も容易になります。Pugを使うのであれば、継承も使いこなしたいところです。あとがきPugの特徴や導入方法、基本的な使い方(記法)についてまとめてご紹介しました。記事で取り上げた以外にも、便利な機能がいろいろと備わっています。if文やwhile文などの条件文も使えますし、mixinを使うこともできます。Pugを使うと開発がスピードアップできること間違いなしなので、マークアッパーなどのエンジニアを中心に活用していただければと思います。今すぐ無料で見積もりを依頼する「納期に間に合わない!」「スタッフの手が空かない!」「技術的に対応できない!」そんな時は、制作会社様とのやり取りに特化した、信頼と安心のくまwebにご依頼ください。今すぐ無料でお見積もりを依頼する「納期に間に合わない!」「スタッフの手が空かない!」「技術的に対応できない!」そんな時は、制作業者様とのやり取りに特化した、信頼と安心のくまWebにご依頼ください。