ep.58 デザインとフロントエンドの関係を Tailwind CSS から考えよう | UIT INSIDE

2020/08/21 に公開3121 views

このエピソードについて

@spring-raining が @f_subal @potato4d に Tailwind CSS やフロントエンドにおける CSS 設計について話を聞きました。

ゲスト紹介

ピクシブ株式会社フロントエンドエンジニア
Tailwind.css + classNames() を型安全に扱う TypeScript Language Service Plugin を書いた

Tailwind.cssとは

https://tailwindcss.com/
Utility-firstなCSSフレームワーク
CSSのプロパティがそのままクラス名と紐付く設計
- Atomic CSS: https://acss.io/
高いカスタマイズ性も特長

実務で感じたTailwindの特長

pixivのデザインシステムを構築していく際の様々な問題
- 最初はReact componentを横展開していく計画だったが、Reactを採用していないプロダクトへの導入が課題
- 自前のCSSフレームワークを作るコストの高さ
メタCSSフレームワークとしてのTailwind.cssの可能性

TypeScriptユーザーのためのirontail

https://github.com/fsubal/irontail
Tailwindが純粋なCSSフレームワークであるがゆえの問題
- エディタの補完だけでは対処できないバージョンアップへの追従
TypeScript language serviceを作る際の話
classNamesとの組み合わせにより動作
- https://github.com/JedWatson/classnames

Tailwindのメリット

どんな既存のプロジェクトでも導入でき、どんなプロジェクトでも通用する可搬性
JavaScriptとCSSの境界が明確
Utility-firstでありながらも、クラスの組み合わせにより自然とデザイン規約に従うことができる設計

デザインシステムの例外とその対処

デザインシステムを設計しても、例外的な要求はしばしば発生する
Utility系のクラスを用意して上書きしていくこともできるが、あえてstyleを直接書いて可視化するのも手
- 実装側からデザインシステムへのフィードバックを生み出す

これからのCSS設計

Tailwindの登場によって、従来のCSSフレームワークともCSS-in-JSとも違うCSSの複雑化に対する解が生まれた
CSSを設計・実装する上で、今後どのようなことが重要になる？
- spring-raining: メディアクエリの多様化への対処
- f_subal: CSS設計を通したエンジニアとデザイナーの意識の共通化
- potato4d: フィールに対するCSSを超えた包括的な設計

Refs

フロントエンドエンジニア / フロントエンド開発センター| 求人詳細 | LINE株式会社
- https://linecorp.com/ja/career/position/475
BGM: 騒音のない世界
- https://noiselessworld.net/
SE: 魔王魂
- https://maoudamashii.jokersounds.com/

採用について

使用素材・クレジット

BGM&SE

音声書き起こし

1. オープニング 00:00

Guest 00:00
こんにちは

Guest 00:02
こんにちは。

Guest 00:05
それでは、今週もイイテンサイドやっていきましょう。

Guest 00:09
UIT INSIDEは、ウェザーインターフェースと、テクノロジーを愛する開発者のためのポッドキャストです。

Guest 00:16
最新のウブ標準や開発、フレームワークの変遷、

Guest 00:20
uiやウェックにす関する言葉で、様々なフロントエングの情報をキャッチアップできる、フットキャッストをお送りしております。

Guest 00:30
twitterでのハッシュタグは、シャープUIT、アンダースコアインサイド、エピソードのご一援やご感想、リクエストなど、ぜひぜひツイートしてください。

Guest 00:41
でえ、今回のパーソナリティはえ、私え。スプリングレイニングと、あと、uyt

Guest 00:48
所属の。ポテト4dさんとあともう1人ゲストを有しております。えばさんをえ、今回お招きしました

Guest 00:56
今回は、この3人でお送りしたいと思いますそれではよろしくお願いします

Guest 01:02
よろしくお願いしますお願いしま

2. ゲスト紹介 01:04

Guest 01:06
では、今回。エスバルさん初めてえ、ご参加ということなので、ちょっとえ自己紹介をお願いしたいと思います。

Guest 01:15
あ、はい、インターネットネームエバルです。はい、普段はピクシブというか、え、株式会社というところでえ、フロントエンドエンジニアをやっています。

Guest 01:24
普段はまあ、リラクとリラックス。svgレイルズなどを書いていますよろしくお願いします

Guest 01:33
はい、よろしくお願いします。今回、えースバルさんをお呼びした。

3. Tailwind.css とは 01:35

Guest 01:41
テーマについてなんですけれども、今回はテイルウィンドcssについて、ちょっと取り上げたいと思います。で、え、この

Guest 01:50
えすばるさんは、このテイルインドcssをタイプスクリプトであ、片安全に扱うためのランゲージサービスプラグイ

Guest 02:00
を書かれたいということなので、え、今回はそこについて、まずちょっと見ていきたいなという風に思います。

Guest 02:07
では、まずちょっとテイルウィンのcss。多分ま知ってる方も知らない方もいると思うので、ちょっと。あ、ここは

Guest 02:16
あのテイルウィンドcaの大好きなポテト4dさんにちょっと紹介してもらいたいなと思うんですけど、

Guest 02:24
あ、了解です。じゃあ、簡単なテールウィンドcssについて

Guest 02:28
紹介えしましょうかね。まず1番。キャッチでわかりやすい説明をすると、皆さん多分これお聞きの方は、

Guest 02:36
ブートストラップを使ったことがあるかなと思うのですけれども、ブートストラップにですね。ユーティリティという項目で、mx1みたいなのがいっぱいあると思うんですけど、マジンとかを設定するやつですね。

Guest 02:50
あいたユーティリティと呼ばれる。

Guest 02:54
なんでしょう。命名がそのままえ、cssのプロパティに直結するような、ものを集めたユーティリティーファーストと呼ばれる。cssフレーマークとなります。

Guest 03:05
まあ、どういったものかっていうと、今あげたように、例えばmx1とかだったら、。テイルウィンドでは、設定をしていない限りは、0.25レムのマージンがせせ設定されるといった

Guest 03:17
具合にですね。えーま、特定のクラス名を組み合わせることによって、え、ユーザーインターフェースを実現するような

Guest 03:24
cssフレームワークとなっております。

Guest 03:29
ま、今下のデストとえーブーツフラップの例が1番キャッチーかなと思います。けれども、実はこういったうような

Guest 03:40
cssを。実際のプロパティと密接に紐付けるような試みっていうのは、2015年ぐらいからですね。ちょっと今

Guest 03:50
えーチャットに貼りますけど、2015年ぐらいからyahoo。これは、米国の方のyahooですね

Guest 03:56
えに、開発部体があった頃にですね。アトミックcssっていう手法をちょっと提案とかされていて、ま。これはもっとドジョッキなんですけど、このパディングか、20匹セルみたいなクラスメイトがをつけることで。

