皆さん、こんにちは！マイクです！今日は2024年10月3日、木曜日ですね。さて、今日も「zenncast」で、Zennでトレンドになっている記事を紹介していきますよ！
それでは早速、今日の内容に移りましょう。まず、前回紹介した記事は「typeとinterfaceって結局どう使い分ければ良い？」「RAGを社内用語に強くするチャンク分割の手法「MoGG」」「AWSエンジニアに必要な知識」となっています。気になる方はぜひチェックしてみてくださいね。
さて、今日紹介する記事は全部で5本あります！それでは、内容をお届けしていきます！
最初の記事は「人に優しいフォームを作ろう、特に日本人に」です。この記事では、日本人にとって使いやすいフォーム作成のポイントが解説されています。特に重要なのは、`autocomplete` 属性を意識した実装です。名前、郵便番号、住所、日付、電話番号の入力に関して、具体的な注意点が挙げられています。
たとえば、名前の入力では、ふりがな欄に`autocomplete="name"`を指定しないことが推奨されています。また、郵便番号は`type="text"`を使い、`inputmode="numeric"`を加えてハイフンの有無を受け入れることが重要です。住所の自動補完機能も、ユーザーのストレスを軽減するためには、ボタン押下時の補完が推奨されています。
都道府県の選択については、プルダウンではなく`autocomplete="address-level1"`を使ったテキスト入力がいいとされています。日付入力では、年月日を分けずに一つの入力欄にまとめ、`type="date"`を使用してカレンダー入力を提供することが望ましいですね。
全体として、フォームの使いやすさはユーザー体験に直結し、離脱を防ぐためにも細部まで配慮した設計が大切です。
。...。...。...。
続いて、2つ目の記事は「すぐ消えてしまう要素をDevToolsで確認するTips集」です。本記事では、DevToolsを使って一瞬で消えてしまう要素を確認するための効率的な方法を紹介しています。特に、CSSやJavaScriptのイベントによって表示制御されている要素の確認手法に焦点を当てています。
まず、CSSイベントでの確認方法として、`hover`のようなCSSイベントで表示される要素は、DevToolsの「Force element state」機能を使って簡単に状態を切り替えられます。また、JavaScriptの`onMouseOver`や`onMouseOut`イベントによる表示制御も、DevToolsで確認することができます。
さらに、フォーカス時に表示される要素は「Emulate a focused page」を使用して強制的に確認することができ、スニペットを利用することで、様々な表示パターンを一度に確認できるのも魅力です。
これらの手法は、エンジニアがWeb開発時に役立つ実践的なテクニックであり、DevToolsの多様な機能を活かすことで、コードを変更せずとも要素確認が可能になりますよ。
。...。...。...。
3つ目の記事は「GitHub CI/CD実践ガイドイベント基調講演ダイジェスト＋FAQ #Forkwell_Library」です。2024年9月17日に行われた「GitHub CI/CD実践ガイド」イベントの基調講演では、著者が自身の書籍の主要なポイントを説明しました。
CI/CDはソフトウェア開発の複雑性を管理し、ユーザーに価値を提供するための手法です。CIはテストと統合を自動化し、CDはリリースプロセスの自動化を目指します。GitHub ActionsはこのCI/CDプロセスを実現するための強力なツールで、設定はYAMLファイルで行います。
持続可能性を高めるためには、依存関係の管理が重要で、GitHubのDependabotを活用することで依存ライブラリの自動バージョンアップが可能になります。脅威への対策としては、第三者のアクション利用時には提供者を確認し、信頼できるソースからのみ導入することが求められます。
全体として、GitHub CI/CDの導入と運用に関する実践的な知識が提供され、読者にとっての最高の読書体験を提供するために尽力しています。
。...。...。...。
次に紹介するのは「TS 5.7の --rewriteRelativeImportExtensions オプションを使う前に読む記事」です。このオプションは、相対パスのインポートにおいて拡張子を変更する機能を提供しますが、使用には慎重さが求められます。
TypeScriptのNode.js向けモジュール解決では、相対パスのインポートに`.js`拡張子を使用する必要があります。このため、`.ts`ファイルを`.js`としてインポートすることは不自然に感じることがありますが、TypeScriptの方針からは受け入れられています。
また、このオプションを使用する場合、過去30回のリリースでこれがなぜ無かったのかを説明できない場合は使用を避けるべきとのこと。特に、`--experimental-strip-types`を使用しない場合にはこのオプションの使用が推奨されていません。
エンジニアは、このオプションの背景や潜在的な問題を理解した上で、使用を検討する必要があります。
。...。...。...。
最後、5つ目の記事は「webpack to Rspack ~ Rspack移行の結果と注意点 ~」です。プロダクトのビルドツールをwebpackからRspackに移行した経緯と注意点について説明されています。RspackはRustで書かれた高速なJavaScriptのバンドルツールで、移行が容易であることが決め手となりました。
具体的には、ビルド速度の改善が挙げられ、開発ビルドはwebpackが18.0秒に対し、Rspackは8.0秒、プロダクションビルドはそれぞれ24.5秒と8.7秒という大幅な速度改善が見られました。ただし、移行時にはCSSの読み込みエラーや特定のスタイルが適用されない問題がありましたが、これらはそれぞれ適切な対策を講じることで解決しました。
今後、Rspackのような新しいビルドツールへの移行は増えていくと考えられますが、安定性に不安が残るため、移行は慎重に行う必要があります。新しい技術の採用を検討する際には、エコシステムの成熟度や既存プラグインの互換性を考慮することが重要です。
さて、今日は5本の記事を紹介しましたね！内容を駆け足でおさらいすると、フォーム作成やDevToolsの使い方、GitHub CI/CD、TypeScriptの新オプション、そしてRspackへの移行についてお話ししました。
次回もまたお会いできるのを楽しみにしています！詳しい内容はショーノートに書いてありますので、ぜひそちらもご確認ください。また、番組の感想もお待ちしています！それでは、素敵な一日をお過ごしください！