ノードヘルプ

linkify-react（動作の仕組み：開発者向けガイド）

公開済み 2025年2月19日

共有:

イントロダクション

ウェブ開発の広い世界では、テキスト内にクリック可能なリンクやアンカータグを作成することは基本的な作業です。ブログ、ソーシャルメディアプラットフォーム、またはメールクライアントを構築する際に、URL、メールアドレス、その他のテキストを自動的に検出してクリック可能なリンクに変換する機能は、シームレスなユーザーエクスペリエンスを提供するために重要です。 Linkify Reactを紹介します。これは、Reactアプリケーションでこのプロセスを効率化するために設計された強力なnpmパッケージです。この記事では、Reactプロジェクトでのリンク作成を簡素化するためにLinkifyを使用する方法を、使用例のコードとともに探ります。

さらに、お客様にご紹介するのはIronPDF、ウェブページから高品質なPDFドキュメントを生成することができる多用途のライブラリです。 IronPDFとLinkifyを併用することで、Linkifyによって識別され変換されたクリック可能なリンクを保持するPDFを簡単に作成できることをお見せします。これにより、ドキュメントがWebコンテンツと同じインタラクティブ性を維持することができます。

Linkify Reactコンポーネントの使い始め

Linkify Reactは、URL、メールアドレス、その他の発見されたリンクを含むプレーンテキストを子文字列内でクリッカブルなハイパーリンクとして入れ子要素に自動的に変換する軽量で使いやすいnpmパッケージです。これにより、手動でのリンク解析とフォーマットの必要がなくなり、開発者の貴重な時間と労力を節約できます。 LinkifyをReactアプリケーションに統合する方法を詳しく見ていきましょう。

インストール

React Linkifyを使い始めるには、まずプロジェクトに依存関係としてインストールする必要があります。 npm または yarn を使用してこれを行うことができます。ターミナルを開き、次のコマンドを実行してください：

npm install react-linkify
//or
yarn add react-linkify

使用方法

React Linkifyをインストールすると、Reactコンポーネントに簡単に統合できます。こちらは、テキストコンテンツ内にクリック可能なリンクを表示するためにReact Linkifyを使用する方法を示す簡単な例です。

import React from 'react';
import Linkify from 'react-linkify';
const MyComponent = () => {
  return (
    <div>
      <h1>Clickable Links with React Linkify</h1>
      <Linkify>
        <p>
          Check out this cool website: https://example.com
          <br />
          You can also reach me at hello@example.com
        </p>
      </Linkify>
    </div>
  );
};
export default MyComponent;

import React from 'react';
import Linkify from 'react-linkify';
const MyComponent = () => {
  return (
    <div>
      <h1>Clickable Links with React Linkify</h1>
      <Linkify>
        <p>
          Check out this cool website: https://example.com
          <br />
          You can also reach me at hello@example.com
        </p>
      </Linkify>
    </div>
  );
};
export default MyComponent;

JAVASCRIPT

この例では、react-linkify パッケージから Linkify コンポーネントをインポートし、その中にテキストコンテンツをラップします。 React Linkify は、テキスト内の URL やメールアドレスを自動的に検出し、クリック可能なハイパーリンクに変換します。

カスタマイズション

Linkifyは、生成されたリンクの動作や外観をカスタマイズするためのさまざまなプロップ、属性、オプションを提供します。例えば、リンクの開き方を制御するためにターゲット属性を指定することができます。(例として、新しいタブで開く外部リンクやアンカータグとして). React Linkifyの動作をカスタマイズする方法は次のとおりです：

<Linkify properties={{ target: '_blank' }}>
  <p>
    Clickable links will open in a new tab: https://example.com
  </p>
</Linkify>

<Linkify properties={{ target: '_blank' }}>
  <p>
    Clickable links will open in a new tab: https://example.com
  </p>
</Linkify>

JAVASCRIPT

IronPDFの紹介

IronPDFは、Node.jsアプリケーション内でPDF生成を容易にするために設計された強力なnpmパッケージです。 PDFドキュメントを作成することができますHTML コンテンツ, URL、または既存のPDFファイル。請求書、レポート、その他のドキュメントを生成する際に、IronPDFはその直感的な機能でプロセスを簡単にします。APIと堅牢な機能セット。

linkify-react（動作の仕組み：開発者向けガイド）：図1 - IronPDF for Node.js: Node.js PDFライブラリのウェブサイト

IronPDFの主な機能には以下が含まれます

1.HTMLからPDFへの変換

HTML要素インターフェースのコンテンツをPDFドキュメントに簡単に変換します。この機能は、ウェブコンテンツからダイナミックPDFを生成する場合に特に便利です。

2. URLからPDFへの変換

URLから直接PDFを生成します。これにより、ウェブページのコンテンツを取得し、プログラムによってPDFファイルとして保存することができます。

3. PDF操作

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

4. PDFセキュリティ

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

5. 高品質な出力

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

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

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

