Dart は Google が開発したモダン言語で、
- 素直な文法
- ネイティブ実行
- JavaScript へのコンパイル
- 静的型付け
- シングルバイナリ配布
などが魅力のシンプルなプログラミング言語です。
手元にあるWindows11PCでvscodeを軸とした開発環境を導入したいと思います。
Vanilla Dart Web（Dart + HTML 構成）
DartというとFlutterを連想しますが、今回の記事はFlutter ではなく、静的 HTML と Dart を組み合わせた Web アプリ構成
Scoop を使った Dart のインストール
・Scoop のインストール（インストール済み）
Set-ExecutionPolicy RemoteSigned -Scope CurrentUser
irm get.scoop.sh | iex
・Dart のインストール
scoop bucket add main
scoop install dart
・Dartバージョン確認
dart --version
# Dart SDK version: 3.10.1 (stable) (Tue Nov 18 11:02:31 2025 -0800) on "windows_x64"vscode の準備
・vscodeのインストール（インストール済み）
scoop install vscode
・Dart 拡張機能を追加
Dart→ Dart SDK と連携し、補完・診断・デバッグが使えるようになります。
Dart プロジェクトを作成する
「Flutter」ではなく「Dart Web」としてプロジェクトを構成していきます。
index.htmlとmain.dartファイルをvscodeで作成します。
・新規プロジェクト作成
mkdir hello_dart
cd hello_dart
ファイル名:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>Dart Web App (Subdir)</title>
</head>
<body>
<h1>Dart Web App</h1>
<p id="message">Loading…</p>
<script defer src="main.dart.js"></script>
</body>
</html>ファイル名:main.dart
// ignore_for_file: deprecated_member_use
import 'dart:html';
void main() {
querySelector('#message')?.text = 'Hello World from Dart!';
}
Dart → JavaScript にコンパイル
dart compile js main.dart -o main.dart.jsファイル構成
フォルダー パスの一覧: ボリューム WORKSPACE_WD
ボリューム シリアル番号は 5695-DEC8 です
J:\GIT\MY-DEMO-APP\HELLO_DART
index.html
main.dart
main.dart.js
main.dart.js.deps
main.dart.js.mapvscodeでindex.htmlのプレビューを表示したところ問題なさそうです。
コメント