導入

多くの開発者は、標準的な Web アプリケーション機能 (ブール値の保存と管理、押されたキーの処理、ステッパーの作成など) に関して、しばしばこの機能やその機能を実行する方法を見つけようとし、さらに多くの場合、機能を最初から実装します。

車輪の再発明は必要ありません!

さまざまなフレームワーク (React、vue など) の再利用可能な関数のライブラリの作成者やユーザーは、このアプローチをこのような反応で見ています。

Vue の場合 — たとえば、vueuse です。 (vue ユーティリティ関数)

React の場合、現時点で最も優れているのは、新しく積極的にサポートされている Reactuse (反応フック用) です

これらのライブラリはどのような問題を解決しますか?

これらは、開発者の困難を軽減するために必要です。開発者が作業で必要とする可能性のあるすべての機能を事前に準備します。既成のパッケージを使用する場合は、各関数が個別にテストされるため、少なくとも時間を節約でき、コード内でエラーやバグが見つかる可能性を最小限に抑えることができます。実際、そのユースケースは膨大です。このようなライブラリを利用すると、たとえば次のことが可能になります:

1. Web ソケットを使用する
2. クエリを作成
3. ユーザーの地理位置情報を検出
4. ローカルストレージを使用する
5. モーダルウィンドウを簡単に作成

これは考えられるすべてのケースのほんの一部にすぎません。

VueUse が優れているのはなぜですか?

VueUse は、vue 用のライブラリの中で最も人気のあるものの 1 つです。結局のところ、これは最も基本的な再利用可能な機能を提供します。これは Vue アプリケーションを作成するときの標準であり、これなしでは作成できないと考えている人もいます。このライブラリは 200 以上の関数で構成されており、上記のイデオロギーに従っていることに異論はありません。

React の最良の代替品

素晴らしいアイデアを完璧に実現する最良の方法として vueuse を賞賛する一方、トップ 1 の JS ライブラリ/フレームワークである React のことも忘れてはなりません。そして、ここでの状況はさらに不快なものでした。結局のところ、React には確立された、信頼性が高く、広範で唯一のライブラリは存在しません。さまざまな開発者によるいくつかの試みがありましたが、そのうちの 1 つはフックが少なすぎます (React ではフックです、そうです)。どこかに未処理の API を使用して構築されたフックがあります。

状況を改善するために、vueuse の代替として、react ではありますが、reactuse が登場しました。

例として、ライブラリを利用し、バニラの反応のみを使用してリスト管理を作成してみましょう。

import { useList } from "@siberiacancode/reactuse";

function App() {
  const { value, set, push, removeAt, insertAt, updateAt, clear, reset } =
    useList(["Pink Floyd", "Led Zeppelin"]);
}
export default App;

get value (配列値)、set (別の配列値を代入する関数)、push (配列に値を追加する関数)、removeAt (インデックスで削除)、updateAt (インデックスで値を変更)、clear (クリア)配列)、リセット (デフォルト値にリセット)
これらすべての状態と関数をバニラで取得するコードは反応します:

const [value, setValue] = useState(["Pink Floyd", "Led Zeppelin"]);
  const [initialValue] = useState(["Pink Floyd", "Led Zeppelin"]);
  const set = (newValue: string[]) => {
    setValue(newValue);
  };
  const push = (valueToPush: string) => {
    setValue((prevArray) => [...prevArray, valueToPush]);
  };
  const removeAt = (index: number) => {
    setValue((prevArray) => [
      ...prevArray.slice(0, index),
      ...prevArray.slice(index   1),
    ]);
  };
  const insertAt = (index: number, item: "string") =>
    setValue((l) => [...l.slice(0, index), item, ...l.slice(index)]);

  const updateAt = (index: number, newValue: string) => {
    setValue((prevList) =>
      prevList.map((element, index) => (index === index ? newValue : element))
    );
  };

  const clear = () => setValue([]);
  const reset = () => setValue(initialValue);

そして、まったく同じメソッドと状態が得られます。そしてコードははるかに小さくてシンプルです

ライブラリは積極的にメンテナンスされ、新しいフックが追加され、ドキュメントを備えた便利な Web サイトがあり、フックは単純なソースを使用し、より複雑な API を備えています。現在、80 を超えるフックが実装されています。また、他では見たことのない、まったく新しい実装があることにも注意してください:

• usePaint — 描画用のキャンバスを作成します。キャンバスを設定すると、フックを使用してその上に描画したり、ブラシのサイズ、色、不透明度、ステータス「描画」または「描画中」を調整したりできます
• useStopwatch — ストップウォッチの作成用
• useEyeDropper — 色の選択にスポイトを使用します
• ユーザーのデバイスまたはブラウザ API で動作する膨大な量のフック (useMemory、useOperatingSystem、useClipboard、useBrowserLanguage、useHash など)

結論

このようなライブラリは開発標準になるべきです。なぜなら、このようなライブラリを使用すると、ずっと前にすでに発明されていた小さな詳細に集中する必要がなく、インポートして使用するだけで済むからです。

リンクを再利用する

npm — github