反動 NPM (開発者のための仕組み)

イントロダクション

状態管理は、堅牢でスケーラブルなReactアプリケーションを構築する上で非常に重要な要素である。 さまざまな状態管理ライブラリの中で、Recoil は強力で柔軟なオプションとして登場しました。 実験的な状態管理フレームワークとしてFacebookによって開発されたRecoilは、複雑な状態管理シナリオを簡素化し、Reactアプリケーションでグローバルな状態を管理するための、より直感的なAPIを提供する。

この記事では、Recoilのコア・コンセプトとその利点、そしてReactプロジェクトでRecoilを使い始める方法について説明する。 また、IronPDF Node.js PDF Generation Toolsライブラリを使用して、WebサイトのURLやHTMLからPDFを生成する方法について調べます。

リコイルパッケージとは？

RecoilはReact用の状態管理ライブラリで、ReduxやContext APIといった既存のソリューションの限界に対処することを目的としている。 Reactアプリケーションで共有ステートを管理する、よりわかりやすくパフォーマンスの高い方法を提供し、きめ細かな更新、非同期ステート管理、Reactの並行モードとの容易な統合などの機能を提供する。

コア・コンセプト

Recoilは、他の状態管理ライブラリとは異なるいくつかの重要なコンセプトを導入している：

1. Atoms: AtomsはRecoilにおける状態の基本単位です。 コンポーネント間で共有できる状態の断片を表す。 アトムの値が変更されると、そのアトムを購読しているコンポーネントは自動的に再レンダリングする。

2. セレクター: セレクターは、1つ以上のアトムまたは他のセレクターから状態を導出する純粋な関数です。 これらは同期または非同期で、複雑な状態導出やデータ・フェッチ・ロジックを可能にする。

3. RecoilRoot: このコンポーネントは、Recoil コンテキストをコンポーネントツリーに提供するために使用されます。 これはReactのContext Providerに似ており、アプリケーションのうちRecoilステートを使う部分をラップしなければならない。

リコイルの利点

Recoilは、他の状態管理ソリューションに比べていくつかの利点がある：

• 細粒度のアップデート: Reduxでは、どの状態の変更でも複数のコンポーネントで再レンダリングが引き起こされる可能性がありますが、Recoilは変更された状態に登録されているコンポーネントのみが再レンダリングされることを保証し、より良いパフォーマンスを実現します。
• 同時モード互換性：RecoilはReactの同時モードとシームレスに連携するように設計されており、タイムスライシングやサスペンスなどの機能でよりスムーズなユーザー体験を可能にします。
• 簡単な非同期状態：データのフェッチのような非同期状態の処理は、非同期セレクターの組み込みサポートによりRecoilでより簡単です。
• スケーラビリティ: Recoilはモジュラーな状態管理アプローチのおかげで、大規模なアプリケーションにもよく対応します。
• コミュニティ努力: MITライセンスの下で、Recoilは自由に使用、変更、配布が可能です。 これにより、開発者の間で広く採用され、コラボレーションが促進され、誰もが自由にRecoilをベースに構築し、バグ修正に貢献し、Recoilを改善するために修正を共有できるようになります。 このRecoilの開発は、オープンソースのGitHubリポジトリで行われています。

リコイル入門

ReactアプリケーションでRecoilを使い始めるには、以下の手順に従ってください：

npmインストール リコイル

最新の安定版をインストールするには、Recoilパッケージがnpmにあるので、以下のコマンドを実行してください：

npm install recoil

npm install recoil

RecoilRoot を設定

アプリケーションをRecoilRootコンポーネントで包みます。

import React from 'react';
import ReactDOM from 'react-dom/client';
import { RecoilRoot } from 'recoil';
import App from './App';
const rootElement = document.getElementById('root');
const root = ReactDOM.createRoot(rootElement);
root.render(
  <RecoilRoot>
    <App />
  </RecoilRoot>
);

js

Atomsとセレクタを定義する：

import { atom, selector } from 'recoil';
export const textState = atom({
  key: 'textState',
  default: '',
});
export const charCountState = selector({
  key: 'charCountState',
  get: ({ get }) => {
    const text = get(textState);
    return text.length;
  },
});

js

