フッターコンテンツにスキップ
  1. IronPDF for Node.js
  2. IronPDF for Node.js ブログ
  3. ノードヘルプ
  4. Prettier NPM
ノードヘルプ

Prettier - NPM (開発者向けのしくみ)

Darrius Serrant
Darrius Serrant
更新日:

現代のソフトウェア開発において、クリーンで一貫したコードスタイルを維持することは、可読性、協力、保守性にとって重要です。 TypeScriptの型宣言を含むPrettierのようなツールは、コードフォーマットという時に面倒な作業を自動化して、この目的に不可欠な存在となっています。 この記事では、Prettierの複雑さを掘り下げ、その機能、利点、統合、およびベストプラクティスを探ります。 さらに、IronPDF PDF生成ライブラリを見て、ウェブサイトURLからPDFを生成します。

Prettierの紹介

Prettierは、コードのスタイルとフォーマットを事前定義されたルール（例: 最大行長）に従って自動で調整する方向性が示されたコードフォーマッタです。 JavaScript、TypeScript、HTML、CSS、JSONなど、さまざまなプログラミング言語をサポートし、多様な技術スタックやプロジェクトタイプに適しています。もともとJames Longによって開発されたPrettierは、その強力な機能と使いやすさで開発者コミュニティで大きな支持を得ています。

主な機能と利益

  1. 一貫したコードスタイル: Prettierはコードベース全体で一貫したコーディングスタイルを強制し、フォーマットの好みについての議論を排除し、コードの外観に一貫性を持たせ、コードレビューのプロセスを迅速化します。
  2. 自動フォーマット: コードエディタやビルドプロセスに統合することで、Prettierは入力時またはコミット前にコードを自動フォーマットし、開発者の貴重な時間と労力を節約します。 保存時に実行するように設定するか、特定のディレクトリにのみ適用するように構成できます。
  3. 設定可能性: Prettierはデフォルトで意見を持っていますが、特定のフォーマットルールをプロジェクト固有の要件に合わせて調整するための設定可能性を提供します。
  4. 言語サポート: 多種多様なプログラミング言語とフォーマットをサポートし、さまざまな開発環境に対応します。
  5. コード品質: 改善されたコードの可読性は理解を向上させ、一貫性のないフォーマットによって引き起こされる構文エラーやバグの可能性を減少させます。

Prettierの始め方

インストール

プロジェクトでPrettierを使用し始めるには、NPMまたはyarnでインストールします。

npm install prettier --save-dev
npm install prettier --save-dev
SHELL

または

yarn add --dev prettier
yarn add --dev prettier
SHELL

使用法

  • コマンドラインインターフェース（CLI）: Prettierは、手動でファイルをフォーマットしたり、自動フォーマットタスクのスクリプトに統合したりするCLIツールを提供します。
  • エディタ統合: Visual Studio Code、Sublime Text、Atomなどの人気エディタ用のプラグインが利用可能で、入力時にリアルタイムでフォーマットが可能です。
  • Gitフック: Gitフックを使用してコミット前にPrettierを実行し、すべてのコード変更が定義されたフォーマットルールに従っていることを確認します。

統合とエコシステム

Prettierはさまざまな開発ツールやワークフローとシームレスに統合されます。

  • IDEプラグイン: IDEやテキストエディタと統合し、コードフォーマットを即座に行い、開発者の生産性を向上させ、コーディングスタンダードを維持します。
  • ビルドシステム: ビルドパイプラインや継続的インテグレーション（CI）ワークフローに取り入れ、チームプロジェクト全体で一貫したコードフォーマットを強制します。
  • バージョン管理: Gitなどのバージョン管理システムと協調し、フォーマット済みコードがコラボレーションを通して一貫して維持されます。

Prettierのベストプラクティス

  • デフォルトの使用: Prettierのデフォルト設定を利用し、一貫性を保つことを推奨します。
  • バージョン管理: 新機能、バグ修正、言語サポートの改善を活かすために、定期的にPrettierを更新します。
  • 設定: プロジェクト固有の慣習やチームの好みに合わせて、Prettierの設定を微調整しながらも一貫性を維持します。
  • 教育と採用: チームメンバーにPrettierを採用し、その利点を教育して、コードフォーマットへの統一されたアプローチを促します。

