ライブ環境でテストする
ウォーターマークなしで本番環境でテストしてください。
必要な場所でいつでも動作します。
完全に機能する製品
30日間のフル機能製品をお試しください。
数分で稼働させることができます。
24/5 テクニカルサポート
製品トライアル期間中にサポートエンジニアリングチームへの完全アクセス
ノードヘルプ
反動 NPM (開発者のための仕組み)
更新済み 8月 13, 2024
イントロダクション
状態管理は、堅牢でスケーラブルなReactアプリケーションを構築する上で非常に重要な要素である。 様々な状態管理ライブラリの中で、 **反動 は強力で柔軟なオプションとして登場した。 実験的な状態管理フレームワークとしてFacebookによって開発されたRecoilは、複雑な状態管理シナリオを簡素化し、Reactアプリケーションでグローバルな状態を管理するための、より直感的なAPIを提供する。
この記事では、Recoilのコア・コンセプトとその利点、そしてReactプロジェクトでRecoilを使い始める方法について説明する。 また IronPDF ウェブサイトのURLやHTMLからPDFを生成するPDF生成ライブラリ。
リコイルパッケージとは？
RecoilはReact用の状態管理ライブラリで、ReduxやContext APIといった既存のソリューションの限界に対処することを目的としている。 Reactアプリケーションで共有ステートを管理する、よりわかりやすくパフォーマンスの高い方法を提供し、きめ細かな更新、非同期ステート管理、Reactの並行モードとの容易な統合などの機能を提供する。
コア・コンセプト
Recoilは、他の状態管理ライブラリとは異なるいくつかの重要なコンセプトを導入している：
-
原子：原子はRecoilにおける状態の基本単位である。 コンポーネント間で共有できる状態の断片を表す。 アトムの値が変更されると、そのアトムを購読しているコンポーネントは自動的に再レンダリングする。
-
セレクタ：セレクタは、1つ以上のアトムや他のセレクタから状態を導出する純粋な関数である。 これらは同期または非同期で、複雑な状態導出やデータ・フェッチ・ロジックを可能にする。
- RecoilRoot：このコンポーネントは、コンポーネントツリーにRecoilコンテキストを提供するために使用されます。 これはReactのContext Providerに似ており、アプリケーションのうちRecoilステートを使う部分をラップしなければならない。
リコイルの利点
Recoilは、他の状態管理ソリューションに比べていくつかの利点がある：
- きめ細かな更新：どのような状態変更も複数のコンポーネントの再レンダリングをトリガーすることができるReduxとは異なり、Recoilは、変更された状態にサブスクライブされたコンポーネントのみが再レンダリングすることを保証し、より良いパフォーマンスにつながります。
- コンカレント・モードの互換性：RecoilはReactのコンカレントモードとシームレスに動作するように設計されており、タイムスライスやサスペンスなどの機能により、よりスムーズなユーザー体験を可能にします。
- 簡単な非同期ステート：非同期セレクタのビルトインサポートにより、データフェッチなどの非同期ステートのハンドリングがより簡単になりました。
-
スケーラビリティ：Recoilは、そのモジュール式の状態管理アプローチにより、大規模なアプリケーションでも十分にスケールする。
- コミュニティーの努力: MITライセンスのもと、recoilは自由に使用、変更、配布できる。 これにより、開発者間の普及と協力が促進され、誰もが自由にRecoilを構築し、Recoilを改善するためにバグフィックスを提供し、修正を共有することができます。 Recoilの開発は、オープンソースのGithubリポジトリで行われている。
リコイル入門
ReactアプリケーションでRecoilを使い始めるには、以下の手順に従ってください：
npm Recoilをインストール
最新の安定版をインストールするには、recoilパッケージがnpmにあるので、以下のコマンドを実行する：
npm install recoilnpm install recoilIRON VB CONVERTER ERROR developers@ironsoftware.com
VB
C#
リコイルートのセットアップ
アプリケーションを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>
);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>
);IRON VB CONVERTER ERROR developers@ironsoftware.com
VB
C#
アトムとセレクタの定義：
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;
},
});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;
},
});IRON VB CONVERTER ERROR developers@ironsoftware.com
VB
C#
コンポーネントでアトムとセレクタを使う：
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;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;IRON VB CONVERTER ERROR developers@ironsoftware.com
VB
C#
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-x64yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64IRON VB CONVERTER ERROR developers@ironsoftware.com
VB
C#
IronPDFとRecoilを使ってPDFを作成する
**依存関係のインストールまず、新しい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"IRON VB CONVERTER ERROR developers@ironsoftware.com
VB
C#
次に、プロジェクト・ディレクトリに移動する：
cd recoil-pdfcd recoil-pdfIRON VB CONVERTER ERROR developers@ironsoftware.com
VB
C#
必要なパッケージをインストールする：
yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
yarn add recoilyarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
yarn add recoilIRON VB CONVERTER ERROR developers@ironsoftware.com
VB
C#
app.js'ファイルを追加し、以下のようにrecoilをインクルードする：
import React from 'react';
import { RecoilRoot } from 'recoil';
export default function App({ Component, pageProps }) {
return (
<RecoilRoot>
<Component {...pageProps} />
</RecoilRoot>
);
}import React from 'react';
import { RecoilRoot } from 'recoil';
export default function App({ Component, pageProps }) {
return (
<RecoilRoot>
<Component {...pageProps} />
</RecoilRoot>
);
}IRON VB CONVERTER ERROR developers@ironsoftware.com
VB
C#
PDF Generation 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();
}
}// 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();
}
}IRON VB CONVERTER ERROR developers@ironsoftware.com
VB
C#
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>
);
}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>
);
}IRON VB CONVERTER ERROR developers@ironsoftware.com
VB
C#
コードの説明
-
const textState = atom」を使ってアトム状態を作成する。()'を使って、ユーザーが入力フィールドに入力したURLを保存する。
-
Heading、Input、Buttonコンポーネントの追加
-
yarn dev'を使ってアプリケーションを実行し、PDFとして生成したいウェブサイトのURLを入力する。
- PDF生成」ボタンをクリックすると、要求されたPDFが生成されます。 以下の通りである：
出力
ウェブサイトはどのようなものか
URL 'https://ironpdf.com/nodejs/' が与えられたときに生成されたPDF：
IronPDFライセンス
そのIronPDF 購入前にその豊富な機能をチェックすることができます。 永久ライセンスに関する詳細は ライセンス ページ
ライセンスキーをここに入力します：
import {IronPdfGlobalConfig, PdfDocument} from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your key here";import {IronPdfGlobalConfig, PdfDocument} from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your key here";IRON VB CONVERTER ERROR developers@ironsoftware.com
VB
C#
結論
Recoilは、Reactアプリケーションの状態管理にモダンで効率的なアプローチを提供する。 きめ細かな更新、並行モードとの互換性、非同期状態の扱いやすさなど、スケーラブルでパフォーマンスの高いReactアプリの構築を目指す開発者にとって、魅力的な選択肢となっている。
アトムとセレクタを活用することで、Recoilはモジュール式で直感的な方法でグローバルな状態を管理し、全体的な開発体験を向上させます。 IronPDF npmは、PDFの生成と読み取り機能を備えたエンタープライズパッケージです。 開発者はIronPDFライブラリを使ってこれらの機能を簡単にアプリケーションに統合することができる。
