Lightning Component汎用化シリーズ（Event）

#1.イベントの種類と通信方式
![image.png](https://qiita-image-store.s3.amazonaws.com/0/332907/5acf4c06-4878-b80e-4e64-3a5f0ba4cdc2.png)
#2.Event処理の汎用化イメージ図
**aura:methodにより、サービスコンポネットを作成する**
![image.png](https://qiita-image-store.s3.amazonaws.com/0/332907/d4a25033-b405-6599-1961-71f3ceaa2b1a.png)
#3.汎用イベント定義
```html:fw_AppEvent.evt
<aura:event type="APPLICATION">
	<aura:attribute name="eventKey" type="String"/>
	<aura:attribute name="eventValue" type="Object"/>
</aura:event>
```
```html:fw_CompEvent.evt
<aura:event type="COMPONENT">
	<aura:attribute name="eventKey" type="String"/>
	<aura:attribute name="eventValue" type="Object"/>
</aura:event>
```
#4.サービスコンポネット実装
```html:fw_EventService.cmp
<aura:component >
	<aura:registerEvent name="fw_AppEvent" type="c:fw_AppEvent"/>
	<aura:registerEvent name="fw_CompEvent" type="c:fw_CompEvent"/>

	<aura:method name="fireAppEvent" action="{! c.onAppEvent }">
		<aura:attribute name="eventKey" type="String"/>
		<aura:attribute name="eventValue" type="Object"/>
	</aura:method>

	<aura:method name="fireCompEvent" action="{! c.onCompEvent }">
		<aura:attribute name="eventKey" type="String"/>
		<aura:attribute name="eventValue" type="Object"/>
	</aura:method>
</aura:component>
```
```javascript:fw_EventServiceController.js
({
	onAppEvent : function(component, event) {
		let params = event.getParam("arguments");
		let appEvent = $A.get("e.c:fw_AppEvent");
		
		appEvent.setParams({
			eventKey : params.eventKey,
			eventValue : params.eventValue
		});
		appEvent.fire();
	},
	onCompEvent : function(component, event) {
		let params = event.getParam("arguments");
		let compEvent = component.getEvent("fw_CompEvent");
		
		compEvent.setParams({
			eventKey : params.eventKey,
			eventValue : params.eventValue
		});
		compEvent.fire();
	},
})
```
#5.使用例（コンポーネントイベント）
##送信側
```html
<aura:component >
	<!-- サービスコンポネット定義エリア -->
	<c:fw_EventService aura:id="fw_EventService" />

	<!-- attribute定義エリア -->
	<aura:attribute name="ContactInstance" type="Contact"/>
	<aura:attribute name="rowIndex" type="String"/>
	
	<!-- コンテンツ -->
	<!-- ～～省略～～ -->
</aura:component>
```
```javascript:
({
	doAddNewRow : function(component, event, helper){
		let eventService = component.find("fw_EventService");
		eventService.fireCompEvent("AddRowEvt");
	},
	doRemoveRow : function(component, event, helper){
		let eventService = component.find("fw_EventService");
		eventService.fireCompEvent("RemoveRowEvt", {"indexVar" : component.get("v.rowIndex") });
	},
})
```
##受信側
```html
<aura:component Implements="force:appHostable,flexipage:availableForAllPageTypes" controller="DataServiceController">
	<!-- サービスコンポネット定義エリア -->
	<c:fw_CallApexService aura:id="callApexService"/>
	
	<!-- 受信イベント定義エリア -->
	<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
	<aura:handler name="fw_CompEvent" event="c:fw_CompEvent" action="{!c.doCompEvent}"/>

	<!-- 属性定義エリア -->
	<aura:attribute name="contactList" type="Contact[]"/> 
	
	<!-- コンテンツ -->
	<!-- ～～省略～～ -->
</aura:component>
```
```javascript:
({
	doInit: function(component, event, helper) {
		helper.addRow(component, event);
	},
	doCompEvent: function(component, event, helper) {
		let params = event.getParams();
		switch(params.eventKey) {
			case "AddRowEvt": // 行追加イベント
				helper.addRow(component, event);
				break;
			case "RemoveRowEvt": // 行削除イベント
				helper.removeRow(component, event);
				break;
		}
	},
})
```
#6.参照資料
**・Lightning Component: イベント処理の基本**
　　https://qiita.com/zaki-yama/items/aa557167d7769175c185
**・Lightning コンポーネント開発者ガイド**
　　https://developer.salesforce.com/docs/atlas.ja-jp.lightning.meta/lightning/events_intro.htm