開発の効率を2倍に!Jade、Stylus、CoffeeScript入門

公開日:2016/02/25
更新日:
Web制作

js-top

はじめまして、かるねです。

フリーランスでWebエンジニアをしています。HTML、CSS、Javascript、Ruby on Rails、Wordpress、AWS辺りを薄くひろくやっております。

さて、今回はWebサイトをコーディングする際に必要となるHTML、CSS、Javascriptという3つの言語について、Jade、Stylus、CoffeeScriptといった拡張言語を使って開発効率のスピードを上げる方法を紹介していきます。

なお、今回はターミナルアプリ(MacであればiTermのような)と、Node.jsの環境、npm(Node Package Manager)が必要になります。

下準備(Node.js、npm)

まずは下準備として、Node.js(n)とnpmの環境を構築していきます。ご存知ない方のために簡単に用語を説明します。

Node.js:Javascriptエンジンで動くサーバアプリケーションの環境
n:様々なバージョンのNode.jsを扱う必要がある場合のために、複数バージョンのNode.jsを管理し、簡単に切り替えができるようにするもの。ややこしいですが、Node.jsで作られており、↓のnpmを使って導入します。
npm:Node.jsで作られた様々なパッケージ(Jade、Stylus、CoffeeScriptのコンパイラを含む)をインストールするためのもの(Node Package Manager)

今回この下準備は主旨ではないため、少々省いて説明していきます。

Node.js及びnpmの導入

今回筆者の環境(Mac OS X El Capitan(10.11.2)、及びHomebrew)で説明させていただきます。

Node.jsの公式サイトで「v5.7.0 Stable」のボタンをクリックし、「node-v5.7.0.pkg」というファイルをダウンロードします。

js01

ダウンロードしたpkgファイルを開き、インストーラーの手順に沿ってインストールを実行します。

js02

ターミナル(筆者の場合はiTerm)を起動し

$ node -v
$ npm -v

というコマンドを実行し、以下のように出力されたら成功です。

js03

nの導入

ターミナルで

$ npm install -g n
$ n -V

というコマンドを実行し(-gはグローバル、マシン全体で使えるようにするオプションです)

js04

上記ように出力されるはずです(n -Vはnのバージョン確認です)。導入に関してはこれで完了です。

nの使い方

ターミナルで

$ n

というコマンド(短いですね)を実行すると

js05

このような画面になります。複数バージョンのNode.jsをインストールすると、インストールされているバージョンのリストが表示されます。なお、画像左の水色の「o」は現在設定されているNode.jsのバージョン番号を表します。現時点では1バージョンしかないためちょっとわかりづらいですが、この画面はCtrl-Cを押すと終了できます。

ここまでで下準備は完了となります。こういった導入作業についてはOSやOSのバージョン、その他様々な環境に依存して予期せぬトラブルが起こり得ます。幸い、Node.jsやnpmの導入についてはOSや環境に応じた記事がネット上に大量にありますので、もし導入時のトラブルがあった場合は是非調べてみてください。

Jade? Stylus? CoffeeScript?

それでは、そもそもこれら3つの拡張言語がなんなのか、使用することでどのようなメリットがあるのかということを説明していきます。

どういうもの?

これら3つの拡張言語は、とても簡単な言葉で説明すると「コンパイルすることでHTML、CSS、Javascriptを生成してくれるもの」です。

なので、JadeをコンパイルするとHTMLに、StylusをコンパイルするとCSSに、CoffeeScriptをコンパイルすると、Javascriptにそれぞれ変換されます。

使うメリット

「わざわざコンパイルしなきゃいけないの面倒だなぁ、そのまま書く方が速くていいんじゃない?」という疑問が浮かびそうですが、開発する上でとても便利な点があります。
それは

  • 元の言語(HTML、CSS、Javascript)よりも短い記法で書くことができるため、開発スピードを高めることができる
  • 元の言語で書いていた際に起きていた記述ミスを(ある程度)防ぐことができる

というものです。この辺りは実際のコードを見た方がわかりやすいと思います。次の章から実際に書いていきましょう。

Jade入門

js06

