プロジェクト作成
本書では、全ての章をひとつのプロジェクトで実装します。blankテンプレートをトップにして、それぞれの章はPUSH遷移先のページをつくり、そこで実装する形で進めていきます。
では、プロジェクトをつくりましょう。ここでは、 ionic-pro というプロジェクト名として作成します。テンプレートは blank を選択してください。
% ionic start ionic-pro --type=angular
? Starter template: (Use arrow keys)
tabs | A starting project with a simple tabbed interface
sidemenu | A starting project with a side menu with navigation in the content area
❯ blank | A blank starter project
list | A starting project with a list
また、Capacitorも最初からインストールしておきます。
? Integrate your new app with Capacitor to target native iOS and Android? (y/N) Y
開発環境の設定
このままでもいいのですが、開発を進めるにあたって少し設定まわりを行いましょう。
prettier で自動フォーマッタのある開発
ファイルの自動整形フォーマッタ prettier なしで手動で行うと開発効率が落ちるので、設定しましょう。 husky 、 lint-staged と組み合わせて、コミット時に自動的にフォーマットするようにします。
% cd ionic-pro
% npm i husky lint-staged pre-commit prettier --save-dev
続いて、 package.json に以下を追記します。書き方がわからない人は GitHub上のコード をご参考ください。
+ "lint-staged": {
+ "*.ts": [
+ "prettier --parser typescript --write",
+ "git add"
+ ],
+ "*.html": [
+ "prettier --parser angular --write",
+ "git add"
+ ]
+ },
+ "husky": {
+ "hooks": {
+ "pre-commit": "lint-staged"
+ }
+ }
また手動でも prettier を使えるようにしましょう。npmスクリプトに以下を追加します。
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
- "e2e": "ng e2e"
+ "e2e": "ng e2e",
+ "fmt": "prettier --parser typescript --write \"./src/**/*.ts\" && prettier --parser angular --write \"./src/**/*.html\""
},
これで自動整形できるようになりました。では、一度実行してみて、ファイルの差異をみてみましょう。
% npm run fmt
本書ではSourceTreeを利用していますが、各々それぞれのGitクライアントを利用ください。
このように差異がでています。ただ、少し一行あたりの文字数の制限が厳しかったりしますので、好みの設定がある人は prettier.config.js を追加してカスタマイズしてください。ちなみに私が現在利用している設定は以下の通りです。
module.exports = {
/**
* 1行80文字は狭すぎるので120文字に拡張
*/
printWidth: 120,
/**
* TypeScriptはシングルクォーテーション（'）に統一
*/
singleQuote: true,
/**
* 末尾のカンマはすべてにいれるように
*/
trailingComma: 'all',
/**
* アロー関数の単一パラメーターは常にカッコ書きに
*/
arrowParens: 'always',
};
再度 npm run fmt をいれると、カスタマイズされたルールに沿って整形が行われます。
npmスクリプトでコマンドをショートカット
毎回、個別コマンドでプロジェクトをビルドしてCapacitor CLIコマンドを使うと面倒なのです。ビルドする度に以下を入力するのはちょっと・・・。
% ng build --configuration=production
% npx cap copy
ですので、これもnpmスクリプトにいれるようにします。 npm run cap で、ビルドとコピーを同時に行うようにします。
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
- "fmt": "prettier --parser typescript --write \"./src/**/*.ts\" && prettier --parser angular --write \"./src/**/*.html\""
+ "fmt": "prettier --parser typescript --write \"./src/**/*.ts\" && prettier --parser angular --write \"./src/**/*.html\"",
+ "cap": "ng build --configuration=production && cap copy"
Capacitorプラグインを追加したあとに実行する cap update を忘れがちな人は、 cap copy ではなく、copyとupdateを同時に実行する cap sync にするのもいいと思います。
これで、 npm run cap を行えるようになりました。
ブラウザのサポートを決める
Angularでは、AutoprefixerでCSSにどのベンダープレフィックスを付けるかなどを決めるbrowserslistの機能があります。初期設定は npx browserslist でみることができます。
% npx browserslist
これをみると、EdgeやFirefoxなど幅広い対応をしていることがわかります。しかしIonicプロジェクトで、特にCapacitorでビルドしてネイティブアプリとして提供する場合はここまで広いサポートは必要ありません。そこで、デフォルトの .browserslistrc を .browserslistrc_default としてコピーして、元ファイルは以下のように編集してしまいましょう（他の記述はすべて削除）
last 8 iOS versions
last 8 ChromeAndroid versions
これで以下のもののみのサポートとなりました。
and_chr 93
ios_saf 14.5-14.7
ios_saf 14.0-14.4
ios_saf 13.4-13.7
ios_saf 13.3
ios_saf 13.2
ios_saf 13.0-13.1
ios_saf 12.2-12.4
ios_saf 12.0-12.1
時代的にios_safariはもうちょっと切って、 last 5 とかにしてもいいかもしれませんね。Web向けに幅広いサポートで別ビルドする場合は、以下のスクリプトをCIで実行するようにしましょう。 npmスクリプトにいれて実行することもできます。
.browserslistrc_default が .browserslistrc を上書きします。
mv -f .browserslistrc_default .browserslistrc
iOS12に対応する場合
上記のbrowserlistsでは、 ios_saf12が対象となっています。しかし、これに対応するためには、Angularにpolyfillsを入れて、 grobal-this を使えるようにする必要があります。もしサポートする場合は以下を行います。
% npm i @ungap/global-this
続いて、 src/polyfills.ts にインポートください。
/***************************************************************************************************
* APPLICATION IMPORTS
*/
+ import '@ungap/global-this';
これを行わないと、iOS12で ReferenceError: Can't find variable: globalThis とエラーがでるので注意ください。
これで各章のベースとなるプロジェクトが完成しました。