IntelliJ IDEA 2020.1ヘルプ

Dart

IntelliJ IDEAを使用すると、Dart(英語) Webおよびコマンドラインアプリケーションを開発、実行、およびデバッグできます。IntelliJ IDEAは、コード補完、エラーおよび構文の強調表示、コードインスペクションおよびクイックフィックス、検索とナビゲーション、リファクタリングなどを提供します。IntelliJ IDEAは、pubツール(英語)およびDart分析サーバー(英語)と統合されます。

始める前に

リポジトリからプラグインをインストールする説明に従って、プラグインのページにDartプラグインをインストールして有効にします。

Dartツールのダウンロード

Dart SDK(英語)をダウンロードしてインストールします。

Dart SDKには、コマンドラインアプリケーションとWeb Dartアプリケーションの両方を開発するためのすべてのツールが含まれています。Dart仮想マシン(英語)Dartコアライブラリ(英語)、およびコンパイラー(dart2js(英語)およびdartdevc(英語))、dartfmt(英語)コードフォーマッター、pub(英語)ツールを含むすべてのコマンドラインツールが組み込まれてい(英語)ます。

DartオフィシャルWebサイト(英語)のDart開発ツールの詳細を参照してください。

新しいDartアプリケーションの作成

まだアプリケーションがない場合は、ステージハンドテンプレート(英語)からDart固有の構造を持つIntelliJ IDEAプロジェクトを生成することができます。あるいは、空のIntelliJ IDEAプロジェクトを作成し、下の既存のDartアプリケーションから開始する説明に従ってDartサポートを設定します。

StagehandテンプレートからDartプロジェクトを作成する

  1. メインメニューからファイル | 新規 | プロジェクトを選択するか、ようこそ画面の新規プロジェクトボタンをクリックします。

  2. 新規プロジェクトダイアログで、左側のペインでDartを選択します。

  3. 右側のウィンドウで、Dart SDKへのパスを指定します。IntelliJ IDEAはDartバージョンを検出して表示します。

    プロジェクトでサンプルアプリケーションを作成するには、サンプルコンテンツを生成するチェックボックスを選択し、下のリストから該当するステージハンドテンプレートを選択します。このチェックボックスをオフにすると、IntelliJ IDEAは空のプロジェクトを作成します。

    次へをクリックします。

  4. ウィザードの2ページ目で、プロジェクト名とプロジェクト関連ファイルが保存されるフォルダーのパスを指定します。完了をクリックすると、IntelliJ IDEAはプロジェクト構造を設定し、選択したステージハンドテンプレートに基づいていくつかのソースを生成します。

空のIntelliJ IDEAプロジェクトを作成する

  1. メインメニューからファイル | 新規 | プロジェクトを選択するか、ようこそ画面の新規プロジェクトボタンをクリックします。

  2. 新規プロジェクトダイアログで、左側のペインでJavaScriptを選択します。

  3. 右側のペインで、再度JavaScriptを選択し、次へをクリックします。

  4. ウィザードの2ページ目で、プロジェクトフォルダーと名前を指定し、完了をクリックします。

既存のDartアプリケーションから開始する

既存のDartアプリケーションの開発を継続する場合は、IntelliJ IDEAでDartを開き、その中にDartを設定し、下記のDartの依存関係の管理に従って必要な依存関係をダウンロードします。

既にマシン上にあるアプリケーションソースを開きます

ようこそ画面でオープンまたはインポートをクリックするか、メインメニューからファイル | 開くを選択します。開いたダイアログで、ソースが保存されているフォルダーを選択します。

バージョン管理からアプリケーションのソースを確認してください

  1. ようこそ画面でバージョン管理から取得をクリックするか、メインメニューからVCS | バージョン管理から取得を選択します。

  2. 呼び出されたダイアログで、リストからバージョン管理システムを選択し、アプリケーションソースをチェックアウトするリポジトリを指定します。

既存のプロジェクトでDartサポートを構成する

  1. 設定/環境設定ダイアログ Ctrl+Alt+Sで、言語とフレームワークDartを選択します。Dartページが開きます。

  2. プロジェクト<プロジェクト名>のDartサポートを有効にするチェックボックスを選択します。

  3. Dart SDK パスフィールドに、ダウンロードしたDart SDKの場所を指定します。手動でパスを入力するか、the Browse button をクリックして表示されるダイアログボックスでパスを選択します。IntelliJ IDEAがDart SDKを正しく認識すると、その改訂番号がバージョン読み取り専用フィールドに表示されます。

  4. 次のモジュールでDartを有効にする領域で、Dartのサポートが必要なモジュール名の横にあるチェックボックスを選択します。

1つのIntelliJ IDEAプロジェクトで複数のDartプロジェクト(パッケージ)を使用する

