Dart + webdev動かしてみた

Flutter の注目度が上がって Dart 2 の話が再び注目を浴びるようになってきて、

Googleが「Dart 2」発表、Dartを再起動。iOS/Android用ライブラリ「Flutter」と共にWebとモバイルのクライアント開発にフォーカス − Publickey

の記事の意味をちゃんと理解していなかったことが分かってきたので、ちょっと試したくなった。

Dart programming language | Dart

本当は repl があればいちばんよかったんだけど、どうも Dart 2 で安定して動く repl コマンドは 2018-12 時点ではないっぽいので、再現性が安定しているであろう webdev の方を試してみた。

Dartの雑なメモ

  • コンパイラ言語 ( ARM と x86 のネイティブを吐く )
  • JavaScript も吐く
  • すべて Object
  • type は optional ( null安全という意味じゃなくてあってもなくてもよい )
  • mixin が普通(2.1 からは mixin 宣言を導入して class から分離できる)

全部 Object っていうところに Rubyist としてはいちばん興味が引かれてる。

  • デフォルト entry point は main()

C だ。でも決まってるのははっきりしていいかもね。実際、Ruby でもモノによってはそういう書き方してるし。

インストール

https://github.com/dart-lang/homebrew-dart

より

For web developers, we highly recommend Dartium and content shell:

$ brew install dart --with-dartium --with-content-shell

これは 2018-12-29 時点で古い。インストールの時点でドキュメントが古いので、これ以降もそこかしこで「話が見えない」話題がいくつか出てくる。

Dart 2 では裸でインストールするのが正義。その後 pub global などでツールを足していく。

実際にやったのは

brew tap dart-lang/dart
brew install dart@2
brew link --force dart@2

pubで必要なものをインストール

pub は依存パッケージを管理するもの。Node.js の npm のように言語インストール段階で標準で使える。

  • package.json のように CLI で追加、変更はできない
    • Gemfile のように先に pubspec を編集する必要アリ
  • package.json のように name を要求する
  • インストールは pub get
  • global にインストールされる1
    • 言語のバージョンが上がった時の扱いとかどうするんだろ。LLじゃないから考える必要ないのか?
  • 実行は各パッケージの bin/ 以下に入っているものを pub run
    • bin/ 以下がないなら実行できない
  • 独立コマンドがあるものは pub global activate で

このうち、いちいち pubspec.yaml を書くのが面倒だなぁと思って den などを使う方法があるらしいのだが、公式のツールではないので、2018-12-30 時点で dart 2.1 には対応していなかった。

pubspecのバージョン指定の落とし穴

dev_dependencies:
  build_runner: >=0.8.10 <2.0

これは build_runner 自身が出力した「こう書け」に従ったのだが、

  • まず YAML の文法として意味があるのでダメ
  • "" で囲んでもみたが、それでも以下のようなエラー
Error on line 3, column 17 of pubspec.yaml: Invalid version
constraint: Expected version number after "<" in ">=0.8.10 <2.0", got "2.0".
 build_runner: ">=0.8.10 <2.0"

いろいろ試したのだが、Semantic Versioning で言う <major>.<minor>.<patch> の patch level までちゃんと書けという意味だった。

そう言ってくれい。

webdev package

によると

  • Dart 2からは DDC を使え 
  • dart2js を個別に使う必要はない
  • Dartium は古い。webdev server を使えば普通のブラウザで動作する。
pub global activate webdev

webdev serve
webdev build

が使えるようになる。ただし、これらは依存パッケージとして build_runner と build_web_compilers を要求する。これは別途 pubspec.yaml を用意して pub get する必要がある。2

とりあえず動くものを書く

https://www.dartlang.org/tools/pub/package-layout

を参考に、

web/index.html
web/main.dart

を置く。実行は

webdev serve web:8000 --hot-reload

みたいな感じ。3

コツは HTML 上で

<script src="main.dart.js"></script>

と書きつつ、実際に用意するのは .dart のままにする、ということっぽい。

source map も以下のように自動で生成される。

webdev serve で dart の source map が表示されている様子

import

import の書き方は

import "package:<package_name>/path/to/lib"
import "path/to/lib"

いずれか。

Web フロントエンド開発で webdev を利用する場合、import のパスが飛ぶ(lib/ 以下と web/ 以下に分離する)ので、package:<package_name> を付けると lib/ 以下を見てくれる。

