こんにちは！マイクです。今日は2024年9月28日、土曜日ですね。今日も「zenncast」をお聴きいただきありがとうございます！今日はZennでトレンドになっている記事をいくつかご紹介していきますよ。
さて、前回紹介した記事は「ClerkのReact Componentが便利すぎるので覗いてみる」、「【Github Actions】リリースノートとタグを自動生成する」、「【BPLS4】チームレジャーランドを支える技術」でしたね。これらのテーマは、開発者にとって非常に役立つものばかりでした。
では、今日も盛りだくさんの内容をお届けします！今日は5本の記事をご紹介しますね。
まず1つ目の記事は「コードレビューの時に気にしている、べからずTierリスト」です。こちらは、アルダグラムの開発チームが提唱するコードレビューの「べからず」ルールを、重要度に応じたティア別にまとめています。Lintを無視することは厳禁、特にエディタのLint機能を活用することが推奨されています。LintルールはSティア、RubyのRuboCopはAティア、KotlinのdetektはBティアと評価されています。また、巨大なクラスや関数、UIコンポーネントは読みづらくテストしづらいため、Sティアに位置付けられています。Mutableなオブジェクトや再代入可能な変数も、特別な理由がない限り使用を避けるべきで、Bティアとされています。TypeScriptにおいては、特に理由なくany型や型アサーションを使うことは厳禁で、SティアおよびBティアに分類されています。これらのルールを守ることで、コードの可読性や保守性を向上させることができます。
。...。
続いて2つ目の記事は「Vue.jsの v-model 正しく活用できていますか？」です。この記事では、Vue.jsの`v-model`の正しい利用法と注意点について述べています。`v-model`は双方向バインディングを実現するためのショートハンド構文であり、これを使うことでコードの記述量を減らし、保守性を向上させることができます。具体例としてチェックボックスの状態管理が紹介されていますが、`v-model`の使用にはいくつかのアンチパターンに注意が必要です。例えば、親コンポーネントから渡された`props`を子コンポーネントで`v-model`に設定することや、外部のComposition APIやStoreで管理しているリアクティブな値を`v-model`に使用することは避けるべきです。これにより、コンポーネント間の密結合を防ぎ、保守性を保つことが可能です。`v-model`はただの`props/emit`のショートハンドではなく、パフォーマンスの最適化も担っているため、できるだけ利用することが推奨されています。
。...。
3つ目の記事は「MySQLのインデックスってどれくらい効果があるの？試してみた」です。こちらは、MySQLのインデックスの効果を実際に試してみた結果をまとめた記事です。10万件のランダムデータを挿入したシンプルなemployeesテーブルを使い、インデックスの有無によるクエリ実行時間を比較しました。インデックスが有ると検索性能が大幅に向上することが確認され、特にsalaryが75000の人を検索した場合、インデックスなしでは0.055秒、インデックスありでは0.0026秒と、約20倍の速度向上が見られました。また、文字列検索でも同様の効果が確認されています。ただし、インデックス効果が薄れる「アンチパターン」も確認されていて、例えばカーディナリティが低いカラムや、インデックスカラムに演算を行うクエリではパフォーマンスが改善されないことが示されました。
。...。
4つ目の記事は「静的ファイル配信を対応したCloudflare WorkersにRemixを移行してログ出力を容易にする方法」です。CloudflareがWorkersのアップデートを発表し、静的ファイルをCloudflare Workersで直接配信できるようになりました。これにより、RemixをCloudflare Workersにデプロイし、全機能を活用する方法が探求されています。ビルドプロセスも変更され、`wrangler pages functions build`を使用して新しい出力ディレクトリが生成されます。また、静的ファイルが配信される際、Cloudflare Workersは動作しないため、静的ファイルのリクエストはログとして記録されず、動作カウントにも含まれません。これにより、無料で静的ファイルを配信することができるというメリットがあります。
。...。
最後に5つ目の記事は「続・URLシェアを支える技術 CompressionStream」です。この記事では、lz-stringライブラリとCompressionStreamの比較について解説しています。CompressionStreamはWeb Stream APIを基にしており、ストリーミング処理によって大量のデータを効率良く扱うことが可能です。圧縮アルゴリズムの違いも重要で、lz-stringは独自のLZベースのアルゴリズムを使用しているのに対し、CompressionStreamは`gzip`や`deflate`アルゴリズムを採用しています。CompressionStreamはモダンブラウザやNode.js v18から利用可能で、フロントエンドでも手軽に利用できるという点が強調されています。圧縮率の比較サイトも提供されており、実践的な使用例と圧縮性能のデモが行える点も魅力です。
。...。
さて、今日は5本の記事を紹介しました！コードレビューのべからずルールから、Vue.jsのv-modelの活用法、MySQLのインデックス効果、Cloudflare Workersの活用、最後にCompressionStreamについてお話ししました。どれも開発に役立つ情報ですので、ぜひチェックしてみてくださいね。
それでは、次回もお楽しみに！詳しい内容はショーノートに書いてありますので、ぜひそちらもご覧ください。また、番組の感想をお待ちしています！今日はここまで、マイクでした！