バージョン4の変更内容はGitHub上のissueで確認することができます。この中で筆者が注目している事項は

• LESSからSASSへの変更
• アイコン（グラフィックアイコン）の削除
• IE8のサポート終了とjQuery1系からjQuery2系へ
• pxからemへの変更
• グリッドシステムに、さらに大きなブレイクポイントを追加
• ボタンのカラー指定にClass属性「default」がなくなり「secondary」を指定するようになった
• Class属性「display-*」でフォントサイズを指定可能に
• ECMAScript2015(babel)の採用
• Angularのui.bootstrapはどうなる？

現段階ではバージョン4はアルファ版ではありますが、先取りして早速レビューします。

LESSからSASS

Twitter Bootstrapはバージョン3ではLESSを用いて開発を行っていましたが、SASS版Bootstrapもあり、LESS版/SASS版の両方メンテナンスが行われていました。バージョン4からはSASSを採用することになりました。

開発者にとってこれは大きな変更です。例えば、bowerを使ってTwitter Bootstrapを利用する場合、LESS版では

$ bower install bootstrap

SASS版を利用する場合は

$ bower install bootstrap-sass-official

と、LESS版を利用するかSASS版を利用するかで呼び出すパッケージが分かれ、しかもgruntタスクやgulpタスク等のコンフィグレーションを記載する際に、それぞれの異なる記載を行っていました。こうしたことが一本化されたことは、冗長的な記述をスッキリさせてくれます。

YEOMANジェネレータにgenerator-webappというWeb開発のベーシックなジェネレータがありますが、CSS版/SASS版の切り替えのために、いたるところの分岐が書かれています。

ちなみに、bowerを使ったアルファ版のインストールは、明示的にバージョンを指定する必要があります。バージョンを指定しない場合は3系がダウンロードされます。

$ bower install bootstrap#4.0.0-alpha

アイコン（グラフィックアイコン）の削除

Twitter Bootstrapと言えば、豊富な人気のあったGlyphiconsですが、バージョン4では削除されています。

現段階では極わずかにGlyphiconsが残されているだけになっていて、入力時の警告等を表示させているだけになっています。

削除されたグラフィックアイコンですが、現状ではTwitter Bootstrapの管理外で定義されているような記述もありません。もしグラフィックアイコンを利用したい場合は、別途どこかからお気に入りグラフィックアイコンを利用する必要があります。

IE8のサポート終了とjQuery1系からjQuery2系へ

Internet Explorer8とiOS6へのサポートが終了します。Twitter BootstrapがjQueryのバージョンを1系から2系への利用変更に伴いInternet Explorer8のサポートも打ち切られました。IE8を利用する必要がある場合にはバージョン3を利用します。

さようならIE8…

pxからemへの変更

フォントサイズ等の指定がpxからem(およびCSS3で導入されたrem)に変更されました。pxはピクセル単位の指定で、環境によって変化しない絶対単位です。emは文字の高さを基準にした単位で1emは1文字を表します。特にremはCSS3で新しく定義されたroot emでroot要素（html要素）のフォントサイズを継承します。

pxの場合、ブラウザのフォントサイズを変更しても文字の大きさが変わりませんが、emではフォントサイズの大きさに合わせ表示されるフォントサイズも変わります。chromeの場合は「chrome://settings/」でフォントサイズを変更した場合に違いが確認できます。

乱暴な言い方ですが、ユーザの好みのフォントサイズに対応するというのはある意味よりレスポンシブになったと言えるのではと思います。pxが良いのかemが良いのか議論としては様々だとは思いますが、Twitter Bootstrapではemを利用します。

グリッドシステムに、さらに大きなブレイクポイントを追加

Bootstrap3超速レビュー！刷新されたグリッドシステムを理解しよう！でも記述されているグリッドシステムですが、4つ定義されていたブレークポイントがバージョン4ではブレークポイントが5つになり「Extra large」が追加されました。

具体的に、バージョン3では

バージョン4では

ブレークポイントにより大きなExtra largeが定義されましたが、実際には小さい画面に対するブレークポイントが追加されています。

比較するとわかりますが

※ 1emを16pxとした場合

visible-*(-block)というクラス属性ですが、バージョン４では実装されていません。これは特定のサイズのときに表示させるのもで、例えば

✔ Visible on small

としたときに「smサイズ」で表示されます。.visible-*(-block)が削除され変わりに.hidden-*-up or .hidden-*-down を利用する方向です。

ボタンのカラー指定にClass属性「default」がなくなり「secondary」を指定するようになった

btn-*では、defaultがなくなりsecondaryが新たに追加されました。defaultと同様の色を指定する場合はsecondaryを指定する必要があります。btn-primaryのバックグラウンドカラーも若干明るめに定義されています。

バージョン3では

バージョン4では

現在バージョン3とバージョン4で定義されている値を比較すると次の通りです：

こうしたカラーリングですが、ラベルやアラートに関しては今のところ変更がありません、ボタンのみ変更されています。

Class属性「display-*」でフォントサイズを指定可能に

小さい部分ですが、フォントサイズを指定するクラス属性にdisplay-*が追加されました。コメントには次のような記載があります:

> 見出し要素(h1,h2,…h6)はページのコンテンツのボディで最適に動作するように設計されています。より目立つような見出しが必要な場合は、より大きいスタイルを使用することを検討してください。

具体的には

として定義されています。しかし、CSSのfont-weightの定義がh1では500であるのに対し、display-*では300ですので若干ほっそりとした表示になります。

ECMAScript2015(Babel)の採用

