〜なんだかいけそうな気がする〜Angular入門

Slide 1

Slide 1 text

ʙͳΜ͔͍͚ͩͦ͏ͳؾ͕͢Δʙ NGULAR 鯳鰼鰙鯻鰳鯵鰯鰊猳 ೖ໳

Slide 2

Slide 2 text

*CXG7WUG#PIWNCT!

Slide 3

Slide 3 text

ʙͳΜ͔͍͚ͩͦ͏ͳؾ͕͢Δʙ NGULAR ೖ໳ 昨年9⽉にリリースされたAngular(2)。⼀ମどんなものだろう？という⽅も多いかと思います。 Angularの基本的な機能を⼀巡りして、「なんだか今⽇いけそうなؾがする」ようなൃ表を⽬指したいと思います。また、業務で࣮際に使う際の話もしたいと思います。鯽鱄鰡鰼鰏鯵

Slide 4

Slide 4 text

9*1 9*#6 9*; *19 /QTG 鰯鰙鰲 GENDA ࣗݾ঺հ "OHVMBSͱ͸ ͳͥ"OHVMBSΛબͿͷ͔ "OHVMBSҰ८Γ ͦͷଞ͍Ζ͍Ζ ·ͱ·Δ͔ͳʂʁ

Slide 5

Slide 5 text

9*1 9*#6 9*; *19 /QTG 鰯鰙鰲 GENDA ࣗݾ঺հ "OHVMBSͱ͸ ͳͥ"OHVMBSΛબͿͷ͔ "OHVMBSҰ८Γ ͦͷଞ͍Ζ͍Ζ ·ͱ·Δ͔ͳʂʁ

Slide 6

Slide 6 text

ࣗݾ঺հ 5[UVGO#TEJKVGEV 鰄鰇鰂鰈鱄鯵鰒 0COG 鱻鲑鱔鲍鲂⹻ㅕ䃩鰰 #IG 5[UVGO#TEJKVGEV ,QD ,CXC 5MKNN .KMG

Slide 7

Slide 7 text

9*1 9*#6 9*; *19 /QTG 鰯鰙鰲 GENDA ࣗݾ঺հ "OHVMBSͱ͸ ͳͥ"OHVMBSΛબͿͷ͔ "OHVMBSҰ८Γ ͦͷଞ͍Ζ͍Ζ ·ͱ·Δ͔ͳʂʁ

Slide 8

Slide 8 text

8IBU`T"OHVMBS Angularは、Googleが開ൃを主導する「モダンWeb」のためのアプリケーション開ൃフレームワークです。 AngularJS（version1）の後ܧとして、2016年9⽉にリリースされました。 AngularはAngularJSの後ܧですが、互換性はありません。「Angular 2 Migration」より引⽤ http://www.slideshare.net/WilliamMarq/angular-2-migration-jhipster-meetup-6

Slide 9

Slide 9 text

Angular2 Angular 8IBU`T"OHVMBS Angular 2の正式名শは「Angular」です。Angular 4はAngular 2と互換性を維持し、そのまま移⾏できる予定です。 Angular 2から3を⾶ばしてAngular 4になるのは、Angular Routerがメジャーバージョンアップで4になり、混ཚしてしまうからです。バージョン番߸のポリシーとして「セマンティックバージョンニング（Semantic Versioning）」を採⽤するとのこと。 6カ⽉に⼀度メジャーバージョンアップを⾏う予定らしいです。 ʰ"OHVMBSͷ࣍όʔδϣϯ͸ʮ"OHVMBSʯʹɺ೥݄ϦϦʔεɻ ࠓޙ͸୯ʹʮ"OHVMBSʯͱݺΜͰ΄͍͠ʱ http://www.publickey1.jp/blog/16/angularangular_420173angular.html

Slide 10

Slide 10 text

9*1 9*#6 9*; *19 /QTG 鰯鰙鰲 GENDA ࣗݾ঺հ "OHVMBSͱ͸ ͳͥ"OHVMBSΛબͿͷ͔ "OHVMBSҰ८Γ ͦͷଞ͍Ζ͍Ζ ·ͱ·Δ͔ͳʂʁ

Slide 11

Slide 11 text

ɾ౷Ұੑͷ͋Δ࢖͍΍͍͢ϢʔβΠϯλϑΣεͰ͋Δ͜ͱ ɾϞόΠϧ୺຤͔Βͷར༻΋ՄೳͰ͋Δ͜ͱ ɾཉ͍͠৘ใʹ௚઀ΞΫηεͰ͖Δը໘ߏ੒Ͱ͋Δ͜ͱ 䰿鰠峡鰔鰗鯵鰼 ⃫峹茒⇗鱃䅡鰐鰊鰪鯾鰑鰙 ඼࣭ཁ݅ ∼とある⼤規模プロジェクトにて∼ 8IZ"OHVMBS

Slide 12

Slide 12 text

8IZ"OHVMBS ɾϑϩϯταΠυͷεΩϧ͕ෆ଍͍ͯ͠ΔͷͰɺ ɹҰࣜἧͬͨF/WΛ༻͍͍ͨ OG ɾϞόΠϧ୺຤͔Βͷར༻͔ΒFlex͸ީิ֎ɻ ɾPC୺຤Ͱͷૢ࡞ੑΛߟ͑ΔͱɺSPA͕๬·͍͠ɻ ɾνʔϜߏ੒ͱͯ͠JavaΤϯδχΞ͕େ൒ NGULAR ∼とある⼤規模プロジェクトにて∼

Slide 13

Slide 13 text

5ZQF4DSJQU + Angularはいくつかの⾔語をサポートしていますが、TypeScriptでの開ൃが推঑です。 TypeScriptはJavaScriptのトランスコンパイラです。TypeScriptのソースコードからJavaScriptのソースコードを⽣成します。⾔語機能がJavaやC#などに似通っており、習得コスト低減が期待出དྷます。 TypeScriptを⽤いることで、型によるサポートが受けれます。型があることで、IDEのサポートも充࣮しています。

Slide 14

Slide 14 text

0OFGSBNFXPSL One framework. Mobile & desktop. •データバインディング •DI（依存性解決） •フォーム •ルーティング •モジュール Angularのサイトを訪れると、「One framework. Mobile & desktop」とあります。 AngularはモダンWebアプリケーションを構築するための⼀通りの機能がἧっています。また、Mobileとあるとおり、端末性能の低いMobile端末でもܰ快に動作するよう意識して設計されています。 •コンポーネントスタイル •HTTP Client •テスト •and more…

Slide 15

Slide 15 text

9*1 9*#6 9*; *19 /QTG 鰯鰙鰲 GENDA ࣗݾ঺հ "OHVMBSͱ͸ ͳͥ"OHVMBSΛબͿͷ͔ "OHVMBSҰ८Γ ͦͷଞ͍Ζ͍Ζ ·ͱ·Δ͔ͳʂʁ

Slide 16

Slide 16 text

)PXVTFS"OHVMBS IUUQTBOHVMBSJPEPDTUTMBUFTUHVJEFBSDIJUFDUVSFIUNM Angularは⾮常に⼤きなF/Wです。モジュール、コンポーネント、データバインディング、パイプ、サービス、DI、ルーティングなどなど、⼤規模アプリケーションを開ൃする上で必要な機能が多く⽤意されています。その機能の多さにѹ倒されるかもしれません。とはいえ、恐る必要はありません。開ൃを始める上でのサポートツールが豊富に⽤意されていますので、簡୯に開ൃを始めることが出དྷます。

