Dart
WebStorm を使用すると、Dart(英語) Web アプリケーションとコマンドラインアプリケーションを開発、実行、デバッグできます。WebStorm は、コード補完、エラーと構文のハイライト、コードインスペクションとクイックフィックス、検索とナビゲーション、リファクタリングなどを提供できます。WebStorm は、pub ツール(英語)および Dart 分析サーバー(英語)とも統合されます。
始める前に
JetBrains マーケットプレイスからプラグインをインストールする説明に従って、設定 | プラグインページのマーケットプレースタブに Dart プラグインをインストールして有効にします。
Dart ツールのダウンロード
Dart SDK(英語) をダウンロードしてインストールします。
Dart SDK には、コマンドラインアプリケーションと Web Dart アプリケーションの両方を開発するためのすべてのツールが含まれています。これには、Dart 仮想マシン(英語)、Dart コアライブラリ(英語)のほか、コンパイラー（dart2js(英語) および dartdevc(英語)）、dartfmt(英語) コードフォーマッター、および pub(英語) ツールを含むすべてのコマンドラインツールが組み込まれてい(英語)ます。
Dart オフィシャル Web サイト(英語)の Dart 開発ツールの詳細を参照してください。
新しい Dart アプリケーションの作成
アプリケーションがまだない場合は、dart create コマンド(英語)を実行して、Dart 固有の構造を持つ WebStorm プロジェクトを生成できます。
あるいは、空の WebStorm プロジェクトを作成し、以下の既存の Dart アプリケーションから開始するに従って、その中で Dart サポートを構成します。
新しい Dart プロジェクトを作成する
ウェルカム画面で新規プロジェクトをクリックするか、メインメニューからを選択します。新規プロジェクトダイアログが開きます。
左側のペインで、Dart を選択します。
右側のペインで、プロジェクト関連ファイルが保存されるフォルダーへのパスを指定します。
ダウンロードした Dart SDK の場所を指定します。
Dart オフィシャル Web サイト(英語)に従って、標準のインストール手順に従った場合、WebStorm は Dart SDK へのパスを自動的に検出します。
または、パスを手動で入力するか、
をクリックして開いたダイアログでパスを選択します。WebStorm が Dart SDK を正しく認識すると、そのリビジョン番号がバージョン読み取り専用フィールドに表示されます。
プロジェクト内にサンプルアプリケーションを作成するには、サンプルコンテンツを生成するチェックボックスを選択し、以下のリストから関連するテンプレートを選択します。チェックボックスをオフにすると、WebStorm は空のプロジェクトを作成します。
作成をクリックします。WebStorm はプロジェクト構造を設定し、選択したテンプレートに基づいていくつかのソースを生成します。
空の WebStorm プロジェクトを作成する
ウェルカム画面で新規プロジェクトをクリックするか、メインメニューからを選択します。新規プロジェクトダイアログが開きます。
左側のペインで、空のプロジェクトを選択します。右側のウィンドウで、アプリケーションフォルダーを指定し、作成をクリックします。
既存の Dart アプリケーションから開始する
既存の Dart アプリケーションの開発を継続する場合は、WebStorm で開き、Dart を設定し、必要な依存関係を下の Dart の依存関係の管理に従ってダウンロードします。
すでにマシン上にあるアプリケーションソースを開く
ウェルカム画面でオープンをクリックするか、メインメニューからを選択します。開いたダイアログで、ソースが保存されているフォルダーを選択します。
バージョン管理からアプリケーションのソースをチェックアウト
ウェルカム画面でリポジトリのクローンをクリックします。
あるいは、メインメニューから、、を選択します。
メインメニューの Git の代わりに、プロジェクトに関連付けられている他のバージョン管理システムが表示される場合があります。例: Mercurial または Perforce。
表示されるダイアログで、リストからバージョン管理システムを選択し、アプリケーションソースをチェックアウトするリポジトリを指定します。詳細については、プロジェクトをチェックアウトする (クローン) を参照してください。
既存のプロジェクトで Dart サポートを構成する
設定ダイアログ Ctrl+Alt+S で、言語およびフレームワークの Dart を選択します。Dart ページが開きます。
プロジェクト <プロジェクト名> の Dart サポートを有効にするチェックボックスを選択します。
Dart SDK パスフィールドで、ダウンロードした Dart SDK の場所を指定します。
Dart オフィシャル Web サイト(英語)に従って、標準のインストール手順に従った場合、WebStorm は Dart SDK へのパスを自動的に検出します。
または、パスを手動で入力するか、
をクリックして開いたダイアログでパスを選択します。WebStorm が Dart SDK を正しく認識すると、そのリビジョン番号がバージョン読み取り専用フィールドに表示されます。
1 つの WebStorm プロジェクトで複数の Dart プロジェクト（パッケージ）を扱う
既存の WebStorm プロジェクトに Dart プロジェクト（パッケージ）をアタッチするには、そのルートフォルダーをコンテンツルートとして追加する必要があります。
Dart プロジェクト（パッケージ）を既存の WebStorm プロジェクトに追加する
設定ダイアログ（Ctrl+Alt+S）で、に移動します。
既存のコンテンツルートのリストを含む右側のペインで、コンテンツルートの追加をクリックします。次に開いたダイアログで、アタッチする Dart プロジェクト（パッケージ）のルートフォルダーを選択します。
Dart の依存関係の管理
WebStorm は pub ツール(英語)と統合されており、エディターから直接(英語)アクションを実行できます。pubspec.yaml(英語) ファイルを開くとすぐに、WebStorm はエディタータブの上部にペインを表示します。このペインのリンクを使用して、pub get(英語)、pub upgrade(英語)、および pub の古い(英語)アクションを呼び出します。
あるいは、エディターで pubspec.yaml を開くか、プロジェクトツールウィンドウでそれを選択して、選択のコンテキストメニューから pub アクションを呼び出します。
ターミナルからコマンドラインモードでツールを使用することもできます。
pub ツールはダウンロードしたパッケージをキャッシュに保存し、.packages ファイルと pubspec.yaml ファイルの隣に pubspec.lock ファイルを作成します。
WebStorm は、pub コマンドの実行をメッセージツールウィンドウに記録します。ここでは、ツールバーの 
をクリックして最後に実行したコマンドを再実行することもできます。
Dart アプリケーションの構築
エディターで pubspec.yaml ファイルを開くか、開いているタブに切り替えます。
タブ上部のペインで、Webdev ビルド ... をクリックします。これにより、webdev ビルド(英語)アクションが呼び出されます。
開いたダイアログで、ソースを取得する入力フォルダーと、コンパイルされたアプリケーションを保存する出力フォルダーを指定します。
Dart コマンドラインアプリケーションの実行とデバッグ
WebStorm を使用すると、Dart コマンドラインアプリケーションを実行およびデバッグできます。WebStorm は 2 つのデバッグモードをサポートしています。
ローカルデバッグ : このモードでは、アプリケーションは WebStorm から起動され、コンピューター上でローカルに実行されています。実行またはデバッグするには、Dart コマンドラインアプリケーション構成を使用してください。
リモートアプリケーションのデバッグ : このモードでは、アプリケーションはリモート環境（たとえば、Docker コンテナー）で実行されています。デバッグするには、Dart リモートデバッグ設定を使用します。
Dart コマンドラインアプリケーションを実行する
Dart ファイルを開いて、アプリケーションを起動するか、プロジェクトツールウィンドウでアプリケーションを選択します。このファイルには、
main()メソッドが含まれている必要があります。選択のコンテキストメニューから実行 '<dart_file_name>' を選択します。WebStorm は、タイプ Dart コマンドラインアプリケーションの実行 / デバッグ構成を生成し、それを使ってアプリケーションを起動します。
Dart コマンドラインアプリケーションをローカルでデバッグする
Dart コードのブレークポイントの設定と設定。
Dart ファイルを開いて、アプリケーションを起動するか、プロジェクトツールウィンドウでアプリケーションを選択します。このファイルには、
main()メソッドが含まれている必要があります。選択のコンテキストメニューからデバッグ '<dart_file_name>' を選択します。WebStorm は、タイプ Dart コマンドラインアプリケーションの実行 / デバッグ構成を生成し、それを使ってデバッグセッションを開始します。
開いたデバッグツールウィンドウで、プログラムをステップ実行し、プログラムの実行を停止して再開し、中断されたときにそれを調べます。
Dart リモートデバッグ実行 / デバッグ構成の作成
リモートデバッグセッションを開始する
--enable-vm-service --pause_isolates_on_startなどの VM オプションを使用して、リモート Dart アプリケーションを起動します。アプリケーションが起動し、--pause_isolates_on_start引数によりすぐに中断し、デバッガーが接続するのを待ちます。実行ツールウィンドウで、アプリケーションが実行されている URL アドレスと、それにアクセスするために生成された認証トークンをコピーします。
実行 / デバッグ構成を選択リストで新しく作成した Dart リモートデバッグ設定を選択し、
をクリックします。実行中のアプリに接続するダイアログで、上記のようにコピーした URL アドレスと認証トークンを貼り付けます。
開いたデバッグツールウィンドウで、プログラムをステップ実行し、プログラムの実行を停止して再開し、中断されたときにそれを調べます。
Dart Web アプリケーションの実行とデバッグ
Dart Web アプリケーションはどのブラウザーでも実行できますが、デバッグは Chrome でのみサポートされています。Dart Web アプリケーションを実行するには、アプリケーションのメイン HTML ファイルをブラウザーで開きます。Dart Web アプリケーションのデバッグは、タイプ Dart Web の実行構成を介して開始されます。
WebStorm は webdev サーバー(英語)ツールと統合して、必要に応じて Dart コードを JavaScript にコンパイルします。Dart SDK 2 より前のバージョンでは、pub serve(英語) ツールが使用されます。
ブラウザーで Dart Web アプリケーションを開くと、通常は http://localhost:63342/project-name/web/index.html のようなビルトインのサーバー URL から始まります。ただし、組み込みサーバーはアプリケーションの提供には使用されません。代わりに、WebStorm は自動的に Dart ダイアログで指定されたポート上の webdev サーバーを起動し、ブラウザーページは Webdev サーバー URL（http://localhost:53322/index.html など）にリダイレクトされます。
webdev サーバーの作業は、専用の Dart Web デバイスツールウィンドウに記録されます。現在の WebStorm セッション中に初めて Dart Web アプリケーションの実行またはデバッグを開始すると、ツールウィンドウが開きます。ツールバーの 
をクリックすると、ツールを停止できます。再度実行またはデバッグを開始すると、webdev サーバーが自動的に再起動します。
Dart Web アプリケーションをデバッグするための推奨される方法は、Dart Web 構成を使用することです。このモードでは、webdev サーバーは Dart DevTools(英語) を有効にして起動します。
ただし、JavaScript デバッグ構成は引き続き使用できます。詳細については、「Dart Web アプリケーションを実行およびデバッグする代替方法」を参照してください。
実行 / デバッグ構成を作成する
Dart Web の実行 / デバッグ構成を作成します。
に移動し、開いた実行構成の編集ダイアログでツールバーの追加ボタン (
) をクリックし、リストから Dart Web を選択します。開いた実行 / デバッグ構成: Dart Web ダイアログで、実行またはデバッグする Dart コードを参照する HTML ファイルへのパスと、webdev サーバー(英語)が Dart Web アプリを起動するポートを指定します。
アプリケーションを実行する
ツールバーの実行 / デバッグ構成ウィジェットリストから、新しく作成した Dart Web 構成を選択し、その横にある
をクリックします。ブラウザーは
127.0.0.1:<webdev_port>/<specified_HTML_file>で開きます。
アプリケーションをデバッグする
必要に応じて、Dart コードにブレークポイントを設定します。
ツールバーの実行ウィジェットリストから、新しく作成した Dart Web 構成を選択し、その横にある
をクリックします。
Dart Web アプリケーションを実行およびデバッグする代替方法
推奨ワークフローである Dart Web 実行 / デバッグ構成を WebStorm で使用する以外に、JavaScript デバッグ構成で Dart Web アプリケーションを実行およびデバッグできます。
Dart Web アプリケーションを実行する
Dart リファレンスで HTML ファイルを開くか、プロジェクトツールウィンドウで HTML ファイルを選択してください。
エディターのコンテキストメニューまたは選択から、を選択してリストから必要なブラウザーを選択します。
JavaScript デバッグの実行 / デバッグ構成を作成する
Dart を参照する HTML ファイルを開くか、プロジェクトツールウィンドウのファイルを選択してください。
コンテキストメニューから作成 '<HTML_file_name>' を選択します。実行 / デバッグ構成: JavaScript デバッグダイアログが開きます。
Chrome ファミリのブラウザーを指定して、アプリケーションをデバッグします。
URLフィールドには、アプリケーションの URL アドレスがすでに http://localhost:<built-in server port>/<project-name>/<relative path to the HTML file> の形式で表示されています。デバッグセッション中に、ブラウザーはこの URL から webdev サーバーの URL にリダイレクトされます。
デバッグを開始する
Dart コードのブレークポイントの設定と設定。
デバッグセッションを開始します。ツールバーの実行構成の編集リストから作成した実行構成を選択し、
をクリックします。WebStorm は選択されたブラウザーで指定された URL を開きます。開いたデバッグツールウィンドウで、プログラムをステップ実行し、プログラムの実行を停止して再開し、中断されたときにそれを調べます。
Dart アプリケーションのテスト
WebStorm は、dart テストパッケージ(英語)を使用して作成された Dart テストの実行とデバッグをサポートします。任意のターゲットプラットフォーム(英語)でテストを実行できます。デバッグは VM テストでのみサポートされます。
単一のテスト、テストグループだけでなく、ファイルやフォルダー全体のテストも実行およびデバッグできます。WebStorm は、デフォルト設定で実行 / デバッグ構成を作成し、テストを起動します。後でこの構成を保存して再利用できます。
単一のテストを実行またはデバッグする
テストファイルをエディターで開き、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 テスト設定を選択し、
または をクリックします。
構文ハイライトの構成
好みや習慣に応じて、Dart 対応の構文ハイライトを設定できます。
設定ダイアログ（Ctrl+Alt+S）で、 に移動します。
配色を選択するか、デフォルトから継承されたハイライト設定を受け入れるか、色とフォントの説明に従ってカスタマイズします。
関連ページ：
プラグインのインストール
プラグインは WebStorm のコア機能を拡張します。例: プラグインをインストールして、次の機能を取得します。バージョン管理システム、課題追跡システム、ビルド管理サーバー、その他のツールとの統合。さまざまな言語とフレームワークのコーディング支援サポート。ショートカットのヒント、ライブプレビュー、ファイルウォッチャーなど。新しいプログラミング言語を学ぶのに役立つコーディング演習。デフォルトでは、WebStorm には多数のプラグインがバンドルされています。バンドルされたプラグインを無効にするこ...
新規プロジェクトの作成ダイアログ
このダイアログを使用して、空のプロジェクトを作成したり、アプリケーション開発用のフレームワーク固有のプロジェクトスタブを生成したりします。ダイアログの左側のペインには、スタブを生成できるプロジェクトタイプのリストが表示されます。利用可能なプロジェクトタイプのセットは、インストールされてアクティブ化されているプラグインによって異なります。右側のペインの内容は、選択したプロジェクトの種類によって異なります。ロケーションフィールドはすべてのプロジェクトタイプに共通です。空のプロジェクト内容のないプロジ...
GitHub でホストされているプロジェクトを管理する
プロジェクトをチェックアウトする (クローン)：WebStorm から直接貢献したいリポジトリのクローンを作成し、それに基づいて新しいプロジェクトを作成できます。メインメニューで、に移動します。Git メニューが使用できない場合は、を選択します。バージョン管理から取得ダイアログで、左側の GitHub を選択します。次のいずれかを実行して、GitHub にログインします。トークンがある場合は、トークンを使用するをクリックし、トークンをトークンフィールドに貼り付けて、ログインをクリックします。それ以外の...
ターミナル
WebStorm には、IDE 内からコマンドラインシェルを操作するための組み込みターミナルエミュレータが含まれています。専用のターミナルアプリケーションに切り替えることなく、Git コマンドの実行、ファイルのアクセス許可の設定、その他のコマンドラインタスクの実行に使用します。ターミナルプラグインを有効にするこの機能は、デフォルトで WebStorm にバンドルされて有効になっているターミナルプラグインに依存しています。関連する機能が利用できない場合は、プラグインを無効にしていないことを確認して...
プロジェクトツールウィンドウ
プロジェクトツールウィンドウを使用すると、さまざまな視点からプロジェクトを確認し、新しい項目 (ディレクトリ、ファイル、クラスなど) の作成、エディターでのファイルのオープン、必要なコードフラグメントへの移動などのさまざまなタスクを実行できます。このツールウィンドウのほとんどの機能には、コンテンツペインのコンテキストメニューコマンドとして、関連するショートカットを介してアクセスします。また、ビューには、作成したスクラッチファイルと拡張スクリプトを管理できるスクラッチとコンソールフォルダーが含ま...
ブレークポイント
ブレークポイントは、特定のポイントでプログラムの実行を一時停止する特別なマーカーです。これにより、プログラムの状態と動作を調べることができます。ブレークポイントは、たとえば、特定のコード行に到達したときにプログラムを一時停止するなどの単純なものから、追加の条件をチェックしたり、ログに書き込んだりするなどのより複雑なロジックを含むものまであります。ブレークポイントは、一度設定すると、一時的なブレークポイントを除き、明示的に削除するまでプロジェクト内に残ります。ブレークポイントの種類：WebSto