Twitter BootstrapのJavaScript開発にはBabelが採用されています。Babelは、TypeScriptを使ってECMAScript 2015時代のJavaScriptを先取りしよう！での記載もあるように、今年6月に公式に次のECMAScriptとして仕様が公開されたECMAScript2015(今まではECMAScript6と呼ばれていました)の文法で記載することが出来ます。参考までに、ECMAScriptはECMA Internationalが策定した仕様で、この仕様に基いて実装されたものがJavaScriptです。

ECMAScript2015の特徴をいくつか上げると次の通りです。詳しくはこちらを参照ください。

• Arrows
• Classes
• Let + Const
• Iterators + For..Of
• Generators
• Modules and Module Loaders
• Map + Set + WeakMap + WeakSet
• Proxies
• Promises

Angularのui.bootstrapはどうなる？

AngularにはBootstrap Componentsをベースにしたui.bootstrapがあります。Angularを使って日頃開発を行っている方には、ui.bootstrapの動向も気になるところではないかと思います。というのも私は、ui.bootstrapのディレクティブ実装が非常に良いと思っているので、積極的に利用しています。

ui.bootstrapの対応に関しては現在issueで話が上がっています。ui.bootstrapはAngular2の対応もありますので、Twitter Bootstrapバージョン4の対応は難しい状況のようです。

まとめ

バージョン3からレスポンシブWebデザインを前提として作られたTwitter Bootstrapですが、バージョン4では現在のモバイル環境に合わせより強力に洗練されたCSSフレームワークです。

今回のレビューはまだアルファ版のため一部機能が実装されていない部分もありますが正式リリースが楽しみです。

前二回の記事では、Sass 3.3で追加された「&」の新機能と@at-rootと新しいデータタイプ「マップ」について解説しました。

最後となる今回は、新しく追加された関数やいくつかの変更点を解説します。少し長くなりましたので目次を作りました。気になるところからお読みください。

新しく追加された関数

• 文字列用の関数
• リスト用の関数
• call()
• unique-id()
• 変数、ミックスイン、関数の存在を調べる関数
• inspect()

変更点

• リスト関連
• @each
• if()
• @extend
• !globalフラグ

※Source Mapについては、丁寧に解説しているブログ記事が既にいくつかありますので、ここでは省略させていただきます。

文字列用の関数

新たに追加された文字列用の関数は6つあります。

• str-length($string)
• str-insert($string, $insert, $index)
• str-index($string, $substring)
• str-slice($string, $start-at, [$end-at])
• to-upper-case($string)
• to-lower-case($string)

str-length()

str-length()は、文字列の長さを取得する関数です。

// 引数には文字列を指定
str-length($string)

次のように使います。

str-length("foo")  //-> 3
str-length("")     //-> 0
str-length(" ")    //-> 1

str-length("漢字")     //-> 2
str-length("ひらがな") //-> 4

str-insert()

str-insert()は、文字列の中の指定した位置に別の文字列を挿入する関数です。

// 引数の1つ目に対象となる文字列、
// 2つ目に挿入する文字列、3つ目に挿入する位置を指定
str-insert($string, $insert, $index)

次のように使います。

str-insert("abcd", "X", 1)
      //-> "Xabcd"
      //   第3引数を0にしても結果は同じ

str-insert("abcd", "X", 4)
      //-> "abcXd"

str-insert("abcd", "X", 5)
      //-> "abcdX"

第3引数には負の値を指定することができます。その場合、文字列の末尾からの位置になります。

str-insert("abcd", "X", -1)
      //-> "abcdX"

str-insert("abcd", "X", -3)
      //-> "abXcd"

また、第3引数に文字数を超える値を指定した場合は次のようになります。

str-insert("abcd", "X", 10)
      //-> "abcdX"

str-insert("abcd", "X", -10)
      //-> "Xabcd"

str-index()

str-index()は、文字列の中に指定された文字列が含まれているかどうかを調べる関数です。含まれている場合は開始位置を、含まれていない場合は0を返します。

// 引数の1つ目に文字列、2つ目に調べたい文字列を指定
str-index($string, $substring)

次のように使います。

str-index(abcd, b)   //-> 2
str-index(abcd, bc)  //-> 2
str-index(abcd, X)   //-> 0
str-index(abcd, ad)  //-> 0

大文字小文字は区別されます。

str-index(abcd, c)  //-> 3
str-index(abcd, C)  //-> 0

str-slice()

str-slice()は、文字列から指定した範囲を取り出す関数です。

// 引数の1つ目に対象となる文字列、
// 2つ目に取り出す開始位置、3つ目に終了位置を指定
// 3つ目を省略すると文字列の末尾までになる
str-slice($string, $start-at, [$end-at])

次のように使います。

// 2文字目から末尾まで
str-slice("abcd", 2)
     //-> "bcd"

// 2文字目から3文字目まで
str-slice("abcd", 2, 3)
     //-> "bc"

// 0を指定した場合、1とみなされる
str-slice("abcd", 0, 3)
     //-> "abc"

第2、3引数には負の値を指定することもできます。負の値を指定した場合、末尾からの位置になります。

// （末尾から）3文字目から2文字目まで
str-slice("abcd", -3, -2)
     //-> "bc"

// 2文字目から末尾から2文字目まで
str-slice("abcd", 2, -2)
     //-> "bc"

第2引数より第3引数の値が小さい場合や同じ値の場合は「””」が返されます。 また、第2、第3引数が同じ位置を示す場合は、第2引数の位置の文字が返されます。

// 第3引数の値の方が小さい
str-slice("abcd", 2, 1)    //-> ""
str-slice("abcd", -3, -4)  //-> ""