成果

wtnabe/dart-practice

参考

Flutterだけじゃない! Dart × Webフロントエンドの現状と未来

  1. &#8212;packages-dir 指定しても global への symlink になるし、obsolete 

  2. なんで? なんで分かれてる? 一緒に入れればええやん。 

  3. デフォルト port は 8080 

環境の判別って真面目にやると面倒くさい

年の瀬の大掃除ということで(書いたのは違うけど実際に実行していたのは年末だったのです)、.emacs, .zshrc などを整理している。

  1. .emacs, .zshrc で環境を判別し、FreeBSD, Linux, MacOSX で一つの設定ファイルを利用する
  2. この一つのファイルをバージョン管理する

ということを試みている。

またドットファイルをバージョン管理すると言ってもホームディレクトリを丸ごとバージョン管理するわけにはいかない(現実的じゃない)ので、dot-files/ ディレクトリを掘ってここにドットファイルを置き、rake を使ってホームディレクトリ以下にリンクを張るようにしてみた。

要は rake task 作りの練習である。実はあんだけ Capistrano を持ち上げておいて現段階で Rakefile をほとんど書けないのであった。

ri ってメソッドも引けたのか

$ ri String

---------------------------------------------------------- Class: String
     A +String+ object holds and manipulates an arbitrary sequence of
     bytes, typically representing characters. String objects may be
     created using +String::new+ or as literals.

 ...

しか見たことなかったけど、

$ ri String.sub
------------------------------------------------------------- String#sub
     str.sub(pattern, replacement)         => new_str
     str.sub(pattern) {|match| block }     => new_str
------------------------------------------------------------------------

...

こんな感じ。

最近は irb でメソッド検索することが多かったんだけど、これだけでは引数については何も分からない。ri で引くとちゃんとその辺の説明も分かるので便利。

なるほど。

あとはもう少し早く表示してくれると嬉しいんだけど、それは贅沢だろうか。

うちにも Vista きた

例によって正確には昨日のできこと。

ThinkCenter A61e と talby

たださんとこが買ったのを読んで、前からうちのやかましいキューブべアボーンに引退していただく機会を伺っていたのでキャンペーン中にポチっとしていた。320GB モデル。うちも初 Vista, 初 AMD だ。本当は Mac に転ぶ気満々だったんだけど、メモリ増設後でも Mac と同じ値段になるもんな。やっとれん。メインマシンじゃないので目をつぶることにする。(本当は 2000 までで Windows をやめるつもりだった。)

最初別に Sempron でいいやと思っていたんだけど、Vista + Athlon にした方が断然お得ということを教えてもらって決断。メモリはまだ買ってないけど、確かに足した方がいいな。豪勢にビデオの方にメモリを食われている。

ClearType の件は日記を読んでいたので慎重にかつ記事を覚えていないので検索とかちゃんと駆使して設定。Vista のメイリオは ClearType オフだと汚くてとても見てられない。まぁ ClearType が有効でも 古川 享 ブログ: Windows Vista RC1 ドッグフードを食す、その2 にあるように字形が狂っているのは直らないんだけど。そもそも UI のフォントとして適切かどうかっていう問題は残るとは言え、やっぱヒラギノの方が読みやすいよな。

それにしても Vista の Explorer は XP の Explorer よりは使いやすいような気がする。あの文字がやたらめったら出てくる XP のタスク指向インターフェイスとやらには本当に幻滅させられたもんだ。しかし設定の深さ、関連する項目のまとまりの悪さ、想像だけで設定に行き当たらない設計の悪さはやっぱり相変わらずというか返って悪くなってるような気がする。Windows って本当に難しい。あーあと、なんでもかんでも反復確認してくるのは何? 自動で実行されたのかユーザーが明示的にアクションを起こしたのか区別せずに再確認ばっかり投げてよこすのは頭悪いとしか言いようがない。ますます何も考えずに Yes とか OK とか押すユーザー増えるってこれ。

セットアップはとりあえず Firefox, Thunderbird, iTunes のインストールとデータの書き戻し、AVG 7.5 のインストールだけ。Norton は一瞬使ってみたけどどうせ切れるのでやめた。Windows の Update とか ThinkCentre の Update はお任せで。あ、巨大アイコンは邪魔だったので XP 以前のサイズに戻した。データの移行は VNC と IP Messenger を使った。Vista のユーザーディレクトリの場所が変わったり、Roaming とか見慣れないフォルダができたりしてるところに戸惑うが、Mozilla アプリの移行は慣れたものなので転送以外はすぐ終わる。ま、こんなもんか。

