コード日進月歩

しんくうの技術的な小話、メモ、つれづれ、など

Object-Oriented Conference 2024​​で『オブジェクト指向CSSが叶えたかったことと、CSSのいま』という登壇をしてきました

発表したスライド

speakerdeck.com

伝えたかったこと

  • オブジェクト指向CSSはどういう問題意識から生まれ発展したのか
  • その後の世界ではどうなったのか
  • いまだとどんな選択肢が取りうるのか
  • フロントエンドやっている人は知っている人が多いので、普段フロントをガッツリやらない人向けへの現状共有

補遺編

今回のプロポーザルを作ろうとした動機

直近ではRuby on Railsでバックエンドを書くことが多く、CSSには触れるものの自分から能動的に何かをするわけではありませんでした。

そんな中で改めてCSSを書き直す場合、どのようなアプローチがあるんだ?というところの知見がまったくなく、そのあたりの知識を仕入れたいというのがありました。

そんな中、4年ぶりのObject-Oriented Conferenceが開催されるというところで昔に読んだ下記の本のことを思い出します。

『Web制作者のためのCSS設計の教科書』を読み終わったよメモ - コード日進月歩

この本では命名規則ベースの設計手法が書かれているのですが、ここでオブジェクト指向CSSが紹介されていたので、ここからたどっていくことで色々と話が書けるのでは?ということでプロポーザルに応募しました。

登壇駆動知識インプットと紆余曲折したポイント

もともとバックエンドかつ業務も基本はバックエンドを書くことが主体なので、完全に個人の時間にいろいろと知識のインプットを進めました。

今回トピックとして

  • 命名規則ドリブンのCSS名付け
  • JavaScriptと共存しているCSS管理手法
  • 直近のCSS新仕様
    • このあたりは話の筋書き的にカットしたかったんですが、プロポーザルに書いてしまったので取り上げる必要がでてきてしまい…

あたりをいい感じに一つの話の流れとしてまとめる必要があったので、どうつなげていくとキレイかがかなり悩ましいポイントでした。

うんうん悩みながら整理していったのですが、悩んでる最中で色々なインプットと巡り合うことができ、なんとか着地させることができました。今回大きく助かったのは以下の3つです。

  1. CSS設計って最近こういう感じだと思うんですけどどうですか - Speaker Deck
  2. 次世代Webカンファレンス2023のCSSパート
  3. 書籍:Tailwind CSS実践入門

今回取り上げられなかったところ

CSSの影響範囲(いわゆるスコープ)の話に関してはShadow DOMの話もあったのですが、今回のテーマにはイマイチマッチしていなかったのでカットしてしまいました。ただDeclarative Shadow DOM が出てきたのでJSなしでできることで違う世界観が出てくるのかもなという感覚を感じています。

また、詳細度がらみの話はカットしてしまいましたが、ブログにはまとめてあります。

登壇後記

  • 本当にCSSの話だったので、全然お客さんいないのではないかと思ったらそこそこに人が入ってくれたので助かりました。
  • 前段で『非デザイナーのフロントエンドエンジニアがOOUIを考える』があったので、ちょっと地続きの話が聞けてよかったです。
  • めっちゃ喋りは失敗しており、最初最大化し忘れたりなどしつつ変な飛ばしはなかったかな…とか…色々振り返ると思います。
    • そうなってもいいように資料でよんだらちゃんとわかるようにはしたつもりなので傷は浅くありたい
  • 今回の資料整理でデザインシステムやデザイントークンの話は面白そうなトピックが多いので、そのあたりも含めてインプットはしていきたくなりました。
  • OOCというカンファレンスが色々な技術バックグラウンドを持つ人が多かったので、懇親会でも様々な話が聞けてとても勉強になりました!

privateのテストコードに関して説明するときに見たいスライド『privateメソッドのテストって書かない方がいいんだっけ?』

初学者にスッと出すと良さそうな記事なので記録です。

資料スライド

asumikam.com

みどころ

