はてなブックマーク

/** * This is intended to be a basic starting point for linting in your app. * It relies on recommended configs out of the box for simplicity, but you can * and should modify this configuration to best suit your team's needs. */ /** @type {import('eslint').Linter.Config} */ module.exports = { root: true, parserOptions: { ecmaVersion: "latest", sourceType: "module", ecmaFeatures: { jsx: true, }, },

はじめに ReactのコンポーネントでlocalStorageの値を扱っても、値の変化によるレンダリングは引き起こされません。これは、localStorageの値がReactの文脈における状態としては扱われないためです。 例としてuseStateによるカウンターと、localStorageの値をそのまま使うカウンターを用意しました。 localStorageの方は値の変化が画面に反映されるような期待した動作は生じません。 この記事では、この点を改善するために以下の2点を満たしたカウンターを作成することをゴールとします。 初期値はlocalStorageがもつ値に設定 ボタンのクリックによって表示される値とlocalStorageに保存される値の両方を更新 localStorage localStorageは保存期間に制限がないローカルのStorageオブジェクトです。key-value方式

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに BM25は特に検索アルゴリズムに使われる自然言語処理の一つで、tf-idfの進化系である。具体的には単語の出現頻度に基づいて、文章の順位付けを行う。tf-idfとの違いはドキュメントが短いほど順位が高くつき、長いほど順位が低くつく傾向があるというところである。この記事では数式を紐どいて、BM25の性質を説明する。 数式 BM25の数式についてまず説明する。$D$を文章全体の集合(以下全文章と呼ぶ)、$d$は文章であり$D$の要素、$q$を検索クエリ($q_i\in q$)とした時のBM25の数式は以下のようなものである。 $$

/** @type {import('next').NextConfig} */ const nextConfig = { experimental: { typedRoutes: true, }, }; module.exports = nextConfig; TypeScriptを用いた型提供なので、TypeScriptを用いたアプリケーションのみで有効なことに注意してください。 Statically Typed Linksによる型付け Stacically Typed Linksを有効にするとNextjsはApp Routerのディレクトリ構成をもとにルーティングに関する様々な型を生成してくれます。 型はnext devとnext buildを実行するタイミングで.next/types/link.d.tsに作られます(next devは実行中であればルーティングの変更に合わせて自動で

はじめに 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つとして参考にしていただければ幸いです。 グローバルな状態 グローバルな状態は主にアプリケーション全体のように広い範囲で扱う状態を指します。具体的にはサーバーから送られてくるユーザーの一覧データ取得や、スナックバーの表示のようなアプリ全体で扱うコンポーネントの状態管理などを扱います。データを取得するために利用するパラメーターのように特定の機能に対する値など全体で保持したい状態(異なるライフサイクルで扱う状態)もグローバルな状態として扱います。 そんなグロ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

目標 この記事では指定したフィールド上にファイルやフォルダをドラッグ&ドロップ(以後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コマンドで環境を作成します。