11
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

IonicAdvent Calendar 2019

Day 7

Ionicのバージョンアップ方法まとめ

Last updated at Posted at 2019-12-07

IonicはSemVerを採用しており、約6ヶ月毎のメジャーリリース、毎月のマイナーリリース、不具合などへの軽微な修正を行うパッチリリースが行われています。Angular9とIvy対応にあわせてIonic5リリースが用意されているため、メジャーリリースだけは遅れていますが、それ以外は頻繁にアップデートが行われています。

プロジェクトでも依存パッケージに追随してバージョンアップを行うべきです。バージョンアップには、脆弱性の修正以外にもパッケージサイズや実行の最適化による高速化による恩恵をうけることができます。また、その背景についてAngular日本ユーザー会というコミュニティの副オーガナイザの奥野さんがとても適切な言及をしているので、引用します。

Chromeは6週間ごと、Firefoxは4週間ごとにあたらしいバージョンがリリースされます。(中略)そして、このウェブの早さに慣れることこそが、ウェブを生業にする者の宿命だと思っています。
https://qiita.com/okunokentaro/items/503ab7a4c7601b564de0#%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3%E3%82%A2%E3%83%83%E3%83%97%E3%82%B5%E3%82%A4%E3%82%AF%E3%83%AB

Ionicにおいても実行するブラウザがこの速さで進化を続けているので、それに追随することはとても重要です。

どうやってバージョンアップするの?

バージョンアップを発見する

まずバージョンアップが行われていることに気づく必要があります。原則は、一次リソースであるIonicのレポジトリを確認しましょう。

どの不具合が解消されて、どのような機能が実装されたかを一読することができます。英語?Google翻訳で大体読むことができますので、躊躇なく翻訳をかけてください。

ただ、毎日もしくは毎週こちらを確認するのは億劫ですので、Ionic Japan User Groupのslack( https://ionic-jp.herokuapp.com )の #release チャンネルで、release情報が更新されるとGitHubからRSS経由に通知が行われるようにしています。RSSリーダーをご利用の方は自分で受信するのもいいと思います。

バージョンアップ方法を確認する

依存パッケージを巻き込んだバージョンアップを行わないといけない時は、先程のレポジトリで「このようにバージョンアップしましょう」と記述されています。さほど数はないのですが、例えばIonic 4.7.0へのアップデートではレポジトリでバージョンアップ方法が案内されました。

また、アップデートがややこしい場合、Ionic Japan User Groupのslackの #release チャンネルでも、バージョンアップ方法を日本語で案内しています。

バージョンアップする

Ionic/Angularの場合

Ionic/Angularを利用している時、肝になるのは ng update コマンドです。Angularは、定期的にバージョンアップに巻き込む形で、 angular.json などパッケージ以外のアップデートを行っており、これは ng update コマンドで自動化されています。このコマンドは「前バージョン→最新バージョン」の差でパッケージ以外のバージョンアップを行いますので、 npm i @angular/core@latest などでアップデートしてしまった時、恩恵を受けることができず手動作業が生じます。

特にバージョンアップのガイドがない場合、まず実行すべきは

% ng update @ionic/angular

です。うまくいく場合は依存パッケージを巻き込んで最新バージョンにしてくれます。しかし、残念なことにこの方法ではうまくいかないことが多いです。例えば @angular/core も追随してアップデートしないといけないなどエラーがでますので

% ng update @ionic/angular @angular/core @angular/cli

など3つを指定してバージョンアップする必要があったりします。ちなみに筆者は大体は

% npm i @ionic/angular@latest
% ng update @angular/core @angular/cli

を行うことが多いです( @ionic/angular は依存パッケージの ng update は提供してるものの、他の自動マイグレーションは今のところ実装されていないため)。

Ionic/Angular 4.7.0以下のバージョンアップ

このバージョンアップがIonic的には節目になっていまして、固定バージョンでバージョンアップしないといけないのでコマンドを案内しておきます。4.7.0以下は、4.7.1を中継ぎにしてバージョンアップください。

% npm i @ionic/angular@4.7.1 @ionic/angular-toolkit@2.0.0 -D
% npm i @angular-devkit/architect@0.801.2 @angular-devkit/build-angular@0.801.2 @angular-devkit/core@8.1.3 @angular-devkit/schematics@8.1.3 @angular/cli@8.1.3 @angular/compiler@8.1.3 @angular/compiler-cli@8.1.3

(場合によってはここでnode_moduleを削除しないといけないかも)

% npx ng update @angular/core@8.1.3 @angular/cli@8.1.3

他のパッケージを利用してる場合

この場合は通常の %npm i packageName@latest で大丈夫です。ただ、Angularのように自動アップデートを提供していないだけですので、例えばIonic/Reactをご利用の場合は、React本体のバージョンアップを確認しながら進めてください。

まとめ

バージョンアップは夏休みの宿題のようなもので、ひとつバージョンをあげるのは1分程度の作業ですが、ちりつもで溜めに溜め込むとかなりの時間を要する作業になります。Ionic5のリリースも目前ですので、思い立ったら吉日としてぜひこの記事を読んだ今日バージョンアップにチャレンジしてください!

それでは、また。

11
11
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?