// 引数の値が同じ
str-slice("abcd", 2, 2)    //-> ""

// 引数の値が同じ位置を示す
str-slice("abcd", 2, -3)   //-> "b"

to-upper-case()、to-lower-case()

to-upper-case()は文字列を大文字に、to-lower-case()は文字列を小文字にする関数です。

// 引数には文字列を指定
to-upper-case($string)
to-lower-case($string)

次のように使います。

to-upper-case(abcd)  //-> ABCD
to-upper-case(abCD)  //-> ABCD

to-lower-case(ABCD)  //-> abcd
to-lower-case(ABcd)  //-> abcd

リスト用の関数

新たに追加されたリスト用の関数は2つあります。

• list-separator($list)
• set-nth(($list, $n, $value)

list-separator()

list-separator()は、リストのセパレーターを返す関数です。

// 引数にはリストを指定
list-separator($list)

次のように使います。

list-separator(1px 2px 3px)      //-> space
list-separator((1px, 2px, 3px))  //-> comma

list-separator()の引数は1つなので、カンマ区切りのリストを上記のように直接指定する場合は、括弧（()）で囲む必要があるので注意してください。

リストの要素が2つよりも少なく、セパレーターもない場合はspaceを返します。

// 要素が2つよりも少ない
list-separator('foo')     //-> space

// セパレーターがある
list-separator(('foo',))  //-> comma

set-nth()

set-nth()は、n番目の要素を指定した値に置き換えた新しいリストを返す関数です。

// 引数の1つ目にリスト、2つ目に位置、3つ目に置換後の値
set-nth($list, $n, $value)

次のように使います。

$list: 10px 20px 30px 40px;

.sample {
    set-nth($list, 2, -20px);
        //-> 10px -20px 30px 40px

    set-nth($list, -2, -20px);
        //-> 10px 20px -20px 40px
}

call()

call()は、動的に関数を呼ぶことができる関数です。 呼べるのは、Sassに組み込まれている関数とユーザーが定義した関数とCSSの関数です。

// 引数の1つ目に呼びたい関数、2つ目にその関数に渡す引数
call($name, $args...)

次のコードは、2つの引数を足した値を返すというサンプル用の関数です。

@function sum($a: 0, $b: 0) {
    @return $a + $b;
}

通常では次のように利用します。

.sample {
    margin: sum(1px, 2px);  //-> 3px
}

call()を使うと、次のようにしてsum()を利用することができます。

.sample{
    margin: call(sum, 1px, 2px);  //-> 3px

    // call()の引数に変数を使う
    $fn-name: sum;
    padding: call($fn-name, 1px, 2px);  //->3px
}

また、キーワード引数を指定した場合、それはそのまま第1引数で指定した関数に渡されるため、次のようにすることもできます。

.sample {
    margin: call(sum, $b: 2px);  //-> 2px
}

call()の使い方次第では、より汎用性をもったミックスインや関数をつくることができそうです。

unique-id()

一度にコンパイルされたファイル内でユニークな、「u」から始まる9桁の文字列を返す関数です。文字列はコンパイルするたびに変わります。

.sample {
    content: unique-id();  //-> ucxkgyjv0
    content: unique-id();  //-> ucxkgyjva
    content: unique-id();  //-> ucxkgyjvc
    content: unique-id();  //-> ucxkgyjvg
}

変数、ミックスイン、関数の存在を調べる関数

• variable-exists($name)
• global-variable-exists($name)
• function-exists($name)
• mixin-exists($name)

variable-exists()

variable-exists()は、現在のスコープとグローバルスコープに指定された変数があるかどうかを調べる関数です。指定された変数がある場合はtrueを、ない場合はfalseを返します。

// 引数には変数名（$は不要）を指定
variable-exists($name)

次のように使います。

$g-foo: "global foo";
.sample {
    $foo: "local foo";

    // ローカル変数
    content: variable-exists(foo);
        //-> true

    // グローバル変数
    content: variable-exists(g-foo);
        //-> true

    // 存在しない変数
    content: variable-exists(non-existent);
        //-> false
}

global-variable-exists()

global-variable-exists()は、指定されたグローバル変数があるかどうか調べる関数です。指定された変数がある場合はtrueを、ない場合はfalseを返します。

// 引数には変数名（$は不要）を指定
global-variable-exists($name)

次のように使います。

$g-foo: "global foo";
.sample {
    $foo: "local foo";

    // ローカル変数
    content: global-variable-exists(foo);
        //-> false

    // グローバル変数
    content: global-variable-exists(g-foo);
        //-> true

    // 存在しないグローバル変数
    content: variable-exists(g-non-existent);
        //-> false
}

function-exists()

function-exists()は、関数があるかどうか調べる関数です。

// 引数には関数名を指定
function-exists($name)

次のように使います。

// サンプル用の関数
@function sample-fn() {
    @return true;
}

.sample {
    // ユーザー定義の関数
    content: function-exists(sample-fn);
        //-> true


    // Sassの組み込み関数
    content: function-exists(lighten);
        //-> true
}

mixin-exists()

mixin-exists()は、ミックスインがあるかどうか調べる関数です。

// 引数にはミックスイン名を指定
mixin-exists($name)

次のように使います。

// サンプル用のミックスイン
@mixin sample-mixin() {
    /* ... */
}

.sample {
    // ユーザー定義のミックスイン
    content: mixin-exists(sample-mixin);
        //-> true

    // 存在しないミックスイン
    content: mixin-exists(non-existent);
        //-> false
}

inspect()

inspect()は、デバッグ用の関数です。

// 引数には調べたい値を指定
inspect($value)

CSSとして有効な値でなければコンパイルエラーになったり、変数に入れたnullやネストしたリストの括弧（()）が出力されなかったりと、デバッグが簡単にはできませんでした。inspect()を使うことでこれらの問題を解決できます。

.sample {
    /* 変数に入れたnull */
    $var: 1px null 3px;
    content: $var;             //-> 1px 3px
    content: inspect( $var );  //-> 1px null 3px

    /* 空のリスト */
    $list: ();
    content: $list;             //-> コンパイルエラー
    content: inspect( $list );  //-> ()

    /* ネストしたリスト */
    $list: (1px, (foo (bar baz)), false);
    content: $list;             //-> コンパイルエラー
    content: inspect( $list );  //-> (1px, (foo (bar baz)), false)

    /* マップ */
    $map: (key1: value1, key2: value2);
    content: $map;             //-> コンパイルエラー
    content: inspect( $map );  //-> (key1: value1, key2: value2)
}

また、@debugにも同じ問題がありましたが、inspect()と同様に値を正しく表示するようになりました。

リスト関連

nth()

nth($list, $n)の$nに負の値を指定できるようになりました。負の値を指定するとリストの末尾からの位置になります。

これにより、リストの最後の値の取得が今までよりも簡単になりました。

$list: foo, bar, baz;

nth($list, -1)  //-> baz

// 今まで…
nth($list, length($list))

リストの最後のカンマ

カンマ区切りのリストで、最後にカンマを記述してもコンパイルエラーにならなくなりました。出力時には最後のカンマは取り除かれます。

$list: foo, bar, baz,;

@debug $list;  //-> foo, bar, baz

また、マップも同じように最後にカンマを記述することができます。

$map: (
    key1: value1,
    key2: value2,
);

要素が1つしかないリストの生成

これまでは要素が1つしかないリストを作るのはかなり手間でした。

$list: ();     //-> list
$list: (1);    //-> number !!
$list: (1 2);  //-> list
$list: (1, 2); //-> list

// こうする必要があった
$list: join( (), 1 );    //-> list
$list: append( (), 1 );  //-> list

これからは次のようにするだけでリストとして扱われます。

$list: (1,);

ただし、カンマ区切りのリストになるので、スペース区切りのリストにしたい場合は次のようにします。

$list: join( (), 1, space);
$list: append( (), 1, space);

@each

前回の記事でも少し触れていますが、複数の変数を利用することができるようになりました。

$config: (
    warn: red,
    info: blue,
);

@each $class, $bg-color in $config {
    .#{$class} {
        background-color: $bg-color;
    }
}