Dartプロジェクト(パッケージ)を既存のIntelliJ IDEAプロジェクトにアタッチするには、そのルートフォルダーをコンテンツ・ルートまたは新しいモジュールとして追加する必要があります。

Dartプロジェクト(パッケージ)を既存のIntelliJ IDEAプロジェクトに追加する

  • モジュールページファイル | プロジェクト構造 | モジュール)にコンテンツ・ルートを追加します(コンテンツ・ルートの追加を参照)。

  • プロジェクトにモジュールを追加してください:ファイル | 新規 | 既存ソースからモジュールを選択し、表示されるダイアログで関連するモジュールを選択してください。

Dartの依存関係の管理

IntelliJ IDEAはpubツール(英語)と統合されており、エディターから直接(英語)アクションを実行できます。pubspec.yaml(英語)ファイルを開くとすぐに、IntelliJ IDEAのエディタータブの上部にペインが表示されます。このペインのリンクを使用して、pub get(英語)pub upgrade(英語)、およびpub古い(英語)アクションを呼び出します。

Dart: pub actions pane

あるいは、エディターで pubspec.yaml を開くか、プロジェクトツールウィンドウでそれを選択して、選択のコンテキストメニューからpubアクションを呼び出します。

ターミナルからコマンドラインモードでツールを使用することもできます。

pubツールはダウンロードしたパッケージをキャッシュに保存し、.packages ファイルと pubspec.yaml ファイルの隣に pubspec.lock ファイルを作成します。

IntelliJ IDEAは、IntelliJ IDEAコマンドの実行をメッセージツールウィンドウに記録します。ここでは、ツールバーの Run をクリックして最後に実行したコマンドを再実行することもできます。

Dartアプリケーションの構築

  1. エディターで pubspec.yaml ファイルを開くか、開いているタブに切り替えます。

  2. タブの上部のペインで、Webdevビルド...をクリックします。これにより、webdevビルド(英語)アクションが呼び出されます。

    Dart actions pane: Webdev build
  3. 開いたダイアログで、ソースを取得する入力フォルダーと、コンパイルされたアプリケーションを保存する出力フォルダーを指定します。

Dartコマンドラインアプリケーションの実行とデバッグ

IntelliJ IDEAを使用すると、Dartコマンドラインアプリケーションを実行およびデバッグできます。IntelliJ IDEAは2つのデバッグモードをサポートしています。

  • ローカル・デバッグ : このモードでは、アプリケーションはIntelliJ IDEAから起動され、コンピューター上でローカルに実行されています。実行またはデバッグするには、Dartコマンドラインアプリケーション構成を使用してください。

  • リモートアプリケーションのデバッグ : このモードでは、アプリケーションはリモート環境(たとえば、Dockerコンテナー)で実行されています。デバッグするには、Dart リモートデバッグ設定を使用します。

Dartコマンドラインアプリケーションを実行する

  1. Dartファイルを開いて、アプリケーションを起動するか、プロジェクトツールウィンドウでアプリケーションを選択します。このファイルには、main() メソッドが含まれている必要があります。

  2. 選択のコンテキストメニューから実行 '<dart_file_name>'を選択します。IntelliJ IDEAは、タイプDartコマンドラインアプリケーションの実行/デバッグ構成を生成し、それを使ってアプリケーションを起動します。

Dartコマンドラインアプリケーションをローカルでデバッグする

  1. Dartコードのブレークポイントの設定と設定

  2. Dartファイルを開いて、アプリケーションを起動するか、プロジェクトツールウィンドウでアプリケーションを選択します。このファイルには、main() メソッドが含まれている必要があります。

  3. 選択のコンテキストメニューからデバッグ '<dart_file_name>'を選択します。IntelliJ IDEAは、タイプDartコマンドラインアプリケーションの実行/デバッグ構成を生成し、それを使ってデバッグセッションを開始します。

  4. 開いたデバッグツールウィンドウで、プログラムをステップ実行し、プログラムの実行を停止して再開 し、中断したときに調べます。

Dart リモートデバッグ実行/デバッグ構成の作成

  1. メインメニューで実行 | 構成の編集を選択し、icons general add をクリックして、リストからDart リモートデバッグを選択します。実行/デバッグ構成: Dart リモートデバッグが開きます。

  2. IntelliJ IDEAプロジェクトにコンテンツ・ルートとして構成された複数のDartプロジェクトが含まれている場合は、検索元フィールドで、デバッグするDartプロジェクトを指定します。リストからtheDartプロジェクトを選択するか、the Browse button をクリックして、開いたダイアログで必要なフォルダーを選択します。

