Dart Web アプリを作成し、GitHub Pages に公開してみます。
Dart言語とは
Dart は TypeScript と同じく、最終的には JavaScript を生成して動作するタイプの言語です。
現在では JavaScript が広く使われていますが、もともとは Web ブラウザ上で動く簡易スクリプトとして誕生したため、汎用言語として見ると機能不足な部分が多く存在します。JavaScript は学習コストが低く、需要も高いため初心者向けと言われますが、実際には不足する言語機能を補うために数多くのフレームワークが必要で、現代的な Web アプリ開発を行うにはそれらを学習しなければなりません。
フレームワークに頼らず、言語レベルで JavaScript の不足を補うアプローチとして生まれたのが Dart や TypeScript です。いわば JavaScript を“矯正”するための言語ですが、触ってみると意外にもお作法が多いわけではなく、一般的なコンパイル型言語と比べても少し緩い程度の制約感に収まっています。最終的に JavaScript に変換される以上、JavaScript の基本特性から大きく逸脱した厳しい制約は付けられなかったためと考えられます。
Dart の言語としての雰囲気は、「もし JavaScript が正常進化してモダンな言語になったらこうなるだろう」という印象に近く、モダン言語の経験があれば初見でも比較的読みやすい、標準的で素直な構文を持っています。言い換えると、“普通のプログラミング言語”であり、JavaScript の独特さとは正反対の立ち位置にあります。
ただし、前述したように JavaScript を生成するという制約から、名前空間やアクセス修飾子など、他のコンパイル型言語では当然存在する仕組みが弱かったり、搭載されていなかったりする部分もあります。
また、TypeScript は JavaScript に「型のヒント」を後付けするような設計であり JavaScript に非常に近い感触ですが、Dart は Dart のコードをもとに JavaScript を本格的に生成するため、生成された JavaScript から元の Dart コードを読み解くのは難しい印象があります。
いずれにしろ、他言語の経験者で、素のJavaScriptを触ったことがあるプログラマであれば、比較的すんなり学習に入れると思われます。
開発環境構築
Webプロジェクトの作成
環境構築記事では手書きしましたが、Dart には Web 用テンプレート が用意されているようです。
dart create -t web-simple dart_web_sampleファイル構成:
フォルダー パスの一覧: ボリューム WORKSPACE_WD
ボリューム シリアル番号は 5695-DEC8 です
J:\GIT\MY-DEMO-APP\DART_WEB_SAMPLE
| .gitignore
| analysis_options.yaml
| CHANGELOG.md
| pubspec.lock
| pubspec.yaml
| README.md
|
+---.dart_tool
| package_config.json
| package_graph.json
|
\---web
index.html
main.dart
styles.cssVSCode で開く
cd dart_web_sample
code .web\main.dartを編集していきます。
Web アプリをビルドする
このコマンドで main.dart を JS に変換し、web/ 内に配置します。
dart compile js -o web/main.dart.js web/main.dartindex.htmlのプレビュー
動作確認のためvscodeのindex.htmlをプレビューで開いたところ正常に動作している模様
GitHub Pagesに公開
htmlが見えるようなので、GitHub Pagesに公開してみる。
生成されたテンプレートコード
ファイル名:index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="scaffolded-by" content="https://github.com/dart-lang/sdk">
<title>dart_web_sample</title>
<link rel="stylesheet" href="styles.css">
<script defer src="main.dart.js"></script>
</head>
<body>
<div id="output"></div>
</body>
</html>
divでidがoutputで文字の出力先を定義したhtmlファイル
ファイル名:main.dart
import 'package:web/web.dart' as web;
void main() {
final now = DateTime.now();
final element = web.document.querySelector('#output') as web.HTMLDivElement;
element.textContent =
'The time is ${now.hour}:${now.minute} '
'and your Dart web app is running!';
}void main() {}
main()がアプリケーションのエントリーポイントみたいです。
final now = DateTime.now();現在の時刻を取得。finalは変数を初期化するが、再代入は不可。オブジェクトの内容の変化はOK
final element = web.document.querySelector('#output') as web.HTMLDivElement;html内のidがoutputのオブジェクトを検索取得しelementに代入。
element.textContent = ...elementのテキストコンテンツをセット。文字列への変数の埋め込みで、時刻を表示している。
dart部分は他言語知識があれば比較的読みやすいコードに思えます。
生成されたdart.jsコードはのぞいてみましたが、dartのコード量に比べて圧倒的にファイルサイズが大きく、そっと閉じました。
Dart関連記事
コメント