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
810
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
徹底比較!HA Kubernetes ClusterにおけるControl Plane LoadBalancerの選択肢
logica0419
2
110
AI機能の開発運用のリアルと今後のリアル
akiroom
0
170
20241031_AWS_生成AIハッカソン_GenMuck
tsumita
0
120
【技術書典17】OpenFOAM(自宅で極める流体解析)2次元円柱まわりの流れ
kamakiri1225
0
250
SNSマーケティングに革新! ABEMA サッカー動画切り出しを生成AIで自動化し、業務効率化を狙う! / abema-ai-marketing
cyberagentdevelopers
PRO
1
120
Intuneお役立ちツールのご紹介
sukank
3
360
What to do after `laravel new`
mattstauffer
0
120
家具家電付アパートの冷蔵庫をIoT化してみた!
scbc1167
0
140
Forget efficiency – Become more productive without the stress
ufried
0
210
リンクアンドモチベーション ソフトウェアエンジニア向け紹介資料 / Introduction to Link and Motivation for Software Engineers
lmi
4
290k
VPC間の接続方法を整理してみた #自治体クラウド勉強会
non97
1
1k
AWS reInvent 2024 関西組 事前勉強会
shinyayamada
0
130
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
Into the Great Unknown - MozCon
thekraken
32
1.5k
Typedesign – Prime Four
hannesfritz
39
2.4k
What's new in Ruby 2.0
geeforr
343
31k
Fireside Chat
paigeccino
32
3k
The Invisible Side of Design
smashingmag
297
50k
Navigating Team Friction
lara
183
14k
The Cult of Friendly URLs
andyhume
78
6k
Become a Pro
speakerdeck
PRO
24
5k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Keith and Marios Guide to Fast Websites
keithpitt
409
22k
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独自の言語仕様とかはあんまりないので。