next Ionic and Ionic Japan User Group.

Last updated at 2019-11-07Posted at 2018-12-25

この記事は、Ionic Advent Calendar 2018 25日目の投稿です。

next Ionic

2018年も終わりが近づき、アドベントカレンダーも最終日ということでIonicのnextについていろいろ考えていきたいと思います。

v3 support

現在多くのユーザが利用しているv3についてですが、現在公式にはAngular 5.2.11をサポートしています。Angular 6がLTS、現行バージョンがAngular 7ですので、時折「Angularのバージョンあげて大丈夫ですか？」と聞かれます。

結論を先に書きますが、
[非公式] Ionic v3でAngular 6を使う方法（追記あり）の内容通りにしていただくか、@rxjs/compatを入れることによってAngular 6までは現在でもアップデート可能です。しかしながら、Angular 7はビルドでコケるので、利用することはできません。

現在、Ionic teamはv4のリリースにリソースを集約しておりv3の開発は止まっていますが、先日v3のレポジトリがionic-team/ionicのブランチ（v4と共存してました）からionic-team/ionic-v3の独立レポジトリに変更されたので、おそらくv4リリース後、Angular 6までは正式にサポートするのではないかなと思ってます。
Ionic1のサポートの手厚さを考えると、あと2年ぐらいは使い続けること可能じゃないかな（私見）

なお、CLIベースの話をしますと、Ionicは以下のようにプロジェクト名がついています。

プロジェクト名	Ionicのバージョン
ionic1	ionic1
ionic-angular	ionic2-3
angular	ionic4

Ionic3リリース後は、CLIでのIonic2のプロジェクトの新規作成はできませんでしたが、Ionic4リリース後もIonic3のプロジェクトはできます。

v4

2019年春にリリース予定です。リリース時は、Web ComponentsとしてのVanilla JSでの利用と、Angularのみのサポートが予定されておりますが、ReactとVueを将来的にサポートすることが正式に発表されています。

v4の特徴としては、以下のようなものがあります。

Web Componentsベースとしてフレームワーク非依存（@ionic/core)
フレームワークで利用する時に便利に書けるラッパーは別で提供（@ionic/angularなど）
Web Componentsは呼び出し時にLazyLoadingされるので、表示速度が圧倒的に改善
ServerSideRenderingをサポート

@ionic/**

Ionicでは、デモアプリとしてionic-conference-appを公開しています。v3でも公開されてましたし、v4でもすでに（開発状況はフレームワーク毎に差はありますが）GitHub上で公開されています。
そのレポジトリと、それをForkしてWebで公開したURLをご紹介しておきます。v4をさわる上で参考にしていただけましたら幸いです。

フレームワーク名	GitHubのレポジトリ	デモURL（12/25時点でビルド）
Angular	ionic-team/ionic-conference-app	https://ionic-conference-angular.netlify.com
React	ionic-team/ionic-react-conference-app	https://ionic-conference-react.netlify.com
Vue	ionic-team/ionic-vue-conference-app	https://ionic-conference-vue.netlify.com

ReactとVueもTypeScriptで書かれていますので、Ionicを使う上でTypeScriptを使うことはこれまで通りになるかと思います。

next Ionic eco system

続いて、Ionicの周辺システムについてです。

Capacitor

Ionic 4に続いて、一番注目を浴びてるのはnext CordovaとなるCapacitorじゃないでしょうか。PWA/iOS/Android/Electronへのコンパイルをこれひとつでできることや、ネイティブコードとの連携が重視されています。

あたり参考になると思います。

Ionic Native

CordovaアプリをAngular上で使うためのラッパーです。現在は、例えばGeolocationを使う場合

import { Geolocation } from '@ionic-native/geolocation';

という記法なのですが、他のフレームワークサポートにともなって、次バージョンからは

import { Geolocation } from '@ionic-native/(フレームワーク名)/geolocation';

となります。例えば、Angularだと ngx がフレームワーク名のところに入る感じです。

Ionic Storage

ローカルストレージをPromiseベースで使うためのライブラリです。ドライバをindexeddb, sqlite, websqlから選択することができるので（そしてデバイスが非サポートの場合は自動切り替え）、マルチデバイス展開で活用されていました。

こちらはまだ次バージョンの開発がはじまっていないので、どうなるかなというところ。

next Ionic Japan User Group

Ionicの日本コミュニティとして、主に以下で活動しています。

コミュニティでできたこと

2017年8月にしたIonic Meetup #1 Tokyoをきっかけにして、コミュニティ活動を開始しました。その懇親会で、コミュニティとしてやっていきたいと話にあがった

全国でのMeetup => https://ionic-jp.connpass.com/
Ionicをテーマにしたカンファレンスの開催 => https://html5app-conf.connpass.com/event/87730/
書籍出版 => https://amzn.to/2BAVfFO

は2018年に達成できました。
当時は、Ionicでプロダクトをつくってる人は片手で数えるほどだったのですが、2018年はいろいろなプロダクトリリースの話を聞き、直接面識ない方がカンファレンスでIonicについて話し、技術書典では2冊も！！2冊もIonicについて取り上げた書籍がでて、うち1冊は商業出版の話もあるということで、日本でもIonicが一部の人にとどまらずに利用されはじめているのをみることができました！！

参考：技術書典5にはじめてサークル参加して感じたこと、得たこと

あと、これは個人的な話になりますが、ionic/coreやionic CLIのコントリビューターにもなりました。Ionic3だと、Listで表示した時、日本語だとわずかに文字の上1pxが消えるのでCSSでの調整が必要でしたが、Ionic4では直ってますよ！

ドキュメンテーションの翻訳

当時どうしてもできなかったこともありました。ドキュメントの日本語化です。
当時、Ionic Docsのレポジトリは、ドキュメントのマイナーバージョンごとにフォルダが分かれてまして「これ、ひとつ翻訳してもバージョンあがったらやりなおしだし、diffとるの実質不可能だぞ？！」という状態でした。

しかしながら、Ionic 4でリニューアルされるIonic Docsは、そのフォルダ分けが解消されてまして、翻訳作業が可能なレポジトリ構造でした。そこで、Ionicのドキュメント日本語化に取り組みます。

Ionic日本語ドキュメンテーション
 Ionic日本語ドキュメンテーション GitHubレポジトリ

試しにトップページとあとほんの少しだけ翻訳をしました。かなり分量あるので、多くの方に手助けいただく必要があります。「ドキュメントを日本語で読みたかった」「翻訳ちょっと手伝ってやろう」という方は、ぜひコントリビューションいただけますと幸いです！

不明点などありましたらIssuesあげていただくか、Ionic Japan User Groupのslackの #translation をご利用ください！

まとめ

今年もIonic Japan User Groupのコミュニティ活動であったり、また、Ionic Advent Calendarにお付き合いいただきありがとうございました。
来年もよろしくお願いいたします！！それではいいお年を！！

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up