文体をですます調に変えます DartからJavaScriptライブラリのAPIを呼び出す処理を書くことがまれにあります。まれなのですが、そのたびに書き方を忘れたり罠にはまったりするので、ここにメモを残して思い出しやすくしておきます。 dartdevcでは動作するコードが、dart2jsでは実行時エラーになる問題 https://github.com/dart-lang/sdk/issues/33134 いきなり深刻な問題を取り上げますが、そもそもこの文章を書く気になったのはこの問題に気づいて解決するまでに数時間も費やしてしまったからです。 DartのJavaScriptへのコンパイル手法は大別して２つあります。開発時にはdartdevcコンパイラーでデバッグのしやすさを優先したかたちのJavaScriptにコンパイルし、デプロイ時にはdart2jsコンパイラーで実行効率を優先したかたちのJ

Web特有の事情はどう解決するのかに興味があって内部構造などを調べていた。 開発が進むにつれて実装はどんどん進化して問題解決されていくだろうし、現段階のこの情報の正確性も保証しない。個人のメモを公開しているだけなので鵜呑みにはしないようにしてほしい。 あと、Preview版が公開された後にFAQが追加されているので読んでおくほうがいい。 https://github.com/flutter/flutter_web/blob/master/docs/faq.md ニュース まとめ https://medium.com/flutter/a-roundup-of-flutter-news-at-google-i-o-453bb3249981 Flutter Webの開発体験とPreview版段階の技術的制約についての解説 https://medium.com/flutter-nyc/under-

