meguro.css#3 でstyled-components + CSS Gridに感じる無限の可能性についての話をしました

styled-componentsとCSS-Grid組み合わせるとなんかいろいろ出来るぞ！みたいな事に気付いて、meguro.cssの枠に空きがあったので「ここで話すしかない！」みたいな感じで参加しました。前回はゴリッとJSなdart-sassの話をしてしまったのですが、今回はかなり趣旨に使い話ができた気がします。

ちょっと前から「もうちょっとUI（UXではなくあくまでUI）についてもう少し素振りしたいなー」みたいなことを思っててDaily UIをCollect UI 見たりしながらチマチマやっていた所でいろいろ脱線したのが今回の産物になります（電卓とかの例はまさにそれです）

元がデザイン素振りのためのものだったりするので、パフォーマンスだったりブラウザ依存とかは考慮してない夢の世界の話ですが、一部は真面目に使えるケースもあるんじゃないか？と思ったりもしています。
画的に地味ですが、タイムテーブルとかは技術カンファレンスとかのやつで使えるのでは？とか思ったりしています。

デモ（コールドモック）：https://styled-component-css-grid.netlify.com/
ソース：https://github.com/terrierscript/css-grid-example

スライドの補足情報

こぼれたりした話を雑に

Gridについて

• とりあえず一番言いたかったのはCSS GridがすごいしそこにJavaScriptの動的な処理を加えるともうすごいぞって事です
• CSS Gridを勉強しようとするとrows / columnsで説明してる話とareasで話してる話が混ざってたりすることが多いのが結構厄介で「これはどっちの話をしてるか？」を見極めるとわりと意味がわかってくる印象があります。
• あとは習うより慣れろ的な感じがあります。最初取っ付きづらいですが、よくわかんなくても何度か書いてたらだんだん慣れてきます。
• Gridってページ全体のレイアウトで少数しか使わないような感じかな？と思っていたのですが、ネストするの出来るし、twitterのカード程度の複雑なものであれば十分使い所ありそうだなと思ってます
• grid-gapをしれっと使ってましたが、こいつがすごく良いです。
• min-contentsとかmimmaxとかその他付随していろいろ使える値も増えてます（ここは深く追ってません）
• auto-fillとかauto-fitの話もこぼれましたがあれも楽しそうです

デモの補足

• タイムテーブルの線はそのまま1pxで引くと重なって2pxになってしまうので、topとleftだけ指定するちょいダサCSSで解決しました
• カレンダーはrepeatではなくtemplate-areaを使うパターンとかありましたが、なんだかんだでrepeatが一番ベターな感じでした。
• オセロはゲーム系で再現するもので一番ラクだったのでやったものの、ロジック考えると配列データで持たないといけなそうだしGridで描画出来るのが嬉しいか微妙な可能性が。。（実際は将棋の棋譜とかのほうが相性良さそう）
• 履歴書のやつは線の領域をbackground: blackを敷いて線っぽいものを再現してます。他の例示としてるborderをそれぞれにつける方法でもやってみたのですが、1px微妙にずれるみたいな現象があって、意外とgridで線を引くのは一周回ってアリになる可能性もあるかもしれないなーとも思っています。
• リーンキャンパスのレスポンシブは実際にはarea情報を二次配列化 -> 配列を行列っぽく回転 -> stringのareaに戻す みたいなことをやってましたが説明しきれなかったのでスライドではべた書きで説明しました

その他補足

• AreaのコンポーネントをTypeScriptのenumで厳格にするみたいな話もありましたが流石にTypeScriptの話入れると爆発するので削りました。
• styled-componentsでレスポンシブとかしてるのはこんな感じでやるといい感じになりました。
  https://qiita.com/terrierscript/items/5f68eb618a2873760f3d
• VSCodeやatomのマルチライン使うといい感じの編集ができます https://twitter.com/terrierscript/status/1042773608349589504
• spreadsheetも真面目に下書きツールとして有益です（ただ、空セルだったら「.」で埋めるみたいな事したかったのですがうまくできなかった）
• しれっとrangeするのに Array.from({length: 10}) みたいな術を使ってます。このへん僕もメンバーにしてもらってる You-Dont-Need-Lodash-Underscore にたくさん載せてるのでご興味あればどうぞ
• 公式のreact-font-awesome 使ってみたら思いの外いい感じでした
• demoにはreact-cosmos使いました。storybookよりもfixtureの書き心地が良かったりレスポンシブ確認がやりやすいみたいな点はありつつ、名前のフォルダリングがうまくいじれなかったりするのでトータルでいうとどっこいどっこい・・・？
• React + styled-componentsをベースにしたCodepenやCode Sandboxみたいなのがあれば楽しそう、みたいなのを一瞬思いました。
  （何故かCode SandboxでGridを書くとうまく動かず、サーバーで処理している可能性がある・・・？）

反省など

• 10分をちょっとだけ超えてしまった（前半の説明削るか、ネタ１つ削ってよかった）
• speaker deckのURLがstyled-componentになってしまった
• 勉強会でのLTというのを人生でずっと避けてきたが、二〜三回程やってみてこれまで社内向けでやってた自分のスタイルでちゃんといける感じが持ててきた
• やりたいことは後半のサンプルを見せたいってことだったのだが、どうしても出たてのモノの組み合わせという性質上説明しないと伝わらないみたいなのがあってこういう形にした。が、もっと振り切ってよかった気がする（最初に一個サンプルをドカンと見せてからそれにあわせて説明とか）
• スライドを割とちゃんと作らないとイメージが湧かないタイプなのだけど、一回ガツンと作り直したりもしててもうちょっと効率化したい気持ち
• スライド形式で作ると記事とは別な視点やノリで物事を書ける感じがあって、発表しないけどスライドだけ公開するみたいな文化できたらいいのにと思いつつある
• 僕もスライドに犬の画像入れればよかった。もっと無意味に犬の画像を使っていきたい（という後悔があったのでせめてこの記事のOGPは犬を使った）

OGP用のいぬ