リモートデバッグセッションを開始する

  1. --enable-vm-service --pause_isolates_on_startなどのVMオプションを使用して、リモート Dartアプリケーションを起動します。アプリケーションが起動し、--pause_isolates_on_start 引数によりすぐに中断し、デバッガーが接続するのを待ちます。

  2. 実行ツールウィンドウで、アプリケーションが実行されているURLアドレスと、それにアクセスするために生成された認証トークンをコピーします。

    Dart: remote debugging. Copy URL and token
  3. 実行/デバッグ構成を選択しますリストで新しく作成したDart リモートデバッグ設定を選択し、the Debug buttonをクリックします。

  4. 実行中のアプリに接続するダイアログで、上記のようにコピーしたURLアドレスと認証トークンを貼り付けます。

    Dart: remote debugging. Paste URL and token
  5. 開いたデバッグツールウィンドウで、プログラムをステップ実行し、プログラムの実行を停止して再開 し、中断したときに調べます。

Dart Webアプリケーションの実行とデバッグ

Dart Webアプリケーションはどのブラウザーでも実行できますが、デバッグはChromeでのみサポートされています。Dart Webアプリケーションを実行するには、アプリケーションのメインHTMLファイルをブラウザーで開きます。Dart Webアプリケーションのデバッグは、タイプDart Webの実行構成を介して開始されます。

IntelliJ IDEAはwebdevサーバー(英語)ツールと統合して、必要に応じてDartコードをJavaScriptにコンパイルします。Dart SDK 2より前のバージョンでは、pubサービス(英語)ツールが使用されます。

ブラウザでDart Webアプリケーションを開くと、通常は http://localhost:63342/project-name/web/index.htmlのようなビルトインのサーバーURLから始まります。ただし、組み込みサーバーはアプリケーションの提供には使用されません。代わりに、IntelliJ IDEAは自動的にDartダイアログで指定されたポート上のwebdevサーバーを起動し、ブラウザページはWebdevサーバーURL( http://localhost:53322/index.htmlなど)にリダイレクトされます。

webdevサーバーの作業は、専用のDart Webデバイスツールウィンドウに記録されます。現在のIntelliJ IDEAセッション中に初めてDart Webアプリケーションの実行またはデバッグを開始すると、ツールウィンドウが開きます。ツールバーの the Stop Dart Webdev Server button をクリックすると、ツールを停止できます。再度実行またはデバッグを開始すると、webdevサーバーが自動的に再起動します。

Dart Webアプリケーションをデバッグするための推奨される方法は、Dart Web構成を使用することです。このモードでは、webdevサーバーはDart DevTools(英語)を有効にして起動します。

ただし、JavaScript デバッグ構成は引き続き使用できます。詳細については、Dart Webアプリケーションを実行およびデバッグする代替方法を参照してください。

  1. Dart Webの実行/デバッグ構成を作成します。

    メインメニューから実行 | 構成の編集を選択し、ツールバーの the Add button をクリックして、リストからDart Webを選択します。

    開く実行/デバッグ構成: Dart Webダイアログで、実行またはデバッグするDartコードを参照するHTMLファイルへのパスと、webdevサーバー(英語)がDart Webアプリを開始するポートを指定します。

  2. アプリケーションを実行するには、ツールバーの実行/デバッグ構成を選択しますリストから新しく作成されたDart Web構成を選択し、リストの横にある the Run button をクリックします。

    ブラウザは 127.0.0.1:<webdev_port>/<specified_HTML_file>で開きます。

  3. アプリケーションをデバッグするには、必要に応じてDartコードにブレークポイントを設定します。次に、ツールバーの実行/デバッグ構成を選択しますリストから新しく作成されたDart Web構成を選択し、リストの横にある the Debug button をクリックします。

Dart Webアプリケーションを実行およびデバッグする代替方法

推奨ワークフローであるDart Web実行/デバッグ構成をIntelliJ IDEAで使用する以外に、JavaScript デバッグ構成でDart Webアプリケーションを実行およびデバッグできます。

Dart Webアプリケーションを実行する

  1. DartリファレンスでHTMLファイルを開くか、プロジェクトツールウィンドウでHTMLファイルを選択してください。

  2. エディターのコンテキストメニューまたは選択から、ブラウザーで開くを選択してリストから必要なブラウザを選択します。

JavaScriptデバッグの実行/デバッグ構成を作成する

  1. Dartを参照するHTMLファイルを開くか、プロジェクトツールウィンドウのファイルを選択してください。

  2. コンテキストメニューから作成 '<HTML_file_name>'を選択します。実行/デバッグ構成: JavaScriptデバッグダイアログが開きます。

  3. Chromeファミリーのブラウザーを指定して、アプリケーションをデバッグします。

  4. URL フィールドには、アプリケーションのURLアドレスがすでに http://localhost:<built-in server port>/<project-name>/<relative path to the HTML file>の形式で表示されています。デバッグセッション中に、ブラウザはこのURLからwebdevサーバーのURLにリダイレクトされます。

