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

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

*CXG7WUG#PIWNCT!

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

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

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

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

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

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

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

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

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

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

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

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

$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

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

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

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

!$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

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

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

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

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

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は<app-beer>タグでHTMLテンプレートに定義できます。 54

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

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

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

UJUMF)FMMP8PSME` NZ'BWPSJUF#FFS OFX#FFS Ϟϧπ ࠷ߴͩ ^ BQQDPNQPOFOUUT I \\UJUMF^^ I JOQVUUZQFUFYU< OH.PEFM >lUJUMF BQQCFFSBQQCFFS BQQCFFS<CFFS>lNZ'BWPSJUF#FFS BQQCFFS BQQDPNQPOFOUIUNM $PNQPOFOU AppComponentでおؾに⼊りビールを定義して、 <app-beer [beer]=“myFavoriteBeer”> と定義することで、おؾに⼊りのビール情報を表⽰出དྷました！ 54

[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)を⽤いて表⽰出དྷています。

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

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

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

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

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

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

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

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

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

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

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

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

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 I<BQQ)JHIMJHIU>JT/JDF \\UJUMF^^ \\UJUMFcVQQFS^^ BQQDPNQPOFOUIUNM transformメソッドで、引਺に渡された⽂字を⼤⽂字にม換するロジックを࣮૷します。 expression | pipe名とパイプラインで۠切って使⽤します。Unixのパイプを連想させますね。これで、Java表記もjavaサイトと同じになりました！ 54

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

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

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

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

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

"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ヒエラルキーの話になりますが、今回その話はର象外とします。

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

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

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

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

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

!/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

"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もアプリケーション全ମで使⽤可能となります。

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

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

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

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

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

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鯽㚱≼鰊鰼鲍鱈鱺鲍鲎屬鰐䧏鰟啐鰆鰵鱡鯮鱝鰟屬蒌鰈鰆鱃勤㑏鰈鰄鰒鰺鱃㚂䠉Ⅹ⹻

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

More Decks by Shinichi Kozake

Other Decks in Technology

Featured

Transcript