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
800
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
430
いかにしてテスト文化を醸成させたか.pdf
takayukihayashi
3
1.4k
リーダー、マネージャーが存在しない開発組織のつくり方
takayukihayashi
0
28k
E2Eテスト駆動開発実践記_-_Web用.pdf
takayukihayashi
2
3.3k
KubernetesとGaugeを活用したTDD開発事例
takayukihayashi
0
830
FlutterとAngularDartを DIとClean Architectureで いい感じにする
takayukihayashi
3
2.1k
Gaugeによるe2eテスト
takayukihayashi
5
28k
Dartエコシステムの紹介
takayukihayashi
2
560
Other Decks in Technology
See All in Technology
カメラを用いた店内計測におけるオプトインの仕組みの実現 / ai-optin-camera
cyberagentdevelopers
PRO
1
120
[AWS JAPAN 生成AIハッカソン] Dialog の紹介
yoshimi0227
0
140
omakaseしないための.rubocop.yml のつくりかた / How to Build Your .rubocop.yml to Avoid Omakase #kaigionrails
linkers_tech
3
590
【LT】ソフトウェア産業は進化しているのか? -Javaの想い出とともに- #jjug_ccc
takabow
0
160
なんで、私がAWS Heroに!? 〜社外の広い世界に一歩踏み出そう〜
minorun365
PRO
6
1k
【技術書典17】OpenFOAM(自宅で極める流体解析)2次元円柱まわりの流れ
kamakiri1225
0
120
Commitment vs Harrisonism - Keynote for Scrum Niseko 2024
miholovesq
6
800
GitHub Universe: Evaluating RAG apps in GitHub Actions
pamelafox
0
170
新R25、乃木坂46 Mobileなどのファンビジネスを支えるマルチテナンシーなプラットフォームの全体像 / cam-multi-cloud
cyberagentdevelopers
PRO
1
120
プロダクトチームへのSystem Risk Records導入・運用事例の紹介/Introduction and Case Studies on Implementing and Operating System Risk Records for Product Teams
taddy_919
1
140
生成AIの強みと弱みを理解して、生成AIがもたらすパワーをプロダクトの価値へ繋げるために実践したこと / advance-ai-generating
cyberagentdevelopers
PRO
1
170
【若手エンジニア応援LT会】AWSで繋がり、共に成長! ~コミュニティ活動と新人教育への挑戦~
kazushi_ohata
0
150
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
How STYLIGHT went responsive
nonsquared
95
5.2k
GraphQLの誤解/rethinking-graphql
sonatard
66
9.9k
Designing for humans not robots
tammielis
249
25k
Ruby is Unlike a Banana
tanoku
96
11k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.2k
The Cult of Friendly URLs
andyhume
78
6k
Side Projects
sachag
452
42k
For a Future-Friendly Web
brad_frost
175
9.4k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
A designer walks into a library…
pauljervisheath
202
24k
RailsConf 2023
tenderlove
29
880
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独自の言語仕様とかはあんまりないので。