プログラミング学習やフリーランスエンジニア情報を発信していきます。現役フリーランスエンジニア2人で運営してます!

  1. フロントエンド

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

最終更新日:2018/08/27

はじめに

本記事では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を使って爆速でコーディングしてしまいましょう!

The following two tabs change content below.

riri

25歳。 Twitter:りリー@ryudoi1 フリーランスとして働きながら、WINDII(ウィンディ)ではテックメディア事業や、受託事業を行なっています! フリーランスになるまでの過程は こちら

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

オススメ記事

  1. 転職・就職サポート付きプログラミングスクール【現役フリーランス3選】
  2. 高収入フリーランスエンジニアになるためのエージェントの選び方
PAGE TOP