privateはしてはならない、ということに対して実体験をもとに苦しんでいったことが書かれている。世間的によしとされていないprivateのテストに関して辛かったポイントが記述されているので、追体験しやすく、知見がないメンバーに知ってもらうにはおすすめの資料でした

関連リンク

『「Tailwind CSS実践入門」出版記念イベント』に行ってきたよメモ

「Tailwind CSS実践入門」出版記念イベント - connpass』に参加してきたのでそのメモです、

各発表の感想

※資料スライドは見つけたら貼ります。


基調講演

感想

  • CSSを普段遣い死ている人がなぜtailwindを選択したかという話には納得感があった。チームでどう使えるかの大事さ。
  • CSSのコードレビューの真剣さというのもそのとおりだなという気になってしまったので、もっと本質的なレビューをしたいというときにはたしかに良いのかもという気持ちに。
  • ユーティリティファーストの話もそうだが、書籍として歴史の部分に重きをおいているのを改めてしれてよかった。

関連リンク


CharcoalとTailwind

スライドは見つけたら貼ります

感想

  • pixivで開発しているOSSデザインシステムCharcoalとtailwindの話。
  • @charcoal-ui/tailwind-config でtailwindの細かな設定を利用でき、@charcoal-ui/react を使うとpixivっぽいUIも再現できる
  • 基調講演の話でもReactではない環境でも使えるデザインシステムを…という話だったので実例として見ることできてよかった。

関連リンク


Iconify for Tailwind CSSのすすめ

感想

  • すべてのIconファイルを使うためのIconifyのtailwind用のプラグインの話
  • tailwindに限らずこのような仕組みがあることを知らなかったので学びが多かった
  • ライブラリが複数ある場合の勘所みたいなのは難しいな…と思いながら聞いてました。

関連リンク


引数のあるmixinのような仕組みをプラグインとして用意する

感想

  • mixinみたいなところをtailwindで実現するための話
  • tailwind側の実装実例を交えながら記述の説明をされていた

関連リンク


トークセッション

著者の @f_subal さんと @harukasan の対談

内容メモ

書籍ではtailwindCSSの思想の話が多かったが、ここがよかったなという話があれば

デザインシステムを作るうえでテーマの制約ができること、たとえばスペーシングを使うのがカスタマイズできるしそれをpureCSSに近い技術でできるところ。 2020年当時だとそれが一番できるのはCSS in JSが主流だったが、それに近いメリットが得られるのが大きかった 利用としているところが全てがReactとは限らない、たとえばRailsのテンプレートエンジンなどもあるので、Reactでしかつかえないデザインシステムは避けたい、というところでもよかった。

実践入門といいながら、入門者を対応していない書籍のように思えるがなんでこういう書き方になったか?

著者観点としては具体特定のユースケースをなぞる形式の本よりも、原則などを教えてくれる本のほうが、自分だったらどうするかの置き換えコストが低いから。 本としてもそれは意識されており、実践的にな部分は後半の8章、9章。 また特定のユースケースだとCSSフレームワーク部分以外(ReactなどのJS)の選択に迷うのでそういう部分もあってこの書き方になった。

6章のコンポーネントの話について

tailwindはコンポーネントを作るときには苦手な部分がある。 tailwindはtailwind.configにあるクラスしかつかえないので、依存せずポータブルなものをつくるときにはCSS in JSのほうがよい。

pixiv社ではどう使っているか?

複数のプロダクトで利用している、プロダクトごとのprimary colorは異なるが、ほかはだいたい同じなのでブランドカラーのサポートなども難しい話ではない。

実際に使っていることについての話

「ここはなんでAribitaryValueなんですか?」みたいなやり取りが増えた。また9章で取り扱っている話は実態件を元にした話が多い。 また、デザイナーがあんまり協力的ではない状態で採用してもデザインシステムの構築は難しいと考えているので、一緒に考えられる人がいるときに使うと良いと思っている。

