Salesforce apex:actionFuntionnの注意事項

\<apex:actionFunction>タグについて、SalesforceのVisualforceページの非同期処理時利用されるタグです。
reRender属性で指定されたID領域は非同期の部分更新エリアです。
部分更新エリアに\<apex:inputText>タグがある場合、そのタグにhtml-name属性を定義する場合、サーバ側との通信がおかしくなる。

### ・まず、name属性なしの場合の動きとコードは以下となります。簡単なサンプルコードです。
　※ここで注意して欲しいのは\<apex:inputText>タグにhtml-name属性が定義されてない。

```testActionFunction.v
<apex:page controller="TestApex">
	<apex:form >
        <apex:outputPanel id="reRenderArea">
        	入力項目：<apex:inputText value="{!testInput}" html-placeholder="入力してください" /><br/>
            出力項目：<apex:outputText value="{!testOutput}" /><br/>
            <a onclick="test()">サーバ側へ送信</a>
            <apex:actionFunction action="{!testActionFunction}" name="test" reRender="reRenderArea"/>
        </apex:outputPanel>
    </apex:form>
</apex:page>
```

```TestApex.cls
public class TestApex {
    public String testInput{get;set;}
    public String testOutput{get;set;}
    public void testActionFunction() {
        testOutput = 'Your Input is : ' + testInput;
    }
}
```
------------------------
画面の動きは以下となります。サーバとの通信は何回でも正常です。
<span style="vertical-align:text-top">初期表示　　　　　⇨　</span><img width="227" alt="1111.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496589/01ead3cf-5f12-3659-77b7-5212c10c4cf3.png">
１回目入力する　　⇨　<img width="231" alt="5555.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496589/83552df1-bb17-b7c9-957a-e01709780dde.png">
送信ボタン押下後　⇨　<img width="229" alt="2222.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496589/9308669a-b57d-41ca-8cc2-638c2e567ed1.png">
２回目入力する　　⇨　<img width="231" alt="3333.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496589/cb37a65e-ad8a-d872-afc3-738bda7274d9.png">
送信ボタン押下後　⇨　<img width="230" alt="4444.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496589/68fc6580-676f-0387-f819-0a2bf7dcb9d0.png">

------------------------
### ・次は、html-name属性がある場合、動きはどうなるでしょうか一緒に見てみましょう。
　※１回目のサーバとの通信は変わらないが、２回目のサーバ通信を注目してください。
　testActionFunction.vfのページコードにある\<apex:inputText>タグが以下コードで置換する。

```testActionFunction.v
入力項目：<apex:inputText value="{!testInput}" html-name="testName" html-placeholder="入力してください" />
```

------------------------
画面の動きは以下となります。
初期表示　　　　　⇨　<img width="227" alt="1111.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496589/01ead3cf-5f12-3659-77b7-5212c10c4cf3.png">
１回目入力する　　⇨　<img width="231" alt="5555.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496589/83552df1-bb17-b7c9-957a-e01709780dde.png">
送信ボタン押下後　⇨　<img width="229" alt="2222.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496589/9308669a-b57d-41ca-8cc2-638c2e567ed1.png">
２回目入力する　　⇨　<img width="231" alt="3333.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496589/cb37a65e-ad8a-d872-afc3-738bda7274d9.png">
送信ボタン押下後　⇨　<img width="229" alt="2222.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496589/9308669a-b57d-41ca-8cc2-638c2e567ed1.png">

------------------------
### ・事象：
１回目「1111」を入力し、サーバ側へ送信リンクを押下して、画面上入力された情報とサーバから送信された情報が正しく表示されるが、その後、入力項目に「2222」を変更し、サーバ側へ送信リンクを再度押下して、入力項目に「2222」が保持されないし、サーバから送信された情報も正しく表示されない。
**２回目以降の内容は常に１回目の情報が保持されてしまう。**何故なんでしょうかね。
原因はわからないが、今後\<apex:inputText>タグを利用する時、更新エリアにhtml-name属性が利用しないように注意するしかないですね。
もし理由がわかる方がいれば、是非ご教示して頂きたいです。