Guest 04:09
すごいドチョっていうな、命名によってえいを表現するみたいな。試みは結構

Guest 04:15
以前から行われていて、ま。これがより実用的な形でケをなしたのが、テイルウインドシーかなと思います。アトミックシスについては、え、ショノートに多貼ってもらえるかな。

Guest 04:28
思います。

Guest 04:28
はい、

Guest 04:30
まあ、そういうようなものでございますで、いくつか。特徴についても正確なんで紹介するとですね。

Guest 04:36
ま、uttファーストであるために、デフォルトではえ、特定の決まったユーザーインターフェースみたいなのを表現するようなものを持たない。例えば、

Guest 04:47
ブートスラップとかだと、ラブバーだとか、ボタンだとかっていうのは、結構頻繁に使うかなと思うんですけど、ま、そういったようなものを持たないっていうところ

Guest 04:56
もう1点がえーテールウィンウィンドcssはえ、テールウィンドドット、コ

Guest 05:00
コンフィグドットジェースというファイル。テイルウィンドの設定ファイルを記述することによって、自由にそのえールーセットってのをカスタマイズできるっていう風なところが、特徴としてあげられるかなと思います。

Guest 05:15
なんであれですね例えば、そのグレイはえ、テキストgly600はこのカラーみたいなところを結構細かく。

Guest 05:23
自分たちでカスタマイズできるっていうのがえ、特徴かなと思います。

Guest 05:28
ま、この辺りはですね結構膨大なプロパティを有する。フレえ、cssフレーマークとなるんですけど、ま、今時とかだったらですね。パージcssとか、cssの最適化が進んできたからま、それ故に

Guest 05:41
生まれた技術かなと思います。というところで、ざっくりとテミで、cssはこんな感じでしょうか。

Guest 05:48
はい、

Guest 05:48
ありがとうございます結構あれですよねあのま、ブートストップ

Guest 05:56
とあの、ちょっとそのお公式のページを見てもらうと、まあ、もうトップページに使い方とか書いてあるんですけど、結構あの、

Guest 06:05
あのcsfフレームワークとはいえ、結構あの僕最初使い方が結構違うなとはうん、うん、うん思ってて、結構クラスをいっぱいつけるっていうのは、そのクラスの名前がもうそれぞれcssのプロパティーンに紐付いてるっていう点で、

Guest 06:21
確かになんかまあのちょっと今までとはまあ違うし、

Guest 06:28
ま、そのさっきのそのカラーのところであったりとかも。カスタマイズ

Guest 06:33
っていうのも、比較的、そのあの、もちろん、その他のcssプレイマークもできるけれど、も、まそのjs側のアプローチからしやすいっていうところとかは、

Guest 06:42
確かにそうですね。特徴で、結構カスタマイズとかはやりやすい部類なんですかね。

Guest 06:50
じゃないですかね、結構うんなんでしょう。フレーム、自分たちよのフレームワークを作るためのフレームワークみたいな感じはこは

Guest 06:58
あします。ああ、なるほどなるほど、なるほ

Guest 07:01
はい。なんで。テイルウィンブが基盤にあって、その上で。

Guest 07:04
例えば今とかだったらすごい。javascript、コンポネント、ネイティブなえ、設計をすると思うんですけど。

Guest 07:14
そうですね、え、なんかそういった際にまずはクラス名からま、テイルウィンドをベースとして、jpスクリフトのコンポーネントを構築して、それによって、

Guest 07:23
それをえ、ああ、サービスだとか。アプリケーションのユーザーは、それに依存するような

Guest 07:28
ものの、ベースとなるようなええ、なんでしょう。え、自社フレームワークの土台となるような技術なのかな、という

Guest 07:36
ああ、なるほど、

Guest 07:38
フレームワークを作る、フレームワークみたいな

Guest 07:41
ところかなっていう風に

Guest 07:43
印象はけますかね。なるほど、

Guest 07:46
そうだったんですよ、ありがとうございます。

Guest 07:48
とういう使い方がしやすいものかなと。

Guest 07:52
ま、それ以外でも便利っちゃ便利なんですけどね

Guest 07:55
まあ、じゃあ便利なところは

Guest 07:57
また後で話していきます。はい、

Guest 07:58
聞かしてもらいたいと思います。このテイルウィンドウについてなんですけど、も、

4. 実務で感じた Tailwind の特長 08:00

Guest 08:07
おピクシブのうん、そのま、実務で結構うん。

Guest 08:12
今、そのテイルウィンドが使われ始めているというのをブログで読みまして、結構そこについて、

Guest 08:19
もうちょっと聞いてみたいですし、ま、そこからそのその今回のタイプと、ランゲージの

Guest 08:26
プラグインを書かれた理由っていうところをついても、ちょっと誤解したいなと思うんですけど、もじゃ、まずどういった感じで。今

Guest 08:36
採用されているかっていうところについて聞かせてもらっても良いでしょうか。

Guest 08:40
あ、はい、そうですね、まあ、なんかそうあのブログ見てるとなんかなんかもう既にかなり使われてるのかなっていう印象受けちゃうかもしれないですけど、まだあのあれですね。まだだいぶ採用し始めるところっていうっていうのは、まず前提として

Guest 08:51
ですね。あ、さい、まず私が最近ですね。あの、そもそもさっきも、自社クレマークっていう話が上がったと思うんですけど、なんだろう。

Guest 09:00
社内のデザインシステムみたいなのを整備していこうみたいな流れがありまして。はい、うん、はい

Guest 09:05
で、それをまあなんだろうな。あの、デザイナーさんと、あと、僕の他に何人かフロントエンドのメンバーと一緒になんだろう。ピクシブデザインシステムのえをま社内ライブラリーとして作っていくには、どうするかみたいな話をま進めていたんですね。はい

Guest 09:20
でそう、最初どうしようかと思ってたかというと、まあなんかまあ、ピクシブドットネットっていう。まあ、あの1番あの、

Guest 09:27
いわゆるピクシブですね。が、リニューアルしていく中で、あの、まあ、いろんなページがspaになっていく中で、まあ、あのリアクトとか使えるようになってたんですけど、

Guest 09:36
ま、最初はそこなんだろう。使われていたコンポーネントを横展開して、え、やっていこうみたいな。考えで最初やってたんですね。はい、うん

Guest 09:45
ま、まあ、それもまあそれで最初いいかなっていう風になったし、まあ、実際あのリアクト使うプロダクトが弊社だと最近は増えつつあるから。まあ、それでいいでかって思ったんですけど、

Guest 09:55
まあただ言うて、まあ、最初からあの気になってた点ではあるんですけど、そのまあ、全部のプロダクトがリアクトつか

