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

12070 ワード
JavaScript N予備校 JavaScript テキストリンク

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

機能追加

//診断ボタン押下時の処理
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);
    }    
}

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

覚えておきたいこと

1. アロー関数 2. ガード句 3. URIエンコード 4. onkeydownイベント

アロー関数

今まで見かけたことのある記述の謎が解けた。

assessmentButton.onclick = () => {}
assessmentButton.onclick = function(){}

同じことらしい。
functionあったほうが個人的にはわかりやすいけれど。

ガード句

if(userName.length === 0){
         //空欄なら処理を終了
         return;
     }

URIエンコード

URIのクエリに半角英数字以外が入ると文字化けが起きたりする。

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

onkeydown

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

userNameInput.onkeydown = function(event){
}

ここにもアロー関数が。

次回に向けて

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