ion-router-outletのmainって何？

この記事は、Ionic Advent Calendar 2018の7日目の記事です。

TL;DR

ion-menuを使う場合は

• main属性
• contentIdプロパティ

どちらかの指定が必須です。

<ion-menu>でメニューを作る

Ionic v4で下のようなサイドメニューのある画面を実装する際、

ion-menuを使ってこのように作っていくと思います。

<ion-menu>
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list>
      <ion-menu-toggle auto-hide="false">
        <ion-item>メニュー1</ion-item>
        <ion-item>メニュー2</ion-item>
      </ion-menu-toggle>
    </ion-list>
  </ion-content>
</ion-menu>
<ion-router-outlet main></ion-router-outlet>

おや？

<ion-router-outlet main></ion-router-outlet>

mainとは何でしょう？

Ionicのリファレンスを見ても特に説明がありません。
https://beta.ionicframework.com/docs/api/menu/

気持ち悪いのでとりあえず消してみましょう。

<ion-router-outlet></ion-router-outlet>

すると...

メニューアイコンが消えてしまいました。これはどういうことでしょうか？

Ionicのソースコードを追う

<ion-menu>のソースコードには、

menu.tsx

const el = this.el;
const parent = el.parentNode as any;
const content = this.contentId !== undefined
  ? document.getElementById(this.contentId)
  : parent && parent.querySelector && parent.querySelector('[main]');

のようにquerySelector('[main]')で親要素からmainという属性を持つ要素を取得している部分があります。

<ion-menu></ion-menu>
<ion-router-outlet main></ion-router-outlet>

main属性はメニューの表示のために必要だったということですね。

気持ち悪いとか言ってごめんなさい

contentIdを使う

<ion-menu>と関連付けを行う方法はもう一つあります。

Ionic v4のAPIリファレンスには「contentId」を指定すると書かれてあります。
https://beta.ionicframework.com/docs/api/menu/

この場合、ion-router-outletに設定したものと同じIDをion-menuに渡します。

<ion-menu contentId="main"></ion-menu>
<ion-router-outlet id="main"></ion-router-outlet>

（ ´_ゝ`）。o（サンプルがmain属性を指定するパターンなので見落としそう...）

コードで明示したい場合はcontentIdを使うと良さそうですね。

おわりに

Ionicは現在ベータ版ですが、完成度が高いので十分期待できると思います。

ドキュメントや日本語情報はまだ十分とは言えないので、必要に応じてソースコードを見るのも良いでしょう。

詳しい話を聞いてみたいな〜という方は、来年1月に「Angular & Ionic Meetup Fukuoka」を開催しますので是非ご参加ください（宣伝）。

https://ionic-jp.connpass.com/event/111912/

明日は @umi_mori さんです！