IntelliJ IDEA 2021.1 ヘルプ

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 から取得をクリックするか、メインメニューから 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 コマンドの実行をメッセージツールウィンドウに記録します。ここでは、ツールバーの Rerun Pub Command をクリックして最後に実行したコマンドを再実行することもできます。

    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 プロジェクトを指定します。リストから Dart プロジェクトを選択するか、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. 配色を選択するか、デフォルトから継承されたハイライト設定を受け入れるか、または色とフォントの構成の説明に従ってカスタマイズします。

                関連ページ:

                プラグインを管理する | IntelliJ IDEA

                プラグインは以下に示すように IntelliJ IDEA のコア機能を拡張します。バージョン管理システム、アプリケーションサーバー、およびその他のツールとの統合を提供する、さまざまな言語とフレームワークのコーディング支援サポートを追加する、ショートカットヒント、ライブプレビュー、ファイルウォッチャーなどで生産性を向上、コーディング演習と検証で新しいプログラミング言語を学ぶのに役立ちます、プラグイン設定を開く設定 / 環境設定ダイアログで、プラグインを選択します。マーケットプレースタブを使用して...

                Dart 設定 | IntelliJ IDEA

                プロジェクト <プロジェクト名> で Dart サポートを有効にするこのチェックボックスをオンにすると、IntelliJ IDEA は Dart アプリケーションのコーディング、テスト、実行、デバッグを支援し、Dart SDK を設定することができます。チェックボックスをオフにすると、Dart アプリケーションの開発に関する支援は提供されず、ページのすべてのコントロールが無効になります。Dart SDK パスこのフィールドでは、ダウンロードした Dart SDK の場所を指定します。パスを手動で...

                モジュール | IntelliJ IDEA

                エレメントセレクターペインでモジュールを選択すると、プロジェクト構造ダイアログの右側にモジュールページが開きます。ソースタブを使用して、Java でサポートされている言語レベルを選択し、モジュールの内容を構成します。言語レベルこのリストを使用して、モジュールの Java 言語レベルを選択します。左ペイン左側のペインには、モジュールコンテンツルートのフォルダーのツリーが表示されます。モジュールに複数のコンテンツルートがある場合、表示される構造は右側のペインで選択されたコンテンツルートに対応します。右...

                コンテンツルート | IntelliJ IDEA

                IntelliJ IDEA のコンテンツは、ソースコード、ビルドスクリプト、単体テスト、ドキュメントを含むファイルのグループです。これらのファイルは通常、階層構造になっています。最上位のフォルダーはコンテンツルートと呼ばれます。モジュールには通常、1 つのコンテンツルートがあります。コンテンツルートを追加することができます。たとえば、コードがコンピューター上の別の場所に格納されている場合には、これは便利です。同時に、モジュールはコンテンツルートなしで存在することができます。この場合、他のモジュー...

                ターミナル | IntelliJ IDEA

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

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

                プロジェクトツールウィンドウでは、様々な視点からプロジェクトを見て、新しいアイテム(ディレクトリ、ファイル、クラスなど)の作成、エディターでのファイルのオープン、必要なコードフラグメントへのナビゲートなど、様々なタスクを実行することができます。ビュー:ツールウィンドウにはいくつかのビューがあります。プロジェクトビュー。このビューには、すべてのプロジェクトアイテムとその依存関係(SDK およびライブラリ)が表示されます。パッケージも示されていますが、ディレクトリ構造に重点が置かれています。パッケ...