Guest 10:04
増えてるという全部のプラトリアクト使ってるわけではないし、なんかじゃあ使ってないプロダクトはおけ受けれないのかみたいな。なんかところはちょっと最初からあの懸念としてはあったんですね。

Guest 10:16
そうそうそうでえまだからで、最初そこに対しては結構答えが出なくて、まあ、なんだろう。ちょっとさ

Guest 10:23
しょうがないけど、とりあえず、スタイルドコンポーネンツ版のコンポーネトライブラリーを提供するみたいなことでしばらくしてたんですけど、まあ、はい、

Guest 10:33
うん、まあただまあさ、うん、そうですね。で、僕テイルメインと出会う前はそれこそなんかそこをおかげするには、ブートストラップのようなものを自分たちで作るしかないんじゃないかっていう風に思っていて、うん、

Guest 10:44
ただ。でも、ブートストラップのようなcssレワークがあったとして、それをが欲しいかみたいな

Guest 10:54
話がちょっとあって、うん、まあ、実際例えばまあ、そもそもメンテも大変ですし。リアクトを使っている人が、ブートストラップのようなシーセフレームワークをベースにしたものを提供されて

Guest 11:07
使いたいかというと、いや、コンポーネントライブラリーでくれよみたいな気持ちになる

Guest 11:12
だろうみたいな、なんかし、なんか大変な上に多分できても嬉しくないだろうなみたいなえところにずっと課題を感じていて、えっていう流れで。そうですね。なんか、まあそのタイミングあたり、テイルインドs説を知ったのかな。はい

Guest 11:28
ていうのがあって、そう

Guest 11:29
まあ最初僕なんかユーティリティファーストというてんしか知らなくて、まあ、確かにあの、こういうアプローチのシーフルマークも面白いかもね。っていうという程度の入試やったんですけど、うん、

Guest 11:39
なんとえ、なんかよく見てみるとなか。テイルウィンドコンフィグってのがあって、え、デザインシステムから、なんか、そのメタフレームワークみたいなことができるというのを知った時に、え、これじゃんみたいな感じになって、そう

Guest 11:51
そして、そうですね、だから、いう感じのことをまあ、少し前にして、

Guest 11:57
そっからそうですね。まあ、なんだろう。デザインシステムの今の実装としては、なんだろう。色とか。フォントサイズの定数をまず。javascriptのオトとして定義してっていう。まあ、コアライブラリーがあって、うん、

Guest 12:11
それを利用する。ライブラリーとして、なんか、スタイルドコンポーネンツの実装と、テイルウインドのコンフィグをえ、ライブライト提供するライブラリーがもう1個あるみたいな。

Guest 12:21
なんか、

Guest 12:22
そういうやり方にすれば、結構あのま、現実的なコストで。まリアクトならまあのなんだろう。え

Guest 12:30
と、コンポーネントライブラリーとして提供されるんで。見た目以外のなんか、挙動まで踏み込んだ音型まで受けれるかもしれない。テイルミンド版はは、見た目しか。あの、あの、

Guest 12:40
担保しないライブライになるけど、まあそれはそれで便利だし、まあ、あのスタイルそうし

Guest 12:45
こよくなるかも。みたいな感じのところにまあ行きそうになって、いうのの、実装がまあ、あの、だんだんじゃで進んでいくっていうところに来たっていう、そういう感じですね。

Guest 12:58
あ、ありがとうございます。そうですね、あの、こうブートストラップみたいなものを1から作り始めるっていうのの辛さっていうのは、すごい

Guest 13:07
痛か痛感てか、もうよくわかりますね。で、

Guest 13:10
さっきあのおっしゃってたそのメタメタライブやりというか、そのフレームワーク、シェス、フレイマークのためのフレイマークっていうところの今回、そのよつにぴったりだったっていう。

Guest 13:20
そうですね。はい、デザインシステムなんで。

Guest 13:22
うん、そうですね、実際はブートサイト使う側としても、多分割と辛くなると思ってて、そううん、うん、うん、あの、実際あの、なんか使ってるとなんかまああんまり。なんか

Guest 13:33
btnタグとびなんか、特定のページで使うbtnタグをなんか上書きするcssが結局書かれちゃって、みたいな。

Guest 13:40
だって、多分大にしてあると思うんですけど、なんかあれが起こるぐらいなら、なんかうん、あんまりデザインシステムとしては、意味がなさないかなみたいな。うん、

Guest 13:50
そうそうそう確かに確かにそうそうそう

Guest 13:55
結構上書きされがち

Guest 13:56
刺されますよね。そう、大体そうそういう思い出しかないのがあったけど、

Guest 14:08
そうそうそうそうそうそうそうありがすよね、そうそうそうそうそう、うん、

Guest 14:16
うん、うん、うん、

Guest 14:17
うんそっか。じゃあ結構あのどテイルウィンドウをつかい、その採用し始めてからは、結構もうメリットしか感じないっていう感じなんですかね。

Guest 14:27
まあ、そうですね。あの、ライブラリーを作って、実地導入みたいなのはまだ始まったばっかりなんで、なんかひょっとしたら、またあの、その後課題は出てくるのかなっていう気がしてるんですけど、

Guest 14:37
そうですね。とりあえず、あのフレームワークを作るところの作り心地みたいなところは、結構現時点でいいですね。

Guest 14:44
うん、うん、うん、うん、うん、

Guest 14:49
ありがとうございます。うん、次にあの、うん。アイアンテールの話にもうろうかと思うんですけども、

5. TypeScript ユーザーのための irontail 14:51

Guest 14:58
これは、そのそのタイプスクリプトとの新話っていうのが今までだとあんまり良くなかったっていう。

Guest 15:05
一応、テイルウインドのツールチェーンとして、あの保管が出るツールっていうのは、なんかあのvs行動拡張があって、そこはあの受け受けれるから。まあ、なんかなんなら別に。確かあれ、html

Guest 15:17
タイプセゃない環境でも保管が出るから、まあ、そこはあの割と恩恵があるんですけど、そう

Guest 15:22
多分今あのどちらかと不安に思ったのが、今まだあの、そもそもデザインシステム自体をえ、プロタイピングしている段階だと、うん、

Guest 15:32
だから、コンフィグがひょっとしたら、なんか変わったりするかもしんないみたいな。まだそんなに安定してない状態から立つわけなんで、あ、だから、なんかコンフィグ変わったら、いつの間にかもうこのクラス実はもうテイルウィンドに存在しなくなったんすよね。みたいな、なんか、

Guest 15:46
なんか、そういう感じの壊れ方をすると、嫌だなみたいなところの懸念が生じ始めて、

Guest 15:52
そう、他の恩恵は受けれるけど、なんか間違ったら怒ってくれる方向の恩恵は、そういえばあんまないですね。みたいな