デバッグを開始する

  1. Dartコードのブレークポイントの設定と設定

  2. デバッグセッションを開始します。ツールバーの構成の編集リストから作成した実行構成を選択し、the Debug buttonをクリックします。IntelliJ IDEAは選択されたブラウザで指定されたURLを開きます。

  3. 開いたデバッグツールウィンドウで、プログラムをステップ実行し、プログラムの実行を停止して再開 し、中断したときに調べます。

Dartアプリケーションのテスト

IntelliJ IDEAは、dartテストパッケージ(英語)を使用して記述されたDartテストの実行とデバッグをサポートしています。任意のターゲットプラットフォーム(英語)でテストを実行でき、デバッグはVMテストでのみサポートされます。

単一のテスト、テストグループ、およびファイルとフォルダー全体からのテストを実行およびデバッグできます。IntelliJ IDEAは、デフォルト設定で実行/デバッグ構成を作成し、テストを起動します。後でこの設定を保存して、さらに再利用することができます。

単一のテストを実行またはデバッグする

テストファイルをエディターで開き、test() メソッド(英語)の呼び出しを右クリックして、コンテキストメニューから実行 '<test_name>'またはデバッグ '<test_name>'を選択します。

グループを実行またはデバッグする

テストファイルをエディターで開き、group() メソッド(英語)の呼び出しを右クリックして、コンテキストメニューから実行 '<group_name>'またはデバッグ '<group_name>'を選択します。

ファイルからDartテストを実行またはデバッグする

プロジェクトツールウィンドウで、実行するテストが含まれているファイルを選択し、コンテキストメニューから実行 '<file_name>'またはデバッグ '<file_name>'を選択します。

フォルダーからDartテストを実行またはデバッグする

プロジェクトツールウィンドウで、実行するテストが含まれているフォルダーを選択し、コンテキストメニューから実行 '<folder_name>'またはデバッグ '<folder_name>'を選択します。

自動的に生成されたデフォルト設定を保存する

テストセッションが終了したら、テスト、テストグループ、テストファイル、またはフォルダーのコンテキストメニューから保存<default_test_configuration_name>を選択します。

以前に保存した実行/デバッグ構成を使用してテストを実行またはデバッグする

ツールバーのリストから必要なDartテスト設定を選択し、the Run button または the Debug buttonをクリックします。

構文強調表示の構成

好みや習慣に応じて、Dart対応の構文強調表示を設定できます。

  1. 設定/環境設定ダイアログ Ctrl+Alt+Sで、エディター | カラー・スキームの切り替え | Dartに移動します。

  2. 配色を選択するか、デフォルトから継承された強調表示設定を受け入れるか、または色とフォントの設定の説明に従ってカスタマイズします。

最終更新日: 2020年6月2日

関連ページ:

プラグインを管理する

プラグインはIntelliJ IDEAのコア機能を拡張します。彼ら:バージョン管理システム、アプリケーションサーバー、およびその他のツールとの統合を提供する、さまざまな言語とフレームワークのコーディング支援サポートを追加する、ショートカットヒント、ライブプレビュー、ファイルウォッチャーなどで生産性を...

プラグイン

WindowsとLinux用のmacOS用このページを使用してプラグインを管理します。プラグインリポジトリの閲覧、プラグインのインストール、削除、有効化、無効化、および更新を行います。主なコントロール:マーケットプレースこのタブを使用して、JetBrainsプラグインリポジトリからプラグインをブラウ...

モジュール

要素選択区画でモジュールを選択すると、プロジェクト構造ダイアログの右側にモジュールページが開きます。ソースタブを使用して、Javaでサポートされている言語レベルを選択し、モジュールの内容を構成します。言語レベルこのリストを使用して、モジュールの Java言語レベルを選択します。左ペイン左側のペインに...

コンテンツ・ルート

IntelliJ IDEAのコンテンツは、ソースコード、ビルドスクリプト、単体テスト、およびドキュメントを含むファイルのグループです。これらのファイルは通常、階層構造になっています。最上位フォルダーはコンテンツ・ルートと呼ばれます。モジュールには通常、1つのコンテンツルートがあります。コンテンツルー...

ターミナル

IntelliJ IDEAには、IDE内からコマンドラインシェルを操作するための組み込みターミナルエミュレータが含まれています。専用のターミナルアプリケーションに切り替えることなく、Javaツールの実行、Gitコマンド、ファイル権限の設定、その他のコマンドラインタスクの実行に使用します。ターミナルエ...

プロジェクトツールウィンドウ

このツールウィンドウを使用すると、プロジェクトをさまざまな観点から見て、新しい項目(ディレクトリ、ファイル、クラスなど)の作成、エディターでのファイルの開き、目的のコードフラグメントへの移動などのタスクを実行できます。このツールウィンドウのほとんどの機能には、コンテンツペインのコンテキストメニューコ...