コードレビューをいただきました。
繰り返しになってしまいますが、私は今コードを学んでいます(ジーズアカデミー でカテゴリ分けした方がいい気がしてきた…)
初めはなんとなくプログラミングをかじってた人が「すげー」と言われていましたが、学習が進むにつれて同期の課題のクオリティが爆上がりしており、戦々恐々としつつも非常に楽しいです。
さて、そんなジーズアカデミー ですが、作品発表の場はあるものの、じゃあ実際にこのコードの記法は如何なものか?という点についてはまだ触れられません。
ということで、現状の作品を職場の先輩に見ていただき、フィードバックをいただきました。
機能毎にファンクションを分けるべき
真っ先に言われたのはこれでした。ある程度は分けていたつもりでしたが、全然わけきれてない、と。
例えばこの部分。
//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で取得して展開しています。
- AJAXを使ってPHPと連携。
- 特定のキーワードを含むJSONデータを取得する
- 成功したらパースして、JSONデータから欲しいデータを取得し、HTMLに整形する
- レビューの文章の中にある検索キーワードを置換する
- 結果の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>'
このような部分は違和感があるとのこと。新たに領域を作成して代入という形になるため、わずかではあるが無駄が発生しているとのこと。
いい目次が作れるように、コーディングの設計も注意していきます!(眠くて月並みな感想しか言えない)