メインコンテンツにジャンプ
Capgoのロゴ
チュートリアル

Capacitorを使用したReact.jsのみで構築されたモバイルアプリの作成

Capacitorを使用してReact.jsのWebアプリケーションをネイティブモバイルアプリに変換し、Konsta UIを使用してネイティブUIを強化するガイド

マーティン・ドナディュー

マーティン・ドナディュー

コンテンツマーケター
Capacitorを使用したReact.jsのみで構築されたモバイルアプリの作成

このチュートリアルでは、React、Capacitor、Konsta UIを使用してモバイルアプリケーションを作成する方法を紹介します。最後まで進むと、React.jsのWebアプリをCapacitorに変換し、Konsta UIを使用してネイティブUIを実装する方法を知ることができます。

Capacitorは、React.jsのWebアプリをネイティブモバイルアプリケーションに変換するための簡単な方法を提供し、React Nativeなどの新しい戦略を学ぶ必要はありません。

このプロセスにはいくつかの簡単なステップが含まれます。Webアプリが完全に機能するモバイルアプリケーションになるまで、待ってください。

Capacitor概要

CapacitorJSはゲームチェンジャーです。どのWebプロジェクトでもシームレスに統合でき、ネイティブWebviewにアプリをラップし、ネイティブXcodeとAndroid Studioプロジェクトを生成します。また、プラグインを使用して、カメラなどのネイティブデバイス機能にアクセスできます。

Capacitorは、ネイティブモバイルアプリケーションを作成するための簡単な方法を提供し、ハッスルや急激な学習カーブはありません。APIとストリーミングされた機能性により、プロジェクトに簡単に組み込むことができます。

React.jsアプリの設定

Reactアプリケーションを開始する最も簡単な方法を実行してみましょう。npmパッケージマネージャーを使用して、新しいReactアプリを作成します。

npx create-react-app my-app

プロジェクトをネイティブモバイルアプリケーションに変換するには、アプリの export が必要です。

このプロセスについては後で説明します。まず、CapacitorをReactアプリに統合する方法を理解してみましょう。

React.jsアプリにCapacitorを統合する

__CAPGO_KEEP_0__の初期設定手順は少し詳細かもしれませんが、その後、ネイティブアプリラッパーの更新は、コマンドを実行するだけの簡単さで行えます。 sync まず、__CAPGO_KEEP_0__と__CAPGO_KEEP_1__を開発依存モジュールとしてインストールし、プロジェクト内で設定します。セットアップ中、名前とバンドルIDのデフォルト値に「Enter」を押してください。

First, we’ll install the Capacitor CLI as a development dependency and set it up within our project. During the setup, accept the default values for name and bundle ID by pressing “enter.”

最後に、プラットフォームを追加し、__CAPGO_KEEP_0__はプロジェクトルートに各プラットフォーム用のフォルダを作成します:

Finally, we’ll add the platforms, and Capacitor will create folders for each platform at our project root:

# Install the Capacitor CLI locally
npm install -D @capacitor/cli

# Initialize Capacitor in your React project
npx cap init

# Install the required packages
npm install @capacitor/core @capacitor/ios @capacitor/android

# Add the native platforms
npx cap add ios
npx cap add android

Androidプロジェクトにアクセスするには、 インストールしてください インストールしてください インストールしてください インストールしてください

インストールしてください Android StudioiOSの場合、Macが必要で、 Xcode.

次に、 webDir の capacitor.config.json ファイルを次のように更新してください。

{
  "appId": "com.example.app",
  "appName": "my-app",
  "webDir": "build",
  "bundledWebRuntime": false
}

ビルドコマンドを実行し、プロジェクトをCapacitor:と同期してください。

npm run build
npx cap sync

コマンドはReact.jsプロジェクトをビルドし、 npm run build nativeプラットフォームで正確な場所にウェブ__CAPGO_KEEP_0__を配置するため、 npx cap sync will align the web code in the accurate places of the native platforms so they can be executed in an app.

今、少しだけ幸運とエラーのない場合、React.jsアプリはデバイス上でリリースする準備が整っています！

Nativeアプリのビルドとデプロイ

iOSアプリの開発には Xcodeが必要です。 Androidアプリの開発にはAndroid Studio

The Capacitor CLI simplifies the process of opening both native projects:

npx cap open ios
npx cap open android

iOSアプリをアプリストアで配信する場合は、Apple Developer Programに登録し、Androidアプリを配信する場合はGoogle Play Consoleに登録する必要があります。

Capgoは、両方のネイティブプロジェクトを開くプロセスを簡素化します:

ネイティブプロジェクトがセットアップされたら、デバイスにアプリをデプロイするプロセスは簡単です。

Android Studioの場合、すべての内容が読み込まれたら、デバイスにアプリをデプロイしてください。Xcodeの場合、実機にアプリをデプロイするには署名アカウントを設定する必要があります。署名アカウントを設定した後、実機にアプリを実行するには、上部で選択したデバイスを選択して、実行を開始してください。

Capacitor Live Reload

モダンな開発フレームワークは通常、ホットリロード機能を備えています。幸いにも、Capacitor も同様の機能を提供できます。 モバイルデバイス上で!

ローカルホストのアプリケーションにライブリロード機能を付与するには、Capacitor アプリが特定のURLからコンテンツを読み込むようにする必要があります。

まず、ローカルIPアドレスを決定する必要があります。Macの場合、ターミナルで ipconfig getifaddr en0 を実行してください。Windowsの場合、 ipconfig を実行し、IPv4アドレスを探してください。

