SassなどのプリプロセッサがなくてもCSSのみで変数が使用でき、JSから値を動的に変更できるため「ダークモード切り替え」や「リアルタイムでのユーザーテーマ適用」が簡単に実装可能になります。
日本語
front-end tips
122 posts
front-end tips
@FE_Tips_labo
フロントエンドの実践Tipsをゆるっと研究。 ReactやTypeScriptなどのモダンな技術から、 現場で地味に役立つCSSの小ネタまで幅広くシェアします。 「これ明日から使えるな」という現実的な知恵を、あなたの武器に。 #FE_Tips_Labo #frontend
Katılım Mart 2026
54 Takip Edilen15 Takipçiler
【CSS】CSS変数でデザインの保守性を向上
カスタムプロパティ（--から始まる名称）を使用し、カラー、マージン、フォント設定などの共通デザインシステム情報を変数として格納・一括参照します。
#CSS #保守性 #Webデザイン #FE_Tips_labo
日本語
auto-fitとminmaxを併用することで、タブレット・モバイル・PCごとに個別のブレイクポイント用のマージンやカラム指定を切り分ける手間が省け、かつ一貫性のあるカード配置やタイルレイアウトが組めます。
日本語
【CSS】CSS Gridでレスポンシブな多段レイアウト
メディアクエリを細かく設定しなくても、コンテンツが自動で親の表示幅を判断してカラム数を伸縮させ、綺麗にグリッド上に折り返すよう記述します。
#CSS #Grid #レスポンシブ #FE_Tips_labo
日本語
ユーザーが手動でスライダーを動かした際、その進捗に連動した配色の滑らかな変移、Webサイトのダークモード切り替えや、ユーザー専用のアートボードテーマ設定に必須です。
日本語
【JS】カスタムプロパティをJSで動的に操作
CSS変数（カスタムプロパティ）の値を、JavaScriptからsetPropertyを使用して動的に上書き・操作します。
#JavaScript #CSS変数 #FE_Tips_labo
日本語
開発時、誤って文字列変数に数値を渡した際、エディタ上（VS Codeなど）ですぐに赤線を表示してエラー。バグが本番リリースされるのを手前の開発時に完全に防ぎます。
日本語
【TS】型注釈でコードの安全性を守る
TypeScriptの最も基本的な型安全技術。変数や戻り値に型を明示することで、想定外の値の代入をコンパイル段階で検出します。
#TypeScript #型安全 #FE_Tips_labo
日本語
正規表現や複雑な文字列処理を書いてカンマを入れたりする必要はありません。ECの円表記、アメリカでのドル表記など「言語に最適化された正確な通貨コード表示」をロギングやUIでスムーズに適用可能です。
日本語
【JS】Intl.NumberFormatで数値を金額表記
国（言語）のカルチャーに合わせて、カンマ区切り、通貨記号、端数処理など数値フォーマッティングを自動提供します。
#JavaScript #Web開発 #FE_Tips_labo
日本語
もとの配列自体の値を直接破壊しない（不変（Immutable））操作。データのフィルタリング、特定部分のデータリストへの置換がスマートになり、ReactやVueの状態管理にそのまま噛み合わせられます。
日本語
【JS】配列メソッドを使いこなして宣言的に書く
手続き型の「for」ループによる配列操作を排除し、filter、map、reduceなどの宣言的な配列メソッドを活用します。
#JavaScript #配列操作 #FE_Tips_labo
日本語
他者が作成した複雑な非同期APIクライアントや外部ライブラリをラップする際、解決後に得られる戻り値オブジェクトの正確な型をスマートに抽出し、自分たちのコンポーネントに割り当てられます。
日本語
【TS】Awaited 型で Promise の中身を抽出
Promiseが解決した（resolveされた）後のデータそのものの型を取り出し、ネストされたPromiseであっても再帰的に中身を取得します。
#TypeScript #非同期処理 #FE_Tips_labo
日本語
「ユーザー情報の取得API」「ブログ情報の取得API」などで、外側のステータス構造は同じなのに中身が違う場合、何個も同じような型を作らずに、型安全を維持したまま究極の共通化ができます。
日本語
【TS】Genericsで型の再利用性を最大化
中身の型を最初から固定するのではなく、呼び出す瞬間に引数のように「型（型変数T）」を指定して処理を共通化します。
#TypeScript #Generics #FE_Tips_labo
日本語
「ホバーした時に元のベースカラーより少し暗くした色にする」などの指定を、ホバー用のカラーコードを個別で複数書き足さずに変数1つで自動生成。一貫したカラーシステムの運用が可能です。
日本語
【CSS】color-mix() で動的な色の生成
カラーコード同士を、指定した色の混色カラーモデルや混合比率に基づいて、CSS内で動的に混ぜ合わせて新しい色を出力します。
#CSS #Webデザイン #カラー #FE_Tips_labo
日本語
外部ツールを噛ませる必要がなく、記述量やフォルダ全体のサイズを最小限に抑え、さらにコンポーネント志向の階層構造が一目でわかるメンテナブルなCSSを最速で構築可能です。
日本語
【CSS】ネイティブCSS Nestingで記述を効率化
Sassをインストールしたりビルドコンパイルを挟んだりせずに、プレーンなCSSの仕様でセレクタの入れ子（Nesting）を標準記述します。
#CSS #モダンCSS #フロントエンド #FE_Tips_labo
日本語