IntelliJ IDEA 2020.2ヘルプ

Dart

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

始める前に

JetBrainsリポジトリからプラグインをインストールする説明に従って、設定/環境設定 | プラグインページで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ツールは、ダウンロードしたパッケージをキャッシュに保存し、pubspec.yamlファイルの隣に.packagesファイルと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.png をクリックしてリストから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:<ビルトインサーバーポート> / <プロジェクト名> / <HTMLファイルへの相対パス>の形式で既に表示されています。デバッグセッション中に、ブラウザはこの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月23日

                関連ページ:

                プラグインを管理する

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

                Dart設定

                プロジェクト<プロジェクト名>でDartサポートを有効にするこのチェックボックスをオンにすると、IntelliJ IDEAはDartアプリケーションのコーディング、テスト、実行、およびデバッグを支援し、Dart SDKを設定することができます。チェックボックスをオフにすると、Dartアプ...

                モジュール

                ファイル | プロジェクト構造 | モジュール| モジュール| モジュールTheモジュールpage opens in the right-hand part of theプロジェクト構造ダイアログwhen you select a module in theelement selector pane...

                コンテンツ・ルート

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

                ターミナル

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

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

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