Webの勉強はじめてみた その11 ～JavaScriptで診断ゲーム編2～

N予備校の「プログラミング入門 Webアプリ」を受講しています。
今回は第1章17節「診断機能の組み込み」と18節「ツイート機能の開発」です。

<h2>機能追加</h2>
```javascript
//診断ボタン押下時の処理
assessmentButton.onclick = () => {
     //ユーザー名取得
     const userName = userNameInput.value;
        
     if(userName.length === 0){
         //空欄なら処理を終了
         return;
     }
     //診断結果取得
     const assessmentResult = assessment(userName);
     //診断結果の表示
     createAssessment(resultDivided, assessmentResult);
     //ツイートボタンの表示
     createAssessment(tweetDivided, assessmentResult);
}
//Enter押下でも処理を実行する
userNameInput.onkeydown = event =>{
    if(event.key === 'Enter'){
        assessmentButton.onclick();
    }
}
/**
 * 指定した要素の子要素を全て削除する
 * @param {string} element HTMLの要素
 */
function removeAllChildren(element){
   //既に診断結果がある場合
   while(element.firstChild){
    //子要素がある限り削除
    element.removeChild(element.firstChild);
   }
}
/**
 * 診断結果を表示するためのタグを追加する処理
 * @param {HTML Element} HTML要素
 * @param {String} 診断結果
 */
function createAssessment(element, result){
    //子要素の削除処理
    removeAllChildren(element);         
    //診断結果表示
    if(element === resultDivided){
        //タイトル
        const header = document.createElement('h3');
        header.innerText = '診断結果';
        //結果表示エリアに追加
        element.appendChild(header);
        //診断結果 作成
        const paragraph = document.createElement('p');
        
        paragraph.innerText = result;
        //結果表示エリアに追加
        element.appendChild(paragraph);    
    }else{
        //アンカータグ
        const anchor = document.createElement('a');
        //href の内容
        //URIエンコード
        const uriJp = encodeURI('あなたのいいところ');
        const hrefValue ='https://twitter.com/intent/tweet?button_hashtag='+ uriJp +'&ref_src=twsrc%5Etfw';
        //アンカータグ　各種設定
        anchor.setAttribute('href', hrefValue);
        anchor.className ='twitter-hashtag-button'
        //anchor.setAttribute('class', 'twitter-hashtag-button');
        anchor.setAttribute('data-text', result);
        anchor.innerText = 'Tweet #あなたのいいところ';
        //アンカータグの追加
        element.appendChild(anchor);
        //scriptタグ作成
        const script = document.createElement('script');
        //src の設定
        const src = 'https://platform.twitter.com/widgets.js';
        script.setAttribute('src', src);
        //Scriptタグの追加
        element.appendChild(script);
    }    
}
```

共通部分はできるだけまとめたかったけど、あんまり綺麗にできなかった気がする。


<h2>覚えておきたいこと</h2>
:::note
1. アロー関数
2. ガード句
3. URIエンコード  
4. onkeydownイベント 
:::

<h3>アロー関数</h3>
今まで見かけたことのある記述の謎が解けた。

```javascript
assessmentButton.onclick = () => {}
assessmentButton.onclick = function(){}
```
同じことらしい。
`function`あったほうが個人的にはわかりやすいけれど。

<h3>ガード句</h3>
```javascript
if(userName.length === 0){
         //空欄なら処理を終了
         return;
     }
```

<h3>URIエンコード</h3>
URIのクエリに半角英数字以外が入ると文字化けが起きたりする。

:::note
encodeURIComponent 関数で 文字列を URI エンコードされたものへ変換
decodeURIComponent 関数で URI エンコードされた文字列から元のものへ復元
:::

<h3>onkeydown</h3>
```javascript
//Enter押下でも処理を実行する
userNameInput.onkeydown = event =>{
    if(event.key === 'Enter'){
        assessmentButton.onclick();
    }
}

userNameInput.onkeydown = function(event){
}
```

ここにもアロー関数が。


<h2>次回に向けて</h2>
第一章の講義は次回で終わりみたいです。
といってもGitHubの登録とか使い方みたいな感じなので、記事にするかどうかはわかりません。
練習問題やりつつ、次章へって感じでしょうか。