【Angular】Virtual Scrollingで仮想スクロールを実装する方法!

当ページのリンクには広告が含まれています。
AngularのVirtual Scrollingで仮想スクロールを実装する方法
いずみ

こんな悩みを解決できる記事を書きました!

僕は現役フリーランスエンジニア(歴年)で、資格は個保有しています。

Angularで仮想スクロールを実装したい」とお考えではありませんか?

Angularで仮想スクロールを実装するには「Virtual Scrolling」を使用します。

いずみ

Virtual Scrollingは「angular/sdk」に含まれています。

大量データを描画する際に重宝しますよ。

本記事では、Angularで仮想スクロールを実装する方法について分かりやすく解説します。

本記事を読めば、Angularで仮想スクロールを実装する方法が理解できるので早速見ていきましょう。

執筆者/監修者
  • フリーランスエンジニア(保有資格個)
  • ブログ・アフィリエイト歴5年
  • ブランドせどりで月利50万円⇨脱サラ
  • 投資歴5年(仮想通貨・FXが得意)
  • Twitterフォロワー約2,000人
  • 運営者情報はこちら
いずみです
目次

【Angular】Virtual Scrollingで仮想スクロールを実装する方法

早速ですが、AngularのVirtual Scrollingで仮想スクロールを実装する方法を解説します。

ScrollingModuleをインポート

import { ScrollingModule } from '@angular/cdk/scrolling';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserAnimationsModule,
    FormsModule,
    ScrollingModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

ScrollingModuleをインポートします。

いずみ

スタンドアロンコンポーネントを使う場合は不要です。

cdk-virtual-scroll-viewportを使用する

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  items = Array.from({length: 100000}).map((_, i) => `Item #${i}`);
}

1万件のデータを描画するために上記のコードを記載します。

<cdk-virtual-scroll-viewport itemSize="50" class="example-viewport">
  <div *cdkVirtualFor="let item of items" class="example-item">{{item}}</div>
</cdk-virtual-scroll-viewport>

「cdk-virtual-scroll-viewport」で仮想スクロールを定義します。

.example-viewport {
  height: 200px;
  width: 200px;
  border: 1px solid black;
}

.example-item {
  height: 50px;
}

Virtual Scrollingを使う場合は、itemSizeとheightを同じにする必要があります。

上記のように、1万件のデータを仮想スクロール化できればOKです。

いずみ

これで仮想スクロールの実装は完了です。

非常に簡単でしたね。

よくある質問

公式ドキュメントはありますか?

下記になります。

まとめ

今回は、Angularで仮想スクロールを実装する方法について解説しました。

以下が本記事のまとめになります。

まとめ
  • Angularで仮想スクロールを実装するには「Virtual Scrolling」を使う。
まとめ♪
  • おすすめ本
¥4,070 (2023/07/23 15:56時点 | Amazon調べ)
\楽天ポイント4倍セール!/
楽天市場

Angularの勉強なら「」が分かりやすくておすすめですよ♪

いずみ

最後までお読みいただき、ありがとうございました!

  • クソおすすめ本
¥4,480 (2024/06/01 23:28時点 | Amazon調べ)
\楽天ポイント4倍セール!/
楽天市場
いずみ

海外のエンジニアがどういった思考で働いているかが理解できます。

海外に行く気はないけど海外エンジニアの動向が気になる雑魚エンジニアにおすすめです(本当におすすめな本しか紹介しないのでご安心を)。

AngularのVirtual Scrollingで仮想スクロールを実装する方法

この記事が気に入ったら
フォローしてね!

シェアしてね!
  • URLをコピーしました!
目次