DIST.13「トクするCSS」に出演しました。


2016年12月2日に開催されたDIST.13 「トクするCSS」にLTスピーカーとして出演しました。

出演の経緯

元々DISTというイベントの存在は知っていたのですが、詳細まではよく知りませんでした。 イベントページ公開直後に社内slackで(募集してるみたいだよ)というDMが飛んできたので勢いで応募しました。

主催側でオファーがかかっていたまぼろしの宮田さん(@yuki_m015)やICSの鹿野さん(@tonkotsuboy_com)が出演されるということまではわかっており、知っている人が出演するという安心からかあまり気負いせずに参加できたのでラッキーでした。

発表内容について

テーマである「CSS」について特に鉄板ネタを持っているわけではありませんでした。

唯一、webデザイナーになった当初から意識し続けていた「CSS設計」という話題ならばなんとか喋れそうな気がしたので、内容自体はそっち方面ということは決めていました。

タイトル「君の名は。」について

私は文章を書くときもスライドを作るときも真っ先にタイトルを決めてしまうタイプなのですが、今回はその時マイブームだった「君の名は。」を採用しました。

ですが、そのあとのちょまど騒動の流れでこの記事が目につき、めちゃくちゃ後悔しました(笑)

発表内容とは関係の無いネタ(例えば、アニメやマンガ、ゲームなど)を散りばめたり、そこを押してこられると、元ネタを知らないとさっぱり分かりません。発表内容をより伝えるアクセントとして使うのは良いですが、コンテキストが共有できていないものはなかなか伝わりづらいですね。

「ここを気をつけるともっと良くなる勉強会の発表」 より引用

次からはちゃんとタイトル付けていこうかなと思います。

内容の決まった経緯

テーマである「RSCSS」ですが、これは今流行っているCSS設計の主たる方針から外れる部分があります。 そこがあえて主流から少し外れたテーマの対比がシナジー効果を生み出さないかな〜?みたいな気持ちでセレクトしました。

今の主流な方針としては、詳細度をフラットに保つべくBEMなどの命名規則がよく用いられています。 ユニークなclassを付与することで、対象の要素にスコープするというものです。 BEMを使えば全てのclassの詳細度は(0,0,1,0)をキープし続けられるので上書き戦争で悩むことはなくなります。 詳細度 – CSS | MDN

一方で、RSCSSはユニークなのはComponentのネーミングのみでElementは他のComponent内のElementのネーミングと高い頻度でバッチングします。 そこで、意図せずスタイルが当たってしまうことを防止するために子セレクタによる指定をするというものです。 完全にHTMLの構造に依存するため、かなりComponentの粒度に気を使う必要はあります。

伝えたかったこと(技術面)

私は 「BEMって長くて面倒くさいよな!RSCSS使おうぜ!」 という意図のLTをしていたわけではありません。 RSCSSに一度触れるとBEMでは意識しなかった部分が見えてきます。

コンポーネントの粒度に対する意識

BEMで初学者がやりがちな.Block__Element__Elementなんかも、RSCSSを一度経由することで、「そこでは改めてblockとして切り直せばいい」という考えにスムーズに持っていけるのではないか、と思っています。

レイアウトに対する意識

これも初学者に多いかと思うのですが、例えば.blockそのものにmarginやfloat、widthなどを与えてしまうと使い回しは困難になります。 LTではお話できませんでしたが、RSCSSでは 「Componentにレイアウトに絡むスタイルは付けない」 というルールがあります。 そのため、レイアウトに関するスタイルはElementにあてる必要が出てきます。すると、必然的にComponentを配置する際はそれをElementとして扱うために親Componentを用意してあげる必要があります。

一度この思想に触れることで、実案件でBEMに戻った時にも、レイアウトはレイアウトで考える、スムーズなコーディングができるのではないでしょうか。

(このあたりの考え方はSMACSSに由来するものだと思われますので、興味のあるかたはそちらも学習してみるとより理解が深まるかと思います!) SMACSSによるCSSの設計 – CodeGrid

……などなどと、いろんなことを思いながらの内容セレクトなのでした。

感想

LTしてみたことについての感想です。

質問を頂けた

質疑応答の時間に、私宛に質問を頂けたのがすごく心に残っています。 質問がくる=内容に興味を持って頂けたということなので、嬉しくてめちゃくちゃ早口でレスポンスを返すという舞い上がりっぷりを披露してしまいました。

反省点

LTに対する内容が多すぎたため、かなり早口の説明になってしまいました。 もう少しフォーカスしてゆっくり、丁寧に、深くお話するのがLT向きかなとスライドを作る途中ずっと思っていました。

また、当日のLTでは一部画像の引用元を明記していなかったため、後日その点について指摘を頂きました。 (当該スライドは削除して公開しています。) 一人やらかすとコミュニティ全体がモラルの低い集まりという印象になってしまうということは色々なところを見てきているのですが、当事者としての意識が低かったなと反省しています。今後気をつけます。

伝えたいこととか

技術面ではなく、LTすることに対してです。

一番邪魔なのは「自意識過剰さ」

私は 「どうしてあなたの話をいつまでもみんなに覚えてもらえてると思ってるの?」 と自分に問いかけることにしています。

自分みたいな弱小なエンジニアの発表が、聴衆全員に興味を持たれて、少しでも間違っていたら全員からマサカリが飛んできて…みたいに思ってしまうのは、ここで悩んでいる人にはちょっと早すぎます。

由来は何かのマンガの一コマだったと思うのですが思い出せません。ですが、こう考えることでかなり登壇に対するハードルは下がったので、いつか人前で話してみたいという人にはおすすめです。

DISTはいいぞ

DIST自体がかなり注目のイベントであるため、そこに参加することでかなりいろんな人とのつながりができます。

また、主催オファーのかかってる人は界隈の経験豊富な方々で、その人達と同じ場所に出演したという事実はかなり自信につながりました。

資格などもなく、ただ早い者勝ちで応募するだけでその方々と同じ舞台でLTができるのはDISTのすごいところです。

テーマは毎回違うので、自分の得意とするテーマが回ってきた時はぜひLT枠での参加をしてみることをお勧めします! (トークはちょっと…という方でも、見る側や懇親会、スタッフも募集されてるみたいなのでぜひ参加してみてください!)

関連リンク

動画アーカイブ DIST.13 「トクするCSS」 – youtube

発表スライド 「君の名は。」 – Speaker Deck

補足解説記事 RSCSSとFlexboxを使ってまるっと1ページコーディングしてみた。