これをコンパイルすると次のようになります。

.warn {
  background-color: red;
}

.info {
  background-color: blue;
}

if()

if()は三項演算子みたいな感じのものですが、これまではなぜかtrue/falseの両方の戻り値を評価していたため少し使い勝手が悪いものでした。これからは、条件の結果がtrueならtrueの戻り値だけ評価するようになります。

@extend

@media内で外にあるセレクタを@extendすると、警告ではなくコンパイルエラーとなるように変更されました。

@media screen {
    .foo {
        @extend .bar;
    }
}

.bar { ... }

また、存在しないセレクタを@extendした場合も、警告ではなくコンパイルエラーとなります。!optionalフラグを記述するとコンパイルエラーを回避することができます。

.foo {
     @extend .non-existent !optional;
}

!globalフラグ

ローカル（ネスト内）でグローバル変数と同名の変数に代入する場合、グローバル変数の値が変更されていましたが、それがデフォルトの挙動ではなくなります。そのような場合、将来的には、新しいローカル変数が作られて処理されることになり、グローバル変数を上書きする場合には「!global」フラグをつけて明示することが必要になるようです。Sass 3.3.0.rc.2でも「!global」フラグをつけないと警告が表示されてしまいます。

$var: true;

.sample {
    // グローバル変数を上書きしたい場合
    $var: false !global;
    ...
}

おわりに

師走だからというわけではありませんが、いろいろと駆け足で解説しました。筆者としてはライブラリに使えるものが増えたので嬉しいのですが、普通の制作には不要なものも少なくないと思います。無理に使ってみるのではなく、必要に応じて取り入れることをお勧めします。

よいお年を。

前回の記事では、Sass 3.3で追加される「&」の新機能と@at-rootについて解説しました。今回は新しいデータタイプの「マップ」について解説します。

マップは色々な使い道があると思いますし、使い方によってはかなり便利なものですので、ライブラリを作っている方などは特に覚えておくと良いと思います。

マップとは

マップは任意の名前と値のペアが集まったもので、名前をキーにして値を設定したり、取り出して使います。

マップの書き方ですが、名前と値をコロン（:）で区切り、複数記述する場合はカンマ（,）で区切り、それらを丸括弧（()）で囲みます。CSSのスタイルの書き方とちょっと似ていますね。

// マップ
$map: (
    key1: value1,  // key1にvalue1を設定
    key2: value2,
    key3: value3,
);

// CSSのスタイル
selector {
    property1: value1;  // property1にvalue1を設定
    property2: value2;
    property3: value3;
}

マップの値には、マップも含めたすべてのタイプのデータを書くことができます。

$map: (
    key1: 10px,             // 数値
    key2: "string",         // 文字列
    key3: #fff,             // カラー
    key4: true,             // ブーリアン
    key5: null,             // null
    key6: (foo, bar, baz),  // リスト（カンマ区切り）
    key7: foo bar baz,      // リスト（スペース区切り）
    key8: (                 // ネストしたマップ
        key1: value1,
        key2: value2,
        ...
    ),
);

