本文へスキップ
バージョン：v8

開発のヒント

権限エラーの解決​

EACCES権限エラーは、パッケージがグローバルにインストールされている場合に発生する可能性があります。この場合は、npmを昇格した権限なしで動作するように設定する必要がある場合があります。

注記

npmでsudoを使用することは、さらに複雑な問題につながる可能性があるため、**推奨されません**。

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

オプション1​

権限の問題を回避する最良の方法は、NodeJSと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ディレクトリにインストールされるため、npmをsudo *なしで* 使用する限り、権限エラーは発生しなくなります。

オプション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の依存関係を更新するには、次のコマンドを実行します。ここで<package-name>は更新するパッケージです。

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

たとえば、@ionic/angularパッケージをlatestとタグ付けされたリリースに更新するには、次のコマンドを実行します。

npm install @ionic/angular@latest --save

npmはパッケージバージョンを最初にpackage-lock.jsonから読み取るため、CLIを介してパッケージを更新することをお勧めします。

コードエディタ​

多くのコードエディタから選択できます。いくつかのお気に入りを紹介します。

  • Visual Studio Code：Microsoftが作成した人気のある無料のテキストエディタ
  • Atom：GitHubが作成したハック可能なテキストエディタ
  • WebStorm：JetBrainsによる強力な有料エディタ

デバッガーの使用​

debuggerキーワードを使用してアプリをデバッグできます。ほとんどのブラウザがdebuggerステートメントに遭遇すると、JavaScriptの実行は停止し、ブラウザはデバッガーをロードします。これは、アプリに「ブレークポイント」を設定するために使用できます。

たとえば、関数が正しい値を返していない場合、デバッガーを使用してコードをステップ実行し、変数を検査できます。

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

アプリが実行されると、この関数で一時停止します。そこから、開発者ツールを使用してJavaScriptの断片を1行ずつ実行し、関数が正確にどこで中断するかを検査できます。

モードの変更​

デフォルトでは、アプリがブラウザで表示されると、Ionicはmdモードを適用します。ただし、Ionicコンポーネントはプラットフォームに応じて適応するため、アプリがiOSでどのように見えるかを確認できることは役立ちます。これを行うには、アプリが提供されているURLに?ionic:mode=iosを追加します。たとえば、アプリがポート8100で提供されている場合、URLはhttps://#:8100/?ionic:mode=iosになります。

注記

これにより、ブラウザが使用されていると認識するプラットフォームは変更されません。プラットフォームは、デバイス検出とユーザーエージェントの検査によって決定されます。プラットフォームを変更するには、ユーザーエージェントを変更する必要があります。これを行うには、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.

デバイスドロップダウンからデバイスを選択すると、ユーザーエージェントとビューポートのサイズが変更されます。

iOSシミュレーターの使用​

iOSシミュレーターを使用すると、アプリが実際のデバイスに到達する前に、アプリのテストとデバッグを行うことができます。

使用するには、まずAppleのIDEであるXcodeをインストールする必要があります。

Ionic CLIを使用して、シミュレーター上の現在のディレクトリでアプリを実行できます。

ionic cordova emulate ios -lc

-lcフラグを渡すと、ライブリロードが有効になり、コンソール出力がターミナルに出力されます。

Xcodeを使用してエミュレーターを起動し、アプリをデバッグすることもできます。

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

アプリがロードされると、コンソール出力とデバイスログはXcodeの出力ウィンドウに出力されます。

Genymotion Androidエミュレーターの使用​

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

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

目次

このページを編集する