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
910
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
470
いかにしてテスト文化を醸成させたか.pdf
takayukihayashi
3
1.5k
リーダー、マネージャーが存在しない開発組織のつくり方
takayukihayashi
1
28k
E2Eテスト駆動開発実践記_-_Web用.pdf
takayukihayashi
2
3.4k
KubernetesとGaugeを活用したTDD開発事例
takayukihayashi
0
920
FlutterとAngularDartを DIとClean Architectureで いい感じにする
takayukihayashi
3
2.2k
Gaugeによるe2eテスト
takayukihayashi
5
28k
Dartエコシステムの紹介
takayukihayashi
2
620
Other Decks in Technology
See All in Technology
LLMで構造化出力の成功率をグンと上げる方法
keisuketakiguchi
0
370
相互運用可能な学修歴クレデンシャルに向けた標準技術と国際動向
fujie
0
200
帳票構造化タスクにおけるLLMファインチューニングの性能評価
yosukeyoshida
1
230
AIエージェントを現場で使う / 2025.08.07 著者陣に聞く!現場で活用するためのAIエージェント実践入門(Findyランチセッション)
smiyawaki0820
6
580
みんなのSRE 〜チーム全員でのSRE活動にするための4つの取り組み〜
kakehashi
PRO
2
140
Perlアプリケーションで トレースを実装するまでの 工夫と苦労話
masayoshi
1
410
Findy Freelance 利用シーン別AI活用例
ness
0
290
2時間で300+テーブルをデータ基盤に連携するためのAI活用 / FukuokaDataEngineer
sansan_randd
0
130
ロールが細分化された組織でSREと協働するインフラエンジニアは何をするか? / SRE Lounge #18
kossykinto
0
150
【CEDEC2025】『Shadowverse: Worlds Beyond』二度目のDCG開発でゲームをリデザインする~遊びやすさと競技性の両立~
cygames
PRO
1
290
僕たちが「開発しやすさ」を求め 模索し続けたアーキテクチャ #アーキテクチャ勉強会_findy
bengo4com
0
1.9k
【OptimizationNight】数理最適化のラストワンマイルとしてのUIUX
brainpadpr
0
200
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Git: the NoSQL Database
bkeepers
PRO
431
65k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Being A Developer After 40
akosma
90
590k
Thoughts on Productivity
jonyablonski
69
4.8k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
332
22k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.5k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6k
Embracing the Ebb and Flow
colly
86
4.8k
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独自の言語仕様とかはあんまりないので。