HTMLを書いたことがある人であれば一度はタグの閉じ忘れや閉じ間違いといったことを経験すると思います。jadeではそういったミスを防ぐことができます。

さらに、共通化したい部分を別ファイルに分けて他のファイルからインクルードするというような使い方もできます。

インストール

ターミナルでnpmコマンドが使えることを確認し、以下のコマンドを実行してください

$ npm install -g jade

すると以下のような出力とともにjadeとそれに依存したパッケージのインストールが行われます。

js07

$ jade --version

と打ってバージョン番号が表示されることを確認してください(ハイフンは2つ)。

js08

これで準備完了です。

Jadeの基本

次に、index.jadeというファイルを作成し、エディタで開きましょう。ファイルを作る場所はどこでも大丈夫です。

それでは、index.jadeに以下のコードをコピー&ペーストしましょう。

doctype html
html(lang="ja")
 head
  meta(charset="utf-8")
  title サイトタイトル
 body
  h1#title メインタイトル
  h2.sub-title サブタイトル
  .wrapper
   a(href="http://google.co.jp" title=”Google”) Google

最初はちょっと読みづらいかも知れませんが、使っていくうちに慣れると思います。次にターミナルでindex.jadeがあるディレクトリに移動し、

$ jade index.jade --pretty

というコマンドを実行してください(--prettyは生成後のhtmlを読み易い形にしてくれるオプションです)。

js09

すると、上記スクリーンショットのようなメッセージとともにindex.jadeと同階層にindex.htmlが生成されたかと思います。生成されたhtmlファイルは

<!DOCTYPE html>
<html lang=”ja”>
 <head>
  <meta charset=”utf-8″>
  <title>サイトタイトル</title>
 </head>
 <body>
  <h1 id=”title”>メインタイトル</h1>
  <h2 class=”sub-title”>サブタイトル</h2>
  <div class=”wrapper”>
   <a href=”http://google.co.jp”>Google</a>
  </div>
 </body>
</html>

のようになっていますね。ここで生成されたhtmlファイルはHTMLの文法に則っていますので、Webブラウザで開けば問題なく表示ができます。

Jade記法

