日々更新中です!

Pug入門編!インストール方法・使い方を簡単に解説!

  • URLをコピーしました!
悩んでいる男の子

Pugを使ってみたいんだけど、基本的なことが分からないんだよね。。

こんな悩みを解決します。

  • 本記事の内容
  • Pugとは?
  • Pugの使い方
  • 本記事の執筆者
プロフィール
いずみん(どこの写真だよ)
  • 元エンジニア(歴7年)、資格保有数約20個(IT系以外も含む)
  • 物販月利50万円⇒脱サラ
  • 物販、システム開発、アフィリエイト、プログラミング、投資をやっています。
  • 物販は彼女と楽しみながらやっています!

今回は、Pugについて解説します。

いずみん

本記事を読めばPugの基礎が理解できるので、是非最後まで読んでみてください!

目次

Pugとは

Pugとは、JavaScriptで動くテンプレートエンジンです。

Pugのメリット

Pugのメリットとして、「閉じタグがいらない」という点が挙げられます。

全体的なコード量が少なくなるので、保守性が高くなります。

Pugのデメリット

純粋なHTMLの書き方に慣れている方は、若干書きにくいです。

慣れが必要なので、教育コストがかかるのがPugのデメリットです。

Pugを使うには

Pugを使うには、「Node.js」と「npm」が必要になります。

Pugをインストールするまでの手順は以下のようになります。

  1. 「chocolatey」を利用して、「nodist」をインストールする
  2. 「nodist」を利用して、「Node.js」「npm」をインストールする
  3. 「npm」を利用して、Pugをインストールする

Pugのインストール

まずは、「chocolatey」で「nodist」をインストールします。

nodist -v

「nodist」をインストールしたら、確認のために上記コマンドを実行します。

「nodist」のバージョンが表示されればOKです。

nodist dist
nodist + 6.9.5
nodist 6.9.5

次に、「nodist」で「node」をインストールします。

node -v
npm -v

「Node.js」がインストールされているかを確認します。

「Node.js」をインストールすると、「npm」も同時にインストールされます。

npm install pug-cli -g

Pugをインストールします。

Pugを実際に使ってみよう!

早速Pugを使ってみましょう。

doctype html
html(lang="ja")
  head
    meta(charset="utf-8")
    style(src="css/style.css")
    title タイトル
  body
    h1 見出し1
    #container
      p Pugテストページ

上記がPugのサンプルコードになります。

細かい書き方はここではお伝えしませんが、以下が重要なポイントになります。

  • インデントが重要になる
  • 閉じタグは不要
  • divタグは省略できる

pugファイルを作成しただけでは画面を見ることはできません。

このpugファイルをhtmlファイルに変えましょう。

pug index.pug --pretty

上記コマンドを実行すると、index.htmlファイルが作成されます。

「–pretty」をつけない場合、htmlファイルが1行に圧縮されます。

pugファイルからhtmlファイルが作成できました。

まとめ

今回は、Pugについて解説しました。

結構便利そうなので、今後も使ってみようと思います。

ではまた!

まとめ
  • Pugとは、JavaScriptで動くテンプレートエンジンである。
  • Pugのメリットは、閉じタグがいらないこと。
  • Pugのデメリットは、教育コストがかかること。
  • 自由な生き方がしたいなら!

自由な生き方をするためには、稼ぐスキルを身に付けなければなりません。

当サイト「リバトレ」では稼ぐスキルに関する情報を日々発信しているので、興味のあるものから見て頂ければ嬉しいです。

この記事が気に入ったら
いいね または フォローしてね!

シェアするんやで!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

いずみんのアバター いずみん 自由大好きおじ

自由大好きおじ | 物販月利50万達成⇨脱サラ | 物販(アパレルせどり)・アフィリエイト・プログラミング・投資に関する情報を発信中 | 元エンジニア | 保有資格約20個

コメント

コメントする

目次
閉じる