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
900
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
460
いかにしてテスト文化を醸成させたか.pdf
takayukihayashi
3
1.5k
リーダー、マネージャーが存在しない開発組織のつくり方
takayukihayashi
0
28k
E2Eテスト駆動開発実践記_-_Web用.pdf
takayukihayashi
2
3.4k
KubernetesとGaugeを活用したTDD開発事例
takayukihayashi
0
910
FlutterとAngularDartを DIとClean Architectureで いい感じにする
takayukihayashi
3
2.2k
Gaugeによるe2eテスト
takayukihayashi
5
28k
Dartエコシステムの紹介
takayukihayashi
2
610
Other Decks in Technology
See All in Technology
25分で解説する「最小権限の原則」を実現するための AWS「ポリシー」大全
opelab
9
2.1k
DenoとJSRで実現する最速MCPサーバー開発記 / Building MCP Servers at Lightning Speed with Deno and JSR
yamanoku
1
260
~宇宙最速~2025年AWS Summit レポート
satodesu
1
1k
第9回情シス転職ミートアップ_テックタッチ株式会社
forester3003
0
120
ハノーバーメッセ2025座談会.pdf
iotcomjpadmin
0
140
AIエージェント最前線! Amazon Bedrock、Amazon Q、そしてMCPを使いこなそう
minorun365
PRO
10
3.5k
Claude Code どこまでも/ Claude Code Everywhere
nwiizo
53
31k
[TechNight #90-1] 本当に使える?ZDMの新機能を実践検証してみた
oracle4engineer
PRO
3
140
IIWレポートからみるID業界で話題のMCP
fujie
0
700
VISITS_AIIoTビジネス共創ラボ登壇資料.pdf
iotcomjpadmin
0
140
Perk アプリの技術選定とリリースから1年弱経ってのふりかえり
stomk
0
120
Абьюзим random_bytes(). Фёдор Кулаков, разработчик Lamoda Tech
lamodatech
0
260
Featured
See All Featured
Bash Introduction
62gerente
614
210k
What's in a price? How to price your products and services
michaelherold
245
12k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Balancing Empowerment & Direction
lara
1
340
Designing Experiences People Love
moore
142
24k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
137
34k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.8k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
4
200
Rebuilding a faster, lazier Slack
samanthasiow
81
9k
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独自の言語仕様とかはあんまりないので。