コンポーネントでAtomsとSelectorsを使用する:

import React from 'react';
import { useRecoilState, useRecoilValue } from 'recoil';
import { textState, charCountState } from './state';
function CharacterCounter() {
  const [text, setText] = useRecoilState(textState);
  const count = useRecoilValue(charCountState);
  const onChange = (event) => {
    setText(event.target.value);
  };
  return (
    <div>
      <p>Character Count: {count}</p>
    </div>
  );
}
export default CharacterCounter;

js

IronPDFの紹介

IronPDFは、PDFドキュメントの生成、編集、および変換に使用される人気のPDF生成ライブラリです。 IronPDF npmパッケージは特にNode.jsアプリケーション用に設計されています。 以下はIronPDF npmパッケージの主な機能と詳細です：

主な機能

HTMLをPDFに変換

HTMLコンテンツを簡単にPDF文書に変換。 この機能は、ウェブコンテンツからダイナミックPDFを生成する場合に特に便利です。

URLからPDFへの変換

URLから直接PDFを生成し、Webページの内容をキャプチャしてプログラムでPDFファイルとして保存できます。

PDF操作

既存のPDF文書を簡単に結合、分割、操作できます。 IronPDFはページの追加、ドキュメントの分割などの機能を提供します。

PDFセキュリティ

PDF文書をパスワードで暗号化したり、電子署名を適用したりして保護します。 IronPDFは不正アクセスから機密文書を保護するオプションを提供します。

高品質出力

テキスト、画像、書式を正確にレンダリングして、高品質のPDF文書を作成します。 IronPDFは生成されたPDFが元のコンテンツに忠実であることを保証します。

クロスプラットフォーム互換性

IronPDFはWindows、Linux、macOSを含む様々なプラットフォームと互換性があり、幅広い開発環境に適しています。

シンプルな統合

Node.jsアプリケーションにIronPDFをnpmパッケージを使って簡単に統合できます。 APIは十分に文書化されているので、PDF生成機能をプロジェクトに組み込むのは簡単です。

インストール

IronPDF NPMパッケージをインストールするには、以下のコマンドを使用します：

yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64

yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64

IronPDFとRecoilを使ってPDFを作成する

依存関係のインストール: まず、新しいNext.jsプロジェクトを作成します（まだ作成していない場合）。 詳細な手順については、このNext.jsセットアップチュートリアルを参照するか、次のコマンドを使用してください。

npx create-next-app@latest recoil-pdf --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"

npx create-next-app@latest recoil-pdf --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"

次に、プロジェクト・ディレクトリに移動する：

cd recoil-pdf

cd recoil-pdf

必要なパッケージをインストールする：

yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
yarn add recoil

yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
yarn add recoil

以下のように、Recoilをインクルードするために、ファイル'app.js'を追加してください：

import React from 'react';
import { RecoilRoot } from 'recoil';
export default function App({ Component, pageProps }) {
  return (
    <RecoilRoot>
      <Component {...pageProps} />
    </RecoilRoot>
  );
}

js

PDF生成API: 最初のステップは、PDFドキュメントを生成するためのバックエンドAPIを作成することです。 IronPDFはサーバーサイドでしか動作しないので、ユーザーがPDFを生成したいときに呼び出すAPIを作成する必要があります。 pages/api/pdf.jsのパスにファイルを作成し、以下のコード内容を追加する：

// pages/api/pdf.js
import {IronPdfGlobalConfig, PdfDocument} from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Your license key";
export default async function handler(req, res) {
    try {
        const url = req.query.url
        const pdf = await PdfDocument.fromUrl(url);
        const data = await pdf.saveAsBuffer();
        console.error('data PDF:', data);
        res.setHeader('Content-Type', 'application/pdf');
        res.setHeader('Content-Disposition', 'attachment; filename=awesomeIron.pdf');
        res.send(data);
    } catch (error) {
        console.error('Error generating PDF:', error);
        res.status(500).end();
    }
}

js

IronPDFにはライセンスキーが必要です。IronPDF試用ライセンスページから取得して、上記のコードに配置してください。

ユーザーからURLを受け取り、そのURLからPDFを生成し、index.jsファイルに保存するために、以下のコードを追加してください：