とても短いjadeファイルから正しいhtmlファイルが生成されました。次に、このサンプルで用いたJade記法について簡単に説明していきましょう。

  • タグ名を囲う「<」「>」が不要
  • 閉じタグが不要
  • 入れ子構造はインデントで定義する
  • CSSセレクタ(id、class)はCSS記法(#、.)で書くことができる
  • 属性は「()」内に「属性名=”値”」の形で書く(複数ある場合はスペース区切りで「(属性1=”値1″ 属性2=”値2″)」のように書く
  • divタグはタグ名省略可能
  • タグ内のテキストは末尾にスペースを開けて記述

以上がJade記法の基本となります。これだけでもかなり短くなりましたね。他にも便利な記法はあるのですが、今回は導入ということで以上になります。

興味を持たれた方は、Jadeの公式サイト を調べてみるとよいと思います。

コンパイルについて

「jadeを保存してからいちいちコンパイルコマンドを実行するのは面倒!」という方のために、便利なオプションが用意されています。

$ jade index.jade --pretty --watch

というコマンドを実行すると、「index.jadeファイルを監視し、変更されたらすぐに見易い形のhtmlファイルを生成する」という状態になります。

js10

終了する際はCtrl-Cを押してください。
さらに

$ jade . --pretty --watch

というコマンドを実行すると「コマンドを実行したディレクトリ以下のjadeファイルを監視し、変更されたらすぐに見易い形のhtmlファイルを生成する」という状態になります。これでいちいちコンパイルすることなくjadeファイルを編集することができます。

js11

Stylus入門

js12

次はCSSの拡張言語であるStylusです。

StylusもJadeと同様、元の言語(CSS)でよくある記述ミスを防ぎつつ、より短く、より便利に開発することができます。

例を挙げると

  • ブレス({ })や文末のセミコロンを打ち忘れてしまった
  • セレクタの長さがどんどん長くなってしまって大変!
  • 画像の幅と高さを測るためにいちいちファイラを開くのが面倒

といった点を解決してくれます。

なお、CSSの拡張言語といえばSCSS(Sass)が有名だと思いますが、SCSS(Sass)の導入にはRuby環境が必須となります。本記事のJadeとCoffeeScriptはNode.jsのパッケージに依存しているため、今回はCSSの拡張言語としてNode.jsに依存しているStylusを紹介します。

インストール

以下のコマンドを実行してください。

$ npm install -g stylus

Jadeと同じようにStylusとそれに依存したパッケージのインストールが行われ、コマンド実行が完了するかと思います。

js13

$ stylus --version

と打ってバージョン番号が表示されることを確認してください。

js14

これで準備完了です。

Stylusの基本

次に、style.stylというファイル(Stylusは.stylという拡張子なのでちょっとややこしい名前になってしまいましたね)を作成し、エディタで開きましょう。ファイルを作る場所はどこでも大丈夫です。

それでは、style.stylに以下のコードをコピー&ペーストしましょう。

body
 width 100%
 background-color #fff

 .box
  padding 10px
  position absolute
  top 0px

  for i in (1..5)
   &:nth-child(i)
    left i * 40px

次にターミナルでstyle.stylがあるディレクトリに移動し、

$ stylus style.styl

というコマンドを実行してください。

js15

上記の画像のようなメッセージの出力とともにstyle.stylと同階層にstyle.cssというファイルが生成されたと思います。生成されたcssファイルは

body {
  width: 100%;
  background-color: #fff;
}
body .box {
 padding: 10px;
 position: absolute;
 top: 0px;
}
body .box:nth-child(1) {
 left: 40px;
}
body .box:nth-child(2) {
 left: 80px;
}
body .box:nth-child(3) {
 left: 120px;
}
body .box:nth-child(4) {
 left: 160px;
}
body .box:nth-child(5) {
 left: 200px;
}

のようになっています。

Jadeと同様、出力されたcssファイルはCSSとして問題のない記法で記述されているので、htmlファイルから呼び出すことでちゃんとスタイルを適用することができます。

Stylus記法

今までCSSを書いてきた人にとっては目に慣れない記法かも知れません。ですが、CSS記法のルールを可能な限り削ぎ落とし、繰り返し等もプログラム風に書くことで簡便化されているため、ケアレスミスが減るような記法になっています。

それでは簡単に記法の説明をしましょう。

  • ブレス({ })が不要
  • 入れ子構造はインデントで定義する
  • セレクタを入れ子にすることができるため、見通しがよくなる
  • CSSプロパティとその値を記述する文で、コロンやセミコロンを書かなくてもよい
  • for i in (1..5)のような形で簡単に繰り返しが書ける
  • 擬似要素(:beforeや:after)、擬似クラス(:nth-childや:first-child)を入れ子にする場合は&:before、&:nth-childのようにする。
  • 四則演算が使える(CSSでもcalc()という関数で計算は行えます)

以上となります。個人的にはセレクタの入れ子や、繰り返しの簡便化は単純に記述量を減らしてくれるのでとても助かっています。

StylusにはJade以上に便利な機能があり、全てを把握するのはとても大変だと思います。もし興味を持たれた方はJade同様、公式サイト[http://stylus-lang.com/]で調べてみてはいかがでしょうか。

コンパイルについて

StylusもJade同様、いちいちコンパイルしたりしなくても

$ stylus style.styl --watch

というコマンドで特定のファイルの変更を監視して自動コンパイルしたり

js16

$ stylus --watch

というコマンドでコマンド実行ディレクトリ以下の.stylファイルの変更を監視することができます。

js17

CoffeeScript入門

js18

最後はCoffeeScriptです。CoffeeScriptはJadeやStylusとは違い、記法の癖が強く、コンパイル後のコードの可読性も低いのですが、その分開発スピードは格段に速く便利になると思います。

余談ですが、Webアプリケーションを作るための有名なフレームワーク「Ruby on Rails」はCoffeeScriptを標準で採用しており、ECMAScript6が標準採用されるまではまだまだ強力な拡張言語といえると考えています。

インストール

ターミナルでnpmコマンドが使えることを確認し、以下のコマンドを実行してください

$ npm install -g coffee-script

Jade、Stylusと同様、以下のようなメッセージが流れ、コマンドが完了するかと思います。
js19

$ coffee --version

と打ってバージョン番号が表示されることを確認してください。

js20

これで準備完了です。

CoffeeScriptの基本

次に、main.coffeeというファイルを作成し、エディタで開きましょう。ファイルを作る場所はどこでも大丈夫です。

それでは、main.coffeeに以下のコードをコピー&ペーストしましょう。

@onload = ->
 count = 1
 obj =
  hoge: ‘fuga’
  foo: ‘bar’
[email protected] = (e) ->
  alert “#{count++}回目のクリックです”

次にターミナルでmain.coffeeがあるディレクトリに移動し、

$ coffee --compile main.coffee

というコマンドを実行してください。
特にメッセージは表示されませんが、main.coffeeと同階層にmain.jsというファイルが生成されたと思います。生成されたjsファイルは

// Generated by CoffeeScript 1.10.0
(function() {
 this.onload = function() {
  var count, obj;
  count = 1;
  obj = {
   hoge: ‘fuga’,
   foo: ‘bar’
  };
  return this.onclick = function(e) {
   return alert((count++) + "回目のクリックです");
  };
 };

}).call(this);

のようになっていますね。普段Javascriptを書いている人にとってはちょっと見慣れないコードかも知れません。ですが、htmlから呼び出すことで、画面をクリックするとアラートウインドウが表示され、クリックされる度に回数の数字が増えていくことが確認できると思います。

CoffeeScript記法

Jade、Stylus以上に文法が大きく変わってしまっていますが、慣れてしまえばとても便利に感じられると思います。

それでは簡単にコンパイル前のコードの記法を説明してみましょう。

  • 変数宣言時のvarや、文末のセミコロンが不要
  • ブレス({ })によるブロックはなく、インデントで定義する
  • 連想配列を宣言する場合ブレスは不要で、要素と要素はカンマではなく改行で区切ることができる
  • 関数呼び出し時の()が不要(書いても問題はありません)
  • [email protected]
  • 関数宣言は「func = (arg) ->」のように書くことができる(@onload = ->のように、引数がない場合は(arg)は省略可能です)
  • 変数をともなう文字列連結は「val + ‘text’」のような形ではなく「”#{val}text”」のように書くことができる
  • 以上となります。次に、コンパイル後のコードを説明します。

  • コード全体が即時関数で囲われ、this(window)を引数にしてcallされるようになっている(これはJavascriptがグローバルスコープと関数スコープしか持っていないため、他のスコープを汚染しないようにCoffeeScript側で自動で行っています)
  • 関数では最後に実行される文の返り値がreturnされる(そのため、他の値をreturnしたい場合にはCoffeeScript側で明示的にreturnする必要があります)

以上となります。やはり癖が強く慣れが必要ではありますが、一度慣れてしまえば読むのも書くのもCoffeeScriptの方が楽に感じられる人は多いと思います。

CoffeeScriptに関しても勿論、ここに書いた以外の文法がたくさんあり、今回説明した内容だけでは実現できないコードがたくさんあると思います。長くなってしまうので本記事では割愛しますが、こちらも興味を持った人は公式サイトを調べてみてください。

コンパイルについて

CoffeeScriptの自動コンパイルはJadeやStylusとは少し違い

$ coffee --watch --compile main.coffee

というコマンドで変更監視、自動コンパイルを行い

$ coffee --watch --compile .

というコマンドでコマンド実行ディレクトリ以下の.coffeeファイルの変更を監視することができます。

最後に

Startup Stock Photos

いかがだったでしょうか?

初めての人にはなかなか慣れない記法も多かったかと思いますが、これら3つの拡張言語を導入することで開発時に書くコードの量は格段に少なくなり、小さなミスを減らすことができると思います。

いきなり3つ全てを導入すると学習コストが高いと思うので、1つずつ取り入れていくことをお勧めします。

この記事が気に入ったら
いいね!しよう

creiveの最新情報をお届けします

この記事を書いた人

かるね
2012年に面白法人カヤックに入社し、紆余曲折あり2016年からフリーランスしてます。HTML / CSS / Javascript / Ruby on Rails / Wordpress / AWS等々。@c67n9v6l9