Slide 17

Slide 17 text

"OHVMBS$-* OQNJOTUBMMHBOHVMBSDMJ OHOFXNZBXFTPNFBQQ OHTFSWF Angular-CLIを⽤いると、すぐにAngularアプリケーションの開ൃを始めることが出དྷます。 Angular-CLIを使って、Angularの主要機能を⽤いた簡୯なアプリケーションを作ってみましょう！上のコマンドでAngular-CLIのインストール、アプリケーションの作成、そして࣮⾏が出དྷます。 02/鰘伂☹ 鱈鲗鱝鱬鯮鲏 ⎶鰟倁㥕鰺鰈鯵鱆鱻鲎

Slide 18

Slide 18 text

"OHVMBS$-* IUUQMPDBMIPTU `ng serve` で開ൃ⽤Webサーバーが4200番ポートで起動します。上記URLにアクセスすると、「app works!」と表⽰されます。アプリが無事動いています。動くAngularアプリケーションがもう完成しました！

Slide 19

Slide 19 text

$PNQPOFOU NBJOUT "QQ.PEVMF "QQ$PNQPOFOU bootstrap bootstrap QMBUGPSN#SPXTFS%ZOBNJD CPPUTUSBQ.PEVMF "QQ.PEVMF NBJOUT !/H.PEVMF \ CPPUTUSBQ<"QQ$PNQPOFOU> ^ FYQPSUDMBTT"QQ.PEVMF\^ BQQNPEVMFUT アプリケーション起動ॲ理の流れは上のਤのとおりです。最初にmain.tsが呼び出され、起動するモジュールとしてAppModuleクラスが指定されてます。 AppModuleクラスの中では、デコレータで最初に起動するコンポーネントとしてAppComponentが指定されています。デコレータとはクラスのメタデータを定義するもので、Javaでいうところのアノテーションです。 54 54

Slide 20

Slide 20 text

BQQDPNQPOFOUUT BQQDPNQPOFOUIUNM !$PNQPOFOU \ TFMFDUPSBQQSPPU UFNQMBUF6SMBQQDPNQPOFOUIUNM TUZMF6SMT<BQQDPNQPOFOUDTT> ^ FYQPSUDMBTT"QQ$PNQPOFOU\ UJUMFBQQXPSLT ^ I \\UJUMF^^ I CPEZ BQQSPPU-PBEJOHBQQSPPU CPEZ IUNM JOEFYIUNM $PNQPOFOU AppComponentでもデコレータを⽤いてます。デコレータでテンプレートHTMLを出⼒するタグ（app-root）やテンプレートHTMLのURLが定義されています。 HTML定義では、಺ૠ(interpolation)を⽤いてコンポーネントのtitleをデータバインディングして、その結果「app work」と表⽰されます。 54 54

Slide 21

Slide 21 text

{{title}} "QQ$PNQPOFOU 5FNQMBUF<"QQ> $PNQPOFOU ಺ૠ(interpolation)は、プロパティデータバインディングの⼀形式です。記法としてテンプレート式を⼆重中括弧でғみます。テンプレート式の結果がテキストとしてレンダリングされます。テンプレート式とあるように、括弧಺には式がかけます。たとえば、{{ 1 + 1}} と記述すれば2を出⼒します。ここでは、titleプロパティの結果としてプロパティ値を出⼒しています。 ಺ૠ(interpolation)には式もかける。 {{ 1 + 1 }} は2と計算結果がHTML出⼒される。

Slide 22

Slide 22 text

"QQ$PNQPOFOU "QQ.PEVMF declarations/ bootstap $PNQPOFOU すべてのAngularアプリケーションにはアプリケーションルートモジュールクラスがあります。慣例により、そのクラスはAppModuleと呼ばれ、app.module.tsという名前のファイルに定義されます。 Angular-CLIで作成されたばかりのAppModuleでは、AppComponentがdeclarationsで指定されています。また、最初に起動するコンポーネントとして、AppComponentがbootstrapにも指定されています。モジュール಺で使⽤するコンポーネントは必ずdeclarationsで指定が必要。 declarationsでは、コンポーネント以外にも、ディレクティブやパイプを指定する。

Slide 23

Slide 23 text

