サイト制作に関するメモ書き

HOME > HTML・CSS > Jadeを使ってみる

Jadeを使ってみる

テンプレートエンジンを使ったコーディングで、以前EJSを試してみましたが、今回はJadeを使ってみたいと思います。

Jadeの公式サイトはこちらです。

Node.jsのインストール

公式サイトにアクセスし、INSTALLをクリックしてインストーラをダウンロードします。
Node.js

try-using-gulp01

インストーラを実行してNode.jsをインストールします。
インストール完了後、Windowsキーを押して「cmd」で検索し、コマンド プロンプトを起動します。

node -v

と入力して、Node.jsのバージョンが表示されればOKです。
 

Jadeのインストール

コマンド プロンプトで

npm install -g jade

と入力して、Jadeインストールを行います。
インストール作業が完了したら、

jade --version

と入力して、インストールがきちんとできているか確認します。
バージョンが表示されればOKです。
 

Jadeを使ってみる

作業ディレクトリを作成して、そのディレクトリを移動しておきます。

cd 作業ディレクトリ

作業ディレクトリ内にindex.jadeというファイルを作成します。
内容は以下のように記述してみます。

index.jade

doctype html
html(lang="ja")
	head
		meta(charset="utf-8")
		title タイトル
	body
		p テキストテキスト

Jadeの記述方法はざっくり言うとこんな感じらしいです。

  • <>は無し
  • インデントで構造を表す
  • ()で属性を指定

index.jadeの記述が完了したらコマンド プロンプトで

jade index.jade

と入力します。うまくいくと、

rendered index.html

と表示され、作業ディレクトリにhtmlファイルが生成されます。

index.html

<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8"><title>タイトル</title></head><body><p>テキストテキスト</p></body></html>

ただ、この状態だと改行がされていません。
改行させるには以下のように入力します。

jade -P index.jade

これで、改行された状態で出力されました。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>タイトル</title>
  </head>
  <body>
    <p>テキストテキスト</p>
  </body>
</html>

今回はとりあえず触ってみた感じなので、次はもっと色々試してみたいと思います。
 

【参考サイト】

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP