【超簡単】Angular6でPug + Stylusを導入して爆速コーディングする方法

フロントエンド
2913 view

【超簡単】Angular6でPug + Stylusを導入して爆速コーディングする方法

最終更新日:2018/08/27

はじめに
簡単に紹介
- Pugとは
- Stylusとは
Stylusの導入
Pugの導入
- - WINDII
  - 最新記事 by WINDII (全て見る)

はじめに

本記事ではAngular6のプロジェクトへPugとStylusの導入する方法を徹底解説します。Stylus限定ではなく、Scss、Sass,Lessなどお好みのcssメタ言語でいけます。

簡単に紹介

（すでにご存知の方は飛ばしてください。）

Pugとは

PugとはHTMLを書くために開発されたテンプレートエンジンです。Node.jsで人気なフレームワークのExpressからの発祥です。

Pugを使用するメリットとしては、以下のようなものが挙げられます。

htmlを省略できる(閉じタグや、divなどを省略できる)
ファイルをコンポーネント単位で分割できる（includeで読み込みができる）
変数やループなどプログラミング言語のような記述ができる

いきなりメリットを挙げられてもよくわかりにくいと思うので下に具体例を。

これはAngularプロジェクトを生成した時にデフォルトで生成されるファイルです。

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul>

これをPugを使って書き換えるとこうなります。

div(style="text-align:center")
  h1 Welcome to {{ title }}!
  img(width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==")
h2 Here are some links to help you start:
ul
  li
    h2
      a(target="_blank" rel="noopener" href="https://angular.io/tutorial") Tour of Heroes
  li
    h2
      a(target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki") CLI Documentation
  li
    h2
      a(target="_blank" rel="noopener" href="https://blog.angular.io/") Angular blog

とても簡潔で短くなりました！最初は違和感を感じると思いますが、使い慣れると普通のHtmlを書くのがしんどくなります笑

Stylusとは

StylusとはCSSプリプロセッサの一種で、SassとLessの2つからいいところどりした感じです。
詳しくは他の記事に譲りますが、こんな表記ができます。

body
  font: 12px Helvetica, Arial, sans-serif

a.button
  -webkit-border-radius: 5px
  -moz-border-radius: 5px
  border-radius: 5px

sum(nums...)
  sum = 0
  sum += n for n in nums

sum(1 2 3 4)

Stylusの導入

Angular CLIでは新規プロジェクトの際に使用するのCSSプリプロセッサを指定できます。今回はStylusで行きますが、お好みでどうぞ。

ng new my-app style=stylus

Pugの導入

cd my-app
ng add ng-cli-pug-loader

以上で導入は終わりです！以前は色々設定しなければならなかったのですが、angular cliのバージョンが上がり、とても楽になりました。Pug + Stylusを使って爆速でコーディングしてしまいましょう！

この記事を書いた人
最新の記事

WINDII

WINDII（ウィンディ）は、フリーランスエンジニアが運営するテックメディアです。日々の業務で得た知見を、皆さんに役立つコンテンツにして発信していくので応援よろしくお願いします！また、Slackで無料コミュニティも運営しています。たくさんのエンジニアが参加していて、プログラミングの相談や雑談などをしている楽しいコミュニティなので、興味ある方はぜひお気軽にご参加ください。 Slackコミュニティはこちらから

現役フリーランスエンジニアが運営するテックメディア。日々の業務で得た知識を発信していきます！

WINDIIテック