7. 簡単な統合

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

Webアプリケーション、サーバーサイドスクリプト、またはコマンドラインツールを構築する場合は、IronPDFプロフェッショナル品質のPDFドキュメントを効率的かつ確実に作成できるようにします。

IronPDFを使用してPDFドキュメントを生成し、Linkify Reactを活用する

**依存関係のインストールまず、新しいNext.jsプロジェクトを作成します。(まだなら)以下のコマンドを使用する：

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

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

cd linkify-ironpdf

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

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

PDFを作成する

では、IronPDFを使ってPDFを生成する簡単な例を作ってみましょう。 Next.jsコンポーネントで(例: ページ/index.tsx)以下のコードを追加します。

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

IronPDFにはライセンスキーも必要です、これを取得するにはライセンスページ以下のコード内にコンテンツを配置してください:

// pages/api/pdf.js
import {IronPdfGlobalConfig, PdfDocument} from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Your license key goes here";
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 goes here";
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();
    }
}

JAVASCRIPT

IronPDFとLinkifyを使用して作成された下記のindex.jsコードは、ユーザーのためにPDF生成ページをセットアップします：

import Head from "next/head";
import styles from "../styles/Home.module.css";
import React, { useState } from "react";
import Linkify from 'react-linkify';
export default function Home() {
  const [text, setText] = useState("");
  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 Linkify and Generate PDF Using IronPDF</h1>
        <p>
          <span>Enter Url To Linkify and Convert to PDF:</span>{" "}
        </p>
        <Linkify properties={{ target: '_blank' }}>
        <p>
          Clickable links from input text: {text}
        </p>
        </Linkify>
        <button style={{ margin: 20, padding: 5 }} onClick={generatePdf}>
          Generate PDF From Link
        </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, { useState } from "react";
import Linkify from 'react-linkify';
export default function Home() {
  const [text, setText] = useState("");
  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 Linkify and Generate PDF Using IronPDF</h1>
        <p>
          <span>Enter Url To Linkify and Convert to PDF:</span>{" "}
        </p>
        <Linkify properties={{ target: '_blank' }}>
        <p>
          Clickable links from input text: {text}
        </p>
        </Linkify>
        <button style={{ margin: 20, padding: 5 }} onClick={generatePdf}>
          Generate PDF From Link
        </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>
  );
}

JAVASCRIPT

コードの説明

リンクテキストを含むHTMLタグをLinkifyコンポーネントで囲みます
ユーザーがテキストを入力すると、それがリンクの場合、コンポーネントは自動的にそれをリンクに変換し、クリック可能なリンクを表示します。
「Generate PDF」ボタンがクリックされると、リンクがバックエンドのPDF生成APIに送信され、URLリンクからPDFドキュメントが生成されます。

出力されたPDF生成ページ

linkify-react（開発者向けガイド：動作の仕組み）：図2 - PDF生成の出力ページ

結果として得られるPDF

linkify-react（使い方：開発者向けガイド）：図3 - 「Generate PDF」ボタンをクリックして出力されたPDF

IronPDFライセンス

そのIronPDF.

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

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

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

JAVASCRIPT

結論

React Linkifyは、Reactアプリケーション内のテキストコンテンツにクリック可能なリンクを作成するプロセスを簡素化します。 URL、メールアドレス、その他のリンクの検出と変換を自動化してクリック可能なハイパーリンクにすることで、Linkifyは開発ワークフローを効率化し、ユーザー体験を向上させます。簡単な統合、カスタマイズオプション、および堅牢な機能を備えたReact Linkifyは、魅力的でユーザーフレンドリーなインターフェースを作成しようとするReact開発者にとって価値のあるツールです。

その上、IronPDFは、アプリケーションに包括的なPDF生成、操作、および編集機能を統合しようとする開発者向けに特化した堅牢なNode.jsライブラリであることが実証されています。さまざまな形式をPDFに変換するサポート、既存のPDFドキュメントの編集、PDFセキュリティの管理を備えたIronPDFは、node.js環境内でプログラム的にPDFファイルを作成しカスタマイズするための多用途ツールキットを提供します。その機能は、シンプルなドキュメント生成から複雑なドキュメント管理タスクに至るまでの幅広いニーズに対応しており、PDFを扱うnode.js開発者にとって貴重なツールです。

リーガン・パン

ソフトウェアエンジニア

LinkedIn

レーガンはリーディング大学で電子工学の学士号を取得しました。Iron Softwareに入社する前の仕事では、一つのタスクに集中して取り組んでいました。Iron Softwareでは、営業、技術サポート、製品開発、マーケティングのいずれにおいても広範な業務に携わることが最も楽しいと感じています。彼は、Iron Softwareライブラリを開発者がどのように使用しているかを理解し、その知識を使ってドキュメントを継続的に改善し、製品を開発することを楽しんでいます。

次へ >
next-auth NPM（開発者向けの仕組み）