テクノロジー
CSS in JS(Elm)したら想像以上に良かった - ジンジャー研究室

気に入った記事をブックマーク

気に入った記事を保存できます
保存した記事の一覧は、はてなブックマークで確認・編集ができます
記事を読んだ感想やメモを書き残せます
非公開でブックマークすることもできます

CSS in JS(Elm)したら想像以上に良かった - ジンジャー研究室

テクノロジーカテゴリーの変更を依頼記事元:

jinjor-labo.hatenablog.com

適切な情報に変更

エントリーの編集

エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。

このページのオーナーなので以下のアクションを実行できます

タイトル、本文などの情報を
再取得することができます

コメントを非表示にできますコメント表示の設定

ブックマークしました

ここにツイート内容が記載されますhttps://b.hatena.ne.jp/URLはspanで囲んでください

Twitterで共有

次回からTwitterへ自動リダイレクト

ONにすると、次回以降このダイアログを飛ばしてTwitterに遷移します

266usersがブックマークコメント

コメントするにはログインが必要ですブックマークを追加

ブックマークを追加

よく使うタグ

CSS in JS(Elm)したら想像以上に良かった - ジンジャー研究室

266 users

jinjor-labo.hatenablog.com

よく使うタグ

はてなブックマークで
関心をシェアしよう

みんなの興味と感想が集まることで
新しい発見や、深堀りがもっと楽しく

ユーザー登録

アカウントをお持ちの方はログインページへ

記事へのコメント28件

注目コメント
新着コメント

オーナーコメントを固定しています

オーナーjinjor書いた。

2016/05/30リンク

その他

hkdnet網羅的な記述にせず、実感に即したところが強調されててよい

2016/05/31リンク

その他

alphabet_hもはやJSS

2016/05/31リンク

その他

shoスタイル適用のタイミングがjs実行時になってしまうので、完全なSPAでもない限りおすすめできない。スタイル未適用のページが一瞬表示されるのダサい。

2016/05/31リンク

その他

pmintElmの話。最近JavaScriptを独自拡張して太らせるやり方が流行ってるけど、自分としてはHTMLを壊さずに太らせてHTML-CSS-JavaScriptを綺麗に分離したい。/ ってそれはjQueryと「サーバーレンダリングの禁止」でできてるのか。

*Prog

2016/05/31リンク

その他

AyeBee_TYCSSが糞なのはわかるけど、プロパティ名や数値+単位なんかを、文字列として表現しなきゃいけないのがイモすぎる。小さいもの作るときはいいかもしれないけど、既存のCSSデバッガが使えないのもちょっとね。

2016/05/31リンク

その他

bps_tomoya昨今の JavaScript の職掌肥大化に新メンバー加入でどーなんだろうなーという抵抗感はあるけれど書いてみなきゃ分からないので後で書いてみる #といって書かないだろ僕

2016/05/31リンク

その他

lazexよく読んでないけどJSでCSS書くことはしなくて、クラスや属性の書き換えのみでそれに設定しておいたCSSが適用されるの一番だと思う

2016/05/31リンク

その他

otchy210アニメ/変形はもちろん CSS だし、calc 実用期に入ってきたから width: calc(100% - 20px) 出来るようになったし、素の CSS も結構頑張ってるよ。

2016/06/01リンク

その他

ryownetwebアプリやSPAはいいと思うけど、webサイト作ってる人が真似したら崩壊しそう

2016/05/31リンク

その他

オーナーコメントを固定しています

オーナーjinjor書いた。

2016/05/30リンク

その他

Haaaa_N単なる連想配列だからモジュール化もできるのか良いな

2017/05/17リンク

その他

snomofReactとか、htmlの描画自体をjsで行っている場合はスタイルの適用ラグ問題は発生しないので実用できるかも

2016/06/08リンク

その他

tyruブコメでも指摘されてるけど、描画後にスタイルが適用されてガクッとならないのかな

2016/06/01リンク

その他

otchy210アニメ/変形はもちろん CSS だし、calc 実用期に入ってきたから width: calc(100% - 20px) 出来るようになったし、素の CSS も結構頑張ってるよ。

2016/06/01リンク

その他

lazexよく読んでないけどJSでCSS書くことはしなくて、クラスや属性の書き換えのみでそれに設定しておいたCSSが適用されるの一番だと思う