Capacitor に対して、サーバーからアプリを直接読み込むように指示するには、 capacitor.config.ts ファイルにパラメータを追加する必要があります。

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'my-app',
  webDir: 'build',
  bundledWebRuntime: false,
  server: {
    url: 'http://192.168.x.xx:3000',
    cleartext: true
  }
};

export default config;

正確なIPアドレスとポート番号を使用してください。次に npx cap copy を実行して、ネイティブプロジェクトに変更を適用してください。

Android StudioまたはXcodeを使用してアプリを再度デプロイすると、Reactアプリの変更が自動的にリロードされ、アプリ内で表示されます!

__CAPGO_KEEP_0__の新しいプラグインがインストールされた場合、例えばカメラの場合、ネイティブプロジェクトを再構築する必要があります。これは、ネイティブファイルが変更されたため、オンザフライで更新できませんからです。

Capacitor プラグインの使用

Capacitor プラグインを使用する方法を簡単に確認してみましょう。簡単なものをインストールしてみましょう。 Share プラグイン, which prompts the native share dialog:

npm i @capacitor/share

使用するには、パッケージをインポートし、関連する share() 関数をアプリから呼び出します。 App.js:

import { Share } from '@capacitor/share';

function ShareButton() {
  const share = async () => {
    await Share.share({
      title: 'React App',
      text: 'Visit this React App',
      url: 'http://localhost:3000',
      dialogTitle: 'Share with...'
    });
  };

  return (
    <button onClick={share}>
      Share
    </button>
  );
}

export default ShareButton;

新しいプラグインをインストールした後、再度ReactプロジェクトをSyncしてください。 npx cap sync.

Konsta UIを実装する: より美しいモバイルUI

より美しいモバイルUIの体験を得るために、Konsta UIを使用します。iOSとAndroid用のスタイリングを提供し、扱いやすいものです。

Konsta UIを使用するには、Reactパッケージをインストールしてください:

npm i konsta

変更する tailwind.config.js __CAPGO_KEEP_0__

// import konstaConfig config
const konstaConfig = require('konsta/config')

// wrap config with konstaConfig config
module.exports = konstaConfig({
  content: [
    './src/**/*.{js,ts,javascript,tsx}',
  ],
  darkMode: 'media', // or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
})

konstaConfig Konsta UIの追加のバリアントとユーティリティを追加するために、現在のTailwind CSS設定を補完します。

現在、主なAppコンポーネントを設定して、グローバルパラメータを設定します。 themeAppを使用して、主なアプリケーションをwrapします。 src/index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import {App} from 'konsta/react';
import './index.css';
import MyApp from './App';

ReactDOM.render(
  <React.StrictMode>
    <App theme="ios">
      <MyApp />
    </App>
  </React.StrictMode>,
  document.getElementById('root')
);

Konsta UI Reactコンポーネントを使用して、React.jsページにアクセスしてください。 src/App.js と修正してください。

// Konsta UI components
import {
  Page,
  Navbar,
  Block,
  Button,
  List,
  ListItem,
} from 'konsta/react';

export default function MyApp() {
  return (
    <Page>
      <Navbar title="My App" />

      <Block strong>
        <p>
          Welcome to your React & Konsta UI app.
        </p>
      </Block>
      
      <List>
        <ListItem href="/about" title="About" />
      </List>

      <Block strong>
        <Button>Click Me</Button>
      </Block>
    </Page>
  );
}

すべてが正しく実行されていれば、ReactとKonsta UIの間で、ReactとKonsta UIの間で、モバイルアプリにネイティブな見た目を提供するための、手軽な統合が実現します。

結論

Capacitor offers a seamless means of building native apps based on an existing web project, providing a simple way to share code and have consistent UI.

Thanks to technologies like Capacitor, building mobile applications from React.js web apps has never been easier. Take your web development skills to the next level by crafting impressive native mobile apps. Happy coding!

__CAPGO_KEEP_0__ sign up for a free account today.

Keep going from Building Mobile Apps with Pure React.js and Capacitor

If you are using Building Mobile Apps with Pure React.js and Capacitor to plan native media and interface behavior, connect it with Using @capgo/capacitor-live-activities for the native capability in Using @capgo/capacitor-live-activities, @capgo/capacitor-live-activities for the implementation detail in @capgo/capacitor-live-activities, Using @capgo/capacitor-video-player for the native capability in Using @capgo/capacitor-video-player, @capgo/capacitor-video-player @capgo/capacitor-video-playerの実装詳細について Using @capgo/capacitor-native-navigation Using @capgo/capacitor-native-navigationのネイティブ機能について

Capacitorアプリのリアルタイム更新

ウェブ層のバグが生じた場合、Capgoを使用して修正を配信するのではなく、数日間待ってアプリストアの承認を待つのではなく、ユーザーはバックグラウンドで更新を受け取り、ネイティブの変更は通常のレビュー経路で残る。

今すぐ始める

最新のブログ記事

Capgoは、プロフェッショナルなモバイルアプリを作成するために必要な最良の洞察を提供します。

2方向の通信機能を備えたCapacitorアプリ
開発 モバイル +1
2025年4月26日

2方向の通信機能を備えたCapacitorアプリ

OTA更新の5つの一般的なミスを避ける
開発 セキュリティ +1
2025年4月13日

OTA更新の5つの一般的なミスを避ける

モバイルアプリライブアップデートのための5つのセキュリティベストプラクティス
開発 モバイル +1
2025年1月14日

モバイルアプリライブアップデートのための5つのセキュリティベストプラクティス

ブログからすべてを参照