このReactライブラリは面白い！ パート 2

¡Hola! こんにちは！テラーノベルのオスカルです。Webの開発をしてます。いつも言うんだけど、日本語はまだまだ勉強してますので、応援してください！

ᕙ( •̀ ᗜ •́ )ᕗ

前に、あまり有名ではないけれども非常に興味深く、時間をかける価値のあるいくつかのライブラリについて記事を書きました。今回は、新しいライブラリをいくつか見つけて、そのシリーズを続けます。

さあ、確認してみましょう！

1- animejs 🔗

AnimeJSは、既存のHTML要素やReactコンポーネントにアニメーションを簡単に追加できる軽量なアニメーションライブラリです。プロジェクトに素敵なタッチを追加するための非常に良いソリューションです。React用のラッパーとして、react-animeというものもあります。

私が非常に便利だと感じたのは、連結されたアニメーションを追加する方法です。例えば、次のようにして要素を一つずつアニメートして表示できます：

テラーノベルのトップページに入れてみました。 この例では、react-animeのラッパーを使用しました。パッケージをインストールしてページにインポートした後、アニメーション化する要素を<Anime>タグで囲むだけで簡単です。

<Anime
  opacity={[0, 1]}
  translateY={'2em'}
  easing="easeOutQuint"
  duration={300}
  delay={(_element: Element, index: number)=> index * 1000}>
    <h1>
        夢中になる物語が
        必ずみつかる。
    </h1>
    <Thumbnails />
    <div>
        <p>
            テラーノベルは45万人以上の作家、400万以上の小説が投稿されている
            日本最大級の作家コミュニティです。あなたの読みたいがきっとある。
        </p>
        <p>さぁ、物語の世界に飛び込もう。</p>
        <AppButton> アプリではじめる </AppButton>
    </div>
</Anime>

アニメーション化するCSSプロパティを指定できます。前述の例では、opacityとtranslateYがあります。opacityの場合、値は2つの値からなる配列で、指定されたアニメーション期間内で0から1に変化します。translateYの場合、デフォルトのY位置を少し下に移動します。この場合、各要素のアニメーション間に1秒追加しています。

  delay={(_element: Element, index: number)=> index * 1000}>

通常のCSSトランジションを使用してこれを行うのはかなり簡単ですが、興味深いのはdelayプロパティです。このプロパティは、<Anime>内の要素と表示される順序のインデックスを受け取る関数を受け取ります。したがって、アニメーションがいつ実行されるかを決定する値を返すことができます。

2- react-swift-reveal 🔗

これもアニメーションライブラリですが、特定のユースケース向けです。要素がビューポートに入るときに、スクロール時にも物をアニメートするために使用できます。ちょっとトップページに入れてみました：

非常に使いやすいです。利用可能なリストから望むアニメーション効果をインポートし、アニメーションさせたいコンポーネントを包むだけです：

import { Flip, Fade  } from 'react-swift-reveal';
[..]

<Fade>
  <FooterComponent>
    <Flip>
        <img src="appStoreIcon" />
    </Flip>
    <Flip>
        <img src="googlePlayIcon" />
    </Flip>
  </FooterComponent>
</Fade>

そのライブラリは、要素がビューポートに表示されると指定されたアニメーションをトリガーします。遅延、方向、または期間など、異なるアニメーションプロパティを変更することもできます。非常にわかりやすく使いやすいです。

// 1秒待ってから、アニメーションの期間も1秒
<Fade duration={1000} delay={1000}>
  <FooterComponent>
    // ボタンのフリップアニメーションを1つずつ順番
    <Flip delay={500}>
        <img src="appStoreIcon" />
    </Flip>
    <Flip delay={1000}>
        <img src="googlePlayIcon" />
    </Flip>
  </FooterComponent>
</Fade>

3- react share lite 🔗

このライブラリを使用すると、複数のSNSサービスに簡単かつ効果的にシェアリンクを追加することができます。