Sass 3.3よりも前までは、複雑なデータ構造を作るにはリストを使って頑張るしかありませんでした。 ですが、マップを使えば、より分かりやすく書くことができますし、専用の関数もあるのでデータを扱いやすくなります。

マップ用の関数

マップ用の関数は5つあります。

• map-get($map, $key)
• map-merge($map1, $map2)
• map-keys($map)
• map-values($map)
• map-has-key($map, $key)

map-get()

map-get()は、指定したキーの値を取得する関数です。

// 引数の1つ目にマップ、2つ目にキーを指定
map-get($map, $key)

次のようにして使います。

$map: (
    key1: 10px,
    key2: 20px,
    key3: (
        nested-key1: red,
        nested-key2: blue,
    ),
);

.map {
    margin: map-get($map, key1);
}

これをコンパイルすると次のようになります。

.map {
  margin: 10px;
}

指定したキーがマップにない場合は、nullが返されます。

また、map-get()を複数回使うことで、ネストされたマップから値を取得することができます。

.map {
    color: map-get( map-get($map, key3), nested-key1 );
}

これをコンパイルすると次のようになります。

.map {
  color: red;
}

何回もmap-get()を書くのは正直面倒くさいですし、コードが読みづらいですね。。

map-merge()

map-merge()は、2つのマップをマージする関数です。

// 引数の1つ目と2つ目にマージしたいマップを指定
map-merge($map1, $map2)

基本的には1つ目のマップの後に、2つ目のマップが追加されますが、同じキーがある場合は2つ目のマップの値で上書きされます。

$map1: (
    key1: value1,
    key2: value2,
    key3: value3,
);

$map2: (
    key4: value400,
    key5: value500,
    key1: value100,
);

$new-map: map-merge($map1, $map2);

この場合、$new-mapの値は次のようになっています。

(key1: value100, key2: value2, key3: value3, key4: value400, key5: value500)

key1は両方のマップにあるので、2つ目のマップの$map2の値が使われています。 そして、key3の後に$map2にあったkey4とkey5が追加されています。

このような特徴を利用して、ライブラリ内の設定用マップなどを自身のプロジェクトに合わせて上書きするといったこともできます。

map-keys()

map-keys()は、1つのマップ内のすべてのキーをカンマ区切りのリストで返す関数です。

// 引数にはマップを指定
map-keys($map)

それではサンプルを見てみましょう。

$map: (
    key1: 10px,
    key2: 20px,
    key3: (
        nested-key1: red,
        nested-key2: blue,
    ),
);

.map {
    content: map-keys($map);
}

これをコンパイルすると次のようになります。

.map {
  content: key1, key2, key3;
}

ネストされたマップ内のキーを取得するには、map-get()を併用する必要があります。

.map {
    content: map-keys( map-get($map, key3) );
}

これをコンパイルすると次のようになります。

.map {
  content: nested-key1, nested-key2;
}

map-values()

map-values()は、1つのマップ内のすべての値をカンマ区切りのリストで返す関数です。

// 引数にはマップを指定
map-values($map)

使い方はmap-keys()と同じです。

.map {
    content: map-values($map);
        //-> 10px, 20px, ( nested-key1: red, nested-key2: blue )
        // 値にマップが含まれるため、実際にはエラーが出ます
}

map-has-key()

map-has-key()は、1つのマップ内に特定のキーがあるかどうか調べる関数です。

// 引数の1つ目にマップ、2つ目に調べたいキーを指定
map-has-key($map, $key)

戻り値はtrueかfalseです。

$map: (
    key1: 10px,
    ...
);

$has-key1: map-has-key($map, key1);

この場合、$has-key1の値は true になっています。

リスト用の関数

マップにはリスト用の関数も使うことができます。

• nth()
• length()
• zip()
• join()
• append()
• index()

使い方とコンパイル結果を簡単にまとめると次のようになります。

$map1: (
    key1: value1,
    key2: value2,
);

$map2: (
    key4: value400,
    key1: value100,
);

.sample {
    /* nth() */
    content: nth($map1, 1); //-> key1 value1

    /* length() */
    content: length($map1); //-> 2

    /* zip() */
    content: zip($map1);
        //-> key1 value1, key2 value2
    content: zip($map1, $map2);
        //-> key1 value1 key4 value400, key2 value2 key1 value100

    /* join() */
    content: join($map1, $map2);
        //-> key1 value1, key2 value2, key4 value400, key1 value100
    content: join($map1, $map2, space);
        //-> key1 value1 key2 value2 key4 value400 key1 value100

    /* append() */
    content: append($map1, foo bar);
        //-> key1 value1, key2 value2, foo bar
    content: append($map1, foo bar, space);
        //-> key1 value1 key2 value2 foo bar

    /* index() */
    content: index($map1, key1); //-> false
    content: index($map1, key1 value1); //-> 1
}

@eachで使う

@eachはSass 3.3から複数の変数を指定できるようになったので、マップのキーと値を別々の変数に入れて利用することができます。

.box {
    $config: (
        warn: red,
        info: blue,
    );

    // キーは$classに、値は$bg-colorに入ります
    @each $class, $bg-color in $config {
        @at-root #{&}-#{$class} {
            background-color: $bg-color;
        }
    }
}

これをコンパイルすると次のようになります。

.box-warn {
  background-color: red;
}
.box-info {
  background-color: blue;
}

これまでと比べて、断然扱いやすいものになっていると思います。

可変長キーワード引数

マップを可変長引数のような感じでミックスインや関数に渡すことができます。 可変長引数と可変長キーワード引数のそれぞれの場合を、次のミックスインを使って解説します。