!$PNQPOFOU \ TFMFDUPSBQQSPPU UFNQMBUF6SMBQQDPNQPOFOUIUNM TUZMF6SMT<BQQDPNQPOFOUDTT> ^ FYQPSUDMBTT"QQ$PNQPOFOU\ UJUMFBQQXPSLT` UJUMF)FMMP8PSME ^ BQQDPNQPOFOUUT I \\UJUMF^^ I BQQDPNQPOFOUIUNM $PNQPOFOU では、試しにtitleの値を’app works!’から’Hello World!’にม更してみましょう。 ը⾯の表⽰が「Hello World!」にม更されます。なお、開ൃ⽤Webサーバはソースファイルのม更をݕ知して⾃動でリロードしてくれます。便利ですね！ 54

Slide 24

Slide 24 text

!$PNQPOFOU \ TFMFDUPSBQQSPPU UFNQMBUF6SMBQQDPNQPOFOUIUNM TUZMF6SMT<BQQDPNQPOFOUDTT> ^ FYQPSUDMBTT"QQ$PNQPOFOU\ UJUMF)FMMP8PSME ^ BQQDPNQPOFOUUT I \\UJUMF^^ I JOQVUUZQFUFYU< OH.PEFM >UJUMF BQQDPNQPOFOUIUNM $PNQPOFOU 次に、Two-wayデータバインディングでタイトルを⾃由にม更できるようにしましょう！ app.component.htmlにinputタグを追加します。[(ngModel)]=“title” の部分がTwo-wayデータバインディングを࣮現している箇所です。では、inputテキストの中の値をม更してみましょう。リアルタイムでタイトルをม更できます。 54

Slide 25

Slide 25 text

{{title}} "QQ$PNQPOFOU [(ngModel)]=“title” 5FNQMBUF<"QQ> $PNQPOFOU Two-wayデータバインディングは、Viewのม更とコンポーネントのม更を૒⽅向に通知することが出དྷます。 ಺ૠ(interpolation)とは異なり、プロパティしか指定できません。お互いが૒⽅向に代⼊できる必要があるからです。

Slide 26

Slide 26 text

OHHFOFSBUFDPNQPOFOUCFFS !/H.PEVMF \ EFDMBSBUJPOT< "QQ$PNQPOFOU #FFS$PNQPOFOU > ^ FYQPSUDMBTT"QQ.PEVMF\^ BQQNPEVMFUT ʴ $PNQPOFOU では、次にコンポーネントを作ってみます。 `ng generate component beer` コマンドで新たなコンポーネントの雛形を⽣成出དྷます。⽣成したコンポーネントは、⾃動的にAppModuleのdeclarationsで指定されます。便利です。 54

Slide 27

Slide 27 text

"QQ$PNQPOFOU "QQ.PEVMF #FFS$PNQPOFOU $PNQPOFOU declarations/ bootstap declarations 現時点でこのような構成になっています。 AppComponentとBeerComponentの྆⽅がdeclarationsで指定されています。 bootstrapに指定されているのは、AppComponentだけです。

Slide 28

Slide 28 text

JNQPSU\$PNQPOFOU 0O*OJU^GSPN!BOHVMBS DPSF !$PNQPOFOU \ TFMFDUPSBQQCFFS UFNQMBUF6SMCFFSDPNQPOFOUIUNM TUZMF6SMT<CFFSDPNQPOFOUDTT> ^ FYQPSUDMBTT#FFS$PNQPOFOUJNQMFNFOUT0O*OJU \ DPOTUSVDUPS \^ OH0O*OJU \ ^ ^ CFFSDPNQPOFOUUT Q CFFSXPSLT Q CFFSDPNQPOFOUIUNM $PNQPOFOU ⽣成されたBeerComponentのソースコードはこのとおりです。基本的に雛形のみで、なにも࣮૷がありません。 selectorに`app-beer`と定義されているので、BeerComponentはタグでHTMLテンプレートに定義できます。 54

Slide 29

Slide 29 text

!$PNQPOFOU \ TFMFDUPSBQQSPPU UFNQMBUF6SMBQQDPNQPOFOUIUNM TUZMF6SMT<BQQDPNQPOFOUDTT> ^ FYQPSUDMBTT"QQ$PNQPOFOU\ UJUMF)FMMP8PSME ^ BQQDPNQPOFOUUT I \\UJUMF^^ I JOQVUUZQFUFYU< OH.PEFM >lUJUMF BQQCFFSBQQCFFS BQQDPNQPOFOUIUNM $PNQPOFOU AppComponentのHTMLテンプレートにタグを追加すると、「beer works!」と表⽰が追加されました。 54

Slide 30

Slide 30 text

$PNQPOFOU AppComponentにBeerComponentを定義したことで、上のようなコンポーネントツリーが形成されました。 Angularでは、コンポーネントツリーを形成することでアプリケーションを構築していきます。 #FFS$PNQPOFOU "QQ$PNQPOFOU

Slide 31

Slide 31 text

FYQPSUDMBTT#FFS$PNQPOFOUJNQMFNFOUT0O*OJU \ !*OQVU CFFS#FFS DPOTUSVDUPS \^ OH0O*OJU \ ^ ^ CFFSDPNQPOFOUUT Q CFFSXPSLT \\CFFSOBNF^^JT\\CFFSEFTDSJQUJPO^^ Q CFFSDPNQPOFOUIUNM FYQPSUDMBTT#FFS\ DPOTUSVDUPS QSJWBUFJETUSJOH QSJWBUFOBNFTUSJOH QSJWBUFEFTDSJQUJPOTUSJOH \ ^ ^ CFFSNPEFMUT $PNQPOFOU では、BeerComponentを࣮૷します。Inputデコレータでbeerプロパティを追加しました。 Inputデコレータを付༩することで、プロパティバインディング可能な⼊⼒プロパティが宣⾔出དྷます。また、ビールの名前とઆ明を格納できるデータクラスも作成しました。 beerComponentはbeerプロパティに指定されたビールの情報を表⽰します。 54 54

