BT

最新技術を追い求めるデベロッパのための情報コミュニティ

寄稿

Topics

地域を選ぶ

InfoQ ホームページ ニュース Ionic CLI V5がIonic React Betaをサポート

Ionic CLI V5がIonic React Betaをサポート

ブックマーク

原文(投稿日:2019/08/24)へのリンク

Ionic Frameworkチームは最近、Ionic CLIの5番目のメジャーイテレーションをリリースした。Ionic CLI v5はIonic Reactサポート(ベータ)を備えているため、開発者はReact JavaScriptフレームワークとIonic UIコンポーネントを使用してIonicアプリケーションを作成できる。Ionic CLI v5には、より優れた開発者エクスペリエンスとさまざまなバグ修正を目的とした機能も備わっている。

Ionic CLIを使用すると、次のようにIonic Reactを使用するプロジェクトをすばやく作成できる。最初に、コマンドラインインターフェイス(CLI)を最新バージョンに更新する必要がある。

npm install -g ionic@latest

その後、プロジェクトを作成できる。

ionic start myApp blank --type=react
cd myApp

Ionic CLI v5リリースは新しいものであるが、Ionic Reactと新しいコマンドラインインターフェイス(CLI)を使用してアプリケーションを構築する方法を説明するコミュニティの記事が既に公開されている。そのような記事の1つでは、Ionic 4(Ionic CLIはIonic Frameworkとは別のバージョンパターンに従うことに注意してください)、React、React Routerと接続したIonic CLIの使用法を説明している。次の通り必要な依存関係をインストールする。

npm i @ionic/core @ionic/react react-router react-router-dom

その後、src/pages/HomePage.jsおよびsrc/pages/BlogPage.jsのページが定義されていると仮定すると、サンプルアプリケーションは次のように記述する。

import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';

import { IonApp, IonPage, IonRouterOutlet } from '@ionic/react';

import HomePage from './pages/HomePage';
import BlogPage from './pages/BlogPage';

import './App.css';

class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">
          <IonApp>
            <IonPage id="main">
              <IonRouterOutlet>
                <Route exact path="/" component={HomePage} />
                <Route path="/blog" component={BlogPage} />
              </IonRouterOutlet>
            </IonPage>
          </IonApp>
        </div>
      </Router>
    );
  }
}

export default App;

Ionic CLI v5は、プラットフォームに依存しないnative-runコマンドも備えており、シミュレーターや実際のデバイスへのデプロイを簡素化する。native-runはJavaScriptで記述されており、CordovaとCapacitorの両方で動作する。

一方、Ionic CLI v5にも追加されたcordova-resは、Apache Cordovaモバイルアプリケーション開発フレームワークに特化したものである。cordova-resは、ionic cordova resources用にCordovaリソースをローカルで生成するために使用される。cordova-resは、開発者のスプラッシュスクリーンとアイコンを生成するためのIonicアカウントが不要になり、リソースがローカルで生成されるため、開発者のエクスペリエンスが向上する。

Ionic CLI v5には、リリースノートに記載されている重大な変更アップグレードパスも付属している。

Ionicは、標準のWebテクノロジー(HTML、CSS、JavaScript)を使用して、iOS、Android、Electron、Webで実行するアプリケーションを構築するための無料のオープンソースコンポーネントライブラリである。さらに、Ionicには、新しいアプリケーションを容易に作成できるようにコマンドラインインターフェイス(CLI)が付属しており、サポートしているさまざまなプラットフォームへのデプロイも可能である。

Ionic CLIはMITライセンスの下で利用可能である。Ionic CLIコントリビューションガイドラインを通じてコントリビューションを歓迎します。コントリビュータは対応する行動規範に沿う必要がある。

この記事に星をつける

おすすめ度
スタイル

BT