SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

再利用性とカプセル化のためのWeb Componentsを基礎から学ぶ

Web ComponentsのUIライブラリ「Ionic Framework」を解説──既存のデザインシステムを活用する方法とは?

再利用性とカプセル化のためのWeb Componentsを基礎から学ぶ 第5回

  • X ポスト
  • このエントリーをはてなブックマークに追加

Ionic FrameworkとLitでToDoアプリを作る

 さて、簡単な例だけでは味気ないので、前回のToDoアプリの見た目をIonic Frameworkで再実装する例も作ってみましょう。

 まずはHTMLを用意しましょう。Ionic Frameworkの読み込み用の要素を配置していること以外は、前回のToDoアプリとほとんど変わりません(リスト2)。

[リスト2]ionic-todo.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>IonicとLitで作るToDoリスト</title>

  <!-- Ionic Frameworkを読み込む -->
  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
  <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" />

  <!-- (1) Ionic Frameworkより後に自作のJavaScriptモジュールを読み込む -->
  <script type="module" src="./ionic-todo.js"></script>
</head>
<body>
  <!-- 自作のカスタム要素を表示する -->
  <ionic-todo-list></ionic-todo-list>

  <!-- Ioniconを読み込む -->
  <script type="module" src="https://cdn.jsdelivr.net/npm/ionicons/dist/ionicons/ionicons.esm.js"></script>
  <script nomodule src="https://cdn.jsdelivr.net/npm/ionicons/dist/ionicons/ionicons.js"></script>
</body>
</html>

 次に、(1)で読み込んでいるJavaScriptを作成しましょう(リスト3)。

[リスト3]ionic-todo.js
import {LitElement, html, map, css} from 'https://cdn.jsdelivr.net/gh/lit/dist@2/all/lit-all.min.js';

class IonicToDoListElement extends LitElement {
  static properties = {
    tasks: {
      state: true,
    },
    hideCompleted: {
      type: Boolean,
      reflect: true,
    },
  };

  static styles = css`
    .completed {
      text-decoration-line: line-through;
      color: #777;
    }
    :host([hideCompleted]) .completed {
      display: none;
    }
  `;

  constructor() {
    super();
    this.tasks = [
      { id: 1, label: 'カプセル化と再利用性について学ぶ', completed: true },
      { id: 2, label: 'Web ComponentsのAPIを学ぶ', completed: true },
      { id: 3, label: 'Litの基本的なAPIを学ぶ', completed: true },
      { id: 4, label: 'Litの実践的な使い方を学ぶ', completed: true },
      { id: 5, label: 'UIライブラリを使ってみる', completed: false },
    ];
  }

  render() {
    return html`
      <ion-app>
        <ion-header>
          <ion-toolbar>
            <ion-title>ToDoリスト</ion-title>
          </ion-toolbar>
        </ion-header>
        <ion-content>
          <!-- (1) -->
          <ion-list>
            ${map(this.tasks, (task) => {
              return html`
                <!-- (2) -->
                <ion-item class=${task.completed ? 'completed' : ''}>
                  <ion-label>${task.label}</ion-label>
                  <ion-checkbox
                    slot="start"
                    ?checked=${task.completed}
                    @click=${(event) => this.setChecked(task, event)}
                  ></ion-checkbox>
                </ion-item>
              `;
            })}
          </ion-list>
          <ion-item-divider></ion-item-divider>
          <ion-list>
            <ion-item>
              <ion-label>完了したタスクを隠す</ion-label>
              <ion-checkbox
                slot="start"
                ?checked=${this.hideCompleted}
                @ionChange=${this.setHideCompleted}
              ></ion-checkbox>
            </ion-item>
          </ion-list>
        </ion-content>
      </ion-app>
    `;
  }

  setChecked(task, event) {
    task.completed = event.target.checked;
    this.requestUpdate();
  }

  setHideCompleted(event) {
    this.hideCompleted = event.target.checked;
  }
}

customElements.define('ionic-todo-list', IonicToDoListElement);

 render()の戻り値以外はほとんど前回から変更していないので、連載を追ってくださっている方から見ると、見覚えのあるものになっていると思います。リスト3のファイルを作成したら、リスト2のionic-todo.htmlをブラウザで表示してみましょう。図6のような見た目になります。

図6:Ionic Frameworkで作ったToDoアプリ
図6:Ionic Frameworkで作ったToDoアプリ

 今回の再実装で着目してほしいのは、(1)の<ion-list>、(2)の<ion-item>の2点です(図7)。

図7:ion-listとion-item
図7:ion-listとion-item

 <ion-list>はリスト全体を囲んで、項目を縦方向に並べるためのカスタム要素です。項目の並べ替えや、項目をスワイプして裏側にオプションを表示する機能などがサポートされています。<ion-item>は項目1つ分のUIを表現するためのカスタム要素です。paddingが適切に設定されたり、内部のチェックボックスとラベルが中央揃えで横に並んでいたりと、中身を綺麗に並べる役割があります。

 このように、ライブラリからカスタム要素を拝借してくるだけで、かなりアプリっぽい見た目のものを作れました。

まとめ

 今回はIonic FrameworkをWeb Components仕様のUIライブラリとして使用する方法について解説しました。せっかくなので、次回はIonic Frameworkにはどんなカスタム要素があるのかを解説していきます。

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
再利用性とカプセル化のためのWeb Componentsを基礎から学ぶ連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト 中川幸哉(ナカガワユキヤ)

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/17622 2023/04/25 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング