はてなブックマーク

はじめに BM25は特に検索アルゴリズムに使われる自然言語処理の一つで、tf-idfの進化系である。具体的には単語の出現頻度に基づいて、文章の順位付けを行う。tf-idfとの違いはドキュメントが短いほど順位が高くつき、長いほど順位が低くつく傾向があるというところである。この記事では数式を紐どいて、BM25の性質を説明する。 数式 BM25の数式についてまず説明する。$D$を文章全体の集合(以下全文章と呼ぶ)、$d$は文章であり$D$の要素、$q$を検索クエリ($q_i\in q$)とした時のBM25の数式は以下のようなものである。 $$ score(q, d) = \sum_i idf(q_i)\times\frac{(k_1+1)f(q_i, d)}{f(q_i, d)+k_1(1-b+b\frac{|d|}{avg(dl)})} $$ $idf(q_i)$は単語$q_i$のidf、$f

はじめに NextjsでApp Routerを用いた開発を行なっていますか？ App RouterはReact Canariesから提供されるサーバー側コンポーネントとクライアント側コンポーネントを利用したコンポーネント単位でレンダリング方法を制御する機能や、直感的なルーティング、そのほかにも豊富な機能を持つNextjsの新し機能です。 そんなApp Routerですがアプリケーション内のルーティングに対して型を付与するStatically Typed Linksという機能がバージョン13.2からbeta版で提供がされています。 Tanstack Routerのregistering-router-typesやVue Routerのtyped-routesと似たような機能です(何もbeta版です)。 この記事ではそんなStatically Typed Linksの使い方について紹介します。

はじめに Viteのバージョン4.0の公開をアナウンスするブログでVitestについて言及されていました。 Vitest adoption is exploding, it will soon represent half of Vite's npm downloads. Nx is also investing in the ecosystem, and officially supports Vite. Vitestの採用は爆発的に増えており、まもなくViteのnpmダウンロードの半分を占めるようになるでしょう。Nxもエコシステムに投資しており、Viteを公式にサポートしています。(DeepLによる翻訳) これまではJavaScript、TypeScriptにおけるテストツールとしてはJestという成熟したツールがあるので、Vitestを利用するのは趣味だったり少し先の未来だろうと考え

はじめに SWCは多くのライブラリやランタイムで利用されています。 Next.js11.1のブログによるとBabelやTerserで行っていた処理をパフォーマンス改善のためにSWCを利用していると書かれています。 他にもDenoでTypescriptやTSX、JSXをJavaScriptに変換する際に利用されています。 最近ではVite4.0がリリースされ、Reactの環境として開発中にSWCを用いるプラグインを新たに公開しました。 この記事ではそんなさまざまな主要ライブラリ、ランタイムで利用されているSWCについて紹介します。 SWCとは SWCはRustをベースに作成された高速で拡張が可能なWebプラットフォームで、JavaScriptとTypeScriptのコンパイルとバンドルをマルチコアで行うことが出来ます。シングルコアでもBabelの20倍高速で、4コア使用すると70倍も高速にな

はじめに Viteを用いて作成したReact×TypeScript環境をAWSのS3とCloudFrontを用いて静的ウェブサイトを公開します。説明にReactを使うだけでS3に置くのは静的ファイルなので他の環境でも同様の方法で再現可能です(記事ではReactのコードにほとんど触れません)。 何を行っているかが分かりやすいという観点から、awsコンソール上からの操作で設定していきます。また、今回最小限の設定で構築しました。お好みで設定を加えてお使いください。 開発環境のセットアップ Viteの環境はワンラインで作ることが出来ます。 コマンドラインに従って入力を進めると環境を作成できます。 作成した環境に入ってnpm install、npm run devを行って動作を確認してください。 ブラウザで以下のような画面を確認できたら完了です。 npm run buildを行うと、dist配下にバ

はじめに Reactで扱う状態は大きく2種類に分けられると考えています。アプリケーション全体や複数のコンポーネント間で扱うグローバルな状態と単一コンポーネントや周辺の隣接したコンポーネントだけで扱うローカルな状態です。 この記事では私の考えるグローバルな状態とローカルな状態それぞれの扱い方を紹介します。Reactにおける状態管理の方法論の1つとして参考にしていただければ幸いです。 この記事ではrecoilとSWRに関する情報が出てきます。類似ライブラリについての知識があれば読み進められますが、不安な方はドキュメントを参照しながら読んで下さい(recoilのドキュメントは英語なので苦手な方は手前味噌ですがこちらを参照してください)。 グローバルな状態 グローバルな状態は主にアプリケーション全体のように広い範囲で扱う状態を指します。具体的にはサーバーから送られてくるユーザーの一覧データ取得や、

はじめに SWRとはReactのデータ取得を快適に行うためのAPIを提供するライブラリです。 2022/12/09にメジャーバージョンである2.0がリリースされました。それを記念してこの記事では2.0によって追加された新機能を紹介します。 SWRが提供する移行ガイドはこちらです。 useSWRMutation SWR2.0ではuseSWRMutationという新しいhooksを利用できるようになりました。useSWRのようなhooksが呼び出されたタイミングで発火するのではなく任意のタイミングで発火させることができます。useSWRMutationは以下のように書いて利用します。 import useSWRMutation from 'swr/mutation' const { data, error, trigger, reset, isMutating } = useSWRMutati

目標 この記事では指定したフィールド上にファイルやフォルダをドラッグ&ドロップ(以後D&Dと呼びます)するとinputでファイルやフォルダを複数アップロードした時と同じ結果を得られるようにすることを目標とします。 Fileオブジェクト ファイルには5つのプロパティがあります(Deprecatedされたものは除いてます)。 lastModified: ファイルの最終更新時刻 name: ファイルの名前 webkitRelativePath: Fileの相対パス(標準化されてません) size: ファイルのサイズをバイト単位 type: ファイルのMIME タイプ inputの動作確認 お手本とするinputの動作を確認します。ファイルだけを扱う場合とフォルダだけを扱う場合で挙動が異なるので分けて紹介します。 ファイル 複数ファイルをinputする場合は属性にmultipleを与えることででき

はじめに 先日denoのバージョンが1.28となりました。これによってdenoからnpm互換性の機能を安定して利用することが可能となり、多くのnpmモジュールの利用が行えるようになりました(Release blog)。 この記事では1.28のバージョンアップにともなってViteを用いた環境をDenoでも構築可能になったのでその方法を紹介します。とても簡単にできるのでDenoで開発したい方はぜひお試しください。この記事はこちらを参考にしました。 型情報を与えてTypeScriptの利用も試みましたが、型がうまく伝わらずdenoの実行時に満足のいくチェックをさせるところまで検証できませんでした。TypeScriptを用いた構築が可能になれば再度紹介したいと考えています。 Viteを用いた環境構築 まず、Nodejsで開発するときのVite環境の雛形が欲しいのでnpmコマンドで環境を作成します。