はじめに
こんにちは、毎日ジメジメして嫌ですね。
いつ梅雨は明けるのだろうか?
コロナ禍のせいであまりお出かけも出来ないので、久しぶりに記事を書いてみました。
最近ではお仕事で React を触ることが多いです。
React、シンプルでいいですね。Angular とはまた別の良さがあります。
ところで、Ionic も React をサポートしているのをご存じですか?
ご存じない?
Ionic 2 は Angular.js、Ionic 3 は Angular をサポートしていたので、「Ionic は Angular でハイブリッドアプリを作るプロダクト」と認識されているかたも多いかもしれません。
実は、去年(2019年)の10月に正式に React がサポートされました!!
詳しくはこちらの記事をどうぞ。
Ionic Core について
では、Angular のサポートが今後は薄くなるの?というと、そうではありません。
Ionic 4 から、Ionic の UI 部品は Web Components として提供されています。
Web Components をざっくり説明すると、「再利用できる独自の HTML タグ」を作れる技術です。そのような UI 部品が、Ionic Core パッケージで提供されています。
この Ionic Core を用いて、Angular や React 向けのパッケージが提供されているのです。ですので、Ionic は、どんなフロントエンドフレームワークでも、Vanilla JS でも動作させることができます。
Ionic on Vanilla JS
では、実際に Vanilla JS のみで Ionicの画面を作成してみましょう。
Ionic Core を導入するには、CDN にあるスクリプトを追加するだけです。簡単ですね!
<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 href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" rel="stylesheet">
サンプルの全ソースコードはこちらです。
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>Ionic CDN Sample</title>
<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"
/>
<script>
openLoading = async () => {
const loading = document.createElement("ion-loading");
loading.message = "Please wait...";
loading.duration = 3000;
document.body.appendChild(loading);
await loading.present();
const { role, data } = await loading.onDidDismiss();
console.log("Loading dismissed!");
};
</script>
</head>
<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Ionic CDN Sample</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-toggle></ion-toggle>
<ion-button expand="block" onClick="openLoading()">
Open Loading
</ion-button>
</ion-content>
</ion-app>
</body>
</html>
このコードをローカルの index.html
ファイルで動作させると、次の画面が表示されます。
また、Plnkrなどのサイトでも動作確認ができます。次のサイトで、上のソースコードの動作確認ができます。
Ionic Kitchen Sink for React
とはいえ、React での Ionic 情報が少ないという話を耳にします。サポートされて1年未満なのと、Angular の歴史も長かったことから、まだ React の情報は 比較的少ないかもしれません。1
正式サイト が一番、React 情報が豊富なのですが、そのサイトにあるこちらのデモは、Stencil(Ionicチームが Web Components を作るために作った新たなフレームワーク)で記述されているので、混乱を招きやすいです。
そのような事もあり、自分の素振りも兼ねて、デモである「Ionic Kitchen Sink」をReactで書き直してみました。
そのコードが、次のリポジトリです。
また、それをNetlify にアップしたサイトがこちらです。
React で Ionic アプリを作る際、ここどうすればいいんだろう?って時に参考になればと思います。
あ、因みに Angular で 作りたいって方は、こちらに良い書籍があるのでお勧めしておきますね!
-
僕が過去に書いた Ionic 記事も、全部 Angular ですね。React版も用意しようかなー。 ↩