こんにちは。マネックス証券で投資情報システムの開発している倉田です。今回は私が個人的にお勧めしているIonic Reactを使用してクロスプラットフォームアプリを実装したいと思います。

IonicではAngularも使用できますが、今回はReactにフォーカスしたいと思います。

Ionicをざっくりと説明しますと、Web技術を活用してクロスプラットフォームのモバイルアプリを構築するためのフレームワークです。プラットフォーム固有のコードを書かずに、1つのコードベースでiOSとAndroidの両方のプラットフォームに対応できます。 React Nativeほどメジャーではないのですが、それぞれのフレームワークには一長一短ありますので、後ほど説明していきたいと思います。

Ionic React と React Native の違い

Ionic React

IonicはWebビューでレンダリングしているため、従来のReact Webアプリの開発に最も似ています。Web版のReactアプリケーションで使用しているCSSやライブラリをそのまま使えます。また、Ionicで作成したコードはWebアプリケーションとしても実装することができます。

しかしWebビューに依存しているためパフォーマンス上の制限が生じる可能性があるので、作成するアプリのパフォーマンスが重要な要素になる場合はReact Native、SwiftやJavaで開発をした方が良いでしょう。

React Native

一方、React Nativeは、JavaScriptを使用してネイティブコンポーネントをレンダリングし、よりネイティブな外観とパフォーマンスを提供します。その代わり、UI部分はReact Native独自の仕組みで実装されているため、Reactライブラリを使用できないことが多く、またWebアプリケーションとして実装することができません。

では、早速アプリを作っていきましょう！

アプリの実装

前提

macOS、iPhone/iPad を使用
最新のXcode がインストールされている
Node.js（v16 以降）と npm がインストールされている
Ionic CLIのインストール: npm install -g @ionic/cli native-run cordova-res

Ionic React プロジェクトの作成

公式ドキュメント：https://ionicframework.com/docs/react/your-first-app

まずはIonic CLIを使用して新しいIonic Reactプロジェクトを作成します。以下のコマンドを入力して、プロジェクトを作成しましょう。

ionic start myApp tabs --type=react --capacitor

これにより、名前が「myApp」の新しいIonic Reactプロジェクトが作成されます。必要に応じてプロジェクト名を変更してください。プロジェクトが作成されたら、作業ディレクトリをプロジェクトフォルダに移動します。 cd myApp

次に、以下のコマンドを入力してプロジェクトを実行します。 ionic serve これにより、開発サーバーが起動し、Ionic Reactアプリがブラウザで表示されます。

Ionicの初期ページだと物足りないので、ご存知の方も多い Material-UI でログインページを実装しましょう。まずはライブラリを追加。

npm install @mui/material @emotion/react @emotion/styled

以下Material-UIの公式テンプレートを /src/App.tsx に上書きします。

import { setupIonicReact } from  '@ionic/react';
import  Button  from  "@mui/material/Button";
import  TextField  from  "@mui/material/TextField";
import  FormControlLabel  from  "@mui/material/FormControlLabel";
import  Checkbox  from  "@mui/material/Checkbox";
import  Link  from  "@mui/material/Link";
import  Grid  from  "@mui/material/Grid";
import  Box  from  "@mui/material/Box";
import  Typography  from  "@mui/material/Typography";
import  Container  from  "@mui/material/Container";

setupIonicReact();

const  App: React.FC = () => (
    <Container  component="main"  maxWidth="xs">
        <Box
            sx={{
                marginTop:  8,
                display:  "flex",
                flexDirection:  "column",
                alignItems:  "center",
            }}
        >
        <Typography  component="h1"  variant="h5">
            Sign in
        </Typography>
        <TextField
            margin="normal"
            fullWidth
            label="Email Address"
        />
        <TextField 
            margin="normal"
            fullWidth
            label="Password"
        />
        <FormControlLabel
            control={<Checkbox  value="remember"  color="primary"  />}
            label="Remember me"
        />
        <Button
            type="submit"
            fullWidth
            variant="contained"
            sx={{ mt:  3, mb:  2 }}
        >
            Sign In
        </Button>
        <Grid  container>
            <Grid  item  xs>
                <Link  href="#"  variant="body2">
                    Forgot password?
                </Link>
            </Grid>
            <Grid  item>
                <Link  href="#"  variant="body2">
                    {"Don't have an account? Sign Up"}
                </Link>
            </Grid>
        </Grid>
    </Box>
</Container>
);
export  default  App;

ionic serve でログインページが実装されたことを確認しましょう。

ネイティブデバイス機能の実装

続いて、ネイティブデバイス機能にアクセスしてみましょう。Ionic 公式ドキュメントではカメラにアクセスしたりしていますが、今回はシンプルにAndroid/iOSを振動させてみます。IonicではCordovaやCapacitorなどのプラグインを使用します。

npm install @capacitor/haptics

先ほど実装したログイン画面（/src/App.tsx）に振動機能を追加しましょう。

import { Haptics } from  '@capacitor/haptics';　//インポート

<Button
    type="submit"
    fullWidth
    variant="contained"
    sx={{ mt:  3, mb:  2 }}
    onClick={()=>Haptics.impact()} //振動機能を追加
>
    Sign In
</Button>

上記のように、たった２行でネイティブデバイス機能にアクセスできます。使用できるプラグインが豊富にありますので、参考にしてみてください。 - https://ionicframework.com/docs/native/setup - https://ionicframework.com/docs/v5/native/stripe

お手元のデバイスで動作確認をしましょう

先ほどのコードをお手元のiPhone/iPadで起動するにはXcodeへビルドする必要があります。以下コマンドを順次に実行してください。

ionic build
ionic cap add ios #または android
ionic cap copy
ionic cap sync
ionic cap open ios #または android

Xcode が起動したらiPhone/iPadをパソコンに繋げ、①で自身のデバイスを選択し、②で実行するとお手元のデバイスにインストールされます。

デバイスでデベロッパーモードを有効にすることや、③でXcodeのアカウントを作成・選択する必要がありますが割愛します。

おわりに

モバイルアプリ開発をどれだけ簡単に既存の React コードで実装ができるかお分かりいただけたでしょうか。

Ionic React の利点を以下のようにまとめました。

Ionic React	React Native
既存Reactコードをほぼ全て使用できる	既存ReactコードのUI部分やライブラリが使用できない
ReactとWeb(javascript, css)の知識で開発できる	React Nativeの学習コストがある
Webアプリケーションも実装できる	Android、iOSモバイルアプリのみ
Reactのライブラリを使用できる	React Nativeのライブラリが充実している
日本語のドキュメントが充実していない