皆さん、こんにちは！マイクです！今日は2024年8月3日、土曜日です。今日も「zenncast」をお届けしますよ〜！さあ、Zennで今日トレンドの記事を紹介していきますね。
まず、前回紹介した記事ですが、実はたくさんありましたね！「この夏押さえておきたいJavaScriptの配列操作コレクション」「Excelを用いたデータ分析のために日本株全銘柄のファンダメンタルを無料でデータ取得する方法」「Rails の非同期処理を Sidekiq から Cloud Tasks にリプレイスして Cloud Run のコストが6分の1になった話」などなど。気になる内容がたくさんありますね。
さて、今日紹介する記事は全部で5本です！それでは、さっそく今日の内容を紹介していきましょう！
まず1つ目の記事は、「【2024年夏】ブラウザ拡張機能開発を加速するフレームワーク・ツール3選をコードベース付きで紹介！」です。この記事では、ブラウザ拡張機能の開発を効率化するための3つの注目フレームワーク・ツール、WXT、Plasmo、Extension.jsを紹介しています。それぞれの特徴やセットアップ方法、実装フローをサンプルコードを交えて解説していますよ。
WXTは、Viteに基づいたフレームワークで、クロスブラウザ対応やManifest V2/V3のサポート、ホットモジュールリプレースメント機能、自動マニフェスト生成などの機能があります。開発モードでは、開発用ブラウザが自動起動するので、開発がスムーズに進みますね。
次にPlasmoですが、こちらはParcelベースのオールインワンフレームワークで、TypeScriptやReact、Vueをサポート。宣言的な開発アプローチが特徴で、マニフェストの自動生成や公開プロセスの自動化ができちゃいます。活発な開発者コミュニティも魅力ですね。
そしてExtension.jsは、迅速なプロトタイピングを重視したツールで、ビルド設定なしで開発が可能です。クロスブラウザ対応やMV2/MV3の機能サポートがあり、既存プロジェクトへの組み込みも簡単なんです。
最後に、フレームワーク選定の際にはプロジェクトに適したものを選ぶことが大事です。そしてPoC作成には積極的に利用することが推奨されています。ビルド後のマニフェストも要チェックですよ！
さて、次は2つ目の記事です。「Azure OpenAI Service の GPT-4o mini 要点まとめ」です！2024年8月1日、日本時間にAzure OpenAI ServiceでAPI経由のGPT-4o miniが利用可能になりました。コストパフォーマンスとレイテンシーに優れたこのモデル、gpt-3.5-turboに比べて低コストかつ高性能なんです。
最大トークン数は、入力128,000トークン、出力16,384トークンで、GPT-4oに比べて出力トークンが拡張されています。日本語のトークン効率も約27%向上しているとのことで、利用者にとって嬉しい改善ですね。
現在はEast USリージョンでのみ利用可能ですが、今後対応リージョンは増える予定です。デプロイにはGlobal-standardとStandardの2種類があり、動的なルーティングも可能です。
価格も非常にリーズナブルで、1Kトークンあたりのコストは入力が$0.00015、出力が$0.0006。これなら気軽に利用できそうですね！周辺機能のファインチューニングやAssistants APIは未対応ですが、Batch APIの情報が発表されており、今後の機能拡充にも期待が寄せられています。
さて、次は3つ目の記事です。「何故 jQuery ではなく React/Vue/Svelte が流行するのか？」という内容です。この記事では、jQueryが古いとされる理由と、React、Vue、Svelteなどの宣言型UIライブラリが支持される理由について考察しています。
jQueryは手続き型プログラミングスタイルを用いており、DOM要素の状態を把握しづらいという欠点がありますが、Reactなどは宣言型であり、理想のDOM状態を定義することで、状態の理解が容易になります。過去のGUI作成手法は宣言型に近く、jQueryがそれを手続き型に変えたスタイルでしたが、自由度が高いがゆえにDOMの状態が分かりづらくなり、それを解決するためにReactなどのライブラリが開発されたのです。
ReactやVueはそれぞれベストプラクティスを提供し、コードを分かりやすく保つ助けとなります。今後は、生成AIを利用したGUI自動生成が進むと予測されていますが、生成されたCSSの保守性に課題が残る可能性も指摘されています。フロントエンドにおいて可読性と保守性を重視した開発が重要だと結論づけています。
続いて4つ目の記事「Codemod PlatformでCodemodがより身近になる日が来るかもしれない」です。Codemod Platformは、codemodの開発とシェアに特化したプラットフォームで、VSCodeの拡張機能やコマンドラインから実行可能です。このプラットフォームでは、フレームワークのアップグレードや大規模なリファクタリング、定型的なプログラミング作業の効率化を目指しています。
現在、約160種類のcodemodが公開されており、主にNext.jsやReactに関連したものが多く見受けられます。Codemodの開発はCodemod Studioというブラウザエディターを使用することで、ASTを確認しながらjscodeshiftやts-morphを用いて開発可能です。
プロセスは、初期設定を行い、使用するcodemod engineを選択することから始まります。たとえば、remove-consoleというcodemodでは、JavaScriptやTypeScriptのファイルからconsoleの呼び出しを削除する機能を実装します。公開されたcodemodはCLIやVSCodeの拡張機能から実行可能で、CLIを使用することでスムーズに実行できるのがポイントですね。
最後に5つ目の記事「フォーカスインジケータの活用方針」です。サイボウズのkintone Design System Team（kDS）は、ユーザー体験を向上させるために共通コンポーネントを開発し、フォーカスインジケータの活用方針を整備しました。フォーカスインジケータは、主にキーボードで操作するユーザーにとって、現在の操作対象を視覚的に示す重要な要素です。
基本的には、アクセシビリティの要件を満たすために、ブラウザデフォルトのフォーカスインジケータを使用することが推奨されていますが、カスタマイズされたフォーカスインジケータも可能です。フォーカスは、キーボードイベントがページ内でどの位置にあるかを示し、全ての機能をキーボードで利用できる必要があります。
フォーカスインジケータには、ブラウザデフォルトを使用する方法と独自実装する方法の2つがあり、それぞれの特性を理解し、状況に応じて最適な方法を選択することが重要です。WCAG基準を満たすためには、どちらの方法でも慎重な検討が必要です。
さて、今日はここまでです！今日紹介した記事を駆け足でおさらいすると、ブラウザ拡張機能開発を加速するフレームワークや、Azure OpenAI Serviceの新しいモデル、jQueryからReact/Vue/Svelteへの移行理由、Codemod Platformの便利さ、そしてフォーカスインジケータの活用方針についてお話しました。
次回お会いできるのを楽しみにしています！詳しい内容はショーノートに書いてありますので、ぜひチェックしてみてくださいね！また、番組の感想もお待ちしています！それでは、またね〜！