Guest 16:00
ところに不安が生じたので、なんかそれを解決するツールがあるといいのかなって思ったっていうのがきっかけですね。

Guest 16:07
ああ、なるほど、確かにあれですよね。こう増えていくクラスもあれば、減っていくクラスもあるかもしれないっていうけど、そうなんですよ。

Guest 16:15
うん、うん

Guest 16:17
で、今回はい作られたと

Guest 16:22
うん、うん、

Guest 16:23
そうですね、うん

Guest 16:25
うん、結構あの作っていく上で詰まったりとか、なんか工夫点みたいなとがあると

Guest 16:31
きたええ、そうですね、なんか、それは多分テイルミング的なところというよりも、そもそもあれですね。

Guest 16:36
私がタイプス、クリプトランゲージサービスのとか、あの、コンパイラーAPIみたいなところをあんまりやったことなかったんで、結構まずそこそがだいぶ。そもそもクロポイントだったんですけど、

Guest 16:46
そうですね。

Guest 16:47
うん、うん

Guest 16:49
ああまあそうだ、ちょっとこのあ、まあなんかたテレイの関係ない話にちゃうとか、コラペの話になっちゃうんですけど、まあいいや、うん、なんか、エリカのライフサイクルがどうなっとるんじゃ、みたいな話とかなああいう、

Guest 17:01
うん、他なんだ。カスタムの型エラーを返すには、そのか、そうなんか、ランゲージサービスの提供する好みソフトするといいみたいな。まあ、調べていって分かったんすけど、そうですね。

Guest 17:12
ただ、そこはそのメソットはプロミスを返すことができない。なんか、うん。カスタムエラーは、カスタムラーの配列だけを返してやってると

Guest 17:20
んでえ。しかし、テイルウインドのクラス1覧を出すためには。なんかなんかでどっかでポストcssのコンパイルを行って、その結果を元に貸すタメラの

Guest 17:30
結果を配したはずなんですけど、ポストcssの。コンパイル処理は実は非同期だとうん、

Guest 17:36
だから、これに関しては、まあ、なんかまあ、別に他やる時にあのカスタムエラーを出す。返すにやって、コンパイルが終わるまで待つとかは別にやる必要なくて。なんか、

Guest 17:48
バックグラウンドで、コンパイルしてるから、まあ、なんかたまたまコンパイル結果、クラス一覧が出来上がったタイミングでリクエストしてきた時は、帰る。そうじゃなかったら、帰らないっていうんで、まあ

Guest 18:02
いうので、とりあえずお茶もにしたっていうのがあったんですけど、そうそう

Guest 18:07
よく考えたら、僕も全然そういうランゲージサービスを書く知見がなかった

Guest 18:12
そうです。そうですね、なんかそうっすね、

Guest 18:16
そうですね、普通に片手書くのとは全然が違いますよね。

Guest 18:20
そうなんですよ、あの、うん、

Guest 18:23
うん、

Guest 18:23
あと、そうだなもうちょっとより利用側に近い。話だと、今回クラスネームズっていうあのリアクトでよく使う。クラスを組み立てるあいを対象にしているんですけど、これがはい、

Guest 18:38
うん、まあ、そうですねまたまあリアまあこれそう。まあ、そもそもリアクトで。もし、テイルウィンドを使うようなケースがあった場合。まあ、なんかうん、

Guest 18:47
うん、まなんでま。そういう場合って、そもそもさっきの文脈だと、スタイルドコンポネマ使えばいいんちゃうの。っていう話がある。あると思うんですけど、

Guest 18:54
ま、なんで。そもそもこういうことをやったかって言うと、なんだろうな。リアクト使ってるけど、なんか

Guest 19:02
全ページフspaとかではないプロダクト向けになんだろう。一部のページはリアだけど、一部のページはなか別にあのhtmだったり、テンプレートエンジンだったりするみたいなケースで、

Guest 19:12
なんか、両方のスタイルを揃えたいっていう目的で、リアクトのプロジェクトだけど、テイルウインドを入れるっていうユースケースがありうるっていうことを考えていて、うん、

Guest 19:21
うん、そうすると。だから、リアクトだけど、テイルウィンドウを使うってケースだと、まあ、どうせみんなクラスネームズ使うでしょみたいなうんうん、多分まあうん

Guest 19:31
まんあるいはまあ、clsxっていうオルタンティブあるんで、ま、そっちの可能性あるけど、まあ、大体みんなそれ系のライブラリーを使うだろうという見越しでで。だから、とりあえず、クラスネームズを対象にやるっていう風に決めたんですけど、はい、

Guest 19:43
そうですね、クラスネームズは、結構なんか、ものすごい自由な引き数を与えられるんですね。なんか、そう、

Guest 19:50
文字列をああえてもいいし、参考演算子でえあったら、文字列。この条件でこのクラスじゃなか。フォールスだったら、このクラスみたいな分けたり。

Guest 19:59
あと、なんか、オブジェクトのキーにクラス名を入れて、バリーの方にえ条件を入れるみたいな。なんか、すっごい書き方がきるんで、え、これがですね。あの、astな士というか、うん、コンパイラーAPIの分岐がものすごく不安になっていくみたいなん。

Guest 20:13
うん、イズストリング、リテラルだけを見ればいいわけではなくて、参考演算子だったら、えっ、どうするとか。そう、オブジェクトの

Guest 20:23
なんだっけ。プロパティ野菜みたいだけど、なんかだったらえ、どうする。みたいな条件がすごい膨らんでいって、うんわ、これは大変だなってなって、そうそうそういうのがあったんやんすけど、

Guest 20:33
うん、そっか、そうですよね、いや、でも、僕はそのクラスネームスを起点にするっていうのは、めちゃくちゃ賢いなとは

Guest 20:41
思いますね。普通にそのなんかうん、ただ単にそのあの、そのクラス。あの、ほんとにそのうん。

Guest 20:48
ジェイスxのそのクラスネームをパスするよりは、全然。

Guest 20:52
うん、

Guest 20:53
そんなそのなんて言うんですかね。まあ、普通に使うっていうところ、前提に置いて割り切った

Guest 21:00
一層になってるってのは結構賢いなとそうです。思いましたね、

Guest 21:03
なんか多分確かあのランページサービスのなんか、あのグラフキエルのランゲージサービスプラグインみたいなのがあって、あれもなんかその

Guest 21:11
確かなんだっけ。テンプレートリデラルにgqlっていうやつが前についてることを割とはいはいか仮定してちゃったりとかしてると、まあ、なんかじゃあそういう風に仮定置いてやっちゃって、まあいいのかなみたいな、うん、うんのもあったりしてなる。

Guest 21:26
あ、そっか、それgqlっていうのが、あの、そのなあの名前でみたいな。そういうはそう

