みなさん、こんにちは！マイクです！今日は2024年9月23日、日曜日ですね！今日はZennでトレンドになっている記事をいくつかご紹介しますよ。
さて、前回紹介した記事は「Genspark Autopilot Agentってすごいね」と「コードレビューを楽しくする 5 つの LGTM 画像サービス」でしたね。これらの記事では、コードレビューを楽しくするための新しいツールについて触れましたが、今日は新しい情報をお届けします！
それでは、今日の内容に移りましょう！今日は全部で5つの記事を紹介しますよ！
まず最初の記事は、「サーバーレス技術の今と未来についてServerlessDays Tokyo 2024 直前イベントで話してきました」です。サーバーレス技術というのは、運用者がサーバー管理をクラウド事業者に任せられる、完全従量課金型のフルマネージドサービスのことです。この技術は、開発者がサーバーに依存しないプログラミングモデルを使用することができるため、非常に効率的です。
最近では、AWS Lambdaなどのサービスが1ミリ秒単位で課金されるようになり、オートスケールやゼロスケールの概念が定着してきました。セキュリティに配慮しつつ、リクエストごとにプロセスを立ち上げる技術も進化しています。また、AI拡張型の開発やコストに基づいたアーキテクチャの考え方も注目されています。特に、コスト削減がクラウドの利益に直結することが強調されており、Database as a Service（DBaaS）の普及も進んでいます。
さらに、フロントエンドとバックエンドの接点では、データの型安全性が重要視されており、スキーマの一貫性を保つ新たな取り組みも進行中です。今年のサーバーレスに関するトピックは、AIによるコード生成やコスト最適化、DBaaSの進展、そしてクロスクラウドの重要性に焦点を当てています。参加者はサーバーレスの未来についての知見を深める機会を得られることでしょう。
。。。。。。
次にご紹介する記事は、「NaNのビットパターンを使ってWebAssemblyからCPUの命令セットを推測する」です。ここでは、浮動小数点数のNaN（非数）のビットパターンに着目し、WebAssembly（Wasm）を使ってホストCPUの命令セットを推測する方法について解説しています。
NaNのビットパターンはCPUの実装によってわずかな違いがあり、Wasmは実装依存の結果を許容しています。このため、WasmランタイムはホストCPUの浮動小数点命令をそのまま使用することが多く、NaNのビットパターンを観察することでホストCPUの命令セットを推測できるのです。
具体的には、x86(_64)、RISC-V、Armなどのアーキテクチャを判定する方法が示されており、サンプルコードを用いてNaNのビットパターンを取得し、その結果を元にCPUを推測する仕組みが解説されています。また、浮動小数点数の演算における環境依存性についても触れられ、特にRISC-Vでは常にカノニカルなNaNが返されることが述べられています。
Wasmランタイムの改変が必要な場合もあるため、環境依存性の重要性が強調されています。
。。。。。。
続いて紹介するのは、「React のダブルクリック（多重クリック）対策一覧」です。Reactアプリでのダブルクリック対策について、特にボタンの多重クリックを防ぐ方法が解説されています。
ダブルクリックによる問題は、API呼び出しが複数回行われることに起因しており、タスク追加機能を例に挙げています。具体的には、タスク名を入力後「追加」ボタンを2回クリックすると、タスクが重複して追加されるという問題が発生します。
対策方法は、主に3つあります。一つ目は`useState`フックを利用してタスク作成処理の実行中状態を管理し、処理中は「追加」ボタンを無効化する方法です。二つ目は`useRef`フックを使い、処理中の状態を記録して次回の実行をスキップする方法です。三つ目はボタンのDOMを直接操作し、タスク作成処理中にボタンを無効化する方法です。
これらの対策を通じて、ユーザーの誤操作による不具合を効果的に防ぐことができるでしょう。
。。。。。。
次は、「ts-remove-unusedというTypeScriptの不要なコードを自動で削除するツールをつくった」です。ts-remove-unusedは、TypeScriptプロジェクトから不要なコードを自動で削除するツールです。
既存のツールでは未使用定義の検出はできますが、プロジェクト全体における不要なコードの判断は難しいのが現実です。このツールは、不要なコードを検出するだけでなく、そのコードを自動で削除する点が特徴です。
特に、未使用の変数や関数を削除することでプロジェクト全体のクリーンアップが可能となります。また、tsconfig.jsonの設定に基づいて不要なコードを判定するため、npmでのインストール後、コマンドを使って簡単に利用できます。
テストファイルの扱いについても留意が必要で、実装ファイルとテストファイルを分けることが推奨されています。最終的には、開発者にとって使いやすいツールを目指しているのです。
。。。。。。
最後にご紹介するのは、「Vue3.5からの改善と振り返るdefineCustomElementについて」です。Vue3.5の更新では、`defineCustomElement`に関連する改善がなされました。
Custom ElementsはWeb Componentsの一部で、独自のHTML要素を作成するためのJavaScript APIです。これにより、異なるフロントエンド技術スタック間で共通のUIコンポーネントを利用できるようになります。
Vue3.2から追加された`defineCustomElement` APIにより、VueコンポーネントをCustom Elementsとして使用できるようになりました。具体的には、コンポーネントの拡張子を`.ce.vue`に変更し、`defineCustomElement`で呼び出すことで簡単に登録できます。
Vue3.5では、Custom Elementsの`shadowRoot`を取得する`useShadowRoot()`ヘルパーが実装され、開発がさらに便利になりました。今後、より多くのプロジェクトでCustom Elementsが活用されることが期待されます。
今日はここまで！今回ご紹介した内容を駆け足でおさらいしますと、サーバーレス技術、NaNのビットパターン、Reactのダブルクリック対策、ts-remove-unused、そしてVue3.5の改善についてお話ししました。次回お会いできるのを楽しみにしています！詳しい内容はショーノートに書いてありますので、ぜひご覧ください！番組の感想もお待ちしています！それでは、また！