@mixin box($border, $bgColor, $color) {
    border: $border;
    background-color: $bgColor;
    color: $color;
}

まずは可変長引数を使った場合です。

.box {
    // 値はミックスインの引数の順番に合わせる
    $config: 1px solid #ccc, #fff, #333;

    // 変数の後ろに「...」をつけ、可変長引数としてミックスインに渡す
    @include box($config...);
}

$configの1つ目の「1px solid #ccc」が$borderに、2つ目の「#fff」が$bgColorに、そして3つ目の「#333」が$colorに渡されます。 これをコンパイルすると次のようになります。

.box {
  border: 1px solid #cccccc;
  background-color: white;
  color: #333333;
}

次にマップを使った可変長キーワード引数の場合です。

.box {
    $config: (
        // キーはミックスインの引数名に合わせる。記述順は問わない
        color: #333,
        bgColor: #fff,
        border: 1px solid #ccc,
    );

    @include box($config...);
}

コンパイル結果は可変長引数の場合と同じになります。

マップを使った場合は、キーと同名のミックスインの引数に値が渡されます。キー「color」はミックスインの引数の「$color」に対応するということです。 そのため、マップ内のキーをミックスインの引数の順番に合わせて記述する必要はありません。

ちなみに、可変長引数と併用することもできますが、その場合は可変長キーワード引数を可変長引数の後に記述する必要があります。

また、Sass 3.3から追加されたkeywords()関数を使って、可変長キーワード引数をマップに変換する関数をつくることができるようです。

@function create-map($args...) {
  @return keywords($args);
}

$map: create-map($key1: 10px, $key2: 20px);

この場合、$mapの値は (key1: 10px, key2: 20px) になっています。

マップのような構造のリスト

リストで2つの値をペアにして、マップのようにして使っていた場合、そのリストに対してマップ用の関数を使うことができます。

$map: (
    key1 value1,
    key2 value2,
);
$map2: (
    key4 value400,
    key1 value100,
);

@debug map-get($map, key1);
       //-> value1
@debug map-merge($map, $map2);
       //->  (key1: value100, key2: value2, key4: value400)
@debug map-keys($map);
       //-> key1, key2, key3
@debug map-values($map);
       //-> value1, value2, value3
@debug map-has-key($map, key2);
       //-> true

ただし、将来的にはこのようなリストに対してマップ用の関数を使うことはできなくなるようで、コンパイル時には警告が出されます。Sass 3.3が使えるようになったら、マップに切り替えていった方がが良さそうです。

おわりに

新しいデータタイプ「マップ」を解説しました。筆者としては、自前のライブラリ内のリストでなんとかしている箇所をとりあえず置き換えるつもりですが、みなさんはどのように使われますか？

楽天では、10月26日に「Rakuten Technology Conference 2013」を開催し、多くの方にご来場頂きました。ご参加者の皆様、ありがとうございました！

私が所属している「HTML5 Project Team」が担当したセッションでは、今回制作を担当したカンファレンスのサイトについて発表をしました。技術者の祭典ということもあり、HTML5やフロントエンドの技術をふんだんに盛り込み、皆さんご存知の賑やかな楽天市場とはひと味違ったクールなサイトに仕上げました。ご覧頂けましたでしょうか？

当日のセッションの内容と重複しますが、今回は、HTML5の活用事例として、このサイトがどのような技術で作られたのか、セッションでも使用したスライドを交えて紹介していきます。

「Rakuten Technology Conference 2013」サイトのコンセプトと要求仕様

このサイトでは、よくあるカンファレンスのサイトと同じく、講演者の紹介やタイムテーブルなどを公開しています。メインのターゲットユーザーはエンジニアで、日頃はPCをよく使い、最新のスマートフォンを持ち歩いていると想定しました。また、情報だけでなく技術面でもアピールする機会にしたかったこともあり、過剰なほどにあらゆる技術を盛り込んでいます。

サイトを構築する上で、いくつか要求仕様がありました。

• 情報の更新が頻繁に行われる
• SEOを考慮する
• サーバサイドスクリプトは使用しない

これらを満たすために、

• 都度、複数のHTMLを編集するのではなく、スタッフから受け取ったデータ（JSON）からHTMLを生成する。
• サーバサイドスクリプトが使えないので、ローカルで生成する。

という方針を定め、様々な技術を使って実現しました。

活用した技術

コンテンツ自体にもHTML5をはじめとした最新技術が使われていますが、制作面においても、最新のツールを駆使して効率化を図りました。

Canvasを使ったインタラクティブな背景

サイト全体にタイルをモチーフとした背景を採用していて、PCでご覧頂くと、マウスの動きに合わせてハイライトとされ、タイルが微妙に移動していることがわかるかと思います。この背景部分は、Canvas で描画しています。PC向けにはタイルは固定幅ですが、タブレット向けでは画面幅に合わせてタイル幅を調整しています。また、Canvasの処理部分にはCreateJSを使用しています。

CSSによるスムーズなインタラクション

トップページの「M」のタイルをクリックすると、実行委員長からのメッセージが表示されます。このとき、委員長の顔のタイルが拡張して、それに合わせて他のタイルが追いやられるようなアニメーションを行っています。この動きはCSSによって実現されていて、スマートフォンでも同様に動きます。これ以外にも、様々な場面でCSSによるアニメーションを使用しています。

スマートフォン最適化とレスポンシブWebデザイン

当日会場でスマートフォンからタイムテーブルを確認することを考慮し、スマートフォン対応をしました。タイムテーブルは縦横に長いコンテンツのため、スマートフォンとの相性は悪いのですが、時間帯ごとに横スクロールするようにして、閲覧性を確保しました。