Slide 32

Slide 32 text

!$PNQPOFOU \ TFMFDUPSBQQSPPU UFNQMBUF6SMBQQDPNQPOFOUIUNM TUZMF6SMT<BQQDPNQPOFOUDTT> ^ FYQPSUDMBTT"QQ$PNQPOFOU\ UJUMF)FMMP8PSME` NZ'BWPSJUF#FFS OFX#FFS Ϟϧπ ࠷ߴͩ ^ BQQDPNQPOFOUUT I \\UJUMF^^ I JOQVUUZQFUFYU< OH.PEFM >lUJUMF BQQCFFSBQQCFFS BQQCFFSlNZ'BWPSJUF#FFS BQQCFFS BQQDPNQPOFOUIUNM $PNQPOFOU AppComponentでおؾに⼊りビールを定義して、と定義することで、おؾに⼊りのビール情報を表⽰出དྷました！ 54

Slide 33

Slide 33 text

[beer]=“myFavoriteBeer” "QQ$PNQPOFOU #FFS$PNQPOFOU 5FNQMBUF<"QQ> 5FNQMBUF<#FFS> {{beer.name}} is {{beer.description}}!! NZ'BWPSJUF#FFS OFX#FFS Ϟϧπ ࠷ߴͩ $PNQPOFOU このイメージをਤで表すとこのようになります。 AppComponentが保持するmyFavoriteBeerを、BeerComponentのbeerプロパティにバインディングし、಺ૠ (interpolation)を⽤いて表⽰出དྷています。

Slide 34

Slide 34 text

!$PNQPOFOU \ TFMFDUPSBQQSPPU UFNQMBUF6SMBQQDPNQPOFOUIUNM TUZMF6SMT<BQQDPNQPOFOUDTT> ^ FYQPSUDMBTT"QQ$PNQPOFOU\ UJUMF)FMMP8PSME` NZ'BWPSJUF#FFS OFX#FFS Ϟϧπ ࠷ߴͩ PO/JDF FWFOU \ UIJTUJUMF Й ƅ˜ƅ Й ^ ^ BQQDPNQPOFOUUT I \\UJUMF^^ I JOQVUUZQFUFYU< OH.PEFM >lUJUMF BQQCFFSBQQCFFS BQQCFFSlNZ'BWPSJUF#FFS BQQCFFS JOQVUUZQFCVUUPO WBMVF͍͍Ͷ DMJDL PO/JDF FWFOU BQQDPNQPOFOUIUNM $PNQPOFOU では逆に、View(DOM)からのイベントをコンポーネントで受け取ってみましょう。「いいね！」ボタンを追加しました。「いいね！」ボタンのクリックイベントは、イベントバインディングで受け取ることが出དྷます。ボタンが押されると、AppComponentのonNiceメソッドが呼ばれ、タイトルが喜びます。「いいね！」されると嬉しいですからね！ 54

Slide 35

Slide 35 text

(click)=“onNice($event)” "QQ$PNQPOFOU 5FNQMBUF<"QQ> $PNQPOFOU このイメージをਤで表すとこのようになります。 $eventで渡される情報は、提供されるイベントຖに異なります。

Slide 36

Slide 36 text

