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

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で実装されたサイトは少ないと思うので、もっと参考にできる実例がほしいところですね。

「ここまでのJavaScriptスタンダードと、これからのJavaScript ES6について」

ECMAScript6に関する説明のセッションかと思いましたが、主にJavaScriptのオブジェクトを理解するためのセッションでした。
普通のセッションとは違い、登壇者の方がリアルタイムでプログラミングをしていくという勇気のある内容にもなっていました。

ECMAScript6についてはBabelと一緒に簡単に紹介されました。

「Gitの入門とGitを利用した共同制作方法」

Gitの基本的な使い方（これは参加者のほとんどがすでに使用していました）の紹介、それとGitのブランチ運用のモデルとして有名なGit Flow, GitHub Flowについての紹介でした。

neccoでももちろんGitを使用して開発しています。ブランチについては現在はmasterブランチは本番サーバーと、 developブランチはテストサーバーと同期するようデプロイをする形で運用しています。

「CSS設計方法論とその先」

最新のオススメCSS設計手法やテクニックかと思いきや、そういう話ではありませんでした。

CSS設計で悩む問題はそもそもコーディングの段階だけで解決できないこともあります。それが問題として表面化するのがCSSを書く段階であって、コーディングの前の工程や後の工程も考慮して設計しないことには解決できないといった話で非常に共感できる内容でした。

終わりに

セミナー終了後の懇親会でも登壇者や他の参加者と技術的な話で盛り上がり、大変勉強になった1日となりました。
neccoメンバーはCSS Niteのような各種セミナー・イベントに数多く参加していますので、これをご覧のみなさん、どこか別の勉強会でお会いしましょう！

今回のセミナーに興味のある方は是非フォローアップでセッションをご覧ください。
http://cssnite.jp/lp/lp54/

※イベントFacebookページより一部写真を拝借いたしました。

---

📮 お仕事のご依頼やご相談、お待ちしております。

お仕事のご依頼やご相談は、お問い合わせ からお願いいたします。

🤝 一緒に働きませんか？

下記の職種を募集中です。より良いデザイン、言葉、エンジニアリングをチームで追求していける方をお待ちしております。詳細は 採用情報 をご覧ください。

• フロントエンドエンジニア
• アシスタントフロントエンドエンジニア

🗒 会社案内資料もご活用ください。

弊社のサービスや制作・活動実績、会社概要、ご契約など各種情報をまとめた資料をご用意しています。会社案内資料 からダウンロード可能ですので、ぜひご活用ください。

（2024年11月時点）