Pragmatic State Management in Flutter (Google I/O'19) Flutterで状態管理をする方法についてのセッション。去年も同じペアで同じテーマのセッションがあった。 https://www.youtube.com/watch?v=d_m5csmrf7I&list=PLjxrf2q8roU2no7yROrcQSVtwbYyxAGZV&index=4&t=0s ひとつのWidget Treeしかないなどの単純なアプリの場合をのぞき、アプリの状態管理は重要な問題となる。 Agenda 状態管理の重要性 さまざまな取り組みの推移 Flutterでの実践的な状態管理方法 論点 理解しやすく読みやすく保守しやすいこと テストしやすいこと 実行性能（パフォーマンス）が高いこと 残念ながら万能の解決策はないので、あなたのユースケースのなかでエッジケースを考慮

Google I/O 19には数種類Dart関連セッションがあり、Youtubeに公開されている。その視聴メモ。まずはひとつめ。 Dart: Productive, Fast, Multi-Platform - Pick 3 (Google I/O'19) https://www.youtube.com/watch?v=J5DQRPRBiFI&list=PLjxrf2q8roU2no7yROrcQSVtwbYyxAGZV&index=6&t=0s Dart入門者向けののSessionだった。 Dart 1時代から一貫して、総合的な生産性にフォーカスして言語とライブラリ、エコシステムに投資 3つの側面 Productive Fast Multi Platform Productive Dartはマルチパラダイムプログラミング言語。 KotlinやSwiftと同じC系構文。 Dartはオブジェ

2019年初に2018年のDartを振り返ってみる。僭越ながらDart advent calendar 25日目の記事だが、大幅に超過して新年になってしまった。申し訳ない。そして大した内容ではない。個人の回顧です。 Dart 2のリリースと、Dart 1の回顧 Dart 1を回顧するに、以下の特徴をもった言語だったと思う。 VMを活かした動的言語であること VM前提の動的言語の表現力、進化を妨げないための、選択換装可能な型システム (言語が型システムに依存するのではなく、型システムが言語に依存する) エディタ、デバッガ（等々）が統合された開発体験などの、Smalltalkを目標とした環境の提供（が目標） ライブラリや開発環境などを整備し、言語のカタログスペックでなく実際のDeveloper Experienceが優れていること 世の中の圧倒的多数を占めるCとJavaのプログラマーに学習コス

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? きっと皆様はじめまして まもなくプログラミング(学習)歴2年になります、ycrackといいます。以後よろしゅう DartにはFlutterが話題になった頃から触り始めましたが、少し前まで [ Dart Flutter 違い | 検索 ] な状態だったので、拙いのはお許しを… (Qiita自体慣れてないのもある) TL;DR Dartはいいぞ Fast (はやい) Simple (わかりやすい) Multiple (真のクロスプラットフォーム／他の言語のいいとこ取り) Beautiful (FlutterでキレイなUI) Promisin

Dartアドベントカレンダー14日めの記事 Flutter経由でDartの魅力に気づいた人が増えてきているので、ここでAngularDartにもすこしでも興味を持ってもらって、使い始める人が増えると嬉しいと思い、この記事を書いた。 網羅的な解説をする余裕がないので、覚え書きの質で書きちらす。また、具体的な機能の特徴をコードを交えて解説するものではない。それに関しては、https://webdev.dartlang.org/を参照されたい。 なお、よく知られたTypeScript版のAngularとの比較が多くなるため、ここでは便宜的にそれをAngularTSと呼称して、AngularDartと区別する。 Hummingbird (Flutter Web)が発表されたけど Hummingbird (Flutter Web)が発表されたが、まだオープンソースにもなっておらず評価するには早すぎる

あまり知られていないと思うが、実は、package:asyncにResultライブラリが存在する。 https://pub.dartlang.org/documentation/async/latest/async/Result-class.html Result Resultのソースコードに端的に表現されている。やっていることはこれだけ。 /// Creates a `Result` with the result of calling [computation]. /// /// This generates either a [ValueResult] with the value returned by /// calling `computation`, or an [ErrorResult] with an error thrown by /// the call. facto

先日開催されたFlutter LiveでFlutter for Webであるところの「Hummingbird」が発表されました。 Google、FlutterアプリをWebアプリへ変換する「Hummingbird」発表。Web開発言語としてDartが帰ってくる。Flutter Live '18 Hummingbirdについてどういったメカニズムで動くのか気になったので調べていたところ、下記に詳細な解説がありました。 Hummingbird: Building Flutter for the Web この記事の二番煎じではあるのだけど、↑の原文をざっくりと読んでみてだいたいわかってきたので自分なりに雑に要約してまとめておきます。 Flutter on Webを実現するために必要になること Dartをweb用にコンパイルすること 既存のFlutterの資産のうちWeb用のFlutterに実装す

Google、FlutterアプリをWebアプリへ変換する「Hummingbird」発表。Web開発言語としてDartが帰ってくる。Flutter Live '18 Flutterのプラットフォーム言語であるDartは、もともとJavaScriptの代替を目指して開発し、しかし予想より普及に成功しなかったことでJavaScriptをターゲットとするトランスパイラへポジションチェンジをしました。 しかしそれも日の目を見ず、再起動後のDart 2ではFlutterとともにiOSとAndroidのネイティブアプリケーションのための開発言語となっています。 しかしDart 2とFlutterがふたたび、JavaScriptの代替としてWebアプリケーションを開発する言語という位置づけに帰ろうとしています。 Googleは12月4日、ロンドンで開催したイベント「Flutter Live '18」で、

本日Londonで行われているFlutter LiveのキーノートがYoutubeでライブ配信されていたので、キーノートの概要を手短にレポートする。 ちなみに、Flutterのプロダクトマネージャーがキーノートと同内容を公式ブログに寄稿しているので、英語を苦にしなければ原文を読めば内容は詳細に網羅されている。 Flutter 1.0: Google’s Portable UI Toolkit Flutterとは Flutterは、美しいUIのアプリをシングルコードベースでクロスプラットフォーム開発できるUIツールキット。古めの端末でも高パフォーマンスで動作する。Stateful hot reloadingの恩恵により、状態を維持したままコードの変更が即時に開発中のアプリに反映される。（SmalltalkのLive programming環境に少しだけ近づいてきた）。ネイティブ環境に依存する

本日のFlutter Liveのキーノートでは、Flutter 1.0 GA化を始め、たくさんのエキサイティングな発表がされたが、その中でも一番の驚きは、このキーノートの最後の、FlutterでWebアプリを開発可能にするという、Hummingbirdの発表だろう。 Hummingbird GAの次の構想として、AndroidとiOSに加えて、Windows, macOS, ChromeOS, ラズベリーパイなどのネイティブ環境での統一したUIツールキットとなる構想が発表されたことは予想の範囲内だが、Webアプリに関してはWebブラウザーという独特の環境で制約が強いため、Webアプリまでを対象にする構想がこの日に明らかにされたことは全く予想外だった。 これによりFlutterは、モバイルアプリ用途を超えた、モバイルOSでもデスクトップOSでもWebブラウザーでもシングルコードベースで動作す

公式ではなくコミュニティベースのソリューションだが、興味深い記事だったので紹介。 https://medium.com/flutter-community/flutter-on-desktop-a-real-competitor-to-electron-4f049ea6b061 以下、上記記事の要点。 Androidエミュレーターを立ち上げないので、開発速度は更に高速。 デスクトップアプリなので、当然ウインドウは可変。まるでWebブラウザのような感覚のレスポンシブデザイン。もちろんウインドウの枠をドラッグで自由に変更できる。 Hot reloadingとdebuggingも従来どおり可能。 RAMの使用量に圧倒的な差。エミュレーターは1GB使うのに対し、こちらは100MB。 Androidエミュレーターでもデスクトップのウインドウでも動くChatデモの動画あり。 ホバーやカーソルの種類の変

Mixinに馴染みがない人が多いようなので、解説する。 Mixinとは Mixinとは、fieldやproperty, slotなどと呼ばれている状態 (state)、およびmethodなどと呼ばれている振る舞い (behavior) の集合を定義し、それをclassに適用して拡張するもの。関数スタイルのプログラミングにおける関数の合成のように、classを合成する。 主に、Classベースのオブジェクト指向言語において、(単一)継承の階層という制約では表現することが難しいデザインには、Mixinを適用する。 主な言語における採用事例 Racketなどの、Lisp familyの一部 Smalltalk family Scala Ruby Sass 言語レベルで採用していたり（Dart, Scala, Ruby等)、あるいはデザインパターンのひとつとして紹介されていたり（JavaScrip

FlutterのウリのひとつであるHot Reload、この体験がAngularDartでも可能となっていた。WebでもHot Reloading。 dartファイルの編集 htmlファイル(angular template)の編集 cssの編集 これで、とくにHTMLとCSSの編集がかなり捗るようになる。 --hot-reloadオプションをつけて起動するだけで、その他の設定を変えずに有効になった。 webdev serve --hot-reload 従来のLive Reloadでは、コードの編集からブラウザのリフレッシュを経てのコードの反映までに5秒から10秒かかり、ブラウザのタブがリロードされることでランタイムの状態が一新されていたが、Hot Reloadでは0.5秒から2秒くらいで差分更新され、その他のランタイムの状態が維持される。 ただしまだ不安定な印象。手元のかなり大きなコード

JSに似て読み書きしやすいシンタックスに加え、型推論やジェネリクスなど魅力的な機能を備えたDart。JavaScriptに変換する仕組みがある点や、iOS、Android、Webの3大Clientで使える言語を目指して設計されている点を踏まえると、DartでのWebフロントエンド開発も夢ではないように感じます。 ただ、言語がよければすぐに使えるというわけではなく、使いやすさや開発環境も大切な要素の1つです。 昨今のWebフロントエンドはできることが増え、それに伴いエコシステムもとても進歩していて、複雑で大規模な開発でもスムーズに行えるようになってきている印象です(1番最初の環境構築が大変とよく言われますが、その大変さも徐々に緩和されてきていると思います)。 そこで、DartでのWebフロントエンド開発がどの程度現実的なのかを「エコシステム」という観点でまとめてみました。各々のツールの簡単な

残念なことに、DartのコアライブラリにImmutable Collectionライブラリは無いが、BuiltCollection, BuiltValueパッケージを使えばImmutable Collectionを扱うことができる。ここでは、それらの使い方の基本を簡単に解説していく。 今回のサンプルコード https://github.com/ntaoo/built_collection_value_practice Mutable Collectionの問題 DartのコアライブラリのListは他のほとんどの言語と同じくmutable List。 class C { C(this.name); String name; } test('Standard List is mutable.', () { final c = C('a'); final l1 = [c]; final l2 =