皆さんは美しいソースコードを書くのは好きですか？ 私は大好きです。😊
Prettierというコード整形ツールがあるのは以前から知っていましたが、自分がきれい・美しいと思うコードとコード整形ツールの整形するコードが違うので使っていませんでした。
しかし、以前ブログに書いたリファクタリングのお仕事をしてみた（まとめ）ではPrettierを導入しました。私は美しいコードが大好きなのと同様に汚いコードは再嫌いだからです。😱
Prettierのメリット
一定の美しさのコードが手間をかけずに入手できる事です。
- インデントやスーペースの入れ方などが統一できる
- 行末の
;や"or'の統一ができる - インデント数や色々なルールを設定できる
- VS CodeやVim, Emacs等のエディター上でも使える
複数の開発者、とくにチームに新人や汚いコードを何とも思わない開発者がいる場合は、とても有用だと思います。
EY-Officeの教育ではきれいなコードを書く事は大事なことだと教えています。きれいなコードは読みやすくコードのメンテナンス性を高めたりバグの発見を容易にします。
とくに新人に対しては時間をとってきれいなコードを書く事を教えています。 きれいなコードを書く習慣は、新人のうちに身に付けておくべきだと思います。実際の開発業務の中にいると時間に追われ、コードの品質はなおざりになりがちだからです。
Prettierは努力無しできれいなコードを書くのに役立つ素晴らしいツールだと思います。
Prettierの嫌いなところ
ただし、Prettierは私が書くようにコードを整形してくれません。良くいわれる例としては
const top = 100;
const left = 200;
const width = 80;
const height = 30;のように=が揃うようにスペースを入れていますが、Prettierは以下のように無視してしまいます。🥺
const top = 100;
const left = 200;
const width = 80;
const height = 30;また、JSXで多数のプロパティ（Props）があるコンポーネントを利用する際に工夫して行数を減らして書いても
<InfiniteScroll
loadMore={loadScore} pageStart={0} useWindow={false}
loader={<p>Loading...</p>} hasMore={hasMore}>
<ListItems />
</InfiniteScroll>Prettierは以下のように縦に並べてしまいます。🥺
<InfiniteScroll
loadMore={loadScore}
pageStart={0}
useWindow={false}
loader={<p>Loading...</p>}
hasMore={hasMore}
>
<ListItems />
</InfiniteScroll>将来的には整形ツールにAIが内蔵され、私の好みを学習してくれるようになるのかなぁ〜と思います。
まとめ
読みやすい美しいコードを書くには、適切な関数・モジュール分けや、適切な関数・変数名を付けるなど現在の整形ツールでは出来ない事も多数ありますが、インデントやコーディングルールを瞬時に統一できるPrettierのようなツールを導入するのは、とても良い事だと思います。
