5つのECMAScript ProposalがStage4になど: Cybozu Frontend Weekly (2024-10-15号)
5つのECMAScript ProposalがStage4になど: Cybozu Frontend Weekly (2024-10-15号) こんにちは! サイボウズ株式会社フロントエンドエンジニアの Saji (@sajikix) です。 はじめに サイボウズでは毎週火曜日に Frontend Weekly という「一週間にあったフロントエンドニュースを共有する会」を社内で開催しています。 今回は、2024/10/15 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 PR TIMES フロントエンドの CI パイプラインを改善して、CI 処理時間と Billable Time を 50%を削減した話 | PR TIMES 開発者ブログ changed-files という github action 使って、変更があった特定のディレクトリのみ
乗りこなせ！ モダンフロントエンド Cascade Layers/レイヤーによる優先順位の制御 ［CSS Modern Features no.3］ こんにちは！ サイボウズ フロントエンドエキスパートチームの麦島です。 今回取り上げるCSSの機能はCascade Layersです。 Cascade Layersは、「レイヤー」と呼ばれる階層を独自に定義することで、CSS適用の優先順位をコントロールする機能です。利用時は@layerを用いて宣言します。 Cascade Layersと優先順位 CSSを適用する際、CSSセレクタを用いた詳細度での優先順位のコントロールが広く利用されています[1]。 しかし、新たにCascade Layersを組み合わせた場合には次の順番で適用されます。 Cascade Layers CSSセレクタでの詳細度指定 Cascade LayersがCSSセレクタ
皆さんはCSSの:has()擬似クラスについてご存知でしょうか？ とても便利な機能ですがこの機能がリリースされてから、長い間Firefoxではサポートされていませんでした。 しかし、2023年12月にリリース予定のFirefox 121から、ついに:has()が利用可能になります。 これにより、主要なWebブラウザ全てでの使用が可能となったため、業務においても:has()を活用できるようになりました。 本記事では、:has()擬似クラスの具体的な使い方から使用シーンまで解説します。 ▼ :has()とは ▼ 使い方 ▼ 使用例 :has()とは CSSの擬似クラスは、特定の状態にある要素を選択するために使用します。 :has()擬似クラスには二つの状態の要素を選択する機能があります。 親要素の選択：特定の子要素を持つ親要素を選択することができます。 兄要素の選択：直後に特定の弟要素がある兄
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 前回の投稿から約１ヶ月が経過し、現在は主にPHPに関するカリキュラムを受講しています。すると、１ヶ月前に比べてできることはかなり増えましたが、CSSに関しては忘れている事項も多いことに気がつきました。 そこで今回、カリキュラムの一環として、「半田惇志(2020) 『CSS設計完全ガイド 詳細解説＋実践的モジュール集』 技術評論社」を読んでみました。 CSSに関して忘れていたことだけでなく、過去のモヤッとした知識がクリアになったように思えたので、以下にその内容と感想を、抜粋してまとめました。 エンジニア歴1週間→１ヶ月の成長が書かれている
はじめに こんにちは。木村です。 今回React（+TypeScript）にて開発を進める必要がありまして、ReactってどうやってCSS適用するんだ？ベストプラクティスってあるの？と、疑問点が多くありました。 これからReactを始めようとする人で、どのようなスタイリング手法を採用しようか迷われている方は多いと思います。 おそらくこのブログを見ていただいている方もそういうお悩みの方もいると思います。 最後のまとめにも書いていますが、最終的には、どの手法を採用するかは、プロジェクトの要件、メンバーのスキル、メンバーの好み、プロジェクト（アプリケーション）の規模、将来的な拡張性/保守性などによってしまうので、決定的に「これがいい」というのは無い、という結論に至りました。 なので、まずはざっとそれぞれの手法を調べてみて、使ってみることにしました。 自分なりに調べてみたメモ程度の考察ですが、ご参
ContractS開発者ブログ
はじめに Vue 3, Nuxt 3へのマイグレーションがなぜ必要なのか 破壊的変更の学習 プラグイン・ライブラリの選定 Vue 2コンポーネントの移行コスト マイグレーション全体を通して さいごに はじめに こんにちは。 ContractSでフロントエンドエンジニアをしている村澤です。 先日、一時的に Vue 2.x から Vue 3.x のマイグレーションへ携わる機会があったため、その間の学びを共有します。 ContractS CLMでは、Vue.js を用いて開発をしています。 Vue.jsとNuxt.jsは、Web開発において広く利用されている人気の高いフレームワークです。 技術の進化とともに、それらのバージョンも進化を続けています。Webフレームワークのマイグレーションは、開発者にとって重要なタスクです。本記事では、その必要性と経験について述べます。 Vue 3, Nuxt 3へ
こんにちは、ナカムラです。 フロントエンドの仕事の中でパフォーマンスの改善というのは常に求められるものになります。 （PageSpeed Insightsによる計測を中心に確認しています） 読み込むファイルの容量を小さくする、というのも大切なことですが、コーディングの書き方にも気をつけていきたいです。 これまでの整理を兼ねて記事にしていきたいと思います。 画像の軽量化 webpの使用や、圧縮率の変更などでより軽くすることができます。 パフォーマンススコアにはそれほど大きな影響はありませんでしたが、必要以上に大きなファイルを読み込ませるのは良くないので、常に気をつけたいと思います。 javaScriptの読み込み </body>の直前に読み込んでいたものを<head>内に移動し、defer属性をつけました。 これにより、DOMの解析を進めながら、同時進行でjavaScriptのファイルを読み
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Cascade Layers/レイヤーによる優先順位の制御 ［CSS Modern Features no.3］ | gihyo.jp
CSSの擬似クラス:has()とは？その便利すぎる機能をご紹介！ | CCG WORKING HEADS
エンジニア歴１ヶ月の人間がCSS設計完全ガイドを読んでみた - Qiita
ReactでのCSSはどうすればいい？スタイリング方法を色々実践してみた。 | 株式会社ナカヱ
最近行ったパフォーマンス改善のまとめ - arms inc. Engineers' Blog