CSS NITE LP47「Coder’s High 2016」に参加してきた

CSS NITE LP47「Coder’s High 2016」に参加してきたので、印象に残ったセッションのメモと感想。

イマドキのコーダー環境構築

Node.jsのロードマップによると、現在は複数バージョンが入りみだれるタイミング（v7もうすぐ！）。
Nodeのバージョンによってパッケージが使えない、動かないなどを避けるには、anyenvを使ってnodeのバージョンをプロジェクトごとに管理するとよい。
依存モジュールのバージョンを固定するには、npm shrinkwrap。
ちなみに、数年前にgruntで管理していてた環境を、gulpとかに切り替えたいけど、この手のメンテは皆さんどうしてるのかな？って思った。
PostCSSは、Sassを上回るメリットをいまひとつ感じなかったので、まだ様子見かなって感じ。
必要な処理をプラグインで組み合わせていくっていうのは、敷居が高そうなイメージ（環境構築やメンテする人がチーム内で限定されそう）。
コーダーは怠惰であれ。

ハマるSVG

SVG、利用の仕方とOS/ブラウザバージョンの組み合わせによっては、いろいろ不可解な現象が起こるらしい。
私の場合は、SVGを実案件でロゴぐらいしか使用していないので、今のところ大ハマりしたことがないが、何かあったらまず本日の10選から目を通していきたい。
Reactでは、SVGでの使用要素に制限があるのは初めて知った。
gulp-svgo：アンカーポイント数が多い時、ファイルサイズ軽減のために座標値を整数化して容量を抑えてくれる。
まぼろし松田さんのスライドはいつも見やすいが、今回は特にタイトルロゴがかっこよかった。
デザインされていなくても良いところに手をかけられているのを見ると、いいなって思う。

本当に利用は必要か？デザイナーにとってのjQueryとJavaScriptフレームワーク

「漢なら黙ってjQuery」というセッションのオチもあったが、jQueryは学習コストも高くないし、情報も溢れているので体得するには一番敷居が低いと思う。
一時期、脱jQuery的な風潮（vanilla.jsとか）もあったけど、現場レベルではまだまだ現役だし、jQueryなら割とみんな書けるので共通言語としては必須な気がする。
その他フレームワーク/ライブラリが使えればモアベターだけど、それはあくまでプラスαの話。
少なくともデザイナーは。

esa.ioのBootstrap利用とCSSリファクタリング

えー、bootstrapがアップデートされるたびに、入れ替えてるの？ってところに驚いた。
sugoi。

モダン日本語フォント指定

貴重な情報の共有だった！！
最終的な形に落ち着くまでのストーリー（OSごとのフォントウェイトがバラバラ問題とか）もとても分かりやすかった。
これを調べるの、大変だったろうなぁ。実案件とかで、いきなりこれにぶち当たっても、なかなかここまでは調べきれないし、やりたくないw。
游ゴシックを使う機会があったら、今度からこれをコピペして使おう（公認）。
あと、フォント周りの設定は、基本的に前作ったサイトのものをコピペで再利用したり、一度設定するとなかなかいじらなかったりで、実はフォントまわりの仕様って、ふんわりとしか理解してないなぁと話を聞いていて感じた。
@font-familyのlocal指定は、ポストスクリプト名を調べたりしなくちゃいけないのかー、へぇ。

Enduring CSS

今日の話だけ聞いた印象をすごく大雑把にいうと、一昔前に共通部分はcommon.cssで、あとはページごとにユニークなcssを作って管理してたやり方を、ネームスペースを付けたり、モジュール（詳細度大きめ）をBEMでもっとちゃんと管理しようよって印象を受けた。
ケースバイケースかもしれないが、大きなサイトになればなるほど、デザインのレギュレーションを保つには、サイト全体でモジュールを統一して、再利用した方が良いんじゃないかと個人的には思った。
あと、どこで使われているか分からないので、うかつにCSSを削除できないといった話があったけれど、単純にgrepすれば良いのでは？と思ったけどそうゆう話じゃないのかな。
まあ、直感的ではないけれど。

その他

今回は、セッション全体を通して、まわりのWAI-ARIAへの意識が高くて驚いた。
WAI-ARIAに関しては、1年以上前に「コーディングWebアクセシビリティ – WAI-ARIAで実現するマルチデバイス環境のWebアプリケーション」を読んだだけで、今となっては内容的にもうる覚え。CodeGridの「WAI-ARIAを活用したフロントエンド実装」を読んでアップデートしておきたい。