Zenn
🔖

IonicはモバイルUIに特化した単なるUIフレームワークです

2024/11/27に公開
Ionic
tech

2018年に書籍をだしてから、いろいろなところで「Ionic Frameworkとは」を話してきたのですが、もう2024年も終わりですので、そろそろ「Ionic Frameworkとは」を見直したいと思います。

https://ionicframework.jp/docs/

過去だした書籍での定義

まず、2018年1月にだした Ionicで作る モバイルアプリ制作入門 では、以下のように書きました。

Ionicは、Google社の「Angular」というアプリケーションフレームワークをベースに、HTML5アプリの開発に特化して作られたフレームワークです。

当時は、IonicはAngularをベースとして作られたフレームワークでした。Angularに完全依存してるかといわれると、独自CLIをもっており、またAngularのベストプラクティスに完全に乗ってるわけではなかったので、「Angularを足場にして構築されたフレームワーク」という形でしたね。

続いて2019年にだした Ionicで作る モバイルアプリ制作入門[Angular版] ではこのような表現に変更しました。

Ionicは、Web技術を使ってモバイルとデスクトップアプリをつくるためのフレームワークです。「Web Components」というWeb標準の技術が採用されており、本書で紹介するAngularというアプリケーションフレームワークだけではなく、ReactやVue.jsからも利用することができます。オリジナルのUIコンポーネントやルーティング、ページ遷移時のアニメーション、モバイルアプリとしてカメラなどのネイティブ機能にアクセスするといった機能を使うことができます。

Ionic 4から、Angularを足場にするのではなく、自社でWeb Components（※Web標準の再利用可能なカスタム要素（独自タグ）をつくる一連の技術の総称）を生成するためのStencilというフレームワークをつくり、それを足場にWebというプラットフォームでモバイルUIを再現するためのUIフレームワークを開発しました。 Angularに依存せずWeb標準となったため、Angularはもちろんのこと、VueやReactからも利用することができるようになりました。そのため、こういった表現に変更しました。

まぁ、あえていうと「モバイルアプリとしてカメラなどのネイティブ機能にアクセスするといった機能」は、Ionic CLIにCapacitorコマンドが埋め込まれていて、Ionicコマンドを通して実現できるよねというちょっと誇大化した表現ではありますが。笑

2024年の再定義

では、今、再度定義を試みるとしたらどうしたらいいでしょうか。まず、公式サイトにはこのように表記されています。

Ionic is an open source UI toolkit for building performant, high-quality mobile apps using web technologies — HTML, CSS, and JavaScript — with integrations for popular frameworks like Angular, React, and Vue.

訳：Ionic Framework はオープンソースの UI ツールキットで、HTML、CSS、JavaScript などのウェブ技術を使って、 Angular, React, and Vue といった人気フレームワークと併用することで高性能で高品質なモバイルアプリやデスクトップアプリを作ることができます。

採用技術等を語っていたことはありましたが、おそらくいちばんシンプルなのはこの説明でしょう。

  • Bootstrap等と同じように ただのUIフレームワークです

その上で、Bootstrap等との違いをあげるなら以下がとてもわかりやすいです。

  • モバイルアプリのUIを再現できます
  • クラスでスタイリングするのではなく、独自タグでスタイリングします（ class="ion-button" ではなく <ion-button> ）
  • もちろんCSSをあてることでカスタマイズも可能です

もっとよく知りたい？あえて深堀りしたらこんな感じですね。

  • iOSではUIKit、AndroidではMaterial Designを再現して、利用するプラットフォームで自動的に切り換えれます
  • プッシュ遷移（ナビゲーションスタック）とタブ表示（非線形ナビゲーション）に対応しています
  • ダークモードにもデフォルトで対応しています。だってモバイルUIですもの。

ただ、正直なところ、Ionicは「モバイルUIフレームワーク」という説明だけで十分な気はしています。

もともとIonicは2013に「ハイブリッドアプリのためのUIフレームワーク」として生まれ、当時は「WebサイトはPCから。モバイルアプリは別」という風潮が強かったですが、近年Webサイトとモバイルアプリの壁は薄くなってきています。PWAの誕生もですし、そもそもモバイル端末自体が高性能化したため、Webブラウザからでも十分にWebアプリを利用できるようになりました。

そのため、もはやIonicは「モバイルアプリのため」というところにこだわる必要はありません。モバイルUIをベースにしてWebサイトを構築する、またWebサイトをモバイルアプリとして展開する、その両方に利用することもできますし、Ionicを利用しなくてもWebサイトをモバイルアプリとして展開することもできます。ですので、Bootstrap等のUIフレームワークのひとつであり、普通にWebサイト制作の候補にあがるようなそんなポジションになったのではないかなと思います。

ドキュメントも日本語で利用することもできますので、興味ある方はぜひ手軽にはじめてみてください。

https://ionicframework.jp/docs/

それではまた。

Discussion