Guest 21:32
そうそうそうそう

Guest 21:33
ああ、なるほど、はいはいはい、あ、うんところでも結構あれですね。そのクラスネームスっていうところっていうのを全くっていうのも、あ

Guest 21:44
繰り返しになっちゃいましたけど。うん、

Guest 21:46
そうですねは戦うん、うん、うん、

Guest 21:48
はい、ありがとうございます

6. Tailwind のメリット 21:50

Guest 21:52
で、これテイルウインドうん、僕、実はあの割と前にあのうん。最初に知った時はあるけど、結構ネガティブな印象。

Guest 22:02
はいはい、はい、はい、受けたんですね。はいはいというのも結構あの今までだと、あのcssijsはいっていうか、

Guest 22:11
バリバリ使われていて、うん、そこに

Guest 22:15
なんで今今更そのcssフリーマークなんだ。みたいな感想を。正直最初は受けたんですね。うん、うん、うん

Guest 22:22
で、まあ確かにカスタマイズ性とかは良さそうだが、うん、そのそのパディングとか、マジンとかうん、クラスで指定するなら、

Guest 22:32
普通にcssで書けばいいんじゃないかみたいな。

Guest 22:35
あの、ネガティブな印象は正直最初持ったんですよ。

Guest 22:39
うん、それに反してでも結構もう割ともうあの、普及道で言えばかなりの

Guest 22:49
ものだと思うんですよね。さっきのその公式のそのvsコード向けのインテリセンスであったりとかはま、今回のその

Guest 22:57
タイプ、まああいうアイアンテールに呼ぶようなま、ツールチェーンみたいなのが、うん。結構もうで出てるということは、割とそういう風に。

Guest 23:07
まあ、実際に使われ始めているっていうところの、まあ証明みたいなところですよね。で、この

Guest 23:14
これだけ使われるようになったメリットっていうのは、うん、まあ、ちょっと気になるところで、あの

Guest 23:22
さっきのそのメタシースフレームマークみたいな話を聞いて、うん、確かにこれはあの、そういう。まあ、今までのシーフレーマーク

Guest 23:32
ではないような、そういう可能性を。うん、さっきはちょっと見出したんですけど、もうなんか他にもっとこう。

Guest 23:39
なぜ、これほど使われるようになったみたいなのがあると、ちょっと機会お2人にしたいなと。あ、

Guest 23:47
じゃあ、軽く2、3個話してもいいですか。

Guest 23:50
どうぞ、どうぞ、なんか、私が初めにテイルウィンドウを使った時って、テールウンドって2017年の暮れに出たんですけど、あの、その頃全然知らなくて、2018年の夏ぐらいから

Guest 24:02
使ってたんですけど、あの当時はほとんどの人が会議的だったんで、あの、そうだよなという気持ちは。あったん

Guest 24:10
ですけど、私の中で、テインドのメリットっていうのはえ、まず、2018年の頃って、が、メインをbgsを書きながらも、

Guest 24:20
bjs以外も。当時フリーランスだったんで、いろんな案件をやっているみたいなえものもあって、まあ、もちろんその中には。

Guest 24:27
例えばハイパーアップが使われていて、すでに社内のデザインシステムがあるような。プロジェクトとかもあるんで、ま、そういった。既存のプロジェクトとかだと、もちろんこういうのが入る余地はないんですけど、まあ、いくつか新規のプロジェクトも、やっぱり結構

Guest 24:41
取り扱ってる中ではあって、特にまずbjが多かったっていうところがあって、

Guest 24:48
当時のビージの1番。メジャーな基法っていうと、scssと、スコープドによる管理っていうのが1番の

Guest 24:56
ところになっていて、まあ、これは今も変わっていないかつ。今後ビュー3でも、シングルファイル、コンポーネントが中心であるえ、以上はそうなる

Guest 25:05
ええのかなと思っていて、ただ、ちょっとその辺りをどうにかしたいなというのがまず1つ

Guest 25:11
としてありました。で、それは何かって言うとと、私たちは使う時は、ジャバスクリプトのコンポーネントの単位で利用するじゃないですか。必ず基本的にはリアクトコンポーネントやビーコンポーネントとして、uiのオブジェクトを表現している

Guest 25:24
にも関わらず、cssについての関心の余地っていうのが出てくる

Guest 25:29
うってのがあんまり良くないことなんじゃないかなと思っていましたので。本質的にコンポーネントロジックからcssに関する関心を抜き出したいというモチベーションがありました。と

Guest 25:40
で、そこにおいて、テロイドっていうのは、大元のコンフィギュレーションと、機械的なクラス名っていうところで、ま。それを完結することができるので、一見密結合に見えるんですけど、逆にコンポーネント内には、え

Guest 25:53
とスタイルに関する定義が一切なくなるっていう点が。すごく魅力的じゃないかなと思って。初めは採用を始めましたとで、

Guest 26:02
ここでもう1個まリアクションもあれば、ビーもあるってなってくると、やっぱり例えば、

Guest 26:08
それぞれのcssejsみたいなのって、作法とかが違ったりとか、使われる技術が使った。違ったりとかしていて、端的に言うと、下反省があんまり高くないんですよね。

Guest 26:18
ま、例えば、リアクトで使っているユーザーインターフェースって、必ずま似通ったものが出てきたりとか。すると思うんですけれども、そういったものを、例えば、同じ会社のaとbのプロジェクトで、ま。それこそ、デザインシステムじゃないですけど、何か共通で使いたいっていう

Guest 26:32
時に、テイルウィンドっていう共通言語があるとですね。簡単にコンポーネントとかを取り回せたりだとか、複数のプロジェクト間で、同じようなものをまげるっていうところができるけれども、そこの技術が必ず同じとは限らない

Guest 26:45
みたいなのがあって、そこを考える、もしくは1から我々で制定しましょう。っていう

Guest 26:49
のは、すごくカロリーが高いので、ま、そこにおいて、1番えカロリーが低いような選択肢として、まあ、事前にあるテイルウィンドっていう、共通言語をベースに制定していきましょう。っていうのが、1番コスパがいいんじゃないかなと思

Guest 27:02
って、使っていたみたいなのがあります、なんで結構なんでしょう。

Guest 27:07
何かを制定する時に、前提として、テイルウィンドっていう共通言語があると、やりやすいっていうのが、まず1つにあるかなっていうのと、まあ、その技術同士の過半制みたいなところに、

Guest 27:18
すごくメリットがあるかなと。私自身は考えているってのが1つと、あとえ、私あんまりシェースみたいなのをがっつり。お互いに関心を持つというか、なんでしょう

Guest 27:30
と、javaスクリプトで、コーディングをするときに、文字列を指定するときに、全部をテンプレートストリングにするわけじゃないじゃないですか。例えばシングルコーテーション、

