Skip to main content
Version: v8

開発者向けのヒント

権限エラーの解決​

パッケージをグローバルにインストールすると、 EACCES パーミッションエラーが発生する可能性があります。このような場合は、管理者権限なしで動作するように npm を設定する必要があります。

note

sudo と npm の併用は、さらなる問題を引き起こす可能性があるため、推奨されません。

このガイドでは、権限の問題を解決するための 2 つのオプションを提供します。完全なドキュメントおよび追加のオプションについては、npm ドキュメントを参照してください。

オプション 1​

権限の問題を回避する最善の方法は、Node バージョンマネージャーを使用して Node.js と npm を再インストールすることです。

このガイドでは、nvmのインストールと使用方法を文書化します。完全なドキュメントについては、nvm ドキュメントを参照してください。Windows 用の追加オプションと手順については、npm ドキュメントを参照してください。

  1. nvm のインストール

    $ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash

  2. 新しい端末は nvm を使うようになります。確認するには、新しいターミナルを開き、次のコマンドを実行します。何かが表示されれば、インストールは成功です。

    $ command -v nvm

  3. NodeJS の最新の LTS リリースをダウンロードしてインストールするには、次のコマンドを実行します:

    $ nvm install --lts

  4. 新しくインストールした NodeJS をデフォルト環境として設定します:

    $ nvm alias default lts/*

  5. 新しい端末は nvm コントロールの NodeJS を使うようになりました:

    $ node -v  # will print the version installed above
    $ which npm  # will print a path somewhere within the ~/.nvm folder

グローバルパッケージが ~/.nvm にインストールされます。 sudo なしで npm を使用している限り、パーミッションエラーは発生しません。

Option 2​

Windowsでは利用できません

npm のディレクトリの所有者を現在のユーザに変更します:

$ sudo chown -R $(whoami) /usr/local/{lib/node_modules,bin,share}
$ sudo chown -R $(whoami) /usr/lib/node_modules
$ sudo chown -R $(whoami) ~/.npm ~/.npmrc

これらのグローバルディレクトリは root が所有しなくなったため、 sudo を使用せずにパッケージをグローバルにインストールできます。

依存モジュールの更新​

npm dependency をアップデートするためには、<package-name> をアップデートしたいパッケージ名に変更して以下を実行します:

npm install <package-name>@<version|latest> --save

例えば、@ionic/angular パッケージを 最新 リリースのものに更新するには、以下を実行してください:

npm install @ionic/angular@latest --save

npm は最初に package-lock.json からパッケージのバージョンを読み込みにいきますので、パッケージを更新する際は CLI を利用することをおすすめします。

エディタ​

選択できるコードエディターはたくさんあります。ここに私たちのお気に入りのいくつかがあります：

デバッガの利用​

デバッガ というキーワードはアプリケーションをデバッグするために利用されます。ほとんどのブラウザがデバッガステートメントに直面する時、 実行中の JavaScript の処理は停止され、ブラウザはデバッガをロードします。これはアプリケーションに"ブレークポイント"をセットするために使用されます。

例えば、ある関数が正しい値を返さない時は、デバッガを使用してコードをステップ実行し、変数を調べることができます。

function myBrokenFunction() {
  debugger;
  // do other stuff
}

アプリが起動すると、この機能で一時停止します。その後、開発者ツールを使用して、JavaScript を 1 行ずつ実行し、関数が正確にどこで中断するかを調べることができます。

モードの変更​

デフォルトでは、アプリケーションがブラウザで表示されると、Ionic は MD モードを適用します。しかし、Ionic コンポーネントはそれぞれのプラットフォームに応じて接続されるため、そのアプリケーションが iOS でどのように見えているか確認できると便利です。そのために、アプリケーションが起動している URL に ?ionic:mode=ios を追加します。例えば、アプリが 8100 ポートで起動している場合は、URL はこうなります: http://localhost:8100/?ionic:mode=ios

note

これはブラウザが検出するプラットフォームを変更するものではありません。プラットフォームはデバイスの検出とユーザーエージェントの確認によって決まります。プラットフォームを変更するには、ユーザーエージェントを変更する必要があります。そのためには、Ctrl+Shift+I（Mac ではCmd+Option+I）で Chrome DevTools を開き、Ctrl+Shift+M（Mac ではCmd+Option+M）でデバイスモードをオンに切り替えます。

Chrome DevTools showing the device mode with iPhone X selected.

デバイスのドロップダウンからデバイスを選択すると viewport の大きさと同様に、ユーザーエージェントも変更されます。

iOS シミュレータを使用する​

iOS シミュレータは実際のデバイスに届く前にアプリケーションのテストとデバッグを可能にします。

シミュレータを利用可能にする前に、Xcode、アップルの IDE をインストールする必要があります。

Ionic CLI を用いて、シミュレータ上の現在のディレクトリでアプリケーションを実行可能にします:

ionic cordova emulate ios -lc

-lc フラグを渡すことでライブリロードを有効にし、かつログコンソールををターミナルに出力することができます。

また Xcode を利用することでエミュレータを起動し、アプリケーションをデバッグすることもできます。

Xcode を開き、../path-to-app/platforms/ios/myApp.xcodeproj を開きます。

アプリケーションが読み込まれると、コンソール出力とデバイスのログが Xcode の出力ウィンドウに表示されます。

Genymotion Android エミュレーターを使用する​

Android SDK には標準のエミュレーターが付属していますが、速度が遅く、応答しない場合があります。

Genymotion はより高速な代替エミュレータであり、GPS やカメラなどのネイティブ機能へのアクセスを許可します。

Contents

Edit this page