CSS Nite LP54「Coder’s High 2017」に行ってきました！

necco note
Web Development

CSS Niteってどんなイベント？

2017年11月4日（土）東京・ベルサール半蔵門で開催されたWeb制作者向けのイベント “CSS Nite LP54「Coder’s High 2017」” に参加してきました。

CSS NiteはWeb制作者を対象にしたイベントで、東京はもちろん、全国各地で開催されているセミナーです。今回の「Coder’s High」シリーズはとくにコーディング（マークアップ・フロントエンド）をテーマにトピックが絞られたものです。参加者はなんと320人（満席）でした。

6時間にもおよぶ長時間のセミナーでした。
Macbookのバッテリーがもたなかったため、休憩のわずか15分間のあいだに電源を借りて充電を繰り返し、セミナーを乗り切るといった工夫が必要でした。

「コーダーの前仕事・後仕事」

デザインからの画像書き出しや開発環境、シミュレーターなどの実際にコードを書く以外の作業まわりについて紹介されたセッションでした。

なかでも気になったものは…

Local by Flywheel
https://local.getflywheel.com/

WordPressのローカル開発環境。
Nginx/Apacheをすぐに切り替えられたりPHPのバージョンも選べるというところが魅力的ですが、フォローアップで紹介された記事も見てみると、セッションで紹介された以外にも様々な機能があって非常に便利そうです。
WordPressのローカル環境のためのGUIツールLocal by Flywheelが便利 – Capital P

ちなみにneccoのエンジニアたちは主にWockerを使用して開発を行なっています。もしかしたらLocalに移行するエンジニアも出てくるかも・・・？

「多様なユーザーニーズに応えるフロントエンドデザインパターン：ベーシック編」

書籍の内容をセミナー用にアレンジしたセッションでした。
インクルーシブHTML+CSS & JavaScript 多様なユーザーニーズに応えるフロントエンドデザインパターン

Webアクセシビリティ的に「こうしたらダメ」ではなく「どのように実装したら良いか」という観点でコーディング例が紹介されたのは非常に良かったと思います。また、スクリーンリーダーでの読み上げ方なども例に、どの要素を選択してマークアップすればよいのかを考えるヒントになるセッションでもあったと思います。

紹介された書籍も購入しました。さらに理解を深めるべく熟読したいと思います。

「テンプレートエンジンPugを使った、みんなでやるウェブ制作」

Pugです。

一度使うと、静的HTML納品のサイト制作ではテンプレートエンジンなしには実装できない…と思える存在です。neccoでも数十ページ規模のコーディング案件ではお世話になりました。
セッションでも触れられていましたが、インデント記法に「キモい…」となるのは最初だけで、我々も慣れました。

このセッションは主にPugの基本的な使い方にフォーカスされていましたが、PugファイルとSassファイルを同じ単位で分けて管理して、CSSとの関係性をわかりやすくするという考え方は「なるほど」と思いました。

「CSSをちゃんと書くためには？」

わかっていたつもりでちゃんとわかっていなかったようなCSSの仕様、性質の部分に触れたセッションでした。
CSS設計手法のテクニックを紹介したものはこれまでも多くあって、もちろん勉強にもなりましたが、視覚整形モデルなどの仕様を理解して無駄な宣言をしないようにCSSを書こうというセッションは逆に新鮮でした。

「宣言もCSS設計の重要な要素」というメッセージは特に突き刺さりました。

「 Grid Layoutがやってきた！ Flexboxやfloatとの適切な使い分け方法」

正直に言って去年までは「Grid Layoutを使えるようになるのも数年先かな」と思っていましたが、意外とブラウザのサポートが進んでいた事実を知りました。
Grid Layoutについての基本だけではなく、タイトルにもあるようにFlexboxやFloatとの性質の違いもふまえてどう使い分けたらよいかわかりやすく説明してくれたセッションだったと思います。

しかし、まだまだGrid Layoutで実装されたサイトは少ないと思うので、もっと参考にできる実例がほしいところですね。