Guest 27:40
いや、ダブルクロスエーションでま。ストリングリテラルとして、定義することもあるのに、シエインジェースっていうのは、結構どんなものであっても、

Guest 27:47
全てまそのjavascriptの動的な世界に関心を持ってしまうっていうところが、あんまり好きじゃないってのが私個人としてありまして。

Guest 27:56
ま要は、古きよってアクティブというクラスをアタッチするみたいなのは、かなり分離されていて良いかなと思って

Guest 28:02
いるま、必要なところだけが、ジャワースキリプトの関心を持ち、え、それ以外のところは性的に扱えるっていうところに、一定以上の利点があると感じていたので、まあ、

Guest 28:12
そのあたりも

Guest 28:14
がっつりとええ。cssがjavascriptを進色しないし、逆にjavascriptのcssをがっつり新色しないっていう点で

Guest 28:23
優れているかなと思っていて、えま、そのあたりが結構採用に当たって、

Guest 28:28
強いモチベーションとなるところですかね。ま、それらの3つをえーのいずれかに当てはまる、もしくは複数に当てはまる場合に採用しやすいかな、と

Guest 28:39
いうような印象があります。

Guest 28:42
あ、なるほど、なるほど、あれですよね、過半性っていうのはもう確実ですよね、これはそうですね、うん

Guest 28:50
うん

Guest 28:51
と、多分どのcssイジュースも勝て勝てないっていうか、まか勝ちようがないっていう

Guest 28:56
ですね。まかつトンマを変えたい、例えば、こっちこっちで

Guest 29:00
ベースカラーが変わりました。みたいな時には、我々が気にするべきは、テイルウィンドcs、コンフィグcssだけでいいっていうのは

Guest 29:08
一定以上の利点なのかなと思い

Guest 29:11
ます。

Guest 29:23
そうですね、まさっき下半戦とか色々あったと思うんですけど、まあ、やっぱそうですね。自分は、あの、テールウィンドのデフォルトの設定を使ってなんかするっていうことは、あんまやってなくて、ま。とりあえず、最初から改造すること前提ていう使い方をしてたんです。

Guest 29:37
そもそも、デザインシステムをやっていく潮流が多分、色々世間的にあると思って、そこに潮流に乗っかったっていうのは、結構1つはまず大きいと思うんですけど。はい

Guest 29:46
で、それでやっていくにあたってま。その組織によっては、なんか大体。うちは、あの、全てのプロダクトリアトで書いてるから、最初からリアクトで作ればいいよね。って言えるケースはいいんですけど、そうじゃないケースでどうするかっていう問題があって、

Guest 29:59
だから、さっき言ったような。まあ、あのフレームアクアグのスティックであるっていうのは、結構あの、かなり大きいポイントだったのかなとは思ってますね。そう、

Guest 30:06
結構実際、あのテイルウィンドのマニュアル見てるとすごくって、なんかあの、なんかユースケースとして、なんかwebパックでやる方、ポストcsscliでやる方法、ガルプでやる方法を。

Guest 30:17
ララベルのコンピグでやる方法とか。んか、あの

Guest 30:22
すごい。なんか、あらゆる。無断な環境からレガシーな環境まで、なんかあの入れていくぞみたいな、あの気運を結構感じるところがあって、そこはすごい。

Guest 30:32
あ、もう最初からそうですね。なんかうん、

Guest 30:35
あの最初からそのなんだろう。コンポーネントライブラリーとか、え、csjとかが。入れづらい環境にも。モダンなデザインシステムをやっていくぞっていうのを考えられているっていうのは、ちょっと普通に偉いポイントだったかなっていうのがある

Guest 30:49
ますね。そうっていうのにっていうのに加えてまさっきのまあ、最初に言ったあの、ブートストラップのタイプのシースフレームワークがえ、辛いっていう問題

Guest 30:58
みたいなのがあって。そうですね。うん、そうじゃない形のcssグレーで、まあなんだろう。ま、規約というか、秩序を保ちつつ。

Guest 31:07
さっきので、あらゆる。技術をスタックの現場に入り込めるような形でえ、実装されているっていうポイントがまあ重なったのがよかったのかなと思ってますね。はい、

Guest 31:20
うん、うん、うん、

Guest 31:21
ありがとうございます。そうですよね、あの、そのカスタマいそのbotothアップ的な辛さって、やっぱりその

Guest 31:27
なんて言うんすかね。そのカステ、カスキーディングのルールを理解しないといけないっていうところかなっていうのは確かに思ってて、そのさっき言ってた上書きの話とかもそうですし。

Guest 31:38
っていう風に考えてると結構ま、そう考えると、さっきの。まあ、ヘイルウィンドっていうよりは、そのアトミックcs

Guest 31:47
の利点かもしんないですけど、そういうその1つのクラス名がそのまあ1つのその

Guest 31:55
ぱプロパティに値するっていうのは、その我々がそのスタイルをごい予測しやすくて、しかもまあ

Guest 32:04
結構そのまあクラスいっぱいつけてるんですけど、もま実質。そのクラスがのまとまりが1つのなんて言うんですかね。あの、

Guest 32:14
ブートスタップの1つのクラスみたいなのが、あの、その複数のクラスの塊によってま成り立つみたいなっていうところは、割とその

Guest 32:25
よ。予想しやすさというか、上書きしやすさというか、そういう辛さをまあ解決する。まあ、1つのすごいいい手だなとは僕も

Guest 32:35
思いましたね。うんふんふん、ありがとうございますすごい

7. デザインシステムの例外とその対処 32:40

Guest 32:42
あ、これ私からすばるさんに質問してもいいですか。

Guest 32:45
はい、

Guest 32:46
これどう思うかっていうのを聞きたいんですけど、私、カスタマイズする前提においても、結構ね。テイルウインドが過剰なほどに。プロパティーをデポルトで持っていることに価値があると思っていて、それはなぜかって言うと、

Guest 33:01

Guest 33:02
ブートストラップとかも使いづらいところの話なんですけど、あ、まず私はスタンスとして、テイルウィンドに対して、最終的なアプリケーションが、テイルウインドの

Guest 33:11
cssに依存することをぜとしているんですけど。なんでそれがそうかっていうと、

Guest 33:17
これって、そもそもブートスラップとかがのユーティリティで、mx1みたいなのが使われてきた歴史からしてそうだと思うんですけど、

Guest 33:25
大にして、ユーザーインターフェースって決められたそのuyの決まりえ、その例えば、

Guest 33:31
自社製のしのいいデザインガイドラインだったり、うんぬんから必ず外れたカプが出てくるとか、外れた方法にしたいっていうケースに、追収しきれないっていうために、

