Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
AngularDartでDart入門
Search
takayuki-hayashi
August 24, 2019
Technology
1
850
AngularDartでDart入門
ODC2019のLearn Languageにて話をした資料です。
takayuki-hayashi
August 24, 2019
Tweet
Share
More Decks by takayuki-hayashi
See All by takayuki-hayashi
E2Eの過去・現在・未来 そしてE2Eにおいて重要なこと
takayukihayashi
1
450
いかにしてテスト文化を醸成させたか.pdf
takayukihayashi
3
1.4k
リーダー、マネージャーが存在しない開発組織のつくり方
takayukihayashi
0
28k
E2Eテスト駆動開発実践記_-_Web用.pdf
takayukihayashi
2
3.3k
KubernetesとGaugeを活用したTDD開発事例
takayukihayashi
0
870
FlutterとAngularDartを DIとClean Architectureで いい感じにする
takayukihayashi
3
2.2k
Gaugeによるe2eテスト
takayukihayashi
5
28k
Dartエコシステムの紹介
takayukihayashi
2
590
Other Decks in Technology
See All in Technology
4th place solution Eedi - Mining Misconceptions in Mathematics
rist
0
150
1行のコードから社会課題の解決へ: EMの探究、事業・技術・組織を紡ぐ実践知 / EM Conf 2025
9ma3r
11
3.9k
Change Managerを活用して本番環境へのセキュアなGUIアクセスを統制する / Control Secure GUI Access to the Production Environment with Change Manager
yuj1osm
0
100
入門 PEAK Threat Hunting @SECCON
odorusatoshi
0
160
OSS構成管理ツールCMDBuildを使ったAWSリソース管理の自動化
satorufunai
0
650
手を動かしてレベルアップしよう!
maruto
0
220
JAWS DAYS 2025 アーキテクチャ道場 事前説明会 / JAWS DAYS 2025 briefing document
naospon
0
110
【詳説】コンテンツ配信 システムの複数機能 基盤への拡張
hatena
0
260
PHPで印刷所に入稿できる名札データを作る / Generating Print-Ready Name Tag Data with PHP
tomzoh
0
190
日経のデータベース事業とElasticsearch
hinatades
PRO
0
240
30→150人のエンジニア組織拡大に伴うアジャイル文化を醸成する役割と取り組みの変化
nagata03
0
180
Aurora PostgreSQLがCloudWatch Logsに 出力するログの課金を削減してみる #jawsdays2025
non97
1
220
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
For a Future-Friendly Web
brad_frost
176
9.6k
Automating Front-end Workflow
addyosmani
1368
200k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.1k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
640
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Transcript
AngularDartでDart入門
自己紹介 • 林 尚之(はやし たかゆき) @t_hyssh • 株式会社ユーザベース ◦ SPEEDA事業CTO
• Agile(XP)、ペアプロ、TDD、DDD等が好き • 最近使ってる言語はKotlin、Ocaml、Dartあたり ◦ Dartに初めて触れたのはおそらく 2013年くらいだったはず
前提 今日は下記のような人達を想定して話をさせてもらおうと考えています • Dart以外に第一言語を持っている • その上でDartに興味がある • AngularDartはよく知らない
今日は「Learn Languages」の枠における 「AngularDartでDart入門」 なのでAngularDartよりもDart自体に関して言及すべ きかなと思っているのですが
AngularDartについてほとんど知らない人も多いかと 思うので・・・
AngularDart • AngularJSにインスパイアされたDart版Angularを開発(2014年くらい) • AngularJSの2系(現Angular)の開発はTSにて開発し、Dart版もTSからトランスパイルする事が決定 • 頑張って2系の開発をしていたが、Angular自体の開発者は3つの言語(TypeScript、JavaScript、Dart) に精通していなければならないため、なかなか開発が思うように進まない( Bridge用のクラスとかも大量 に用意しないといけなかった)
• TS版とDart版は別々の道を進み、それぞれの言語の特性に合わせて開発を進める事が決定( 2017 年)。これによりTS版およびDart版それぞれで不要なクラスを削除したり、適切なパフォーマンスチューニ ングが可能になり現在に至る。 • 現在においてはTS版Angularとは思想は同じだがまったく別のフレームワーク(仕様)といった感じ
AngularDartを始めるには 1. Dart SDKをダウンロードしてPATHを通す 2. pubコマンドを実行してwebdevをインストール a. pub global activate
webdev 3. Intellijとかで雛形作成 4. 2でインストールしたwebdevを使って起動 a. webdev serve (開発モードで起動) b. webdev serve --auto restart (Live reloadを有効化)
Flutterもそうですが、AngularDartもサンプルを実行 するまでの手順で迷うことがない(良い意味で選択肢 が無い)
なのでDartを学んでみたい人にとって敷居は高くない と思うので気軽に試せると思います
話す事 • アノテーション • Generics • Mixin • async /
await • Null-Aware Operator • その他 「Learn Languages」なので可能な限り言語仕様の紹介を AngularDartでやってみます。
AngularDartでアノテーション
アノテーション • 記法と使い方はJavaやKotlin等と同じ • 独自アノテーションの定義も可能 • ただし実行時にアノテーションを読み取る には”リフレクション(mirrorパッケージ)”が 必要 •
現時点では実行時のコードにてリフレク ションを使用するのは推奨されていない • 理由はトランスパイル後の JSファイルが肥 大化する上、実行速度に影響が出るため
AngularDartでGenerics
Generics • 定義方法はほぼJava、Kotlinと同じ • <T extends Hoge>のように上限境界が指定可能 • <T extends
Hoge & Foo>のように複数の上限境 界は指定出来ない • 下限境界は指定出来ない • GenericsはJavaのような非変(nonvariant)では なく共変(covariant) • 実行時でもGenericsの情報は持っている ◦ 下記のようなチェックが可能
AngularDartでMixin
Mixin • mixinキーワードか、abstract classで定義したもの をwithでMixin可能 • 共通の振る舞いをmixinに切り出してComponent の柔軟性を高めることが可能 • abstract
classの場合はそのabstract classが親ク ラスを継承していない事が前提 • 以前はextendsを書かなければwithが出来なかっ たが現在は省略可能
AngularDartで async / await
async / await • 使い方はTypeScriptと同じ • 非同期処理をあたかも同期処理のように記述可能 • サーバーとの通信処理の部分等でよく使う •
←をasync / awaitを使わずに書くと↓ thenの部分で複数行の処理があったり、その結果を 基にさらに非同期処理が必要な場合に可読性が落ち る可能性がある
Null-Aware Operator
Null-Aware Operator • Nullの可能性のあるオブジェクトに対して Null チェックの処理が不要 (いわゆるNull安全ではない)
その他
おまけ - その① AngularDartに関して • DIとChange Detection(コンポーネントの状態変更検知の機能)を上手く組み合わせる事で凄く自然に 単方向データフロー且つClean Architectureを実現可能。 ◦
BLoCパターンを使わなくても Flutterとのロジック共有が可能( Flutter側ではScoped ModelかProviderを使う) ↓は以前に自分が発表した資料です https://speakerdeck.com/takayukihayashi/fluttertoangulardartwo-ditoclean-architecturede-iigan-zinisuru • アプリケーション開発者の生産性を意識して開発が進んでいる。 ◦ Live reloadや、テンプレート側でのコード保管、ビルドのスピード等 • マテリアルデザインを実現する angular-componentsという公式ライブラリがある ◦ Datepicker等は素晴らしいが Datatableがまだない • 参考サイト ◦ https://angulardart.dev/tutorial (公式のチュートリアル、ただし英語 )
おまけ - その② 今後のDartに関して • Non Null By Defaultが検討中 ◦
少しずつ段階的に取り込んでいく予定 ◦ 開発者がモードを選択出来るようにする ◦ 時期は未定 • 言語仕様だったり今後の動向が気になる人は下記リポジトリを見ておくと楽しめると思います ◦ https://github.com/dart-lang/language ▪ なぜ仕様の変更をするのか、同様の事を他の言語ではどのように実現しているか、どうやって実現する かが詳しくまとまっているので楽しめるんじゃないかと思います。
最後に • AngularDartやFlutterは動かして試すまでに迷いがないので試しやすいと思います。 • Dartのコアチームも周辺ツールを充実させる事が大事だという考えで開発をしているので、必要なライブ ラリー等は公式チームがほとんど揃えてくれているのも試す上で重要なポイントかなと。 • 個人的にはサーバーサイドのプログラムを書く事がほとんどの人とかにおすすめです。 • 逆にすでにTSとかでフロントをゴリゴリ書いてますという人にはおすすめしないです。
◦ Dartでしか出来ない事とか、 Dart独自の言語仕様とかはあんまりないので。