00:00
エンジニア視点でライフハックするためのラジオ ハックストルです。
はい、みなさんこんにちは。TRY-CATCH FM第52回です。お願いします。
お願いします。
いやー、もうオリンピック始まっちゃいましたね。
始まっちゃいましたね。
見てる?
えっとー、なんだろうな。なんか、あの、お店でかかってるなーとかだと見てるけど。
うん。
自分からなんか競技のやつを見たことはまだないかな。まだ1日目だけどね。
あ、そっか。まだ1日目か。大会式が、えっとー、おとといか。
どうでした?正直なところ。
僕なんか、なんだっけ?どっから見た?DS選手入場の途中から見たんすよ、僕は。
はいはいはい。
あの、もうとっくに昼間とかに終わってるんだと思って、大会式。あんま興味なかったんだけど、なんか、
ツイッターでさ、あゆみょじゅんとかジャパニーズアルファベットがどうこうってみんな騒いでるから、なんだと思ってつけたらやってて。
で、なんだろう。選手入場はね、みんな楽しそうだったね。なんかスマホで自撮りとかしてる人たちがいて、
あー時代だなーって思ったりとかしたけど。
はい。
演出、演出はさ、話題になったじゃん。なんか直前に解任だなんだって。
そうだね。
あの、小林、あ、もう下の名前忘れた。小林健太郎だっけ?
小林健太郎。
あの、ラーメン屋さんの人ね。
はいはい。
小林健太郎が解任された割には、すげー小林健太郎テイストすごいなーって思いながら見てたけどね。
あー。
あの、七木たけしとかがさ、コントみたいなのやってたじゃん。
あー、なんか演劇みたいなやつね。はいはい。
そうそうそう。なんかでっけーマイク持ったりして。
うん。
あれー絶対小林健太郎のやつ残ってないって思いながら見てたんだけど。
あー。
そういうところはちょっと面白かったけど、僕はあの、あんまりオリンピックってそんなに興味持ってこなかったから、
オリンピックの開会式各あるべきみたいなね。
はい。
国の○○が、を発信しましょうとか、そういうなんかやるべきことを知らないんだよ。
だからそう、あの、日本のこれがわかってもらえてないじゃないかみたいな、なんかこう、あるべき姿についてのことが言えないんだけど。
うん。
なんだろう、真理って言うなら、なんだろうね、まあ直前に変えたからもあるんだろうけど、ふわっとしてたなーっていう。
うーん。
なんかそんな、うわーすげーってなったかって言われると、一番すげーってなったのあれだもんね。
あの、ピクトさんの即興。
ははっ。
前方図集みたいなやつ。
いやもうあれ全員があの、ちんちゃんの仮想対象だと思ってたもんね。
そう、なんかもう失敗してるところも、がんばれがんばれってなるところも含めてね、もう完全に仮想対象だったんだけど。
そう。
それ以外ね、なんかイマジン歌ってるとこも、まあなんかおのよーくあるにせよなんでイマジンだって思いながら。
まあでも、俺のあれだね、ドローンかな。
あ、そうそう、あれ、ドローンがイマジンの歌詞も出してたらしいんだよ。
あ、そうなんだ。
そうそう、なんかすごいアルファベットをブワーって空に出してくれたらしいんだけど、それを見せずにさ、テレビ映像ではなんかよくわからん映像を見せさせられててさ、会場映せやと思って。
03:11
あ、そうなんか。
テレビ演出も微妙だったなってそういう意味で思ったけどね。
ドローン、あれはなんかあれらしいですよ。
ん?
インテル?
あ、うん、インテル製の1800何台のやつでしょ。
そうそうそう。
すごい。
あれもね、地球型のやつとかあったよね、なんかブワーって、現代だったかな。
でもまあすごかったけど、結構中国とかでもね、オリンピックじゃない時とかでも普通にやられてるようなやつだからね。
まあ、別にオリンピック価格の採点じゃないから最新のものは出さなくていいと思うんだけど、それで何をやったかなんじゃない?
まあ俺も全体としてはまあコスタと同じような印象かな。
まあでも、あのリオの閉会式の映像。
はいはいはい。
日本だよの映像。
うん。
あれはね、なんか結構感動した記憶があるんだけど。
なんかね、あの予告編はめっちゃ面白いのに本編つまんない映画みたいだったね。
びっくりしそうになっちゃってるな。
なんか、てか日本人としてのこう誇らしさを感じるような映像だったのに、そのリオの最後の、あのアベマリオの時は。
うん。
そうね。
原案のやつね、これ分かる人分かんない人分かれると思うんだけど、あのアキラっていう漫画映画のカネダバイクっていう有名なね、ベディープレイヤー1とかにも出てきた赤いバイクがあるんだけど、あれが開会式、なんかズギャンって入ってきて始まるみたいな原案だったらしいんだよね。
あれはね、俺は結構見たかったな。
そう見たかった、やってほしかった。
そうね、てかまあやっぱりそこらへんのなんだろうな、マリオとかポケモンとかアキラとか、こういうのこうね、グローバルで知られてるアニメで一番結構手がたいと思うんだけど、なんかそこをうまく活用できてない感はあったな。
そうね、なんか任天堂もさ、最初ゲーム音楽で入場してたけど全部撤退してたでしょ、任天堂のやつなかったよね。
実際ドラクエとかもさ、日本ではめっちゃ人気だけど海外はそうでもないからな。
そうだよね、日本何百、なんか2、300万本とか売れてるけど海外100万売れてるやつないでしょ、ドラクエ。
そう、確かに。
だからちょっと海外からすると微妙だなって思うね。
06:04
はい、まあそんな感じでしょうか。
じゃあちょっと本題いきましょうか。
今日の本題がですね、50回迎えた時に過去の振り返り企画というかエピソードを振り返って、もうちょっと技術系の話を増やしてみるかなってことで。
ちょっと今回はゴリゴリの技術系の話で、Tailwind CSSというやつを解説してみようかなというチャレンジ企画でございます。
はい。
COSDAはTailwind CSS、使ったことはないと思うけど名前とか聞いたことある?
名前しか知らない、名前しか知らないけどTailwindってなんでTailwindなんだろうって思ったまま調べてないんだよな。
なんでTailwindなのかも合わせて教えれるといいな。
Tailwindの意味は知ってる?日本語の。
知らない。Tailwindって何?
追い風みたいな感じかな。
だからこれを使うことによってマークアップに追い風がかかったかのようにスピードが上がるようなニュアンスなのかな。
後ろにある風なんだろうと思ってたけど、自分が起こす方の風かと思ってた。押される方の風なんだね。
そういうものがありまして、要はこのフレームワークなんだけど、
今日は他のCSSフレームワークと比べて何が違うのかっていうところと、
あとメリット、デメリットとか含めて話していこうかなと思います。
まずTailwind CSSコアっていうところなんだけど、
Tailwind CSSのウェブページを見ると、
ユーティリティファーストのCSSフレームワークっていう風に書かれてて、
ユーティリティファーストって何かっていうと、
CSS書くときにたまに言うかもしれないけど、ユーティリティクラスみたいなやつがあるんですよ。
それ何かっていうと、
例えば、ブーツストラップとかでもあるけど、
PT4とかテキストセンターとかそういう類のCSSクラスで、
PT4ってのはパディングトップ4みたいな。
だから1クラスに対して1個のCSSが付いてるみたいなやつで、
CSS書くときってそのHTMLにクラスって書いて、
アイテムリストとかクラス名の名前つけて、
そのアイテムリストを下でも書いてCSS付与するみたいな書き方をするじゃない。
09:04
でも何か1個だけCSS追加したいのに、
何かいちいちCSSクラス名新しく考えるのだりーなみたいなときって結構あって、
そのときにそういうテキストセンターとか、
PT4とかMB3とか、
そういうものをクラスに入れちゃって使うみたいな。
だからCSSクラス名を考える必要がないんだよね。
そういう意味でどこにでも使えるし、
そういう意味でユーティリティクラスって言われたりするんだけど、
Tailwind CSSはユーティリティクラスしかないですっていうものなんだよね。
しかないんだ。
Bootstrapとかだと、
Btnのボタンクラスみたいなやつが用意されてて、
そのBtnクラスにいろんなCSSが裏側では付いてるんだけど、
Tailwind CSSはそういうものがないっていう感じかな。
メリット・デメリットももちろんあるんだけど、
メリットはさっき言ったみたいに、
CSSクラス名を考える手間が省けるっていうところ。
無理やり何たらコンテーナーとか何たらラッパーとか考えると、
結構カオスになったりするんで、
そこの考える手間を省けるっていうのが一つと、
Tailwind CSSは中にパージCSSっていう、
使ってないCSSを削除してくれるっていう機能が備わってるらしくて、
デプロイしたときにちゃんと最適化してくれるというか、
無駄なやつは省いてくれるよっていう。
あとはHTMLとCSSを行き来する必要がなくなる。
HTMLのクラスの中に全部書いていくから、
いちいちCSSに同じクラス名を書いて、
CSSを書くみたいなことはしない。
もう名前がある程度規則性を持って決まってるから、
HTMLの方にクラスイコールふにゃららっていう、
こうしたいな、グレーにしたいなとか、
左に寄せたいなとかの名前がある程度決まってるから、
それを書いてあげるとCSSの方を維持しなくても勝手になってくれるよっていう。
CSSはほぼゼロ上に近い形で、いろいろレイアウトできる感じです。
あとは、これは別にフェールウィンドCSSのメリットじゃないけど、
単純にCSSフレームワークのメリットとして、
12:02
デザインに統一感を出せるっていうところ。
確かにね。
デメリットの方は何なのかっていうと、
まずHTMLのクラスタグの中身が結構長くなります。
そうね。付けたい特徴ごとに全部クラス名が並んでいくから。
これは結構イメージ的でしょ。
だからこそ、結構小さい単位でコンポーネント化していく。
そうすると、1ファイルあたりのクラスの数とかは少なくなっていくから、
見通しは良くなる。
あとは、そもそもCSSの書き方を知らないっていう人は、
スピード感が落ちるかもっていうのはあるかもしれない。
CSSの書き方を知らない人は、素直にCSSを書いた方が遅くならない?
だから、ほぼCSSをそのまま書くのと同じくらいの知識が必要になってくるのよ。
ブートスポットとかをファンってやれば、
いろんなCSSを入れてくれてるわけだから。
はいはい。
だから、結構このCSSはどういう役割があるみたいなところを知らないと、
ちょっと難しいかもしれない。
Utilityしかないってことは、
PT6って言ったら、パディングトップ6になるんだ。
まずパディングトップとは?みたいなところを知らないと書けないよね。
でも、たぶんブートスラップとかはそれを知らなくても、何とかなるんだよね。
ツールとしての流度が違うからってことね。
大きい流度でカバーしてくれてたブートスラップとかに対して、
もうちょっと小さい部品をたくさん用意してくれたから、
分かってる人じゃないとね。
使えないってことか。
今のがメリット・デメリットっていう感じで、
こういうことを話してると、結構よくある疑問としては、
Utilityクラス使うんだったら、インラインスタイルでもいいんじゃない?みたいな。
確かに。
HTMLのところにスタイルイコールって書いて、
そこにCSSイコールみたいな書き方ってあるじゃないですか。
そうだね。
スタイルとしてはほぼそれが変わんないよねみたいな話があって、
インラインスタイルでもいいじゃんみたいな人がいるんだけど、
それに対する回答というか、これもテールウィンのCSSが言ってるものなんだけど、
まず一つは、3つあって、
まず一つはマジックナンバー問題っていうのがあって、
15:00
要するにインラインスタイルで書いてると、
フォントサイズが15ピクセルだったり14ピクセルだったり16ピクセルだったり、
その場その場で結構バラバラになるっていう。
テールウィンのCSSとかだと、
もちろんフォントサイズとかにバリエーションはあるんだけど、
決まったインターバルで指定されてるから、
そこまで細かい単位ではバラバラにならないっていうのはあるかな。
わざわざいじらなければ変わらないみたいな話?
そうだね。あとはレスポンシブ問題。
レスポンシブ対応するときに、
CSSだとメディアクエリっていうやつを書いて、
画面幅が何ピクセル以上だったらこのスタイルを当てるみたいな書き方をするんだけど、
インラインスタイルだとそれはできないんですっていうのがある。
で、テールウィンドだったらできるよっていう。
できるんだ。そうやって2種類書く必要があるの?テールウィンドとか。
そうだね。だからテールウィンドどうやって書くかっていうと、
例えばテキストセンターみたいなテールウィンドCSSのクラスがあって、
その頭にMDコロンみたいな形で書くと、
例えばこの画面幅何ピクセル以上のときにだけこのスタイルを当てますみたいな書き方ができる。
MDとかLGとかXLとかあって、画面幅に応じてそのときだけこのスタイルを当てますっていう書き方をする。
ちなみに共通化の話としてはさ、
CSSのクラスとかの定義ができるわけじゃないから、
コンポーネントがそこで共通できるとして、
それ以外のところで共通にしたかったらもうコピペするしかないって感じだよね。
そうだね。そこはコピペするしかないから。
だからより細かい段位でコンポーネント化することになると思う。
なるほどね。
最後3つ目がディジクラス問題っていうやつがあって、
ディジクラスって何かっていうと、
要はあれだよね、ホバーとかマウスオーバーとかフォーカスとかっていうタグがあって、
CSSとかでも書いたりするじゃないですか、
AタグにAコロン、ホバーでこのスタイルを定義する。
それもインラインスタイルの中には書けませんっていう課題があって、
なるほど。
で、Tailwind CSSだったら書けるよっていうものだね。
それどうやって書くかっていうと、これも結構シンプルで、
18:02
ホバーコロン、BGレッド300みたいな、
そういう書き方ができるみたいな。
なるほど。
だからこの3つかな。
マジックナンバーがいろんなところにできちゃうよっていう問題と、
レスポンシブルなコンポーネント化っていうのがあって、
これも結構シンプルだね。
なるほど。
で、これも結構シンプルだね。
で、これも結構シンプルだね。
で、これも結構シンプルだね。
で、この3つかな。
マジックナンバーがいろんなところにできちゃうよっていう問題と、
レスポンシブル対応が難しくなるよっていうところと、
BGクラス使ってないよっていう。
この3つがあるから、インラインスタイルじゃなくて、
Tailwind CSSみたいなユーティルクラス?
ユーティルクラスっていうか、そうね。
Tailwind CSS使ったほうがいいよって言ってる。
ちなみにインライン的に書く、書き方はインライン的だからさ。
なんだろう見やすさってどう?横にずらーっと伸びていった結果このクラスはどんな見た目でどんな動きをするんだっていうのがパッと見では分かりづらいとかってそういうことはある?
うーん個人的にはあんまないかななんか
逆にこうやっぱりCSSとHTML行き来しなくていいからその場でも見れるかな
まあ確かにクラスがなんか10個とか20個とかってなるとまあめんどくさいけど
そこまでいかなければパッと見れるからいいって感じか
なるほどね
ちなみにそのなんだろうパッと気になる点として2つ
移行というかさこれに切り替えようってした時ってどんな風にやるんだろうってのと
共存ができるのか新しくよしじゃあこの部分このページからタイルウィンド始めようとかってなった時そこだけ導入とかってできるのとか
これはねちょっと俺もいまいろいろ試行錯誤してるんだけど
もともとBootstrap使ってたプロジェクトでタイルウィンド新しく入れたいってなった時に
多分そのままタイルウィンドぶっ込むとユーティリティクラス名で被ったりするから
例えばPTさんとかBootstrapも同じような技法というかやり方で
パッディングとかマージンとか定義してるのよ
だから多分そのままぶっ込むのはまずやめた方がいいっていうのはあって
どうやって入れるのかっていうとちょっと俺も今検証段階なんだけど
タイルウィンドCSSのコンフィグファイルみたいなのは最初作る必要があって
21:00
そこにプリフィックスっていうやつを付けれるんですよ
セットを頭に何か好きなものを付けていいみたいな
だからそこのプリフィックスのところでTW-みたいなやつを定義してあげると
タイルウィンドCSSで定義されているすべてのユーティリクラスの頭にTW-っていうやつを付けた形で
インストールというか使えるようにしてくれるっていうのがあるので
それをやるのがいいんじゃないかなと思ってる
ある程度すべてタイルウィンドCSSで書き換えたらその設定を外して
一括置換してTW-を消してあげる
だから多分プリフィックスはあんまりT-とかにすると結構厳しいと思う
そうだね
区別できる他にないようなもの
絶対他で使わないようなやつにしないと
しかも長くすると全部の頭に付くからめっちゃ横に伸びる
いい塩梅でなんかわかんないけど絶対使わないアルファベットの文字列をやってみる
そういうところですね
あとTW-CSS使うメリットというか
一番大きいものはよくマテリアルUIとかUIコンポーネントフレームワークっていうのがあるんですよ
CSSフレームワークとは別に
例えばViewコンポーネントを提供してくれているライブラリとか
Reactコンポーネントを提供してくれるライブラリ
そういうものって簡単にリッチなUIとか作れたりするんだけど
融通が効かないっていうところと
アップデートに対応しないといけないっていう結構めんどくさい問題があって
その点TW-CSSとかだと
そもそもプリミティブなCSSというか
要するに結構根本的なCSSというか
説明は難しいけど
原始的なというか元々あるから早々変わるものじゃない
それを使ってるから
ライブラリ側のフレームワーク側の方針に振り回される
リスクが低いんじゃないかっていう話があって
そこが結構でかい気がするな
あとはクラス名覚えるのがしんどいってやつですね
24:02
今トップページ見たらパワフルなワールドクラスIDインテグレーションとか
色々サジェスションとかでいい感じになってくれるみたいなの出てたりするけど
もちろん探したらすぐ出てくるんだけど
あと予測もある程度できるんだけど
要は全部のCSS
全部というかほとんどのCSS
1個に対して1個のクラスができてるから
そこをちょっと覚えながら使っていくっていうのは
ある程度慣れる必要があるかなって感じ
なるほど
こんな感じで
俺結構最近仕事とかプライベートとかでも使ってて
個人的にはすげーおすすめなんで
皆さんもちゃんと使ってみてくださいって感じですか
はい
じゃあ今日はこんな感じで終わってみます
ありがとうございました
ありがとうございました
