React での「...」(ドット3つ)の記法
React では以下のような「...」(ドット3つ)の記法を時々見かけます.
render() { return <Counter {...this.state} /> }
Spread Attributes
これは,Spread Attributes という JSX の記法です.
子の Component へ props を渡す場合,Spread Attributes を用いると,以下のように書き換えられます.
1つずつ渡す場合
const props = { foo: "foo", bar: "bar" }; render() { return <Child foo={props.foo} bar={props.bar} /> }
Spread Attributes を用いて渡す場合
const props = { foo: "foo", bar: "bar" }; render() { return <Child {...props} /> }
ES.next でのスプレッド演算子
「...」(ドット3つ)の記法は,スプレッド演算子として ES2015 で Array に導入されています.
let ary1 = ["first", "second"]; let ary2 = [...ary1, "third"]; // ["first", "second", "third"]
ES.next では,「...」(ドット3つ)の記法を,Object で使える Object Rest/Spread Properties が提案されています.
let obj1 = { x: 1, y: 2 }; let obj2 = { ...obj1, z: 3 }; // { x: 1, y: 2, z: 3 }
これを用いると,以下のような Object.assign()
を用いていたコードが簡潔に書けるようになります.
let obj1 = { x: 1, y: 2 }; let obj2 = Object.assign({}, obj1, { z: 3 });
babel で用いる場合は,Stage 2 preset か Object rest spread transform を用いてください.
はてなブログの公式テーマ Wideboard を2カラムにする CSS
はてなブログの公式テーマである Wideboard が好みだったのですが,1カラムでサイドバーがページ下部に表示されてしまう部分が不満でした.
はてなブログは,デザイン設定の「デザインCSS」で CSS を記述することが出来るため,Wideboard を2カラムに変更することにしました.
Wideboard を2カラムにする CSS
サイドバーを 220px で固定幅とし,メインカラムは可変幅となるようにしました.
なお,calc()
を用いているため非対応のブラウザで表示すると,レイアウトが崩れてしまいます.
/* 2カラム用 */ #container-inner { max-width: 1200px; margin: 0 auto; } #content-inner { margin: 80px 20px 0; } #content-inner:after { content: " "; display: block; clear: both; } #wrapper { width: calc(100% - 220px); float: left; padding-right: 30px; box-sizing: border-box; } #box2 { float: left; width: 220px; border-top: none; margin-top: 0; } #box2-inner { border-top: none; padding-top: 0; } #footer { margin-left: 0; margin-right: 0; padding-right: 10px; } /* 装飾 */ .comment { max-width: none; } .entry-see-more { display: inline-block; margin-top: 30px; }
スクリーンショット
上記の CSS を適用した場合のスクリーンショットを載せます.
ブログ記事は,はてなブログさんのカスタムテーマ作成用のサンプルエントリーを用いています.