$PNQPOFOU GXGPVňJCPFNGTŉ %QORQPGPV &1/ ]]XCNWG__ = PI/QFGN?ňRTQRGTV[ŉ =RTQRGTV[?ňXCNWGŉ [ ]が⼊⼒ ( )が出⼒ [ ]と( )を組み合わせた[( )]が⼊出⼒今まで出てきたバインディング⽅式をまとめました。上から順に、಺ૠ(interpolation)、プロパティバインディング、イベントバインディング、Two-wayデータバインディングです。[ ]がDOMへの⼊⼒、( )がDOMからの出⼒で、[ ] と ( )を組み合わせた[( )]が⼊出⼒と֮えましょう！

Slide 37

Slide 37 text

%JSFDUJWF ところで、勢いあまって「いいね！」ボタンを押しすぎるとめっちゃ喜びます。いやまあ、嬉しいんですけどね。もしかすると、ユーザは「いいね！」を取り消したいだけかもしれません。ここでは、ngIfディレクティブを⽤いて、「いいね！」の取り消しを࣮現したいと思います。

Slide 38

Slide 38 text

%JSFDUJWF !$PNQPOFOU \ TFMFDUPSBQQSPPU UFNQMBUF6SMBQQDPNQPOFOUIUNM TUZMF6SMT<BQQDPNQPOFOUDTT> ^ FYQPSUDMBTT"QQ$PNQPOFOU\ UJUMF)FMMP8PSME` NZ'BWPSJUF#FFS OFX#FFS Ϟϧπ ࠷ߴͩ JT/JDFGBMTF PO/JDF FWFOU \ UIJTUJUMFb Й ƅ˜ƅ Й UIJTJT/JDFUIJTJT/JDF ^ ^ BQQDPNQPOFOUUT I \\UJUMF^^ \\UJUMF^^ TQBOOH*GlJT/JDF Й ƅ˜ƅ Й TQBO BQQDPNQPOFOUIUNM 鯵鯵鰞鲀鱣鲗鰘鰄鰄鯽 ⓛ鰐鰻簉鯹鰐鰻鰊鰼鰹鯷鰜猳 ngIfはStructural Directive（構造ディレクティブ）と呼ばれるもので、DOM಺の要素を追加、削除することでHTMLレイアウトをม更します。「いいね！」ボタンを押されたらタイトルをม更していましたが、isNiceਅِ値を切り替えることで、タイトルの表⽰が切り替わるようにม更します。ngIfにプロパティバインディングで指定した値のਅِ値で、そのDOM要素の表⽰•⾮表⽰が切り替わります。 54

Slide 39

Slide 39 text

OHHFOFSBUFEJSFDUJWFEJSFDUJWFIJHIMJHIU !/H.PEVMF \ EFDMBSBUJPOT< "QQ$PNQPOFOU #FFS$PNQPOFOU )JHIMJHIU%JSFDUJWF > ^ FYQPSUDMBTT"QQ.PEVMF\^ BQQNPEVMFUT ʴ %JSFDUJWF 「いいね！」ボタンを押された時のタイトルの喜びが今ひとつです。せっかくの「いいね！」なんだから、派⼿に喜びたいですね！ここでは、Attribute Directive（ଐ性ディレクティブ）を作成して、タイトルを華やかに喜ばせましょう！ `ng generate directive directive/highlight` でDirectiveの雛形を作成できます。

Slide 40

Slide 40 text

"QQ$PNQPOFOU "QQ.PEVMF #FFS$PNQPOFOU declarations/ bootstap declarations %JSFDUJWF )JHIMJHIU%JSFDUJWF declarations AppModuleにHighlightDirectiveが追加されました！

Slide 41

Slide 41 text

JNQPSU\%JSFDUJWF^GSPN!BOHVMBSDPSF !%JSFDUJWF \ TFMFDUPS ^ FYQPSUDMBTT)JHIMJHIU%JSFDUJWF\ DPOTUSVDUPS \^ ^ IJHIMJHIUEJSFDUJWFUT %JSFDUJWF ⽣成されたHighlightDirectiveのソースコードはこのとおりです。基本的に雛形のみで、なにも࣮૷がありません。 selectorに`appHighlight`と定義されているので、DOM要素にappHighlightと指定すると、このディレクティブが有ޮとなります。 54

Slide 42

Slide 42 text

!%JSFDUJWF \ TFMFDUPS ^ FYQPSUDMBTT)JHIMJHIU%JSFDUJWF\ DPOTUSVDUPS \^ !*OQVU TFUBQQ)JHIMJHIU DPOEJUJPOBOZ \ UIJTFMOBUJWF&MFNFOUTUZMFCBDLHSPVOE DPOEJUJPO ZFMMPXOVMM ^ DPOTUSVDUPS QSJWBUFFM&MFNFOU3FG \^ ^ IJHIMJHIUEJSFDUJWFUT %JSFDUJWF I IJT/JDF \\UJUMF^^ BQQDPNQPOFOUIUNM h1タグにappHighlightを追加します。その際、プロパティバインディングでisNiceプロパティの値を受け取ります。 HighlightDirectiveでは、appHighLightのsetterをInputディレクティブの⼊⼒プロパティとして宣⾔します。そして、isNiceのਅِ値がม更されるたびに、backgroundのスタイル⾊をม更します。 54

Slide 43

Slide 43 text

OHHFOFSBUFQJQFQJQFVQQFS !/H.PEVMF \ EFDMBSBUJPOT< "QQ$PNQPOFOU #FFS$PNQPOFOU )JHIMJHIU%JSFDUJWF 6QQFS1JQF > BQQNPEVMFUT ʴ 1JQF では、ଓけてPipeを作ってみましょう！Pipeを⽤いてタイトルを⼤⽂字にします。 Pipeは、AngularJSでfilterと呼ばれていたものと同じです。 `ng generate pipe pipe/upper` でPipeの雛形を作成できます。

Slide 44

Slide 44 text

"QQ$PNQPOFOU "QQ.PEVMF #FFS$PNQPOFOU declarations 1JQF )JHIMJHIU%JSFDUJWF declarations 6QQFS1JQF declarations/ bootstap AppModuleにUpperPipeが追加されました！

Slide 45

Slide 45 text

JNQPSU\1JQF 1JQF5SBOTGPSN^GSPN!BOHVMBS DPSF !1JQF \ OBNFVQQFS ^ FYQPSUDMBTT6QQFS1JQFJNQMFNFOUT 1JQF5SBOTGPSN\ USBOTGPSN WBMVFBOZ BSHT BOZ BOZ\ SFUVSOOVMM ^ ^ IJHIMJHIUEJSFDUJWFUT 1JQF ⽣成されたUpperPipeのソースコードはこのとおりです。基本的に雛形のみで、なにも࣮૷がありません。 nameに`upper`と定義されているので、この名前でPipeが使⽤可能です。 54

Slide 46

Slide 46 text

JNQPSU\1JQF 1JQF5SBOTGPSN^GSPN!BOHVMBS DPSF !1JQF \ OBNFVQQFS ^ FYQPSUDMBTT6QQFS1JQFJNQMFNFOUT 1JQF5SBOTGPSN\ USBOTGPSN WBMVFBOZ BSHT BOZ BOZ\ SFUVSOOVMM USBOTGPSN WBMVFTUSJOH BSHT BOZ TUSJOH\ SFUVSOWBMVFUP6QQFS$BTF ^ ^ IJHIMJHIUEJSFDUJWFUT 1JQF I IJT/JDF \\UJUMF^^ \\UJUMFcVQQFS^^ BQQDPNQPOFOUIUNM transformメソッドで、引਺に渡された⽂字を⼤⽂字にม換するロジックを࣮૷します。 expression | pipe名とパイプラインで۠切って使⽤します。Unixのパイプを連想させますね。これで、Java表記もjavaサイトと同じになりました！ 54

Slide 47

Slide 47 text

OHHFOFSBUFTFSWJDFCFFSCFFS ʴ 4FSWJDF では、Serviceを作ってみましょう！ Serviceはただのクラスです。特定のビューにؔ連付けられていないデータやロジック、またはコンポーネント間で共有したいデータやロジックがある場合、Serviceで࣮現します。 `ng generate service beer/beer` でServiceの雛形を作成できます。

Slide 48

Slide 48 text