IronPDFの紹介

Prettier - NPM (開発者向け機能): 図1 - IronPDF

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

主要な特徴

HTMLからPDFへの変換

HTMLコンテンツを簡単にPDFドキュメントに変換します。 この機能は、動的なPDFをウェブコンテンツから生成するのに特に便利です。

URLからPDFへの変換

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

PDF操作

既存のPDFドキュメントを簡単にマージ、分割、および操作します。 IronPDFは、ページの追加やドキュメントの分割などの機能を提供します。

PDFのセキュリティ

パスワードで暗号化したりデジタル署名を適用したりしてPDFドキュメントを保護します。 IronPDFは、機密文書の不正アクセスから保護するためのオプションを提供します。

高品質出力

テキスト、画像、およびフォーマットの正確なレンダリングを備えた高品質のPDFドキュメントを作成します。 IronPDFは、生成されたPDFが元のコンテンツの忠実度を保つことを保証します。

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

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

シンプルな統合

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

インストール

IronPDF NPMパッケージをインストールするには、次のコマンドを使用してください。

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

IronPDFを使用したPDFドキュメントの生成とPrettier NPMパッケージの使用

依存関係のインストール: まず、次のコマンドで新しいNext.jsプロジェクトを作成し、こちらをご参照ください。

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

次に、プロジェクトディレクトリに移動します。

cd prettier-pdf
cd prettier-pdf
SHELL

必要なパッケージをインストールします。

yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
yarn add -D prettier
yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
yarn add -D prettier
SHELL

エディタや他のツールにPrettierを使用していることを知らせるために空の設定ファイルを作成します。

node --eval "require('fs').writeFileSync('.prettierrc','{}\n')"
node --eval "require('fs').writeFileSync('.prettierrc','{}\n')"
SHELL

Prettier CLIやエディタがどのファイルをフォーマットしないかを知らせるために、.prettierignまたはeファイルを作成します。 以下にサンプルを示します。