各デバイスへの対応は、レスポンシブWebデザインで行いました。PCとスマートフォンでレイアウトが大きく異なるので、かなり苦戦しました。

また、それぞれの表示ごとにJavaScriptの処理も異なっているため、ウィンドウ幅を監視して、表示の切り替わり時にそれぞれ適切な処理を実行するような仕組みも取り入れました。

お気に入りのセッションをブックマークできるWeb Storage

タイムテーブルで、お気に入りのセッションをブックマークできる機能を追加しました。ブックマークするとブラウザのlocalStorageに保存され、いつでもお気に入りのセッションだけを表示できます。

また、ページ上部のSpeakersやUpdatesの部分に、赤枠の数字が表示されますが、これは、前回閲覧したときのデータをlocalStorageに保持し、今回読み込んだデータ数の差を表示して、何件更新されたかを示しています（表示すると消えます）。

PCで登録したブックマークをカンファレンス当日にスマートフォンで呼び出せるように、URLでその情報を引き継げるようにはしていたのですが、UIを提供できませんでした。来年はその辺りも提供できればと思っています。

PhantomJS + UnderscoreJSで更新負荷を下げる

PhantomJSは、コマンドラインから呼び出せるWebKitエンジンで、今回は、テンプレートとデータからHTMLを生成する処理で利用しました。テンプレートエンジンはUnderscore.jsを利用しました。

講演者の情報やセッションの時間などの情報は開催日まで頻繁に更新があり、その度にHTMLを修正しているとかなりの手間となります。そのため、それらの情報をまとめるカンファレンススタッフに、データをJSON形式で記述して納品してもらうようにしました。納品されたJSONファイルをUnderscore.jsでテンプレートに適用して、HTMLを出力しました。

データは構造化されているため、例えばタイムテーブルのデータを更新すると、タイムテーブルだけではなく、その講演者のページの情報も同時に変更されます。また、セッションの場所の名称が変更されたときも、１箇所修正するだけで、すべての名称が新しいものに置き換わります。

レスポンシブ対応がシンプルに記述できるSass / Compass

CSSの生成には、おなじみSassとCompassを使用しました。Sass内でif文を使って各デバイスの判定ができるようにして、レスポンシブ対応がシンプルに記述できました。

Gruntによる処理の自動化

PhantomJSでのHTMLの生成、Sass/Compassのコンパイル、ファイル操作などはGruntを使い自動化しました。PhantomJSの呼び出し部分は、いいモジュールを見つけられなかったため、シェルコマンドを呼び出すタスクを書きました。

このように、目的に合わせた最新技術に挑戦して、今回の「Rakuten Technology Conference 2013」のサイトを作り上げていて、私たちも様々な収穫がありました。まだ、パフォーマンスやユーザビリティなどで不十分な点もあるので、今後の課題として取り組みたいと思っています。

また、「サーバでスクリプト使えなくても、ローカルでRubyやPHPとか使えば楽じゃね？」という話もありますが（汗）、そこは我々「HTML5 Project Team」ということで、今回はフロントエンドの技術だけにこだわってみました。来年は、NodeベースのWebサーバに移行して、より簡単にサイトを更新できるようなことも考えています。

今後もこのような挑戦を続け、そこで得ていく知見を楽天のサービスに活かして行きたいと思っています。またこのような形で、いつもお世話になっているコミュニティにも還元できれば幸いです。今後ともよろしくお願いします。

このセッションのビデオはYouTubeにアップされており、使ったスライドもSlideShareで公開されています。もしよろしければそちらもご覧ください。

10月12日にSass 3.3.0.rc.1が出ました。まだリリース候補ですが、どのような機能が追加されるのかはChangelogにあります。今回は「&」と@at-rootについて解説します。

HTML+CSSの命名規則にBEM方法論、もしくはHTML+CSS向けに派生したMindBEMdingを取り入れる方が増えてきているようです（筆者は使っていませんが…）。「&」の新機能と@at-rootは、このBEMのためといっても過言ではありません。

Sass 3.2の「&」

「&」は親セレクタを参照する特別なキーワードとして、Sass 3.3よりも前からありましたが、擬似クラスや擬似要素、セレクタの連結など、用途が限られていました。

// Sass 3.3よりも前の「&」の用途の例
.foo {
    &:hover  { ... } //-> .foo:hover
    &:after  { ... } //-> .foo:after
    &.bar    { ... } //-> .foo.bar
    & + .bar { ... } //-> .foo + .bar
    & > .bar { ... } //-> .foo > .bar
    .bar & { ... }   //-> .bar .foo
}

「&」を使って、親のクラス名を子のクラス名の一部にすることはできませんでした。

.foo {
    // .foo-barにしたいけど…
    &-bar { ... }  //-> ERROR
}

Sass 3.3の&

Sass 3.3からは「&」をより多くの場所で使うことができるようになりました。 前述の「親のクラス名を子のクラス名の一部にする」には次のようにします。

.foo {
    #{&}-bar { ... }  // #{}（インターポレーション）を使います
}

これをコンパイルすると次のようになります。

.foo .foo-bar { ... }

「&」はセレクタに使用するだけでなく、変数の値に指定することもできるようになりました。

.foo, .bar .baz {
    $selector: &;  // #{}は不要です
}

このようにした場合、$selectorには (“.foo”, (“.bar” “.baz”)) というようにリストとして格納されます（実際にtype-of()で調べると list が返ってきます）。括弧や引用符で囲まれていますが、実際にはそれらは外された状態で使用されます。

.foo, .bar .baz {
    $selector: &;
    content: $selector;
}

