2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

JavaScriptリファクタリング[文字列操作]

Posted at

レガシーかつ酷いJavaScriptコードを少しづつリファクタリングしてみます。

仕様
「atiiq no tsop tsrif」の文字列を反転等で操作して「First post on Qiita」と表示する。

##STEP 0
何をしているか分り辛いコード。こんなコードに出会ったことのない貴方は幸せ者。

function reverse(string) {
  const reversed = string.trim()
                         .split('')
                         .reverse()
                         .join('');
  return reversed[0].toUpperCase()
                    + reversed.substring(1, 14)
                    + reversed[14].toUpperCase() 
                    + reversed.substring(15)
                    + (reversed[reversed.length -1] = ".");

};

reverse('atiiq no tsop tsrif');

##STEP 1

  1. reverse関数をアロー関数に変更
  2. 文字列を返す関数を用意
  3. セミコロンを削除
const reverse = string => string.trim()
                                .split('')
                                .reverse()
                                .join('')

const target = string => string.indexOf('qiita')
...

##STEP 2

  1. 投稿するサービスを定数で定義
  2. ピリオドを文末に追加する関数を作成
  3. 完成した文字列を返す関数を作成
const serviceName = 'qiita'
...
const target = string => string.indexOf(serviceName)
...
function reverseSentence(string) {
  const reversed = reverse(string)
  const addPeriod = string => string
                            + (string[string.length -1] = "."
  return reversed[0].toUpperCase()
                            + reversed.substring(1, target(string))
                            + reversed[target(string)].toUpperCase()
                            + reversed.substring(target(string) +1)
}
...

##STEP 3

  1. reverseSentenceをアロー関数に
  2. 完成した文字列を作成するsentence関数を作成
  3. タイポを防ぐためピリオドが文末に既に存在する場合は表示しない
...
const sentence = string => string[0].toUpperCase()
                           + string.substring(1, target(string))
                           + string[target(string)].toUpperCase()
                           + string.substring(target(string) +1)
...
const addPeriod = string => string
                           + (string[string.length -1] === "." ? "" : ".")
const reverseSentence = string => sentence(addPeriod(reverse(string)))
...

##Done

const serviceName = 'qiita'

const reverse = string => string.trim()
                                .split('')
                                .reverse()
                                .join('')

const target = string => string.indexOf(serviceName)

const sentence = string => string[0].toUpperCase()
                           + string.substring(1, target(string))
                           + string[target(string)].toUpperCase()
                           + string.substring(target(string) +1)

const addPeriod = string => string
                           + (string[string.length -1] === "." ? "" : ".")

const reverseSentence = string => sentence(addPeriod(reverse(string)))

reverseSentence('atiiq no tsop tsrif')

>"First post on Qiita"

関数名で処理を伝えるようにしました。

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?