【 Ionic 入門】 Ionicで開発を進める際に知っておかないといけないこと

記事更新日 

記事公開日 

タグ：, ,

  1. Home
  2.  > TECHBLOG
  3.  > Front-end
  4.  > Ionic
  5.  > JavaScript

Ionicは英語のドキュメントがしっかりしている上にコミュニティもある程度大きいので、英語さえ読めればわからないことがあっても大抵解決します。ただ日本語の記事となると、情報が古かったりほんのさわりだけしかやってなくて本格的に使う際に知りたいことなんかはあまりない印象があります。ということでこの記事ではIonicで開発を進める際に知っておかないといけないことを順不同でまとめていきます。情報は随時更新していく予定です。

Ionicのパッケージマネージャーとしてnpmではなくてyarnを使う

Ionicはパッケージマネージャーとしてデフォルトではnpmを使用しますが、これをyarnに切り替えることができます。すべてのプロジェクトのデフォルトでyarnを使用したい場合は

ionic config set -g yarn true

で切り替わります。

また、yarnを含めたIonicのグローバルな設定は~/.ionic/config.jsonで定義されています。これがデフォルトの設定となります。この内容は

ionic config get -g

で確認することができます。変更したい場合は上記のようにsetを使用します。

プロジェクト単位の設定は各プロジェクトのルートに入っているionic.config.jsonです。ionicでCLIを走らせると、グローバルな~/.ionic/config.jsonの設定をionic.config.jsonで上書きすることになります。なので、デフォルトはnpmであるプロジェクト内でのみyarnを使用したい場合は、プロジェクトディレクトリ内で

ionic config set yarn true

とすることで、そのプロジェクト内でのみyarnを使用することができます。

参考ページ

Ionicのソースコード内で開発環境と本番環境を切り替える

IonicがベースにしているAngularではng newすると、開発環境と本番環境を切り替えるためのsrc/environments/environment.tsとsrc/environments/environments.prod.tsがもれなくついてきますが、Ionicでionic startしてもsrc/environmentsはついてきません。Ionicでこれらのファイルで環境を切り替えられるようにするには、webpackの設定に少しだけ手を加えます。

まずはプロジェクトディレクトリのルートへ移動し、node_modules/@ionicからwebpack.config.jsをコピーしてきます。

cp node_modules/\@ionic/app-scripts/config/webpack.config.js ./

コピー元のファイルがIonicがデフォルトで使用しているwebpack用のconfigファイルです。コピーしてきた中身を以下のように書き換えます。

var path = require('path');
var useDefaultConfig = require('@ionic/app-scripts/config/webpack.config.js');
 
module.exports = function () {
  var env = process.env.IONIC_ENV === 'prod' ? 'environment.prod.ts' : 'environment.ts';
  useDefaultConfig.resolve.alias = {
    '@app/environment': path.resolve(__dirname, './src/environments/', env),
  };
  return useDefaultConfig;
}

やっていることは単純で、デフォルトのwebpack.config.jsを読み込んだ後、aliasに@app/environmentを追加しています。aliasが示す先はこれから作るsrc/environments以下の環境設定用ファイルです。

コードの中にprocess.env.IONIC_ENVというのがありますが、これはIonicが、というかIonic App ScriptがNodeのprocess.envにセットしてくれているプロパティの一つです。その他のプロパティの一覧はGithubページに載っています。

次はpackage.jsonの変更です。コピーしてきたwebpack.config.jsをIonicに教えるためにpackage.jsonに以下を追加します。

// package.json
 
...
 
"config": {
  "ionic_webpack": "./webpack.config.js"
},
 
...

これでwebpack.config.jsの読み込み元を上書きしてくれます。

tsconfig.jsonも修正する必要があります。プロジェクトのトップディレクトリにあるtsconfig.jsonのcompilerOptionsに以下を付け加えます

{
  "compilerOptions": {
    ...
    "baseUrl": "src",
    "paths": {
      "@app/environment": ["environments/environment.prod.ts", "environments/environment.ts"]
    }
  },
  ...
}

最後にenvironmentファイルを作成します。以下の2つのファイルをsrc/environmentsにつくってください。中身はAngularのCLIでng newしたときに作られるファイルそのものです。

// src/environments/environment.ts
 
// The file contents for the current environment will overwrite these during build.
// The build system defaults to the dev environment which uses `environment.ts`, but if you do
// `ng build --env=prod` then `environment.prod.ts` will be used instead.
// The list of which env maps to which file can be found in `.angular-cli.json`.
 
export const environment = {
  production: false
};

// src/environments/environment.prod.ts
 
export const environment = {
  production: true
};

以上で準備完了です。あとはionic serveやnpm run ionic:serveして、好きなところで

import { environment } from "@app/environment";

するとenviornment.productionがtrue/falseにセットされているのが確認できます。

importで相対パスではなくエイリアスを使う

importする際に相対パスでやってると後々大変なことになるので、エイリアスを使えるようにしましょう。Ionicでimportのエイリアスを追加するには、webpackの設定ファイルとTypeScriptの設定ファイルを両方いじる必要があります。なのでまずは「Ionicのソースコード内で開発環境と本番環境を切り替える」の手順にしたがって、webpack.config.jsonを用意します。そしてそこに

// webpack.config.json
 
var path = require('path');
var useDefaultConfig = require('@ionic/app-scripts/config/webpack.config.js');
 
module.exports = function () {
  var env = process.env.IONIC_ENV === 'prod' ? 'environment.prod.ts' : 'environment.ts';
  useDefaultConfig.resolve.alias = {
    '@app/environment': path.resolve(__dirname, './src/environments/', env),
    '@': path.resolve(__dirname, './src'),
  };
  return useDefaultConfig;
}

のようにaliasに1行加えます。'@'の部分がそれです。

次はTypeScriptの設定に手を加えます。プロジェクトのトップディレクトリにあるtsconfig.jsonのcompilerOptionsに以下を付け加えます

{
  "compilerOptions": {
    ...
    "baseUrl": "src",
    "paths": {
      "@/*": ["*"]
    }
  },
  ...
}

設定は以上です。これで

import { SomeService } from '@/providers/some-service/some-service';

のようにsrcディレクトリを起点としたモジュールの読み込みができるようになります。

どちらかに追加し忘れた場合のエラー内容

ちなみに、webpackの方にエイリアスを追加して、tsconfig.jsonにパスを追加するのを忘れると

Typescript Error
Cannot find name 'SomeService'.

というようにTypeScriptでエラーが出ます。逆にtsconfig.jsonにパスを追加してwebpack.config.jsonにエイリアスを追加するのを忘れるとランタイムエラー

Runtime Error
Uncaught (in promise): Error: Cannot find module "@/app/core/services/some-service" ...

で怒られてしまいます。

Angular CLIを使ったAngularアプリの場合

この手順はAngularでも同様です。Angularの場合はng newしただけではwebpack.config.jsは存在しませんが、ng ejectすることでトップディレクトリにwebpack.config.jsを吐き出すことができます。これとtsconfig.jsonに上記の項目を追加すると同じようにモジュールの読み込みにエイリアスを使うことができます。

参考ページ

Environment variables in Ionic 2 | b-nova

関連記事