2023年11月8日 フロントエンド・WEBに関するニュース

CSS Modulesを型安全にする仕組み

https://zenn.dev/cybozu_frontend/articles/2528ad2935be9f

• CSS-in-JSライブラリからCSS Modulesへの移行でクラス名補完が効かない問題
• typed-css-modulesを使ってCSSファイルからクラス名の型を自動生成
• CSSファイルのクラス名を抽出し型ファイルを生成する内部処理の解説
• css-modules-loader-coreを利用しpostcssプラグインでクラス名を取得
• 型ファイル削除の問題解決のためのコードリーディングとPR作成の経験

半年間で学んだ、デザイナーを目指す人のための基本の心得

https://liginc.co.jp/634617

• デザイナーとしてのホスピタリティ精神の重要性
• 正確な仕事と納品前のチェックの徹底
• ファイル名の管理、作業効率化、ミス予防
• デザインの意図を明確にし、説得力を持たせる
• スケジュール管理と納期の厳守、常にインプットとアウトプットを心がける

可読性の高いコードは、変数の状態が直交である

https://zenn.dev/shava2c/articles/37f299ab8b326d

• コードの可読性向上に変数の「状態」が重要
• 「直交」する変数の状態は関係がなく、バグを減らす
• 関数の直交性を保つためのベストプラクティス紹介
• 非直交な関係を直交に変える具体的な方法と例
• TypeScriptの判別可能なユニオン型を使った型安全性の向上

Fetch APIのレスポンスヘッダーを確認する

https://qiita.com/P-man_Brown/items/0c8df4eac35071ceb245

• Fetch APIを使用してレスポンスヘッダーからContent-Typeを取得する方法
• fetch関数にURLを渡し、レスポンスオブジェクトからヘッダーを取得
• res.headers.get('content-type')を使ってヘッダーの値をコンソールに表示

JSでフォームに登録した画像を圧縮して保存する

https://zenn.dev/tsuu7176/articles/ffdd18c4ee9aa0

• JavaScriptでの画像リサイズ処理の実装方法
• browser-image-compressionライブラリの使用
• 画像を最大5MB、幅または高さ1600ピクセル以下に圧縮
• npmやyarnでのインストール、CDN経由での利用方法
• 実装例として、フォームからの画像圧縮とサーバーへのアップロード処理

(Don’t) Mind the Gap

https://css-irl.info/dont-mind-the-gap/

• Flexboxのgapプロパティが2021年以降、すべてのモダンブラウザでサポート
• gapは元々Gridレイアウト専用だったが、Flexboxにも対応するようになった
• gapを使うことで、アイテム間のスペースを簡単に設定できる
• Flexboxは一次元レイアウトだが、gapは行と列の両方に作用する
• マージンやパディングを使わずにgapでスペースを管理することで、レイアウトの調整が容易に

Addressing Accessibility Concerns With Using Fluid Type

https://www.smashingmagazine.com/2023/11/addressing-accessibility-concerns-fluid-type/

• CSSのclamp()関数とビューポート単位を組み合わせた流動的なフォントサイズ調整がWCAG基準に違反する可能性
• テキストがブラウザの最大ズームレベルで200%まで拡大できない問題点
• clamp()を使用しつつWCAG基準1.4.4を遵守する方法の探求
• フォントサイズがビューポートの幅に応じて適切に拡大する数学的アプローチの提案
• アクセシビリティを確保しつつ流動的なテキストサイズを実現するためのガイドライン提示

JavaScriptのMapとは何か？Mapの使い方・基本文法まとめ

https://zenn.dev/aiq_dev/articles/1660d739a1369d

• JavaScriptのMapはkeyとvalueのペアを格納するコレクション型
• Objectと異なり、どんな型のkeyも使用可能
• 変数データをkeyとして他のデータをマッピング・管理する際に有用
• Mapの基本操作にはset, get, has, delete, clear, sizeなどのメソッドがある
• Mapの繰り返し処理にはforEach, keys, values, entriesのメソッド利用可能

Reactアプリ100本ノックを実践する 〜01 Hello World〜

https://qiita.com/jinto/items/2e0c915f8fecc8cc3681

• Reactアプリ100本ノックの第1回目として「Hello World」コンポーネントの作成
• TypeScriptテンプレートを使用したcreate-react-appでプロジェクトセットアップ
• Emotionライブラリを使用してスタイルを適用
• 中央に「Hello World」と表示するシンプルなコンポーネントの実装例を紹介
• 100日間でReactを学ぶ目標を設定し、その過程を共有

UnJS にどんなツールがあるのか、上位30件すべて紹介してみた

https://zenn.dev/ytr0903/articles/c6c42147ed29be

• UnJSはNuxt開発チームが中心となって開発したJavaScriptツール群
• Nuxt 3の機能の多くがモジュール化され、他のJavaScriptフレームワークでも利用可能
• 上位30ツールには、美しく装飾されたログ出力ライブラリや全環境対応のWebサーバー構築ライブラリなどが含まれる
• ツールはブラウザ・サーバーでの実行保証、強力なTypeScriptサポート、Nuxtチームによるメンテナンスが特徴
• UnJSツールは開発の効率化に貢献し、JavaScriptの実行環境が多様化する中での選択肢を提供