これで 6年使ったキューブべアボーン Celeron 1.7GHz ともおさらば。スペック的には頑張ればまだ使えなくてもないんだけど、最近は動画関係のサービスが多くてこれの再生がキツくて仕方がなかったのと、とにかくファンのうるささが問題で。この二つがいっぺんに解消されて大満足。メモリは今度 lenovo 以外で買う予定。

ちなみにキーボード、マウスは USB のものが余ってなかったので新規購入。Happy Hacking Keyboard Lite2 と ELECOM fit PALVO にした。ほぼ黒で統一の構成。なんか黒で統一って古いよなぁと思いつつ、へたな色物にするよりはマシかなと。

それにしても手元の PowerBook の遅さが際立ってきたな…。何しろ PowerBook だし。

screen の windowlist にだけ hostname 出せないかな

プログラミングは素晴らしい - GNU Screen のちょっと便利な使い方

screen を使ってそれぞれの window で ssh とか使って違うホストで作業をするようになってくると、どの window がどのホストなのか一瞬分からなくなってしまう。windowlist は window title の一覧が出るだけで使いモノになんねーよなぁと思ってたんだけど、こういう工夫をすればいいのか。

でも zsh + screen で最後に実行したコマンドを window title に をやって以降は普段 status に window title 出しまくってるので、この設定は邪魔でしょうがない。うーん。ということは windowlist のときにだけ必要な情報が出ればいいんじゃないかと思って調べると

windowlist title
windowlist string

なんつーので設定できるようだ。%H がホスト名。やってみるとしかし、screen を起動したホスト名しか拾えない。screen の中であっちこっちログインしている環境だと意味がないなぁ。

しょうがないのでコマンドを実行するたびに window title を自動設定するところで、

echo -n "^[k$cmd[1]@$HOST:t^[\\"

とやって、ホスト名だけでも window title に出すようにしてみた。ちょっと邪魔だけどこれくらいならまだ我慢できるか。

※ ホスト名さえ取得できればいいので、プロンプトに居る限りはプロンプトにホスト名を出せばいいんだけど、プロンプトに居ないとき、例えば emacs とか w3m に居るときはホスト名をすぐに取得できない。screen ではなくて terminal の window title にホスト名を出せればそれでもいいんだけど、OSX の Terminal の window title を出す方法が分からないんだなぁ。emacs だけなら mode-line に出すとか工夫の余地がいろいろあるんだけど、emacs 限定っつーのもちょっと面白くないし。

うまくいじれればこんなんでもいいかなぁ

あの白箱の強化型上位機「GLAN Tank」、登場 (/.-j)

自宅サーバはトンネルとメモ用Wikiと irc と DNS で安定動作しててほしく、なんかあんまり下手なことできない雰囲気になってきちゃった(思い込み)ので、そういうのは必要なツールを自分で導入する自由さえあればいいのかなぁという気がしてきた。別にこまごまコンパイルできなくてもいいかなーって。iTunes サーバになるっつーのもなかなかいい感じ。RAID の復旧も楽できるって話だし。

気になるのは騒音かな。今より電気食わないのは確実だから、あとは音。

新しいおもちゃが欲しいだけかもしれんけど、メモ。

来年頑張ろう

どうも2005年はあまり頑張らなかった気がしている。まぁ Web 上とか IT とかこっち系のスキル以外ではあれこれあったわけだけど、そういう意味では頑張ったというよりはイベントの多かった年という感じなのかな? ちょっと振り返ってみよう。

「こっち系」では

  • 昨年の続きで Ruby 関係のドキュメントやサイトについて考えたり
  • Wiki そのものがどういう風に使えるか、どう使えたら便利かを考えたり
  • Wiki の diff を RSS に出してみた
  • ネットワーク構成が変わったので去年とかに調べておいたトンネル掘りが役に立った
  • 買い物(RD, キーボード * 2, デジカメ * 2, iPod)
  • NAS導入失敗
    • 何がいけなかったのかは今度まとめるかも
    • これのからみで samba + netatalk 周りをいじり始めて、とりあえず必要なノウハウは手に入ったのは嬉しい誤算だったけど、顛末から言うとちょっとしんどかった。1
  • 文字サイズの話をようやくある程度形にできた2
  • 忘れていたけど aligach.net に引っ越した
  • スターウォーズの 3, 4, 5, 6 を見た。geek系のネタ元が少し分かった
  • FreeBSD 6.0-Release に移行した3

