『自由力』を身に付けるサイト「リバトレ」も見てね!!

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

悩んでいる男の子

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

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

  • 本記事の内容
  • Pugとは?
  • Pugの使い方
  • 本記事の執筆者
プロフィール
どこの写真だよ
  • 長身ガリガリ自称イケメン(1993/4/1生)
  • 元エンジニア(歴7年)、資格保有数約20個(IT系以外も含む)
  • 副業(物販)5か月目で月利30万円⇒脱サラ
  • 物販、システム開発、アフィリエイト、投資を細々とやっています。
  • 物販は彼女と楽しみながらやってます!

今回は、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ファイルからhtmlファイルが作成できました。

まとめ

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

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

ではまた!

まとめ
  • Pugとは、JavaScriptで動くテンプレートエンジンである。
  • Pugのメリットは、閉じタグがいらないこと。
  • Pugのデメリットは、教育コストがかかること。
Pug入門編!インストール方法・使い方を簡単に解説!

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

シェアするんやで!

~ リバトレ ~

お金や副業に関する情報を発信しているよ!

この記事を書いた人

いずみんのアバター いずみん 自由力発信おじ

【自由力発信】うさんくさ笑 | 副業物販で5ヶ月目に月利30万円達成⇨脱サラ予定 | 物販(アパレルせどり)・アフィリエイト・投資で自由になるための情報を発信中?笑 | 元エンジニア | 保有資格約20個

関連記事

コメント

コメントする

目次
閉じる