たぶん、これはクソ記事だから
ちょっと昔に、僕の書いた Pug 記事にスターがついたらしいので Jade の話も軽くしようと思って筆をとってしまった。「なんでJadeの話すんの？」っていうと、その昔 Pug は Jade だったんだよーとか言う昔ばなしをしたくなったから。ちなみに Jade は翡翠、５月の誕生石をあらわす単語です（どうでもいい）。
さて話がそれてしまいました。Jadeの話でしたね。
話をしよう……。あれは今からあれは今から36万…いや、1万4000年前だったか、まぁいい、私にとってはつい昨日の出来事だが、君たちにとっては多分明日の出来事だ。
Rename from "Jade"
This project was formerly known as "Jade". However, it was revealed to us that "Jade" is a registered trademark; as a result, a rename was needed. After some discussion among the maintainers, "Pug" was chosen as the new name for this project. As of version 2, "pug" is the official package name.If your package or app currently uses jade, don't worry: we have secured permissions to continue to occupy that package name, although all new versions will be released under pug.
Before the renaming, work had already begun on “Jade 2.0.0”. Therefore, the rename to Pug coincided with the major version bump. As a result, upgrading from Jade to Pug will be the same process as upgrading any other package with a major version bump.
The syntax of Pug has several differences, deprecations, and removals compared to its predecessor. These differences are documented in #2305.
The website and documentation for Pug are still being updated. But if you are new to Pug, you should get started with the new syntax and install the Pug package from npm.
はい、上記の理由から名前が変更されたとのことです。興味ないですよね。僕も興味ないです。
引用
GitHub - pugjs/pug: Pug – robust, elegant, feature rich template engine for Node.js
じゃあなんでこんな記事書いたかというと、僕が利用していたりしなかったりする JSBin では未だ現役で Jade が動いていたのを知って触ってみたからです。
JS Bin - Collaborative JavaScript Debugging
以下クソース。
doctype html
html(lang="ja")
head
meta(charset="utf-8")
meta(name="noindex,nofollow")
meta(name="viewport" content="width=device-width, initial-scale=1")
title Jadeを今更はじめてみた
// css
link(rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css")
body
-var title = "いまさらJade"
-var header = "見出し"
-var subheader = "小見出し"
div.w3-light-grey.w3-padding-64.w3-margin-bottom.w3-center
h1.w3-jumbo #{title}
div.w3-row-padding.w3-content(style="max-width:1400px")
div.w3-twothird
img(src="https://placehold.jp/150x150.png" style="width:100%")
h2 #{header}
div.w3-justify
p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta dolorem praesentium, distinctio, harum cumque doloremque ullam iure natus dolore illo molestias unde, accusamus saepe mollitia aliquam culpa. Quaerat praesentium, molestiae.
p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio doloribus, tempore dolorem, debitis earum amet animi natus quo dicta commodi consequuntur laboriosam quisquam, nam officiis nulla, modi magni aut fugit.
p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur hic magni quis cumque minus molestiae quia delectus! Iusto, animi! Cumque vero voluptas, porro repudiandae numquam error sunt temporibus odio esse?
div.w3-third
div.w3-container.w3-light-grey
h2 #{subheader}
p.w3-justify Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam vitae saepe dolorum, at, molestias architecto placeat repellendus libero a quod veritatis possimus nisi! Voluptatum suscipit voluptas dolores quis doloribus beatae.
br
div.w3-container.w3-light-grey
h2 #{subheader}
p.w3-justify Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam vitae saepe dolorum, at, molestias architecto placeat repellendus libero a quod veritatis possimus nisi! Voluptatum suscipit voluptas dolores quis doloribus beatae.おおよそこんな感じに書けます。細かい文法は追及する気ないのでこれで……。
Jade 参考
Jade - Template Engine
今回使用したテンプレート
W3.CSS Reference
まあ、そんな感じで名前変わったんですよ（無理やりなまとめ）。
おしまい
