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

N予備校の「プログラミング入門 Webアプリ」を受講しています。
今回は第1章15節と16節です。

用語

• モックアップ: 機能の作りこみをせず、見た目だけを作ったもの
• JS Doc: インターフェースの定義を明示したコメント形式

紙に書いたものを「ペーパーモックアップ」というらしい。
ツールも色々あるけれど、個人で使うだけならちょっと重いかも。

/**
*   名前の文字列を渡すと診断結果を返す関数
*   @param {string} userName ユーザーの名前
*   @return {string} 診断結果
*/
function assessment(userName){
    //TODO 診断処理を実装する
    return '';
}

JSDoc形式、初めて知りましたが、これは忘れずに使っていきたい。

正規表現

正直覚えられる気がしない。

今回使ったのはreplace
/\{userName\}/g
エスケープシーケンスもあって面食らってしまった。
/から/までが検索する範囲。
gがグローバル検索を行う、パラメータ？になるのかな。

使っていれば覚えられるのだろうか。

診断ゲーム

名前をテキストボックスに入力してその人の「いいところ」を診断するというアプリ。

'use strict';
//診断結果
const answers = [
    '{userName}のいいところは声です。{userName}の特徴的な声は皆を惹きつけ、心に残ります。',
    '{userName}のいいところはまなざしです。{userName}に見つめられた人は、気になって仕方がないでしょう。',
    '{userName}のいいところは情熱です。{userName}の情熱に周りの人は感化されます。',
    '{userName}のいいところは厳しさです。{userName}の厳しさがものごとをいつも成功に導きます。',
    '{userName}のいいところは知識です。博識な{userName}を多くの人が頼りにしています。',
    '{userName}のいいところはユニークさです。{userName}だけのその特徴が皆を楽しくさせます。',
    '{userName}のいいところは用心深さです。{userName}の洞察に、多くの人が助けられます。',
    '{userName}のいいところは見た目です。内側から溢れ出る{userName}の良さに皆が気を惹かれます。',
    '{userName}のいいところは決断力です。{userName}がする決断にいつも助けられる人がいます。',
    '{userName}のいいところは思いやりです。{userName}に気をかけてもらった多くの人が感謝しています。',
    '{userName}のいいところは感受性です。{userName}が感じたことに皆が共感し、わかりあうことができます。',
    '{userName}のいいところは節度です。強引すぎない{userName}の考えに皆が感謝しています。',
    '{userName}のいいところは好奇心です。新しいことに向かっていく{userName}の心構えが多くの人に魅力的に映ります。',
    '{userName}のいいところは気配りです。{userName}の配慮が多くの人を救っています。',
    '{userName}のいいところはその全てです。ありのままの{userName}自身がいいところなのです。',
    '{userName}のいいところは自制心です。やばいと思ったときにしっかりと衝動を抑えられる{userName}が皆から評価されています。'
];

/**
*   名前の文字列を渡すと診断結果を返す関数
*   @param {string} userName ユーザーの名前
*   @return {string} 診断結果
*/
function assessment(userName){
    //TODO 診断処理を実装する
    //入力された全文字のコード番号を取得し、和を求める
    let sumOfCharCode = 0;
    for(let i = 0; i < userName.length; i++){
        sumOfCharCode += userName.charCodeAt(i);
    }
    //文字のコード番号の合計を回答の数で和って添字の数値を求める
    const index = sumOfCharCode % answers.length;
    //const result = answers[index];
    let result = answers[index];
    //{userName} を入力された文字列に書き換える
    //正規表現
    result = result.replace(/\{userName\}/g, userName);
    //診断結果
    return result;
}
/* 
console.log(assessment('太郎'));
console.log(assessment('次郎'));
console.log(assessment('太郎'));
*/
/*
console.assert(
    assessment('太郎') === 
    '太郎のいいところは決断力です。太郎がする決断にいつも助けられる人がいます。',
    '診断結果の文言の特定の部分を名前に置き換える処理が正しくありません。'
    );
*/
console.assert(
    assessment('太郎') === assessment('太郎'),    
    '入力が同じ名前なら同じ診断結果を出力する処理が正しくありません。'
);

これってTwitterの診断メーカーみたいなやつかなーと思いつつ。
文字のコード番号を使ったロジックには感動すら覚える。
色々応用もできそうな気がします。

まとめ

まだ途中ですが、完成まではあと2節。
といってもツイートボタン以外はこの後の流れはなんとなくわかるので、今回ほど苦労はないかなと。がんばります。