JNQPSU\*OKFDUBCMF^GSPN!BOHVMBSDPSF !*OKFDUBCMF FYQPSUDMBTT#FFS4FSWJDF\ DPOTUSVDUPS \^ ^ CFFSTFSWJDFUT 4FSWJDF ⽣成されたBeerServiceのソースコードはこのとおりです。基本的に雛形のみで、なにも࣮૷がありません。まあ、ServiceはComponentやDirective、Pipeと異なり、AppModuleに⾃動で定義されません。 54

Slide 49

Slide 49 text

JNQPSU\*OKFDUBCMF^GSPN!BOHVMBSDPSF !*OKFDUBCMF FYQPSUDMBTT#FFS4FSWJDF\ CFFST#FFS<>< OFX#FFS Ϟϧπ ࠷ߴͩ OFX#FFS ΩϦϯ ޾ͤͩ OFX#FFS υϥΠ Ֆۚͩ > DPOTUSVDUPS \^ HFU#FFST #FFS<>\ SFUVSOUIJTCFFST ^ ^ CFFSTFSWJDFUT 4FSWJDF !/H.PEVMF \ QSPWJEFST<> QSPWJEFST< #FFS4FSWJDF > ^ FYQPSUDMBTT"QQ.PEVMF\^ BQQNPEVMFUT では、BeerServiceを࣮૷します。ビールをたくさん返すgetBeersメソッドを追加しました。そのあと、AppModuleのprovidersにBeerServiceの指定を追加しました。 54 54

Slide 50

Slide 50 text

"QQ$PNQPOFOU "QQ.PEVMF declarations/ bootstap #FFS$PNQPOFOU declarations 4FSWJDF #FFS4FSWJDF providers )JHIMJHIU%JSFDUJWF declarations 6QQFS1JQF 現時点でこのような構成になっています。

Slide 51

Slide 51 text

FYQPSUDMBTT"QQ$PNQPOFOU\ UJUMF)FMMP8PSME NZ'BWPSJUF#FFS OFX#FFS Ϟϧπ ࠷ߴͩ JT/JDFGBMTF DPOTUSVDUPS QSJWBUFCFFS4FSWJDF#FFS4FSWJDF \ ^ OH0O*OJU \ UIJTCFFSTUIJTCFFS4FSWJDFHFU#FFST ^ ^ BQQDPNQPOFOUUT BQQDPNQPOFOUIUNM では、ComponentでBeerServiceを使⽤してみます。BeerServiceをコンストラクタの引਺に定義すると、DI（依存性注⼊）によりBeerServiceのインスタンスが取得できます。 4FSWJDF 54

Slide 52

Slide 52 text

"QQ$PNQPOFOU "QQ.PEVMF declarations/ bootstap #FFS$PNQPOFOU Create Serve 4FSWJDF #FFS4FSWJDF providers *OKFDUPS Inject OCKPVCKPUCEQPVCKPGT QHUGTXKEGKPUVCPEGU declarations )JHIMJHIU%JSFDUJWF declarations 6QQFS1JQF 構成としては次のとおりです。ModuleのProvidersに指定されたServiceはアプリケーション全ମで使⽤することが出དྷます。 Injectorにより、BeerServiceのインスタンスがアプリケーションで1つだけ⽣成されて、AppComponentにInjectされます。 Moduleだけでなく、ComponentでもServiceをProvidersで指定できます。その場合、インスタンスがコンポーネントຖに⽣成されるなどの違いがあります。これはInjectorヒエラルキーの話になりますが、今回その話はର象外とします。

Slide 53

Slide 53 text

FYQPSUDMBTT"QQ$PNQPOFOU\ FYQPSUDMBTT"QQ$PNQPOFOU JNQMFNFOUT0O*OJU\ UJUMF)FMMP8PSME NZ'BWPSJUF#FFS OFX#FFS Ϟϧπ ࠷ߴͩ CFFST#FFS<> JT/JDFGBMTF DPOTUSVDUPS QSJWBUFCFFS4FSWJDF#FFS4FSWJDF \ ^ OH0O*OJU \ UIJTCFFSTUIJTCFFS4FSWJDFHFU#FFST ^ ^ BQQDPNQPOFOUUT ngOnInitメソッドで、beerServiceのgetBeersメソッドを呼び出してbeersプロパティに໭り値を設定します。コンポーネントやディレクティブはAngularによってライフサイクルが管理されてます。コンポーネントの作成や更新、削除のタイミングをݕ 知できます。ngOnInitメソッドはコンポーネント作成時に呼ばれます。 $PNQPOFOU 54

Slide 54

Slide 54 text

1つまたは複਺のライフサイクルフックインターフェイスを࣮૷することで、ライフサイクルのタイミングで ॲ理を࣮⾏出དྷます（ݫ密にいえば、インタフェースを࣮૷する必要もありません）。各インタフェースには୯⼀のフックメソッドがあり、その名前は「”ng” + インタフェース名」です。たとえば、OnInitインターフェイスにはngOnInitという名前のフックメソッドがあります。 Angularは、次の順序でこれらのフックメソッドを呼び出します。 ϥΠϑαΠΫϧʹ͍ͭͯ ngOnChanges ⼊出⼒バインド値がม更されたとき。 ngOnInit 最初のngOnChangesの後。 ngDoCheck 開ൃ者のカスタムม更ݕ出。 ngAfterContentInit コンポーネントの಺容が初期化された後。 ngAfterContentChecked コンポーネントの಺容を確認した後 ngAfterViewInit コンポーネントのビューが初期化された後。 ngAfterViewChecked コンポーネントのビューのすべてのチェックの後。 ngOnDestroy ディレクティブが破棄される直前。

Slide 55

Slide 55 text