好きなシェアコンポーネントをインポートし、シェアしたい内容を指定するだけで、素敵なクリック可能なアイコンが表示され、簡単に機能します。

import {
  FacebookShare,
  TwitterShare,
  LinkedinShare
[..]
} from 'react-share-lite'

[..]

 <FacebookShare
  url="https://www.teller.jp"
  quote="Share the joy of Teller Novel in Facebook"
/>
<TwitterShare
  url="https://www.teller.jp"
  title="Share the wonders of Teller Novel in Twitter"
  hashtags={["#tellernovel", "#zenn", "#spainIsTheBest"]}
/>
 <LinkedinShare
  url="https://www.teller.jp"
  title="Share the Teller Novel endless fun in LinkedIn"
/>

各シェアコンポーネントには独自のオプションがあり、サムネイル画像やハッシュタグを設定することができます。本当に使いやすいです！

Just works です！

もしシェア数やいいね数などの高度な機能が必要な場合は、各SNSの認証情報を追加し、react-share-kitというこのライブラリの高度なバージョンを使用する必要があります。

4- react otp input 🔗

近年、ウェブサイトで二要素認証方式を使用することが非常に一般的ですが、これに対するネイティブなHTML入力タイプはありません。ご存知の通り、これらは複数の文字入力フィールドが連結されたもので、1つに入力すると自動的に次のフィールドにフォーカスが移動し、削除すると逆の動作が行われます。最終的に、すべてのフィールドの値が連結されて値が取得されます:

このコンポーネントは自分で作成しましたが、このライブラリが存在することを知っていれば、時間を節約できたのになと思います 😅

使い方は非常に簡単です。コードが入力される状態を1つ定義し、生成された入力フィールドの数や間隔などのいくつかのオプションとともにOtpInputコンポーネントに渡す必要があります。

import OtpInput from 'react-otp-input';

const [otp, setOtp] = useState('');

<OtpInput
  value={otp}
  onChange={setOtp}
  numInputs={8}
  renderSeparator={<span>-</span>}
  renderInput={(props) => <input {...props} />}
/>

入力スタイルや動作、その他さまざまな設定を定義することができます。詳細については、ライブラリのサイトのAPIセクションをご確認ください。

5- react credit cards 2 🔗

これもかなりクールです。支払いフローにクレジットカード情報入力コンポーネントを簡単に追加でき、非常に素敵な視覚的インパクトがあります。

この場合、固定された構造を持つ状態を定義し、変更およびフォーカスの処理を行う必要があり、また、必要な入力を持つフォームを自分で追加する必要があります。コンポーネントは、ユーザーが追加しているクレジットカードの種類を検出し、適切なデザインを表示し、カードに関する情報を適切な場所に表示するだけで、フォームの状態にのみ反応します。

import Cards from 'react-credit-cards-2';

[..]

const [state, setState] = useState({
  number: '',
  expiry: '',
  cvc: '',
  name: '',
  focus: '',
});

const handleInputChange = (evt) => {
  const { name, value } = evt.target;
  setState((prev) => ({ ...prev, [name]: value }));
};

const handleInputFocus = (evt) => {
  setState((prev) => ({ ...prev, focus: evt.target.name }));
};

[..]

<Cards
  number={state.number}
  expiry={state.expiry}
  cvc={state.cvc}
  name={state.name}
  focused={state.focus}
/>;

<form>
  <input
    type="tel"
    name="number"
    placeholder="Card Number"
    pattern="[\d| ]{16,22}"
    required
    onChange={handleInputChange}
    onFocus={handleInputFocus}
  />

  <input
    type="text"
    name="name"
    placeholder="Name"
    required
    onChange={handleInputChange}
    onFocus={handleInputFocus}
  />

  <input
    type="tel"
    name="expiry"
    placeholder="Valid Thru"
    pattern="\d\d/\d\d"
    required
    onChange={handleInputChange}
    onFocus={handleInputFocus}
  />
  <input
    type="tel"
    name="cvc"
    placeholder="CVC"
    pattern="\d{3,4}"
    required
    onChange={handleInputChange}
    onFocus={handleInputFocus}
  />