これをコンパイルすると次のようになります。

.foo, .bar .baz {
  content: .foo, .bar .baz;
}

「&」を使ってBEM

では、「&」を使ってBEMっぽく書いてみましょう。

.block {
    // .block__element
    #{&}__element {
        ...

        // .block__element--modifier
        #{&}--modifier { ... }
    }
}

これをコンパイルすると次のようになります。

.block { ... }
.block .block__element { ... }
.block .block__element .block .block__element--modifier { ... }  // ?!

.block__elementの前の.blockはともかく、.block__element–modifierの一つ前にも.blockが出力されてしまっています…。 次のようにネストを減らして書くことで、これを回避することもできますが、、

.block {
    #{&}__element { ... }
    #{&}__element--modifier { ... }
}

この方法だと__elementを何度も書くことになってしまいます。.block__elementの前の.blockを出力しなくてもよいという運用ルールであれば、次に紹介する@at-rootで解決することができます。

@at-root

@at-rootの基本機能は、記述した場所より上のセレクタのネストを解除するというものです。
使い方は次のとおりです。

.foo {
    // 1つのルールセットのみに適用する
    @at-root .bar { ... }

    // 複数のルールセットに適用する
    @at-root {
        .baz { ... }
        .qux {
            ...

            .quux { ... }
        }
    }
}

これをコンパイルすると次のようになります。

.foo { ... }
.bar { ... }
.baz { ... }
.qux { ... }
.qux .quux { ... }

.qux .quux { … }の.quxを取り除いて.quux { … }としたい場合は、.quuxの前にも@at-rootを記述します。

では、前節の問題を解決します。

.block {
    @at-root {
        // .block__element
        #{&}__element {
            ...

            @at-root {
                // .block__element--modifier
                #{&}--modifier { ... }
            }
        }
    }
}

これをコンパイルすると次のようになります。

.block { ... }
.block__element { ... }
.block__element--modifier { ... }

ようやくすべてフラットにすることができました。

ただ、@at-rootの分だけネストが多くなったのが気になるかもしれません。
ネストを減らしたい方は@at-rootを隠蔽したミックスインを使うことを検討してみてください。

@at-rootの応用

@media内で@at-rootを使用した場合、そのルールセットは@media内に出力されます。

@media screen and (max-width:320px) {
    .foo {
        margin: 0;

        @at-root {
            .bar {
                padding: 0;
            }
        }
    }
}

これをコンパイルすると次のようになります。

@media screen and (max-width: 320px) {
  .foo {
    margin: 0;
  }
  .bar {  /* @media内に出力される */
    padding: 0;
  }
}

@mediaの外に.barを出したい場合は、@at-root (without: …)を使います。

@at-root (without: … )

次のように@at-root (without: media)とすると@mediaの外に出すことができます。

@media screen and (max-width:320px) {
    .foo {
        margin: 0;

        @at-root (without: media) {
            .bar {
                padding: 0;
            }
        }
    }
}

コンパイルすると次のようになります。

@media screen and (max-width: 320px) {
  .foo {
    margin: 0;
  }
}
.foo .bar {
  padding: 0;
}

@mediaの外には出されましたが.foo .bar { … }となってしまいました。.fooを取り除いて.bar { … }としたい場合は、withoutの値にruleを追加します。

@media screen and (max-width:320px) {
    .foo {
        margin: 0;

        @at-root (without: media rule) {
            .bar {
                padding: 0;
            }
        }
    }
}

これをコンパイルすると次のようになります。

@media screen and (max-width: 320px) {
  .foo {
    margin: 0;
  }
}
.bar {
  padding: 0;
}

このようにwithoutと後述するwithには、スペース区切りで複数の値を指定することができます。

前述の例では、@at-root(without: media rule)としましたが、必ずドキュメントルートに出力したい場合は(without: all)と記述した方が良いです。

@at-root(without: rule)は@at-rootのみ記述した場合と同じです。推測ですが、@at-rootには初期値として(without: rule)が設定されていると思われます。(without: media)とした場合は、初期値を上書きするので(without: rule media)のようには処理されなかったと考えられます。

また、withoutとwithは同時に指定することはできませんでした。(with: …)を指定した場合も初期値(without: rule)が上書きされてしまうようです。

@at-root(with: … )

では最後に(with: …)ですが、これに指定したもの以外が除外されます。以下にいくつかのサンプルを記載しておきますので、どのように出力されるか確認してみてください。

@media screen and (max-width:320px) {
    .foo {
        @supports ( display: flex ) {
            @at-root (with: rule) {
                .bar {
                    width: 0;
                }
            }
            @at-root (with: supports) {
                .baz {
                    height: 0;
                }
            }
            @at-root (with: media) {
                .qux {
                    margin: 0;
                }
            }
            @at-root (with: media rule) {
                .quux {
                    padding: 0;
                }
            }
        }
    }
}

コンパイルすると次のようになります。

@media screen and (max-width: 320px) {
  .qux {        /* (with: media) */
    margin: 0;
  }
  .foo .quux {  /* (with: media rule) */
    padding: 0;
  }
}
.foo .bar {     /* (with: rule) */
  width: 0;
}
@supports (display: flex) {
  .baz {        /* (with: supports) */
    height: 0;
  }
}

おわりに

「&」の新機能と@at-rootを解説しましたが、いかがだったでしょうか。確かにメリットもありますが、「&」はクラス名の検索がしづらくなりますし、@at-rootは出力後のCSSがどうなるかが想像しにくいケースが出てくるなど、デメリットもあります。筆者としては、これらを利用する場合は用途を限定するなどのルールを設けたいと思いました。