DartプロジェクトをVSCodeで作成する方法

Flutter

2022.03.18 2022.02.26

割と小さなテストコードを実行したり、デバッグしたりしたい時にミニマムなDartプロジェクトを生成したいことがあります。

ブログ記事のネタを書きたい時は特にシンプルなプロジェクトを形成したくなりますね。

今回は、Visual Studio Code上で、最低限のmain()が含まれるプロジェクトを作る方法をご紹介します。前提として、Dartが動作する環境は既に出来上がっているものとします。

参考までに、自分のPCとVSCodeの環境を記載します。

【OS】
Windows 11 Pro ver.21H2
【VSCode】
バージョン: 1.64.2 (user setup)
コミット: f80445acd5a3dadef24aa209168452a3d97cc326
日付: 2022-02-09T22:02:28.252Z
Electron: 13.5.2
Chromium: 91.0.4472.164
Node.js: 14.16.0
V8: 9.1.269.39-electron.0
OS: Windows_NT x64 10.0.22000

VSCode上でDartプロジェクトを作成する手順
プロジェクトをデバッグモードで実行してみよう

VSCode上でDartプロジェクトを作成する手順

基本的な流れとして次の順番でプロジェクトを生成します。

VSCode起動
コマンドパレット（Command Palette）を開く
「Dart」と入力して「Dart: New Project」を選択する
プロジェクトの種類を選択する
作成するフォルダを選択する
プロジェクト名を決めて生成

今回はWindowsですが、Macでも同様のフローになります。ショートカットキーが若干違いますので、併せて紹介しますね。

起動～コマンドパレットを開くまで

VSCodeを起動したらコマンドパレット（Command Palette）を開きます。
おなじみのショートカット、「Ctrl + Shift + P」ですね。効率化のために覚えてしまうことをおすすめします。

Macであれば「Command + Shift + P」になります。

特に何の問題もありませんね。

「Dart」と入力してからプロフェクトの種類を決めるまで

コマンドパレットを開いたら入力欄に「Dart」と打ち込むと、下部にリストでずらずらとDartで絞り込まれたコマンドたちが出てきます。

「Dart: New Project」をクリックして選択します。すると、下記のようにプロジェクトの種類を選択するプルダウンが出現します。「どのDartテンプレートにしますか？」ということですね。

一応各種簡単に説明しておきましょう。

Bare-bones Web App

英語のまんまで、Webアプリケーションの最小プロジェクトになります。index.htmlとmain.dartが主要ファイルとなります。main.dartの中身はこんな感じです。

import 'dart:html';

void main() {
  querySelector('#output')?.text = 'Your Dart app is running.';
}

Console Application console-full

これは非常にシンプルなプロジェクトではありますが、後述の「Simple Console Application」よりは、微妙に複雑（？というほどでもない）なプロジェクトです。main()の中身は次のようになります。インポートファイルも記載しておきます。

import 'package:dart_application_1/dart_application_1.dart' as dart_application_1;

void main(List<String> arguments) {
  print('Hello world: ${dart_application_1.calculate()}!');
}

int calculate() {
  return 6 * 7;
}

Dart Package

「test」フォルダと「example」フォルダがあり、それぞれにmain()があります。exampleフォルダ配下のdartファイルか以下のようになります。

import 'package:dart_application_package/dart_application_package.dart';

void main() {
  var awesome = Awesome();
  print('awesome: ${awesome.isAwesome}');
}

Server app

これは「bin」フォルダに入っているserver.dartをデバッグモードで実行（F5キー）すると、下記のようにport 8080を開いてる旨のコンソールメッセージが出ます。試しにブラウザでhttp://localhost:8080/を開くと「Hello, World!」と表示されることが分かります。

Simple Console Application

先ほどのConsole Application console-fullプロジェクトと比較すると、libフォルダもtestフォルダも無いバージョンです。importも実装されていないので、ファイル単体のめちゃくちゃシンプルなプロジェクトになります。main()も簡素で、

void main(List<String> arguments) {
  print('Hello world!');
}

これしか書かれてません笑。var、const、finalの実験だったり、文字列の操作や変数のスコープなどの練習用になりそうです。もちろん、この状態からめっちゃ実装、実装、実装して完全なアプリにしてもいいですが、あまりお勧めしません……

Dart言語の勉強用としては、Console Application console-fullが一番おすすめかなぁと個人的には感じました。お好きなのを選んでプロジェクトを作成してみてください。

フォルダの選択～プロジェクト名決定～作成完了

ここはもう大丈夫ですね。プロジェクトを置くフォルダを決定して、プロジェクト名を決定すれば完了です。注意点としては、作ったフォルダの下にさらにフォルダが出来て、その中にプロジェクトのソース群が入るので、好みによっては親フォルダの置き場所を調整したりしてください。

たとえば、プロジェクト名で作ったフォルダの下にプロジェクトを作ると、/プロジェクト名/プロジェクト名/ソース……みたいになるので一応お伝えしておきます。

プロジェクトをデバッグモードで実行してみよう

で、どうやって動かすの？って方に念のため説明しておくと、各プロジェクトのmain()があるdartファイルをVSCodeの左側に出ている（はず）のエクスプローラで選択(*)して、開いてください。
(* : mai()が含まれないファイルを選択した状態だと、「launchi.js」が開きます。)

その状態でF5キーを押せばデバッグモードで実行され、デバッグコンソールにprint()の内容などが出力されるので実験・検証しやすいかと思います。

Flutterでエミュレーターのホットリロードが出来ないときの対処法も下記記事にまとめてありますので、興味ある方は併せてご参照ください。