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.svgをクリックしてリストから 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:<ビルトインサーバーポート> / <プロジェクト名> / <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. 配色を選択するか、デフォルトから継承された強調表示設定を受け入れるか、または色とフォントの構成の説明に従ってカスタマイズします。

                最終更新日 :

                関連ページ:

                プラグインを管理する

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

                Dart 設定

                Windows および Linux 用のファイル | 設定 | 言語およびフレームワーク | DartmacOS のIntelliJ IDEA | 環境設定 | 言語およびフレームワーク | Dartプロジェクト < プロジェクト名 > で Dart サポートを有効にす...

                モジュール

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

                コンテンツルート

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

                ターミナル

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

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

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