</form>

自動的に検出される多くのサポートされているカードがありますが、コンポーネントのプロパティを介して、ユーザーに使用可能なカードを定義することもできます。

6- react resizable panels 🔗

このライブラリを使用すると、パネルやパネルのグループを使用して、ウェブサイトにリサイズ可能なレイアウトを追加できます。これらは一緒に動作し、反応します。

これは、コンテンツ作成や管理サイトに便利であり、また非常に使いやすいです。単に方向を horizontal または vertical に設定した PanelGroup を追加し、その中にパネルを追加するだけです。また、パネルの中にグループをネストしたりすることもできるため、非常に柔軟です。

import { PanelGroup, Panel, PanelResizeHandle } from 'react-resizable-panels';

<PanelGroup direction="horizontal">
    <Panel>
        <img src={logoLeft}/>
    </Panel>
    <PanelResizeHandle style={{border: '2px solid white'}}/>
    <Panel>
        <PanelGroup direction="vertical">
            <Panel>
                <img src={logoUp} />
            </Panel>
            <PanelResizeHandle style={{border: '2px solid white'}}/>
            <Panel>
                <PanelGroup direction="horizontal">
                    <Panel>
                        <img src={logoDown} />
                        <img src={logoLeft} />
                    </Panel>
                    <PanelResizeHandle style={{border: '2px solid white'}}/>
                    <Panel>
                        <img src={logoDown} />
                        <img src={logoRight} />
                    </Panel>
                </PanelGroup>
            </Panel>
        </PanelGroup>
    </Panel>
    <PanelResizeHandle style={{border: '2px solid white'}}/>
    <Panel>
        <img src={logoRight}/>
    </Panel>
</PanelGroup>

最小パネルサイズの設定やパネルの折り畳み可能な設定など、多くのオプションがあります。また、現在のレイアウトをローカルストレージやCookieに保存するためのコールバックもあります。これにより、ユーザーは次回も同じ構成を取得できます。このライブラリを使用する場合は、例サイトをチェックする価値があります。👀

7- react password strength bar 🔗

フォーム内のパスワード入力の後にこのコンポーネントを追加すると、視覚的な方法でパスワードの強度を表示する動的なバーが表示されます。

このコンポーネントは、一般的なパターンや123123123やzxcvbnなどのよく使われるパスワードなど、一般的な使用パターンを検出するだけでなく、パスワードが異なる種類の文字を含んでいるかどうかもチェックする人気のあるzxcvbnライブラリに基づいています。

デフォルトでは、このライブラリは英語ですが、すぐにコンポーネントのプロパティとして日本語の翻訳を追加できます。スタイルも簡単に変更できるため、使いやすいです。

import PasswordStrengthBar from 'react-password-strength-bar';

[..]
const [password, setPassword] = useState('');

[..]
<input type="password" onChange={(e)=> setPassword(e.target.value)}
value={password} />
 <PasswordStrengthBar
  password={password}
  scoreWords={['弱', '弱', '脆弱', '良好', '強']}
  shortScoreWord="短い"
  scoreWordStyle={{
    fontSize: '16px',
    fontWeight: 'bold',
    color: 'black',
   }}
/>

zxcvbnライブラリは辞書が含まれているためgzip圧縮しても400kBあるので、ページの読み込みスコアの観点から考慮すべき事柄です。詳細についてはzxcvbnライブラリページのパフォーマンスセクションをご確認ください。

終わりに

この記事で、プロジェクトで使用できるライブラリを見つけていただけることを願っています 🙏

お読みいただき、ありがとうございました！

¡Muchas gracias!