PL（プロジェクトリーダー）を支える技術（CSS篇）

# はじめに

[治療ノート](https://www.c-notes.jp)のフロントエンドエンジニアの @uemurakenta です。
今年もあと少しですねということで、フロントエンド界隈は今年もてんやわんやだったなぁと思い出してみると、[node.js](https://nodejs.org/en/)がio.jsと統合されてv4.0がリリースされたと思ったらすぐにv.5.0がstableになったり[Bootstrap](http://v4-alpha.getbootstrap.com/)が[BabelやSassを導入したり](http://qiita.com/youthkee/items/e9e105e35526f908f48a)、[npmがフロントエンドのpackageを受け入れる](http://blog.npmjs.org/post/101775448305/npm-and-front-end-packaging)発表をしたのに対して、Bower側は[Bowerは元気です](http://bower.io/blog/2015/bower-alive-looking-contributors/)と高らかに宣言したのは記憶に新しいですね

これから書くことと全然関係ないので本題に入ろうと思います。

## 医療業界のあたりまえを発明するために

少し事業の話になりますが、[治療ノート](https://www.c-notes.jp)は「**治療法を選択できる世の中**」を実現するためのサービスです。
現在リリースから半年くらいで、主に、[治療法](https://www.c-notes.jp/diseases/influenza)、[体験談](https://www.c-notes.jp/disease/influenza/experience)、[医療に関するコラム](https://www.c-notes.jp/articles/1)などを展開しています。

ただ、新規事業が当初の計画通りうまくいく保証はありません。
前述の[医療に関するコラム](https://www.c-notes.jp/articles/1)などは当初の予定には無かったものです。


### 当初の予定
リリース時PLから
> とにかく早く出したいです。早く出して感触をつかみたい

と言われていたので、さっさと作るんなら、[Bootstrap](http://v4-alpha.getbootstrap.com/)や、[semantic UI](http://semantic-ui.com/)などのUIフレームワークで充分だったかもしれないのですが、新規事業は小さく出して、細かいレベルのピボットを繰り返していくものだと思っていたので、出来るだけライブラリの依存度を低くしようと思って下記のような構成にした。```hogehuga.c-notes.jp```,```foobar.c-notes.jp```などに```header```や```footer```のデザインを共通化させるために大掛かりなUIフレームワークが必要になるのを避けたい意味合いが強い。また、googleがレスポンシブ・ウェブデザインを推奨していることを受け[jpmobile](https://rubygems.org/gems/jpmobile)などのgemは利用していない

#### c-notes.jpのCSSパッケージ構成

| パッケージ（Ruby Gems） | 用途 | 当初の所感 |
|:-----------|:------------|:-------------|
| [normalize-rails](https://rubygems.org/gems/normalize-rails)     | ブラウザ間の誤差を無くす        |     問題なし     |
| [sass-rails](https://rubygems.org/gems/sass-rails)     | sassを使いたい      |    ```map```便利。モジュールや要素でファイルを切り分けて```@import```  |
| [burbon](https://rubygems.org/gems/bourbon)       | sassのmixinライブラリ       |     問題なし    |
| [neat](https://rubygems.org/gems/neat)         | グリッドレイアウト          |     問題なし      |

### 半年経過

PL曰く
> コラムを始めましょう do do do

ここでc-notes.jpにコラムも持たせるか、blog.c-notes.jpなどを新設するかの議論があったが、c-notes.jpに持たせることにした。

| パッケージ（Ruby Gems） | 用途 | 半年運用してみた感想 |
|:-----------|:------------|:-------------|
| [normalize-rails](https://rubygems.org/gems/normalize-rails)     | ブラウザ間の誤差を無くす        |     問題なし     |
| [sass-rails](https://rubygems.org/gems/sass-rails)     | sassを使いたい      |    ```cssnext```気になりだし始める  |
| [bourbon](https://rubygems.org/gems/bourbon)       | sassのmixinライブラリ       |     **実はそんなにmixin使ってない**のと、制限なく使うと当たり前だけどどんどん依存する    |
| [neat](https://rubygems.org/gems/neat)         | グリッドレイアウト          |      ```_grid.scss```とかに依存をとどめておくのがよさげ      |

#### 半年間で変わったこと
1. ```sass-rails```もいいけど```csnext```気になるなぁ
2. bourbonのmixin実はそんなに使ってない
3. neat便利だけど使い方間違えるとcssの記述が```@include media($hogehuga)```だらけになる
4. コラム、お薬検索など、医療に関するコンテンツが増えた
5. チームにsassが書けるデザイナー @htmlmogmog 登場

#### 半年間の学び
1. レスポンシブ・ウェブデザインは一定の効果があると思う [レスポンシブ？ アダプティブ？ デザイナーにとってのベストな選択肢とは](http://uxmilk.jp/translation/responsive-vs-adaptive-design)
2. neat使うためだけになってしまってるbourbonがちょっと…
3. c-notes.jpのコードは安定してきているので、今後サービスの展開に応じて治療ノート共通デザインcssを切り出した方がいい気がしている（COOKPADさんの[sara](http://cssnite.jp/lp/lp26/CSSNiteLP26-s9-ikeda.pdf)みたいなやつ）


### 今後の準備
PLは言うかもしれない
> 〇〇に向けた動画配信サービスやバツバツ向けのECサイトが作りたいです！

半年間の学びと今後の展望からしても、治療ノート内で共通で取り扱うデザインCSSがそろそろ必要そうで、それには出来るだけ外部パッケージの依存を減らしたい。今の構成のままでもいいのだけど```cssnext```の動向とかも含めこんな感じにしたらどうかという案が下記

| パッケージ（npm） | 用途 | 懸念 |
|:-----------|:------------|:-------------|
| [normalize-css](https://www.npmjs.com/package/normalize.css)     | ブラウザ間の誤差を無くす        |    まだ分からない     |
| [postCss](https://github.com/postcss/postcss)     | bourbonやsassが担ってきた部分。autoprefixer、```@import```や変数を扱うライブラリなど必要に応じて      |     まだ分からない     |
| [Lost Grid](https://github.com/corysimmons/lost)     | グリッド・システム      |     まだ分からない     |

##### postCssに関してはこちらに詳しく書かれているので参考にしてください
- [cssnextでみる次世代CSSとPostCSS](http://blog.yucchiy.com/2015/04/22/cssnext-postcss-for-nextgeneration-of-css/)
- [postcssでsassの形式（っぽく）書く](http://qiita.com/SatohJohn/items/4d8961760ee85ed23b1e)
- [PostCSSの基本的なプラグインについて](http://qiita.com/hbsnow/items/3193f7576cbec0a5765e)

#### Lost Gridに関して日本語の記事が無かったので簡単に解説

[Lost Grid](https://github.com/corysimmons/lost) に以下のようなことが書いてある

> Lost Grid is a powerful grid system built in PostCSS that works with any preprocessor and even vanilla CSS. You can think of it like the Autoprefixer of grid systems.

> It is built upon years of studying and building grid systems with tons of community feedback.

> It makes use of calc() to create stunning grids based on fractions you define without having to pass a ton of options.

> I can tell you with no ego, this is my finest grid.

以下訳（適当ですすいません）
Lost Gridはすげー強力なグリッドシステムを提供するよ。グリッドシステムのAutoprefixerみたいな感覚で使ってね。vanilla CSSでも動くよ
みんなからのフィードバックを受けて結構頑張って作ったよ
css3の```calc()```関数をベースに作ってるからね
良かったら使ってね

```calc()```かと思って一応 [caniuse](http://caniuse.com/#search=calc)してみた。IE8はいいとしてもAndroid Browserがちょっと…と思ったけど環境は常に変化するものと信じ突き進む

#### 使い方

[lost](https://github.com/corysimmons/lost/tree/gh-pages)のページからmasterブランチをcloneしてきて```npm install```&```gulp```したらpostCssのバージョンが古いよと怒られたので適当に```npm install --save postCss@latest```とかしないと動かなかった

##### レスポンシブ

@media()の部分はbreakpoint指定。基本的には```lost-column```に適応させたい分割を書けばよさ気

```styl:hoge.styl
  .responsive
    background: #42CAFD
    div
      lost-column: 1/1
      background: darken(#42CAFD, 10%)
      @media (min-width: 500px)
        lost-column: 1/2 全体の1/2に分割
      @media (min-width: 800px)
        lost-column: 1/3
      @media (min-width: 1100px)
        lost-column: 1/4
```

##### ネスト

```styl:hoge.styl
  .nest
    background: #8EB19D
    div
      lost-column: 1/3
      background: darken(#8EB19D, 10%)
      div
        lost-column: 1/2
        background: darken(#8EB19D, 20%)
```

##### ワッフル
susyとかでいう```gallery```
折り返すタイミングをしていするためにneatみたいに```@include omega(3n);```しなくていい

```styl:hoge.styl
  // Waffle Grid
  .waffle
    background: tomato
    div
      lost-waffle: 1/3
      margin-top: 0
      background: darken(tomato, 10%)
      line-height: inherit
      padding: $block
```

使ってみた所感
- ```postCss```はprocessorで依存関係を明記出来るので素敵
- ```lost```を使うところだけ```es6```みたいに ``` @import `lost` from 'lost'```みたいにグリッド処理を記述するcssだけに読み込ませられたらいいなぁと思った
- calc()どうなんだろう

## まとめ

- 新規事業は何が起こるか分からないので柔軟にストレッチさせたり、減らしたりできる開発が望まれる(柔軟な対応が出来ればライブラリの選定は何でも大丈夫だと思う)
- 今回は```lost```を使ってみたがbourbon,neatも[postCss](https://www.npmjs.com/package/postcss-neat)版でてるみたいで期待(´∀｀∩)