FYQPSUDMBTT"QQ$PNQPOFOU JNQMFNFOUT0O*OJU\ UJUMF)FMMP8PSME CFFST#FFS<> JT/JDFGBMTF DPOTUSVDUPS QSJWBUFCFFS4FSWJDF#FFS4FSWJDF \ ^ OH0O*OJU \ UIJTCFFSTUIJTCFFS4FSWJDFHFU#FFST ^ ^ BQQDPNQPOFOUUT BQQCFFSlNZ'BWPSJUF#FFS BQQCFFSEJWOH'PSMFUCFFSPGCFFST BQQCFFSCFFSBQQCFFS EJW BQQDPNQPOFOUIUNM ngForディレクティブを使って、beersプロパティに定義されたビールの⼀ཡを表⽰します。 “let beer of beers”とngForに指定することで、beersの಺容をbeerでࢀ照できるようになります。 beerは「テンプレート⼊⼒ม਺」と呼ばれるものです。 %JSFDUJWF 54

Slide 56

Slide 56 text

OHHFOFSBUFNPEVMFCFFS ʴ .PEVMF アプリケーションもだいぶ成⾧してきました！モジュールで分けて管理することで、全ମの⾒通しを良くしましょう！ `ng generate module beer` でモジュールの雛形を⽣成できます。

Slide 57

Slide 57 text

JNQPSU\/H.PEVMF^GSPN!BOHVMBSDPSF JNQPSU\$PNNPO.PEVMF^GSPN!BOHVMBS DPNNPO !/H.PEVMF \ JNQPSUT< $PNNPO.PEVMF > EFDMBSBUJPOT<> ^ FYQPSUDMBTT#FFS.PEVMF\^ CFFSNPEVMFUT .PEVMF ⽣成されたBeerModuleのソースコードはこのとおりです。基本的に雛形のみですが、NgModuleデコレータでCommonModuleが指定されています。 54

Slide 58

Slide 58 text

!/H.PEVMF \ JNQPSUT< $PNNPO.PEVMF > EFDMBSBUJPOT< #FFS$PNQPOFOU > FYQPSUT< #FFS$PNQPOFOU > QSPWJEFST< #FFS4FSWJDF > ^ FYQPSUDMBTT#FFS.PEVMF\^ CFFSNPEVMFUT .PEVMF !/H.PEVMF \ EFDMBSBUJPOT< "QQ$PNQPOFOU #FFS$PNQPOFOU )JHIMJHIU%JSFDUJWF 6QQFS1JQF > JNQPSUT< #FFS.PEVMF > QSPWJEFST< #FFS4FSWJDF > CPPUTUSBQ<"QQ$PNQPOFOU> ^ FYQPSUDMBTT"QQ.PEVMF\^ BQQNPEVMFUT AppModuleからBeerModuleへBeerComponentやBeerServiceの指定を移動します。⼀⽅で、AppModuleのimportsにBeerModuleを指定します。 54 54

Slide 59

Slide 59 text

"QQ$PNQPOFOU "QQ.PEVMF declarations/ bootstap #FFS$PNQPOFOU Create Serve #FFS4FSWJDF provider *OKFDUPS Inject declarations/ exports .PEVMF #FFS.PEVMF imports )JHIMJHIU%JSFDUJWF declarations 6QQFS1JQF 構成としては次のとおりです。AppModuleがBeerModuleをimportしているので、BeerModuleのexportsで定義された ComponentやDirective、PipeなどがAppModuleでも使⽤可能になります。また、BeerModuleのproviderで定義された Serviceもアプリケーション全ମで使⽤可能となります。

Slide 60

Slide 60 text

OHHDPNQPOFOUIPNF 3PVUFS OHHDPNQPOFOUCFFS-JTU ほとんどのアプリケーションが複਺のը⾯で構成されています。これらのը⾯はリンクやボタンをクリックすることでը⾯表⽰を切り替えます。 Routerを使ってURLによるը⾯切り替えを࣮現してみましょう！ Angular-CLIで次のコマンドを࣮⾏して、２つのコンポーネントを作成します。

Slide 61

Slide 61 text

3PVUFS EJWOH'PSMFUCFFSPGCFFST BQQCFFSCFFSBQQCFFS EJW CFFSMJTUDPNQPOFOUIUNM IJT/JDF \\UJUMFcVQQFS^^ TQBOOH*GJT/JDF Й ƅ˜ƅ Й TQBO I JOQVUUZQFUFYU< OH.PEFM >lUJUMF EJWOH'PSMFUCFFSPGCFFST BQQCFFSCFFSBQQCFFS EJW JOQVUUZQFCVUUPO WBMVF͍͍Ͷ DMJDL PO/JDF FWFOU BQQDPNQPOFOUIUNM CRREQORQPGPVVU鰙DGGTNKUVEQORQPGPVVU鰟甜㹄鰠䧢䡆 AppComponentのHTMLテンプレートの⼀部を、BeerListComponentのHTMLテンプレートに移します。 AppComponentとBeerListComponentの修正は省略します。 54

Slide 62

Slide 62 text

JNQPSUT< #SPXTFS.PEVMF 'PSNT.PEVMF )UUQ.PEVMF #FFS.PEVMF 3PVUFS.PEVMFGPS3PPU < \ QBUI DPNQPOFOU)PNF$PNQPOFOU ^ \ QBUICFFSMJTU DPNQPOFOU#FFS-JTU$PNQPOFOU ^ > > BQQDPNQPOFOUUT JOQVUUZQFUFYU< OH.PEFM >UJUMF EJW BSPVUFS-JOLIPNFB BSPVUFS-JOLCFFSMJTUϏʔϧB EJW SPVUFSPVUMFUSPVUFSPVUMFU BQQDPNQPOFOUIUNM 3PVUFS IUUQMPDBMIPTU IUUQMPDBMIPTUCFFSMJTU AppModuleのimportsにRouterModuleを指定します。 RouterModuleでは、URLパスとそれにରするComponentを定義しています。 routerLinkディレクティブを⽤いることで、ը⾯のナビゲーションリンクを作成することができます。 router-outletタグの部分のը⾯が切り替わります。 54

Slide 63