バックエンドエンジニアも読んでほしい部分に関しては、昔だったらCSS in JSなどしか受けられない恩恵がtailwindでも受けられる テーマに準拠する、動的にスタイル分岐をさせるなどは良いポイント。

Bootstrapの二の舞いにならないために

addComponentsを使ってcardのようなものを準備するとBootstrapのようになってしまう。 どちらかというと書籍「Every Layout」にあるようなデザインパターンをaddUtilitiesで使うようにした方が良い。

感想

  • 書籍の内容を掘り下げつつ、tailwindの苦手な部分の話などが聞けた。
  • なかでもCSS in JSとの対比はいくつかあったので、tailwindの得手不得手みたいなところは学びがあった。

関連リンク


全体を通しての感想

  • 書籍がとてもよかったので話を聞きに行ったが、pixivでの利用事例などが聞けてよかった。
  • 基調講演のスライドにもあったが、考え方の本ではあったのでクロストークでその根源が聞けてよかった
  • バックエンドを普段やっている身としてはスタイリング技術選定の助けになる部分が多かった
  • 時間の関係でトークセッション後には会場を後にしたが、もっと話についていける知識を身に付けられればな…と感じさせられる場だった

関連リンク

実況の中で以下のやり取りが非常にためになったのでメモ

かっこの英語表記をざっくりまとめる

あまり聞き慣れないのでメモとして

一覧

記号 日本語での呼び方 英語表記
( ) 丸括弧、小括弧 parenthesis
[ ] 角括弧  bracket / square bracket
【 】 隅付き括弧 lenticular brackets
「 」 カギ括弧 quotation marks
{ } 波括弧 / 中括弧 braces / curl

関連リンク

3rd Party Cookieの歴史を学び直したいときにみたい「3rd Party Cookie Advent Calendar」

資料について

3rd Party Cookieのカレンダー | Advent Calendar 2023 - Qiita

内容について

基礎的なCookieの話から、3rd Party Cookieが廃止になるに至るまでの経緯の話が丁寧に書かれている。そもそも2024年の3rd Party Cookieの段階的な停止がどれだけ不味い問題なのかを歴史を擬えて説明しているので、いまから学び人への最初のインストールには最適なブログ記事となっている。

関連リンク

ActiveRecordの内容に変化はないが、updated_atだけ更新したい場合はtouchを使用する

簡易な記録テーブルなどで、時刻などを更新をしたいときの豆知識

環境

$ rails -v
Rails 7.1.2

やり方

該当レコードで .touch をすると自動的に保存がされる

book.updated_at
# Thu, 01 Feb 2024 14:37:18.696490000 UTC +00:00

このようなレコードに .touch をすると現在時刻が入る。

book.touch
# true
book.updated_at
# Thu, 01 Feb 2024 14:37:37.490409000 UTC +00:00

応用編

任意の時間を設定することもできる。

book.touch(time: Time.new(2015, 2, 16, 0, 0, 0))
book.updated_at
# Sun, 01 Feb 2015 00:00:00.000000000 UTC +00:00

注意点

GitHubの該当コード部分 にも書いてあるが、特定のバリデーションは省略され、特定のコールバックしか動かないので注意

Please note that no validation is performed and only the +after_touch, +after_commit and +after_rollback callbacks are executed.

関連リンク

最新のトップレベルドメインのリストを見たいときはICANNのサイトにリストがある

最新リストを探したいときにどこを見ると良さそうなのかざっと調べる

前提としてTop Level Domain(TLD)とは

過去のまとめたものがあるので下記参照のこと

TLD と eTLD と eTLD+1に関してざっくりまとめる - コード日進月歩

TLDのリスト

TLDのリストは管理をしているICANNのサイトから見ることができる

List of Top-Level Domains - ICANN

なお、TLDの利用状況に関しては下記にドメインごとのレポートが用意されている

Monthly Registry Reports - ICANN

なお、現在Generic Top Level Domain(gTLD)は申請制のため、ICANNが敷く審査を通過すれば誰でも増やすことが可能。

関連リンク