新しく手を出したものは

  • netatalk2
  • AppleScript
  • テスティングフレームワーク
  • RDService, ffmpeg
  • YAML

くらいかな。普段使いの道具では新しいものは全然手出してないな。それでかな、ちょっとメリハリに欠ける感じがするのは。

日常ネタでは、

  • リアル引っ越し
  • メガネを直したが、以来どうにも座りが悪い
  • 旅行
  • 車が当たり年
  • なんかよく風邪を引いた
  • デフォルトビールを YEBISU から PREMIUM MALT'S に変更
  • 集中力が落ちた気がする

「あっち」系では

  • 安易なゆとり教育批判を語りたがるやつは全員出直してこい4

さて。やることやらねば。

  1. 実際に samba + netatalk 環境を運用したわけではありません。 

  2. 内容はちっとも新しくはないんだけど。 

  3. そんなに深い使いこなしをしてるわけじゃないんだけど、全体的に 4系より扱いやすい気がする。rcNG なんかは Linux 使ってる人もそれほど大きな違和感がないんじゃなかろうか。Perl が base から外れてアップデートしやすくなったし、ports skelton をアップデートする portsnap が標準で入っているのもいい。 

  4. 何度でも言うがゆとり教育っていったいなんだ。合意のないものを勝手にオレ定義して批判した気になられても、少なくとも議論は全然成り立たないぞ。 

About

例によって個人のなんちゃらです

Recent Posts

Categories

Tool 日々 Web Biz Net Apple MS ことば News Unix howto Food PHP Movie Edu Community Book Security Text TV Perl Ruby Music Pdoc 生き方 RDoc ViewCVS CVS Rsync Disk Mail FreeBSD Cygwin PDF Photo Zebedee Debian OSX Comic Cron Sysadmin Font Analog iCal Sunbird DNS Linux Wiki Emacs Thunderbird Sitecopy Terminal Drawing tDiary AppleScript Life Money Omni PukiWiki Xen XREA Zsh Screen CASL Firefox Fink zsh haXe Ecmascript PATH_INFO SQLite PEAR Lighttpd FastCGI Subversion au prototype.js jsUnit Apache Trac Template Java Rhino Mochikit Feed Bloglines CSS del.icio.us SBS qwikWeb gettext Ajax JSDoc Rails HTML CHM EPWING NDTP EB IE CLI ck ThinkPad Toy WSH RFC readline rlwrap ImageMagick epeg Frenzy sysprep Ubuntu MeCab DTP ERD DBMS eclipse Eclipse Awk RD Diigo XAMPP RubyGems PHPDoc iCab DOM YAML Camino Geekmonkey w3m Scheme Gauche Lisp JSAN Google VMware DSL SLAX Safari Markdown Textile IRC Jabber Fastladder MacPorts LLSpirit CPAN Mozilla Twitter OpenFL Rswatch ITS NTP GUI Pragger Yapra XML Mobile Git Study JSON VirtualBox Samba Pear Growl Mercurial Rack Capistrano Rake Win RSS Mechanize Sitemaps Android JavaScript Python RTM OOo iPod Yahoo Unicode Github iTunes God SBM friendfeed Friendfeed HokuUn Sinatra TDD Test Project Evernote iPad Geohash Location Map Search Simplenote Image WebKit RSpec Phone CSV WiMAX USB Chrome RubyKaigi RubyKaigi2011 Space CoffeeScript Nokogiri Hpricot Rubygems jQuery Node GTD CI UX Design VCS Kanazawa.rb Kindle Amazon Agile Vagrant Chef Windows Composer Dotenv PaaS Itamae SaaS Docker Swagger Grape WebAPI Microservices OmniAuth HTTP 分析基盤 CDN Terraform IaaS HCL Webpack Vue.js BigQuery Middleman CMS AWS PNG Laravel Selenium OAuth OpenAPI GitHub UML GCP TypeScript SQL Hanami Document SVG AsciiDoc Pandoc DocBook Develop Jekyll macOS Node.js Vite Heroku Transformer AI Data Cloud Wasm