import Head from 'next/head';
import styles from '../styles/Home.module.css';
import React from 'react';
import {
  atom,
  useRecoilState,
} from 'recoil';
const textState = atom({
  key: 'textState', // unique ID (with respect to other atoms/selectors)
  default: '', // default value (aka initial value)
});
export default function Home() {
  const [text, setText] = useRecoilState(textState);
    const generatePdf = async () => {
        try {
            const response = await fetch('/api/pdf?url='+text);
            const blob = await response.blob();
            const url = window.URL.createObjectURL(new Blob([blob]));
            const link = document.createElement('a');
            link.href = url;
            link.setAttribute('download', 'awesomeIron.pdf');
            document.body.appendChild(link);
            link.click();
            link.parentNode.removeChild(link);
        } catch (error) {
            console.error('Error generating PDF:', error);
        }
    };
    const handleChange = (event) => {
      setText(event.target.value);
    }
    return (
        <div className={styles.container}>
            <Head>
                <title>Generate PDF Using IronPDF</title>
                <link rel="icon" href="/favicon.ico"/>
            </Head>
            <main>
                <h1>Demo Recoil NPM and Generate PDF Using IronPDF</h1>
                <p>
                    <span>Enter Url To Convert to PDF:</span>{" "}
                </p>
                <button style={{margin:20, padding:5}} onClick={generatePdf}>Generate PDF</button>
            </main>          
            <style jsx>{`
                main {
                    padding: 5rem 0;
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                }
                footer {
                    width: 100%;
                    height: 100px;
                    border-top: 1px solid #eaeaea;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
                footer img {
                    margin-left: 0.5rem;
                }
                footer a {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    text-decoration: none;
                    color: inherit;
                }
                code {
                    background: #fafafa;
                    border-radius: 5px;
                    padding: 0.75rem;
                    font-size: 1.1rem;
                    font-family: Menlo,
                    Monaco,
                    Lucida Console,
                    Liberation Mono,
                    DejaVu Sans Mono,
                    Bitstream Vera Sans Mono,
                    Courier New,
                    monospace;
                }
            `}</style>
            <style jsx global>{`
                html,
                body {
                    padding: 0;
                    margin: 0;
                    font-family: -apple-system,
                    BlinkMacSystemFont,
                    Segoe UI,
                    Roboto,
                    Oxygen,
                    Ubuntu,
                    Cantarell,
                    Fira Sans,
                    Droid Sans,
                    Helvetica Neue,
                    sans-serif;
                }
                * {
                    box-sizing: border-box;
                }
            `}</style>
        </div>
    );
}

js

コードの説明

1. Recoilの'const textState = atom()'を使用してatom状態を作成し、入力フィールドにユーザーが入力したURLを保存するために使用されます。

2. Heading、Input、Buttonコンポーネントを追加します。

3. yarn dev」を使ってアプリケーションを実行し、PDFとして生成してほしいウェブサイトのURLを入力してください。

4. PDFを生成する」ボタンがクリックされると、要求されたPDFが生成されます。 以下の通りである：

出力

ウェブサイトの外観

URL https://ironpdf.com/nodejs/ が与えられたときに生成されたPDF:

IronPDFライセンス

IronPDF Trial Licenseは、購入前にその豊富な機能をチェックすることができます。 永続ライセンスの詳細は、IronPDFライセンス情報のページで確認できます。

ライセンスキーをここに入力します：

import {IronPdfGlobalConfig, PdfDocument} from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your key here";

js

結論

Recoilは、Reactアプリケーションの状態管理にモダンで効率的なアプローチを提供する。 きめ細かな更新、並行モードとの互換性、非同期状態の扱いやすさなど、スケーラブルでパフォーマンスの高いReactアプリの構築を目指す開発者にとって、Reactは魅力的な選択肢です。

アトムとセレクタを活用することで、Recoilはモジュール式で直感的な方法でグローバルな状態を管理することができ、全体的な開発体験を向上させます。 IronPDF Node.js ライブラリ npmは、PDFの生成と読み取り機能を備えたエンタープライズパッケージです。 開発者はIronPDFライブラリを使ってこれらの機能を簡単にアプリケーションに統合することができる。