Guest 33:43
インポータントによるオーバーライブとかが結構行われてきたみたいな歴史があるかなと思

Guest 33:48
ていて、なんかそこには対して、例えばmx1みたいな0.25レームどこで使うの。みたいなぐらいのものがあることによって、何か。デザインシステムだとか、コンポーネントライブラリー内で吸収しきれないものを

Guest 34:01
そういった細かなところで微調整が効くっていうのは、実は私は一定以上の価値があるのかなっていう風に思ってるんですけど、そもそもいいいいと思ってるんだっけみたいな、すごい

Guest 34:13
そうっすね、そうっすね、すごいざっくりとうん、うん、なんかただこういうのってそのなんてしょう。ユーティリティがを乱用されると、すごく割も窓になると思

Guest 34:23
ていて、要はそこの安売として利便性。

Guest 34:27
私は、どっちかっていうと、細かなものがあることによって、なんでしょう。最終的なスタイル時書きがなくなる方

Guest 34:33
に、割れ窓を防げているとか、価値を感じているんだが、これってどうなんだろうっていうんですね、うん、どうなん

Guest 34:41
でしょうというこれ、単純に興味本位なんですけど、

Guest 34:44
それはまあありますよね。はい、うん、うん、なんかあのなんだっけ。スペーシングで言うと、なんか大体8ピクセルだけど、ここは12ピクセルにしたいみたいな

Guest 34:54
ところがある。

Guest 34:57
あ、でもそれで言うと逆も言える逆じゃないけど、なんだろう。その外れたところは、外れたところはあえて時書きになって、それが可視化されるっていうのも、それはそれで、自分は結構なんかよかったケースとして思ってるのがあって、そう。はい、

Guest 35:10
テイルウィンドのクラスで表せるやつは、クラスネーム。あ、jsxであのテイルウィンドで、あ、あのクラスで表せるところは、クラスネーム属性に書かれてて、

Guest 35:19
うん、ダメだったところは、スタイル属性に書かれるっていうのが、なんかあの、逆に貸しかされるんですよね。うん、

Guest 35:24
ああ、なるほどなるほど、それは構造化されてない部分、システム化されてない部分がわかそう。そう、そう

Guest 35:29
そうそうそうそうそうで、これがドットcssとかだと、その同じクラス名に外れた分と外れてない分が両方同じクラスに入るとかになるんですよ。

Guest 35:40
はいはいはいはい、うん、

Guest 35:41
うんこでうん、1個のくらなんだっけま、例えば1個のまあ特殊なまあ、なんか追加ボタンのクラスがあって、色とスペーシングはデザインシステムに従っているんだけど、

Guest 35:54
なんだまあ、なんでもいいや。まあ、ウィスとかLINEはいとでもいいんだけど、まあの特定の属性は外れてます。みたいな

Guest 36:03
ていうのがまい、1個のクラスにかけているみたいなケースでうん

Guest 36:08
で、そうしとけときに、じゃあそうえ。それをテレビングで書き直すと、クラステームズに

Guest 36:14
あの色とか、スペーシングのクラスがて色いなのがちゃんと使われていて、ダメだったところは、あえてスタイル属性で書かれていると、うん、あ、じゃ、ここはダメだったとこだったんだっていうのが

Guest 36:24
わかる。ああ、なるほどなるほど、うん、うん。だから。それは

Guest 36:29
システムを制定していくと、デザインシステムというもので、構造化していくってなると、かなりうん。確かに可視化される方が都合がいいっていうのは

Guest 36:38
そうですね。だから、これはものすごく特殊なコンポーネントをやっているか、え、デザインシステムにフィードバックすべきかのどちらかなんだという話になるわけですよ。っていうのがレビとけばわかるん。

Guest 36:51
うん、まあ確かにその視点はすごい。うん、確かに妥当かつ

Guest 36:55
うん、いいですね、それはなんでしょう。結果的に、デザインシステムへのフィードバックへのサイクルを生むことになりなりますし。

Guest 37:01
そうですね、はい、うん、確かにうんっていうことがさっき書いててあったんですよね。はい、

Guest 37:11
うん、そうそうそううん、

Guest 37:13
ああ、すごい納得感ありました、

Guest 37:16
ありがとうございますすごいあれですね。そのフィードバックっていうところは、ほんとにもう深く考えてて、すごい

Guest 37:22
いいとこですよね、

8. これからのCSS設計 37:25

Guest 37:25
ありがとうございます

Guest 37:27
はい、

Guest 37:29
で、このテイルウインドま、すごいま、色々なメリットがあるっていうことがお分かりいただけたと思うんですけど、も

Guest 37:36
ま

Guest 37:37
結構まい。今までもそのcsイジーもそのcssフレイワークも結構そういうcss、今までのcssに、

Guest 37:46
まあの問題点への解決策みたいなのっていうところの。まあ、位置付けだとは思うんですけど、もま、今後。もし

Guest 37:56
まだまだそのテウィンド普及していくと思うんですけど、もま、こう

Guest 37:59
どういったところがそういう。まあ、その色々な解決策の中でま差別化されていくかとか、どういうところが、

Guest 38:08
あの、そういうくべ、あの採用の決め手になるかっていうところが

Guest 38:12
ちょっと聞いてみたいなという風に思うんですけども、あの、これ、あの、じゃあ、ちょっと3人1人ずつに聞いてみたいと思います。じゃあ、私からえ、

Guest 38:23
いきますね、はいで、まあこのcssが

Guest 38:27
まあ、

Guest 38:29
こういうフレマークが登場したことによって、そのまあ今までの問題っていうのは結構そういう

Guest 38:36
そのか、その名前、その例えばベムであったりとかっていうのは、そういうそのまあ複雑さみたいなのが

Guest 38:45
ま色々出てきた中で、それに対する解決策みたいなのっていうところで、ま、それぞれ全部解決できる点ではあるとは思うんですけども。

Guest 38:54
まあ、今後まどういったところで、こういう複雑さが生まれるかなって思うと、

Guest 39:00
まあ、1つは多分メディアクリかなっていうところとか思っていて、結構ま、ここも。そのテイルミンドの特徴なんですけど、例えば、その

Guest 39:10
あのスモール幅のところでやったら、smコロンみたいな。窃盗辞でを付けることによって、解決するみたいなところがあったりするんです。結構ここって、

Guest 39:20
まあ、その好みが分かれるというか、解決策それぞれ違うところだなと感じていてま。今後そのまあただ

Guest 39:28
横幅以外にも結構ま色々と出てくるかもしれない。例えば、まあ、縦幅とか

Guest 39:35
あえば、あの、そのスクリーンかプリントかみたいなところとか、そういうの、どうやって解決するかっていうのは、多分それぞれのフレームークで違う解決策が

