【JavaScript】ハイフンつなぎからcamelCaseへ変換する関数を作成

プログラミング

2020.12.222021.01.17

現代のJavaScriptチュートリアルにとりくんでいます。
今回の演習問題では、ハイフンつなぎの言葉をキャメルケースに変換する関数作成が課題でした。

例えば
background-color -> backgroundColor
list-style-image -> listStyleImage
という感じです。
Railsを勉強したときに、勝手にファイル名が作られたりしていました。そのときに使われているアルゴリズムなのだろうと思います。

自分なりに作ったコードがこちら。
お手本のコード

自分なりに作ったコードがこちら。

/* Your code... */
function camelize(str){
  let strArr = str.split('-') ;
  let newArr =[];
  let sUpper;
  let counter = 0;

  strArr.forEach(function(s){
    counter == 0 ?
      sUpper = s : sUpper = s.charAt(0).toUpperCase() + s.substring(1);
    
    newArr.push(sUpper);
    counter += 1
  })
  return newArr.join('');
}

最初、counter変数は設定していなくて、最初の単語も最初が大文字になりました。うんうんと唸った結果、counter変数を設定して、最初だけ単語をそのままかえすことにして、2個め以後一文字目を大文字に変換することにしました。

お手本のコード

function btterCamelize(str) {
  return str
    .split('-') // my-long-word -> ['my', 'long', 'word']
    .map(
      (word, index) => index == 0 ? word : word[0].toUpperCase() + word.slice(1)
    ) 
}

引数strに対して　.split,.map,.join を順番に実行します。

.map では配列の添字を使って、1つ目の言葉かどうかを判定しています。

自分のコードでも配列の添字を使って見ることにします。配列の添字を取得するのには、indexOf()というメソッドを使います。

// -つなぎの単語をキャメルケースに変換
function camelize(str){
  let strArr = str.split('-') ;
  let newArr =[];
  let sUpper;
  // return strArr;
  strArr.forEach(function(s){
    strArr.indexOf(s) == 0 ?
      sUpper = s : sUpper = s.charAt(0).toUpperCase() + s.substring(1);
    
    newArr.push(sUpper);
  })
  return newArr.join('');
}

お手本のコードがすごくシンプル。いろいろなメソッドと使い所をたくさん経験しようと思います。