コードを読んで、何してるかが一目でわかるように！ - コードレビューしてもらった話

コードレビューをいただきました。

繰り返しになってしまいますが、私は今コードを学んでいます（ジーズアカデミー でカテゴリ分けした方がいい気がしてきた...）

G's Academy Tokyo LABコースに通います

初めはなんとなくプログラミングをかじってた人が「すげー」と言われていましたが、学習が進むにつれて同期の課題のクオリティが爆上がりしており、戦々恐々としつつも非常に楽しいです。

さて、そんなジーズアカデミー ですが、作品発表の場はあるものの、じゃあ実際にこのコードの記法は如何なものか？という点についてはまだ触れられません。

ということで、現状の作品を職場の先輩に見ていただき、フィードバックをいただきました。

機能毎にファンクションを分けるべき

真っ先に言われたのはこれでした。ある程度は分けていたつもりでしたが、全然わけきれてない、と。

例えばこの部分。

    //POST to PHP file to get JSON info.
    $.ajax({
        type: 'POST',
        url: "./php/json.php",
        data:{
            api:'gurunabi-rep',
            words: searchWords,
        }
    })
    .then(
        // Success to get JSON
        function(data){
            console.log('Success!');
            let jsonData = JSON.parse(data);
            console.log(jsonData["response"][0]["photo"]);
            //you can get 50 posts from Gurunavi API
            var resultHTML = "<h2>" + jsonData["response"]["total_hit_count"].toLocaleString() + " 件の " + searchWords + " を発見！</h2>";
            resultHTML += '<div class="api-result">'
            for(let i=0; i < 5; i++){
                resultHTML += '<div class="review">';
                resultHTML += '<img src="' + jsonData["response"][i]["photo"]["image_url"]["url_200"] + '" >';
                resultHTML += '<div>'
                resultHTML +=  '<p class="menu_name">' + jsonData["response"][i]["photo"]["menu_name"] + "</p>";
                resultHTML += '<a href="' + jsonData["response"][i]["photo"]["shop_url"] + '" target="_blank" >';
                resultHTML +=  '<p class="shop_name">' + jsonData["response"][i]["photo"]["shop_name"] + "</p>";
                resultHTML += '</a>'
                let review = jsonData["response"][i]["photo"]["comment"];
                console.log(review);
                //Replace search word to bold
                review = review.replace(searchWords, '<b>' + searchWords + '</b>');
                resultHTML +=  "<p>" + review + "</p>";
                resultHTML += '</div></div>'
            }
            resultHTML += "</div>"
            $('.api-result').html(resultHTML);
        },
        // Fail to get JSON
        function(){
            alert('Failed to get .json data...');
        }
    );

簡単に流れを説明すると、ぐるなびAPIからレビュー情報をJSONで取得して展開しています。

1. AJAXを使ってPHPと連携。
2. 特定のキーワードを含むJSONデータを取得する
3. 成功したらパースして、JSONデータから欲しいデータを取得し、HTMLに整形する
4. レビューの文章の中にある検索キーワードを置換する
5. 結果のHTMLを返す

この動作、ひとつひとつの動作を見ていくとわかりますが、ぱっと見ではわからないですよね。

では、このように書いてあったらどうでしょう。

parseData();
createContent();
return result;

...

createContent(){
   createArticle()
   emphasizeReview()
}

...

それぞれが何をしているのか、文章毎にわかるようになっていますね。

いいコード、すなわち読みやすいコードは「いかにいい目次を作れるか」という言葉が印象的でした。

また、

                resultHTML += '<div class="review">';
                resultHTML += '<img src="' + jsonData["response"][i]["photo"]["image_url"]["url_200"] + '" >';
                resultHTML += '<div>'
                resultHTML +=  '<p class="menu_name">' + jsonData["response"][i]["photo"]["menu_name"] + "</p>";
                resultHTML += '<a href="' + jsonData["response"][i]["photo"]["shop_url"] + '" target="_blank" >';
                resultHTML +=  '<p class="shop_name">' + jsonData["response"][i]["photo"]["shop_name"] + "</p>";
                resultHTML += '</a>'

このような部分は違和感があるとのこと。新たに領域を作成して代入という形になるため、わずかではあるが無駄が発生しているとのこと。

いい目次が作れるように、コーディングの設計も注意していきます！（眠くて月並みな感想しか言えない）