2016/05/31リンク

その他

fujis_aSassよりもとっつきやすい感じ?

2016/05/31リンク

その他

iktakahiro変数が使用できないなどの "CSSの既知の問題" って大体 Sass (など) が解決していると思っていて、これを読んでなお CSS は CSS で分離しておいたほうがいいと感じた。

2016/05/31リンク

その他

tanakhこれ僕も15年ぐらい前からずっと思っててCSSなんていらないんじゃないのかってずっと思ってたんだけど、結局CSSが魔改造されて今に至るけどやっぱ結局これでいいんじゃないのかって思う。

2016/05/31リンク

その他

megazalrock便利なんだけど「本当にその一線をこえていいのか？パンドラの箱じゃないのか？」という感情が使わせてくれない。

2016/05/31リンク

その他

octwebこんなやり方もあるのかー！これからの人にはいいかもね

2016/05/31リンク

その他

2016/05/31リンク

その他

ilyaletreなんだかんだでここに落ち着きつつある。レイアウトだけCSS使うような感じに。

2016/05/31リンク

その他

digitalglmCSS in JS(Elm)したら想像以上に良かった - ジンジャー研究室: 2016 - 05 - 30 CSS in JS(Elm)したら想像以上に良かった React界隈では結構前から「 CSS in JS」…

2016/05/31リンク

その他

sigwygReactはいろんな壁を壊してくるなあ

2016/05/31リンク

その他

ttkazuma"React界隈では" "CSSを使った方が良い場面もある"

2016/05/31リンク

その他

igrepと、言うわけでデザイナーもElmを書こう（錯乱）ところでelm-cssなら単位を文字列で書かなきゃならない問題もよくしてくれそうだけど、あれどうなったの？

2016/05/31リンク

その他

2016/05/31リンク

その他

ryownetwebアプリやSPAはいいと思うけど、webサイト作ってる人が真似したら崩壊しそう

2016/05/31リンク

その他

shiromatakumiこれは試したい。

2016/05/31リンク

その他

2016/05/31リンク

その他

mnyo試してみたい

2016/05/31リンク

その他

kihan確かに良さそう

2016/05/31リンク

その他

*Prog

2016/05/31リンク

その他

pokotanu「えっ！同じスタイルをJSで？」「出来らあ！」

2016/05/31リンク

その他

alphabet_hもはやJSS

2016/05/31リンク

その他

hkdnet網羅的な記述にせず、実感に即したところが強調されててよい

2016/05/31リンク

その他

adwd118htmlとかあんま好きじゃないし、CSSとかもっと好きじゃないのでJSに全部入ってくるReact/jsx良い。JSも好きじゃなかったけどES2015以降なかなか良い

2016/05/31リンク

その他

コメントするにはログインが必要ですログインしてコメント

注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

リンクを埋め込む

以下のコードをコピーしてサイトに埋め込むことができます

プレビュー

はてなブックマークボタンを作成して埋め込むこともできます

規約違反を報告

いまの話題をアプリでチェック！

バナー広告なし
ミュート機能あり
ダークモード搭載

アプリをダウンロード

usersに達しました！

さんが1番目にブックマークした記事「CSS in JS(Elm)し...」が注目されています。

気持ちをシェアしよう

ツイートする

CSS in JS(Elm)したら想像以上に良かった - ジンジャー研究室

追記最新の感想も合わせてご覧ください。 jinjor-labo.hatena blog.comReact界隈では結構前から「CSS i...追記最新の感想も合わせてご覧ください。 jinjor-labo.hatena blog.comReact界隈では結構前から「CSS in JS」と言って、雑に言うと「CSSはイケてないからJSでインラインスタイルを書いてしまえ」という話がある。（ちゃんと知りたい人はこちら）自分も前々からCSSは変数が使えないとか名前が被るとか諸々イケてないのは同意してたんだけど、じゃあJSで書くのが良いかと言われたら「いや流石にロジック汚れるんじゃね？」とか「CSSの便利機能を捨てて平気なの？」とか色々と懐疑的だったんだけど、１～２か月書いてみたら想像以上に良かったので感想を書くことにした。まず一番に主張したい部分を先に言うと、こう。（誤解）JSのコードがスタイル記述で汚れる（正解）JSのコードがスタイル記述から解放される前提実際に書いたのはJavaScriptではなくElmなので以下は全て