BETA

文字列が適切か考える

投稿日:2019-10-17
最終更新:2019-10-17
※この記事は外部サイト(https://blog.hiko1129.com/2019/10/blog-pos...)からのクロス投稿です

はじめに

初心者向けです。

初心者にありがちなことと、TSに入りたてでありがちなことを書きました。

文字列が適切でない選択である可能性を意識する

文字列使いがち問題

自分が以前見かけたコードに下記のようなものがありました。
Next.jsにも例としてこのようなコードが載っています(このコード自体は問題ないです)。

<Link href="/about"><a>About</a></Link>  

このコード単体で見ると、問題ないですが、この書き方をそのままプロダクションでも行われるとすぐに面倒なことになります。

自分が問題視しているのは、/aboutの部分です。

自分が見たコードは、全て(どこでも)hrefの中身が文字列で書かれていました。そのため、タイポっていても実行時にしかわからず(どの部分でも実際にリンク踏むまで正しいかわからない)、再利用性はなく、TypeScriptを利用しているにも関わらず、型の恩恵も受けられない部分になっていました。

本来は、
下記のようにパスを定義しておき、

const aboutPath = () => '/about'  

下記のように定義したパスを使うなどすべきです。

<Link href={aboutPath()}><a>About</a></Link>  

こうすることにより、型の恩恵を受けられ、タイポすることもなくなります。

* 前提として(当然ながら)リンクはどこからでも使われるというのがあります。一箇所でしか使わないならそのまま文字列を直接使っても良いかもしれませんが、整合性の観点からは全て、関数や定数にすべきだと思います(特にパスの場合は、idなどを埋め込むことになると思うので関数にすべき)。

string型使いがち

使用するものが決まっている場合には、enumを使うべき(TypeScriptならunion typeでも一応可)

// enum版  
enum Color {  
    red = 'red',  
    green = 'gleen',  
    blue = 'blue'  
}  


const printColor = (color: Color) => {  
    console.log(color)  
}  

printColor(Color.blue)  
// union type版  
const printColor = (color: 'red' | 'green' | 'blue') => {  
    console.log(color)  
}  

printColor('red')  

おまけ

下記は、最近見かけたAPIです。

withZone(ZoneId.of("UTC"))    

上よりも下のAPIのが良いです。

withZone(DateTimeZone.UTC)  
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

hiko1129の技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!