こんにちは。とみまつです。
個人で ionic（React / TypeScript）アプリを作っています。
Ionic コンポーネントについて、今回新たな学びがあったので記録しておきます。
※本記事ではマテリアルデザインの用語を使っています。
画面の上部でよく見るあいつ、その名は Tab
まずはTOP画面から作ってしまおうと思い、UIコンポーネントのドキュメントをざざっと読みました。
とりあえずヘッダー（App bar）とフッター（Bottom navigation）を配置します。
次に、TOP画面では項目をフィルタリングして表示させたかったので、「タブ」を実装します。
ドキュメントに「ion-tabs」という項目があったので、これだ！と思いコードを書きます。
（このときにちゃんと説明を読んでなかったのが失敗。）
するとこんな感じ。
特に違和感はないとこの時は思っていました。。。
実際にデバイスで run して触ってみると、なんだかコレジャナイ感が・・・。
まあでも Tab だし・・・と思って、このまま実装を進めていました。
ion-tabs じゃなかった
次の日になって改めて見てみてもやっぱり違和感がすごかったので、もう1度ドキュメントを睨みました。
すると ion-tabs の冒頭にこんな説明が。
Tabsは、Tabをベースとしたナビゲーションを実装する最上位レベルのナビゲーション・コンポーネントです。
https://ionicframework.com/jp/docs/api/tabs
＜略＞ion-tabsコンポーネントにはスタイル設定がなく、ナビゲーションを処理するためのルーターアウトレットとして機能します。
ルーターアウトレット・・・？？
私が作りたいのは、あくまでもリスト項目をフィルタリング（カテゴライズ）できればいいもので、画面遷移させたいわけではありません。なので今回のパターンで ion-tabs を使うのは誤りというわけです。
じゃあ適したコンポーネントはなんなんだともう1度ドキュメントとにらめっこしていると、こんなコンポーネントを見つけました。
正解はこれ！ion-segment
結論から言うと、「ion-segment」というコンポーネントが今回の目的に適したコンポーネントでした。
実際に実装してみるとこんな感じ。
左右にスワイプもできるし、そうそうこれこれ！！という感じでしっくりきました。
ちゃんとドキュメントにもこのように書いています。
これらの機能は、1つを選択すると他のすべてが選択解除されるTabsと似ています。Segmentsは、コンテンツ内の異なるビューを切り替える場合に便利です。クリックしてページ間の遷移をコントロールする場合は、Segmentsの代わりにTabsを使用してください。
https://ionicframework.com/jp/docs/api/segment
「Tab」という名前に引っ張られ、思い込みから誤ったコンポーネントの使い方をしていましたが、無事に正解にたどり着いてよかったです。
まとめ
改めてまとめてみます。
【ion-tabs】
・ナビゲーションを実装する最上位レベルのナビゲーション・コンポーネント
・クリックしてページ間の遷移をコントロールする場合に使う
【ion-segment】
・Tabs と似ているが、コンテンツ内の異なるビューを切り替える場合に使う
思い込みで進めるのではなく、ドキュメントをちゃんと読むことは大事だなと改めて痛感しました。
あらかじめコンポーネントが用意されているおかげで画面がサクサク作れてとてもラクだし楽しいのですが、正しい使い方ができるように気をつけながら進めようと思いました。