Guest 39:46
あるのかなと思っていて、ま。そこが割と注目したいところかなっていう風に個人的には思いました。

Guest 39:55
では、スパルさん何かこういう望む物みたいなのがあれば、

Guest 40:02
まあ、今上がったレスポンシブの問題とかは、まあ、そうだし、え、なんだろうな。まあ、

Guest 40:09
テロイントが解決した問題の1つとして、まあ大きいのがなんだろうね。あの

Guest 40:15
ま、特定の色だったら特定の色しか選んじゃいけないとか、まあなんだろう。うん、特定のうん、スペーシングしか選んじゃいけないっていう風に、まあ、なんかその

Guest 40:25
そうだな。まあ、選択肢が無限だったのが、なんかこのえば、選択肢から選ぶっていう感じになるたけですよ。うん、

Guest 40:34
そうですね、まあ、うん、まあエニーがえになったみたいな感じのうん

Guest 40:38
ことになっていて、で、実際そのデザイナーの言葉がまあ、あのさは多分あの、それによってのあの色はこれか、これかこれのこれになるっていう風に考えてるっていう風にまかる中で考えている。仕組みがあって、その

Guest 40:52
まあなんだろう。デザイナーさんの言葉に、まあその一致させて、行きやすさみたいなのがそのなんだろうな。

Guest 41:01
うん、

Guest 41:02
まあ割と重要になるというか。そうですね。

Guest 41:05
ま、デザイナーさんがまあのフィグマとかま、あとドキュメントなりで。定義している言葉をまあ、そのままで。そこに現れる選択肢としては、これとこれとこれがあるんだって

Guest 41:16
ま、そのまんま。cssに書き下せるようにまでまだから、クラス名とかの名前が

Guest 41:23
一致していくように、持っていけるっていうのは、まあ、やっぱりあ、うん、大きいのかなって思ってますね。はいはい、

Guest 41:29
あのね、うん、確かに確かにそういうマップ含めて

Guest 41:34
そうですね、そう共通共通ではないですよね、そのあの意識があのそう馴染になるっていうところっていうのはそうです。めちゃくちゃ大事なとこですよね、

Guest 41:45
ありがとうございますでは、ハトコーデさん

Guest 41:49
はい、ああ、そうですね、1つあるとすると、ここまで一切言及してなかったんですけど、

Guest 41:55
テイルウインドは結構テイルインドがなぜいろんなところで採用できるかっていうと、

Guest 42:02
ほんとに見た目だけをえ、これまでのシーフレームワークと同様、ほんとにシフレームマークとして、見た目だけに関与してきたからかなと思っていて、

Guest 42:13
つまりはえ、最近のコンポーネントライブ。じゃあ、例えばアントにしましょうかね。アントとかって、アントを導入した後に、ちゃんとした独自デザインにしようと思うと、

Guest 42:23
ルックアンドフィールのフィールの部分まで、オピニオンがついてしまってるのが結構カになるんですよね。

Guest 42:29
で、そこのルックだけに、関心を持っているっていうのが、テイルウインドのいいところかなと思っていてま。弱いとこでもあるんですけど、

Guest 42:37
なんか、そのルックに関する問題ってのは改善できて、かなり構造的に管理できるし、さらに

Guest 42:45
なんでしょう。ちゃんとデザインがある世界でも使えるcssフレークになってると思ってるんですよね。

Guest 42:50
そのかた、片手間でいい考える人がいないから、コンポーネントライブで使うとか、えーブ使うではなくて、ちゃんとデザインを考える現場で使える技術になってるのはそこがあるかなと思ってますと

Guest 43:02
で、ただ、そのフィールの部分ってっていうところは、テイルウィンドとかって、まだ例えば、その

Guest 43:07
トランジションとかを指定できるぐらいで、正直すごく弱いっていうのがあって、これをただのcssだけで解決できる気も。あんまりしていないっていうのがあって、ここのフィールの部分をどうやって

Guest 43:20
埋めていくんだろうっていうのは、なんかウォッチしないといけないかつ、それをしないと、やっぱり、コンポーネントライブラリーとの差を埋め切られないのかなとも

Guest 43:30
思っていて、cssって病気で考えるなら、ここは結構重要になってくるのかなと思っています。

Guest 43:37
うん、うん、うん、うん、

Guest 43:39
フィールじゃフィールっていうのは、割と広い意味での

Guest 43:43
そうですね。ま、そのなんでしょうまあ、そのただ性的な見た目以外って感じですかね。まあ、そのあそうさ、触り心地とかに影響するような部分ていうのに、

Guest 43:54
うん、どうやって響そうっすね。まあまあ、例えばその簡単な例で言うと、アニメーションとかでもいいと思うんですけど、例えばそのなんでしょう。

Guest 44:03
アントででで選択の画面をやると、こうにょんって出てきて、フェードして、選ぶまで全部は揃っちゃってるから、上書きしづらいみたいな話もそうだと思うんですけど、ま、そういったところまで含めて、どうやって

Guest 44:17
取り扱っていくのがいいんだっけ。あるいはそれをu愛、コンポーネント、ライブラリを上書きする以外の方法は、我々に何かあるんだっけっていうのは

Guest 44:27
考えていきたいよなっていうのが、

Guest 44:30
いやいや、大事だけど、めっちゃ難しそうですよね。結構そうち中症度が全然違う。

Guest 44:38
そうなんですよね、嫌なのでうん。

Guest 44:41
ただ、そこはテイルウィンドだけで解決できないんで、なんかどうしていくべきなんだろうなっていうのが

Guest 44:51
いや、すぐには答えてなさそう。

Guest 44:56
まて、そのゆその辺はちょっと見たい。なんか、なんか、解決策がを出すような事例があったら、積極的に試したいなと思ってるところ

Guest 45:05
で。そうですね。そうですね、ここ割とまあまあ私たちが出すべきところかもしれないし

Guest 45:11
もすべきところかもああまあうんややっていきましょうそ、

Guest 45:17
あまり出せるシーンはない。

Guest 45:19
いやいや、まあ結構じゃあそこが注目すべきところっていうとこですね。はい、ありがとうございます。はい

9. クロージング 45:27

Guest 45:29
というわけで、今回はえーテールウィンドcss

Guest 45:33
をテーマに。今後のまcssの設計、やま、色々なそういう

Guest 45:40
cssのま、これからについて話していきました。

Guest 45:44
私達ytのメンバーが所属するライン株式会社では、このようなフロントエンドに関する議論を日々行っております。

Guest 45:54
はいえ、今後もUITeサイトでは、社内社会とはどんどん情報を発信していきたいと思っています。

Guest 46:04
それでは、また次回のエピソードでお会いしましょう。つばさん、フォーディーさん、ありがとうございました。