Ionic入門
Ionicは、HTML、CSS、JavaScriptなどのWebテクノロジーを使用して、高性能で高品質なモバイルアプリを構築するためのオープンソースUIツールキットです。Angular、React、Vueなどの一般的なフレームワークとの統合も可能です。Angular、React、Vue
Ionicのインストール、または最初のアプリチュートリアルに従って、主要な概念を学ぶことで、開発を始めましょう。
システムの設定とフレームワークのインストールに関するステップバイステップガイド。
Ionicの美しくデザインされたUIコンポーネントライブラリを詳しく見てみましょう。
Bluetooth、マップ、HealthKitなどのネイティブデバイスプラグインを統合します。
Ionicアプリのビジュアルデザインを簡単にカスタマイズして変更し、ブランドに適合させる方法を学びましょう。
概要
Ionicは、アプリのフロントエンドUXとUIインタラクション（UIコントロール、インタラクション、ジェスチャー、アニメーション）に焦点を当てています。学習が容易で、Angular、React、Vueなどの他のライブラリやフレームワークと統合できます。Angular、React、Vue。あるいは、単純なスクリプトインクルードを使用して、フロントエンドフレームワークなしでスタンドアロンで使用することもできます。Ionicについて詳しく知りたい場合は、作成したビデオで基本を説明しています。
1つのコードベースで、あらゆる場所で実行
Ionicは、Web開発者が単一のコードベースからすべての主要なアプリストアとモバイルWeb向けのアプリを構築できる唯一のモバイルアプリスタックです。アダプティブスタイリングにより、Ionicアプリはあらゆるデバイスで自然な見た目と感触になります。
パフォーマンスへの焦点
Ionicは、効率的なハードウェアアクセラレーションによるトランジションやタッチに最適化されたジェスチャーなど、ベストプラクティスを使用して、最新のモバイルデバイスで優れたパフォーマンスと動作を実現するように構築されています。
クリーンでシンプルで機能的なデザイン
Ionicは、現在すべてのモバイルデバイスとプラットフォームで美しく動作して表示されるように設計されています。既製のコンポーネント、タイポグラフィ、そして各プラットフォームに適応する豪華な（拡張可能な）基本テーマにより、スタイリッシュな開発を行うことができます。
ネイティブとWebの最適化
IonicはネイティブアプリのUIガイドラインをエミュレートし、ネイティブSDKを使用することで、ネイティブアプリのUI標準とデバイス機能を、オープンWebのフルパワーと柔軟性と組み合わせます。IonicはCapacitor（またはCordova）を使用してネイティブにデプロイするか、Progressive Web Appとしてブラウザで実行します。
目標
クロスプラットフォーム
ネイティブiOS、Android、およびProgressive Web AppとしてのWebなど、複数のプラットフォームで動作するアプリを構築およびデプロイします。すべて1つのコードベースで。一度記述すれば、どこでも実行できます。
Web標準ベース
Ionicは、信頼性の高い標準化されたWebテクノロジー（HTML、CSS、JavaScript）を基盤として構築されており、カスタムエレメントやShadow DOMなどの最新のWeb APIを使用しています。このため、Ionicコンポーネントは安定したAPIを持ち、単一のプラットフォームベンダーの都合に左右されません。
美しいデザイン
クリーンでシンプルで機能的です。Ionicは、すべてのプラットフォームでそのまま美しく動作して表示されるように設計されています。事前にデザインされたコンポーネント、タイポグラフィ、インタラクティブなパラダイム、そして豪華な（拡張可能な）基本テーマから始めましょう。
シンプルさ
Ionicはシンプルさを念頭に置いて構築されているため、アプリの作成が楽しく、学習しやすく、Web開発スキルを持つほとんどすべての人がアクセスできます。
フレームワークの互換性
以前のバージョンのIonicはAngularと密接に連携していましたが、バージョン4.xのフレームワークは、スタンドアロンのWebコンポーネントライブラリとして機能するように再設計され、Angularなどの最新のJavaScriptフレームワークとの統合が可能です。Ionicは、ReactやVueなど、ほとんどのフロントエンドフレームワークで成功裏に使用できますが、一部のフレームワークでは完全なWebコンポーネントサポートのためにシムが必要です。
JavaScript
IonicをWebコンポーネントに移行する主な目標の1つは、コンポーネントをホストするための単一のフレームワークへの依存性を排除することでした。これにより、スクリプトタグだけでWebページでコアコンポーネントをスタンドアロンで動作させることが可能になりました。フレームワークを使用することは、大規模なチームや大規模なアプリにとって優れた方法ですが、WordPressのようなコンテキストでも、単一ページでスタンドアロンライブラリとしてIonicを使用できるようになりました。
Angular
Angularは常にIonicを素晴らしいものにする中心的な存在でした。コアコンポーネントはスタンドアロンのWebコンポーネントライブラリとして動作するように記述されていますが、@ionic/angularパッケージを使用すると、Angularエコシステムとの統合が非常に簡単になります。@ionic/angularには、Angular開発者がIonic 2/3から期待するすべての機能が含まれており、AngularルーターなどのコアAngularライブラリと統合されています。
React
Ionicは、人気のReactライブラリを正式にサポートするようになりました。Ionic Reactを使用すると、React開発者は既存のWebスキルを使用して、iOS、Android、およびWebを対象とするアプリを構築できます。@ionic/reactを使用すると、すべてのコアIonicコンポーネントを使用できますが、ネイティブのReactコンポーネントを使用する場合のような感覚になります。
Vue
Ionicは、人気のVue 3ライブラリを正式にサポートするようになりました。Ionic Vueを使用すると、Vue開発者は既存のWebスキルを使用して、iOS、Android、およびWebを対象とするアプリを構築できます。@ionic/vueを使用すると、すべてのコアIonicコンポーネントを使用できますが、ネイティブのVueコンポーネントを使用する場合のような感覚になります。
将来のサポート
他のフレームワークのサポートは、今後のリリースで検討されます。
Ionic CLI
公式Ionic CLI(コマンドラインインターフェース)は、Ionicアプリを迅速に構築するためのツールであり、Ionic開発者にとって多くの便利なコマンドを提供します。Ionicのインストールとアップデートに加えて、CLIにはビルトインの開発サーバー、ビルドおよびデバッグツールなどが含まれています。Appflowメンバーであれば、CLIを使用してクラウドビルドとデプロイを実行し、アカウントを管理できます。
Appflow
Ionicアプリのライフサイクル全体を通して、ビルド、デプロイ、管理を支援するために、プロダクションアプリ向けの商用サービスであるAppflowを提供しています。これは、オープンソースのフレームワークとは別物です。
Appflowは、開発者やチームがネイティブアプリのビルドをコンパイルし、集中管理されたダッシュボードからIonicアプリにライブコードのアップデートをデプロイするのに役立ちます。アプリストアへの直接公開、ワークフローの自動化、シングルサインオン（SSO）、接続されたサービスと統合へのアクセスなどの高度な機能については、オプションの有料アップグレードが利用可能です。
Appflowを使用するには、Ionicアカウントが必要です。いくつかの機能を試してみたい方のために、無料の「Hobby」プランも用意されています。
エコシステム
Ionicは、コアチームによって積極的に開発および保守されており、そのエコシステムは、国際的な開発者および貢献者のコミュニティによって導かれ、その成長と普及を促進しています。大小さまざまな開発者や企業がIonicを使用して、あらゆる場所で動作する素晴らしいアプリを構築および提供しています。
コミュニティに参加する
世界200カ国以上で数百万人のIonic開発者がいます。参加方法はいくつかあります。
- フォーラム： 質問をしてアイデアを共有するのに最適な場所です。
- Twitter： 最新情報やIonicコミュニティからのコンテンツを投稿する場所です。
- GitHub： バグの報告や新機能のリクエストを行うには、ここでissueを作成してください。PRも歓迎します！
- コンテンツ作成： 技術ブログを書いたり、Ionicコミュニティにあなたのストーリーを共有したりしてください。
ライセンス
Ionic UI Toolkitは、許容的なMITライセンスの下でリリースされた、無料でオープンソースのプロジェクトです。つまり、個人または商業プロジェクトで無料で使用できます。MITは、jQueryやRuby on Railsなどの一般的なプロジェクトで使用されているのと同じライセンスです。
このドキュメントの内容（ionic-docsリポジトリにあります）は、Apache 2ライセンスの下でライセンスされています。