Slide 63 text

3PVUFS )PNF$PNQPOFOU 5FNQMBUF<"QQ> 3PVUFS #FFS-JTU$PNQPOFOU / /beer-list ը⾯切り替えのイメージをਤで表すと次のようになります。 RouterがURLにより表⽰ը⾯を切り替えます。

Slide 64

Slide 64 text

•コンポーネント指向での開ൃ •サービスの開ൃとDI（依存性解決）の活⽤ •モジュール •ルーティング "OHVMBSҰ८Γ 「コンポーネント指向での開ൃ」、「サービスの開ൃとDIの活⽤」、「モジュール」、「ルーティング」と、Angularの機能を⼀巡りしました！どうでしたか？なんだかいけそうなؾがしませんか？

Slide 65

Slide 65 text

9*1 9*#6 9*; *19 /QTG 鰯鰙鰲 GENDA ࣗݾ঺հ "OHVMBSͱ͸ ͳͥ"OHVMBSΛબͿͷ͔ "OHVMBSҰ८Γ ͦͷଞ͍Ζ͍Ζ ·ͱ·Δ͔ͳʂʁ

Slide 66

Slide 66 text

UIϥΠϒϥϦ ■リリースࡁ ■リリース前 ■ng2-bootstrap ■ng-lightning ■Prime NG ■Semantic UI ■Vaadin ■ Wijimo ■ OnsenUI(モバイルઐ⽤) ■Angular Material2(slpha.10) ■Fuel-UI(prerelease 0.3.9) ■Kendo UI for Angular2(beta、2017年5⽉リリース予定) ■ng-bootstrap(slpha.13) 「Angular2 によるモダンWeb開ൃ(p.25)」より引⽤ 2TKOG(CEG鰘竑痓鰛2TKOG6GM鯽㚱≼鰊鰼鲍鱈鱺鲍鲎屬鰐䧏鰟啐鰆鰵鱡鯮鱝鰟屬蒌鰈鰆鱃勤㑏鰈鰄鰒鰺鱃㚂䠉Ⅹ⹻

Slide 67

Slide 67 text

UIϥΠϒϥϦ 1SJNF/(6MUJNB Materialデザインを採⽤したスタイル。テーマ切り替えも可能で、モダンなUIを構築可能。

Slide 68

Slide 68 text

UIϥΠϒϥϦ 1SJNF/(0NFHB Bootstrapライクなデザインを採⽤したスタイル。 Materialデザインに⽐べて、動作がܰいように感じている。

Slide 69

Slide 69 text

UIϥΠϒϥϦ 1SJNF/(1PTFJEPO AdminLTEを彷彿させるデザインのスタイル。 Materialデザインに⽐べて、動作がܰいように感じている。スタイリッシュでかっこいい。

Slide 70

Slide 70 text

UIϥΠϒϥϦ PrimeNGのDataTableは技術ݕূの結果、要求仕༷に耐えれないことが判明。 Gridは複ࡶ性の⾼いライブラリのため、࣮績を重視してag-gridを採⽤。

Slide 71

Slide 71 text

9*1 9*#6 9*; *19 /QTG 鰯鰙鰲 ࣗݾ঺հ "OHVMBSͱ͸ ͳͥ"OHVMBSΛબͿͷ͔ "OHVMBSҰ८Γ ͦͷଞ͍Ζ͍Ζ ·ͱ·Δ͔ͳʂʁ GENDA

Slide 72

Slide 72 text

"OHVMBSJT0OFGSBNFXPSL ͍ΖΜͳϑϨϯζ͕͍ΔΑʂ Θʙ͍ʂͨͷ͠ʙ͍ʂʂ (((ο(ƅ˜ƅ*)ο)))

Slide 73

Slide 73 text

5IBOLZPVBMM GPSMJTUFOJOH (((ο(ƅ˜ƅ*)ο)))

Slide 74

Slide 74 text

鲀鱨徨㡺鱃鯻鰯鰂鰘猳 #PIWNCT%.+鯽ⓛ╼鰈鰐鱹鱅鱈鲏鰟嶍㣯鰑鰹 9*1 9*#6 9*; *19 /QTG 鰯鰙鰲 GENDA ࣗݾ঺հ "OHVMBSͱ͸ ͳͥ"OHVMBSΛબͿͷ͔ "OHVMBSҰ८Γ ͦͷଞ͍Ζ͍Ζ ·ͱ·Δ͔ͳʂʁ

Slide 75

Slide 75 text

srcディレクトリにアプリケーションソースコードやcssなどが格納されています。 "OHVMBS$-*

Slide 76

Slide 76 text

EditorConfigは、開ൃ者がさまざまなエディタと IDE間で⼀貫したコーディングスタイルを定義し、維持するためのものです。コーディングスタイルやファイルのエンコーディング形式などを定義します。 editorconfig.org "OHVMBS$-*

Slide 77

Slide 77 text

Gitの設定が最初から⽤意されています。 .gitignoreは、Gitで管理しないリソースを定義するものです。 "OHVMBS$-*

Slide 78

Slide 78 text

Angular-CLIの設定がこのファイルに記載されています。 "OHVMBS$-*

Slide 79

Slide 79 text

Karmaは࣮ブラウザ上でテストが⾏えるツールです。Karmaの設定がこのファイルに記載されています。 "OHVMBS$-*

Slide 80

Slide 80 text

package.json にNPMの定義がされています。 NPMでインストールしたライブラリは、「node_modules」に格納されています。 "OHVMBS$-*

Slide 81

Slide 81 text

ProtractorはSelenium WebDriverJSベースのフレームワークです。 E2E（End to End）テストをサポートします。 Protractorの設定がこのファイルに記載されています。 "OHVMBS$-*

Slide 82

Slide 82 text

tslintはTypeScript⽤の֦張可能なlintです。 tslintの設定がこのファイルに記載されています。 "OHVMBS$-*