Ionic × Angularで無限スクロール&引っ張って更新するUIを爆速で作ってみる
はじめに
こんにちは！ネクストビートのエンジニアの塚本です。
京都オフィスにて、KIDSNAシッターの開発業務を日々行っております。
（約一年振りの執筆となります😂 お久しぶりでこざいます。）
前回のブログ では Ionic × Angularについての入門記事を執筆させていただきました。今回もIonic についての小ネタ記事です。
本記事では、主に一覧画面などでよく見かける以下の機能について、Ionic のコンポーネントを利用すると簡単に実装することができるので紹介させていただきます。
- 引っ張って更新（Pull to Refresh）
- 無限スクロール（Infinite Scroll）
Ionicアプリのベースを作成
それでは本記事で扱うサンプルアプリを作成していきます。
- Ionicのインストール
※既にインストール済の場合はスキップしてください。
# Ionic CLIのインストール
$ npm install -g @ionic/cli# Ionicがインストールされたことを確認
$ ionic -v
6.18.0
- Ionicアプリの作成
以下のコマンドにて、Ionicアプリを作成します。
# Angularベースで空アプリを作成
$ ionic start ionic-list-sample blank --type=angular- アプリ名：ionic-list-sample
- テンプレート：blank
- ベースのフレームワーク：Angular
Ionicアプリの作成完了後、./src/app 配下に home ディレクトリができています（デフォルトのホーム画面のコンポーネント群です）
こちらのファイル群を以下の通り修正し、一覧画面を作成していきます。
ionic-list-sample/src/app
~~~~~~~ ※一部省略
└── home
├── home-routing.module.ts
├── home.module.ts
├── home.page.html <- 修正
├── home.page.scss <- 修正
├── home.page.spec.ts
└── home.page.ts <- 修正- home.page.ts
- home.page.html
- home.page.scss
- Ionicアプリの起動
以下コマンドにて、Ionicアプリを起動してみましょう。
# iOS / Androidの双方で確認するので、--lab オプションを付与
$ ionic serve --labチャットボット風の一覧画面(モック) ができました！💬
（はい、地獄のようなボットですね！！！圧！！！😇）
引っ張って更新（Pull to Refresh）機能を追加
続いて以下の ion-refresher コンポーネントを使用して、引っ張って更新する機能を追加していきましょう。
一覧画面の上部を引っ張った際、リフレッシュを行うよう以下の通りファイルへ追記します。
- home.page.ts
- home.page.html
なんと、、これだけでいいのです✨
引っ張って更新（Pull to Refresh）が簡単に実装できました。
せっかくなので、少し見た目を変えてみましょう。
- home.page.html
テキストの表示とスピナーのスタイルを少し変更してみました。
無限スクロール（Infinite Scroll）機能を追加
最後に以下の ion-infinite-scroll コンポーネントを使用して、無限スクロールの機能を追加していきましょう。
一覧画面の下部をスクロールした際、無限スクロールが行われるように以下の通りファイルへ追記します。
- home.page.ts
- home.page.html
こちらもなんとこれだけです✨
無限スクロール（Infinite Scroll）機能を簡単に実装できましたね。
※ ion-infinite-scroll の disabled 属性をtrueにすると、無限スクロールのイベントが無効になります。本記事のサンプルでは20件を超えたら、無限スクロールが行われないよう disabledをtrueへ設定しています。
こちらも少しだけ見た目を変えてみましょう。
テキストの表示とスピナーのスタイルを変更してみました。
おわりに
今回は ion-refresher と ion-infinite-scroll のコンポーネントを紹介させていただきました。Ionicでは他にも便利なコンポーネントが標準で用意されているので、積極的に活用していきたいですね！
最後まで読んでいただきありがとうございました！
We are hiring!
「人口減少社会において必要とされるインターネット事業を創造し、ニッポンを元気にする。」
を理念に掲げ一緒に働く仲間を募集しております。
京都オフィスでもエンジニア職の方を絶賛募集中ですので、ぜひともご応募お待ちしております！
