PrimeNG - Angular開発を加速する90種類以上のUIコンポーネント集

はじめに

Angularでアプリケーションを作るとき、ボタンやダイアログ、データテーブルといったUIパーツを一つひとつ自作していませんか。デザインの一貫性を保ちながらアクセシビリティやレスポンシブ対応まで自前で作り込むのは、想像以上に手間がかかる作業です。

PrimeNGは、そんな悩みを解決してくれるAngular向けのUIコンポーネントライブラリです。90種類以上の作り込まれたコンポーネントが用意されており、テーマを切り替えるだけで見た目を統一できます。この記事では、PrimeNGの特徴からインストール方法、実際のコード例までを順を追って紹介します。

PrimeNGとは

PrimeNGは、PrimeFacesチームが開発しているAngular専用のUIコンポーネントライブラリです。ボタンやフォーム部品といった基本的なものから、データテーブル、チャート、ドラッグ&ドロップ対応のツリー、ガントチャートまで幅広いコンポーネントを提供しています。現在はPrimeUIというブランドのもとで開発が続けられており、活発にアップデートされ続けているのが特徴です。

主な特徴

90種類以上の豊富なコンポーネント - データ表示、フォーム入力、メニュー、オーバーレイ、チャートまで、業務アプリで必要になるほとんどの部品が揃っています
柔軟なテーマシステム - Aura、Material、Lara、Noraなど複数のテーマから選べるほか、デザイントークンをカスタマイズして独自のブランドカラーに合わせることも可能です
Standaloneコンポーネント対応 - Angularの最新アーキテクチャに合わせてStandaloneコンポーネントとして提供されており、NgModuleなしで必要な部品だけを読み込めます
Unstyledモード - スタイルを一切適用しない状態で使い、Tailwind CSSなど独自のスタイリング手法と組み合わせることもできます
TypeScriptファースト - 型定義が充実しているため、IDEの補完を活かしながら安全にコンポーネントを組み立てられます

インストール

まずはAngularプロジェクトにPrimeNGと関連パッケージを追加します。

# npmの場合
npm install primeng @primeng/themes

# yarnの場合
yarn add primeng @primeng/themes

# pnpmの場合
pnpm add primeng @primeng/themes

アイコンを使う場合はPrimeIconsも合わせてインストールしておきましょう。

npm install primeicons

続いてsrc/styles.cssにPrimeIconsのCSSを読み込みます。

@import "primeicons/primeicons.css";

基本的な使い方

PrimeNGはStandaloneコンポーネントとして提供されているため、app.config.tsでprovidePrimeNGを設定するだけで利用を開始できます。

// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { providePrimeNG } from 'primeng/config';
import Aura from '@primeng/themes/aura';

export const appConfig: ApplicationConfig = {
  providers: [
    provideAnimationsAsync(),
    providePrimeNG({
      theme: {
        preset: Aura,
      },
    }),
  ],
};

設定が済んだら、使いたいコンポーネントを各Standaloneコンポーネントに直接importします。ボタンコンポーネントの例を見てみましょう。

// hello.component.ts
import { Component } from '@angular/core';
import { ButtonModule } from 'primeng/button';

@Component({
  selector: 'app-hello',
  standalone: true,
  imports: [ButtonModule],
  template: `
    <p-button label="送信する" icon="pi pi-check" (onClick)="onSubmit()" />
  `,
})
export class HelloComponent {
  onSubmit() {
    console.log('ボタンがクリックされました');
  }
}

p-buttonタグを使うだけで、テーマに沿ったデザインのボタンがすぐに表示されます。アイコンもiconプロパティに指定するだけで反映されるので、CSSを個別に書く必要はありません。

実践的なユースケース

業務アプリでよく使われる「データテーブル」を例に、ソートやページネーションを備えた表を実装してみましょう。

// user-list.component.ts
import { Component } from '@angular/core';
import { TableModule } from 'primeng/table';

interface User {
  id: number;
  name: string;
  email: string;
  role: string;
}

@Component({
  selector: 'app-user-list',
  standalone: true,
  imports: [TableModule],
  template: `
    <p-table
      [value]="users"
      [paginator]="true"
      [rows]="5"
      [sortField]="'name'"
      [sortOrder]="1"
    >
      <ng-template pTemplate="header">
        <tr>
          <th pSortableColumn="name">
            氏名 <p-sortIcon field="name" />
          </th>
          <th pSortableColumn="email">
            メールアドレス <p-sortIcon field="email" />
          </th>
          <th>権限</th>
        </tr>
      </ng-template>
      <ng-template pTemplate="body" let-user>
        <tr>
          <td>{{ user.name }}</td>
          <td>{{ user.email }}</td>
          <td>{{ user.role }}</td>
        </tr>
      </ng-template>
    </p-table>
  `,
})
export class UserListComponent {
  users: User[] = [
    { id: 1, name: '山田太郎', email: 'yamada@example.com', role: '管理者' },
    { id: 2, name: '佐藤花子', email: 'sato@example.com', role: '編集者' },
    { id: 3, name: '鈴木一郎', email: 'suzuki@example.com', role: '閲覧者' },
  ];
}

このように、p-tableにpaginatorやsortFieldといったプロパティを渡すだけで、列ごとのソートやページ送りが動作する表が完成します。列の追加やフィルタリング機能の実装も、テンプレートに数行加えるだけで対応できるため、管理画面のようなデータ量の多い画面を素早く構築できるのが大きな魅力です。