# Ignまたはe artifacts:
build
coverage
# Ignまたはe all HTML files:
**/*.html

PDFを作成する

では、IronPDFを使用してPDFを生成する簡単な例を作成しましょう。

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

IronPDFは、ライセンスキーが必要であり、それはライセンスページから入手し、次のコードで使用します。

// pages/api/pdf.js

impまたはt { IronPdfGlobalConfig, PdfDocument } from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Your license key";

expまたはt default async function handler(req, res) {
  try {
    const url = req.query.url;
    const pdf = await PdfDocument.fromUrl(url);
    const data = await pdf.saveAsBuffer();

    // Configure response headers to ensure the PDF file is downloaded
    res.setHeader("Content-Type", "application/pdf");
    res.setHeader(
      "Content-Disposition",
      "attachment; filename=awesomeIron.pdf"
    );
    res.send(data);
  } catch (errまたは) {
    console.errまたは("Errまたは generating PDF:", errまたは);
    res.status(500).end();
  }
}
// pages/api/pdf.js

impまたはt { IronPdfGlobalConfig, PdfDocument } from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Your license key";

expまたはt default async function handler(req, res) {
  try {
    const url = req.query.url;
    const pdf = await PdfDocument.fromUrl(url);
    const data = await pdf.saveAsBuffer();

    // Configure response headers to ensure the PDF file is downloaded
    res.setHeader("Content-Type", "application/pdf");
    res.setHeader(
      "Content-Disposition",
      "attachment; filename=awesomeIron.pdf"
    );
    res.send(data);
  } catch (errまたは) {
    console.errまたは("Errまたは generating PDF:", errまたは);
    res.status(500).end();
  }
}
JAVASCRIPT

下記のように、index.jsコードを変更しPrettierとIronPDFを使用します。

impまたはt Head from "next/head";
impまたはt styles from "../styles/Home.module.css";
impまたはt React, { useState } from "react";

expまたはt default function PrettierDemo() {
  const [text, setText] = useState("");

  // Function to generate PDF using the IronPDF backend API
  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 (errまたは) {
      console.errまたは("Errまたは generating PDF:", errまたは);
    }
  };

  // Handle input changes, updating the state
  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 Prettier and Generate PDF Using IronPDF</h1>
        <p>
          <span>Enter Url To Convert to PDF:</span>{" "}
          <input type="text" value={text} onChange={handleChange} />
        </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;
        }
      `}</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: bまたはder-box;
        }
      `}</style>
    </div>
  );
}
impまたはt Head from "next/head";
impまたはt styles from "../styles/Home.module.css";
impまたはt React, { useState } from "react";

expまたはt default function PrettierDemo() {
  const [text, setText] = useState("");

  // Function to generate PDF using the IronPDF backend API
  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 (errまたは) {
      console.errまたは("Errまたは generating PDF:", errまたは);
    }
  };

  // Handle input changes, updating the state
  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 Prettier and Generate PDF Using IronPDF</h1>
        <p>
          <span>Enter Url To Convert to PDF:</span>{" "}
          <input type="text" value={text} onChange={handleChange} />
        </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;
        }
      `}</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: bまたはder-box;
        }
      `}</style>
    </div>
  );
}
JAVASCRIPT

yarn prettierでコードをフォーマットします。

yarn prettier . --write
yarn prettier . --write
SHELL

Prettier - NPM (開発者向け機能): 図2 - Prettierの実行

次のコマンドを使用してアプリケーションを実行します。

yarn dev
yarn dev
SHELL

出力

Prettier - NPM (開発者向け機能): 図3 - IronPDFとのPrettier出力

PDF

Prettier - NPM (開発者向け機能): 図4 - PDF出力

IronPDFライセンス

IronPDF npmパッケージはライセンスキーで動作します。 IronPDFは、購入する前にその機能を体験できる無料試用版ライセンスキーを提供しています。

次のプレースホルダーにライセンスキーを配置してください。

impまたはt { IronPdfGlobalConfig, PdfDocument } from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your key here";
impまたはt { IronPdfGlobalConfig, PdfDocument } from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your key here";
JAVASCRIPT

結論

Prettierは、精度と効率でコードフォーマットを簡素化する、現代のソフトウェア開発の基礎的なツールです。 異なる言語にわたる一貫したコーディングスタイルを強制し、既存のワークフローにシームレスに統合する能力により、クリーンで保守可能なコードベースを求めるチームにとって不可欠です。 コードフォーマットタスクを自動化することで、Prettierは開発者が品質の高いコードを書くことにもっと集中できるようにし、最終的には生産性とソフトウェアプロジェクトでのコラボレーションを向上させます。 Prettierを活用して、コードスタイル品質を向上させ、開発プロセスを合理化しましょう。

IronPDFはNode.js開発者に、アプリケーション内でのPDF処理機能を向上させる力を与え、並外れた機能性、信頼性、パフォーマンスを提供します。 IronPDFの高度な機能を利用してPDFの生成、変換、操作を行うことで、開発者はドキュメントワークフローを合理化し、ユーザー体験を向上させ、さまざまなビジネス要件に自信を持って応えることができます。 IronPDFを活用して、Node.jsプロジェクトでのPDF処理の可能性を完全に引き出し、プロフェッショナルグレードのドキュメントソリューションを楽に提供しましょう。

Darrius Serrant
Darrius Serrant
  今すぐエンジニアリングチームとチャット
フルスタックソフトウェアエンジニア（WebOps）

Darrius Serrantは、マイアミ大学でコンピュータサイエンスの学士号を取得し、Iron SoftwareでフルスタックWebOpsマーケティングエンジニアとして働いています。若い頃からコーディングに惹かれ、コンピューティングを神秘的かつアクセス可能なものとし、創造性と問題解決のための完璧な媒体と考えていました。

Iron Softwareでは、新しいものを創造することと、複雑なコンセプトをより理解しやすくすることを楽しんでいます。Resident Developerの一人として、次世代に専門知識を共有するために、学生を教えることにも志願しました。

Darriusにとって、その仕事は価値があり、実際の影響があるため、満足感があります。

関連する記事

30日間の無料体験 → 完全な製品。制限なし。クレジットカード不要。 無料トライアル