はじめに

前回の記事に引き続き、コーディングに関する課題と対応を記載していきたいと思います。
他、指導対象も含め、以下記事と重複する為、省略。
https://qiita.com/junnishi/items/496b492d3bbc95ceaf4c

数人指導してみての共通課題と対応

1.変数が好き
2.メソッド単位でのやりたいことが遠い
3.自分が何を書いているかわからない

対応

先に対応を記載してしまいますと、以下の対応をしました。

ア）コーディングルールを先に読ませ、理解度を確認。
これをすることで後々なんで記述の仕方を変えるべきか？という指摘の根拠にしています。
例として以下はgoogle coding styleのJavascriptのURLです。
https://google.github.io/styleguide/jsguide.html

イ）コードレビューをする。
当たり前だろ！と思われるかもしれませんが、特に社内システムを扱っていたり、ビジネス用のWebアプリケーションを取り扱っているところでは、やっていないところも多いのではないでしょうか？（転活したときに聞いた感じより）
これをやらなかったシステムはかなり混沌を極め、いわゆる「レガシーシステム」に変貌していきます。
大ベテランが作ったものだろうが、何だろうが、PL等中心となって必ず実施すべきです。

大まかに私が見ている観点・課題は以下です。
※コーディング規約、ここは関数化すべきだろうなど基本的なことは除く

課題の詳細（1.変数が好き）

極端な例ですが、以下のような感じです。

let agreed = $("#agreed").val();
if(agreed){
 ...
}
以降「agreed」は出番なし

上記の場合、右辺がやや複雑で、意味を補完するためのものであれば変数を利用してよいと思いますが、

if($("#agreed").val()){
}

これで十分伝わると考えます。
こういった変数の使い過ぎというのは着目してレビューするようにしています。
特にもJavascriptの場合は「let」が出てきた段階で「本当かなぁ？」と思う次第です。

課題の詳細（2.メソッド単位でのやりたいことが遠い）

こちらも例で示しますとこんな感じです。
1の変数の使い過ぎも多少含んでいます。

const createOrderedTable = () => {
  // 値を取得するための準備処理
  const condition1 = $("#condition1").val();
  const condition2 = $("#condition2").val();
  const param = `condition1=${condition1}&condition2=${condition2}`

  // 前準備となるデータ群1を取得
  $.ajax({
    type: "GET",
    url: `xxxxx?${param}`,
    dataType: "json"
  }).done( ()
    data => {
        $.ajax({
        type: "GET",
        url: `xxxxx?${data.param}`,
        dataType: "json"
     }).then(
       data => {
         for(let i = 0;i< data)

       },
       error => {・・・}
     )},
    error => {・・・}
  );

}

ここでこの関数で最終的に表現したいことは

       data => {
         for(let i = 0;i< data)

       },

この部分だと思います。
この関数がやりたいことがパッと見でわからないというのはしばしば見られます。
自分が表現したいことがなんなのか？それを表現するまでに「自分の頭を整理するためのコードを書いていないか？」というのは常日頃から指摘事項として挙げることが多いです。
createOrderTableなのであれば可能な限り早くやりたいことに到達すべきと思います。

課題の詳細（3.自分が何を書いているかわからない）

Web分野では特にクラス定義を書くときに、よく見られます。
BootStrapなど使用していると公式記事から参照してパーツを作成するというのはよくあることかと思われます。
その際、使用しているクラスの特性を確認しないというのは多い印象を受けました。
「このクラス必要なの？」これに明確な答えがない場合は要注意です。