Okazawa2021.08.11Web制作Share朝の人も夜の人もおはようございます。自然の雄大さを感じる年頃のフロントエンドエンジニアです。私は仕事柄、ソースコードのレビューをします。その最中、気づいたんです。比較的簡単にできるリファクタリングってあるよねって。今回はそんなお得なリファクタリング項目を五つに絞って紹介いたします。普段vueを触ることが多いので、一部vueでソースコードを紹介いたします。router.push('/')}変更前のonClickでも別におかしくはありませんが、vueのテンプレートをコードリーディングしているときにonClickが出てきてもどんな処理をするのかは把握できず、関数を見にいかないといけません。変更後のgoToRootであれば、関数を見にいかずとも何をするのかなんとなくわかります。これはルートに移動するという単一の機能だから成り立つ命名で、複数の処理を行う場合は、onClickの方が妥当な場合もあるでしょう。`${item}が好き`)mapは新しい配列を生成するメソッドです。配列をループするために使っているのを見かけることがあります。正しい使い方をしていれば、mapによって何か新しい配列が生成されているんだなと直感的に読みやすくなるでしょう。配列をループさせたいだけであれば、forEachなどを使うと処理まで追う必要があるというふうに頭の切り替えができます。ソースコードを読む上で考えるコストをなるべく下げられればいいですよね。onigiriTotal)vueのテンプレート側に計算式や条件式が書かれていることがよくあります。テンプレートはhtmlと変数、script側にロジックというふうに分かれていると、これまた考えるコストが少なくなり読みやすくなるでしょう。{APIレスポンスのオブジェクトの扱いなどで目にすることがあります。変数に格納したほうが一見読みやすくなりそうですが、変数に入れても一度しか使わなかったり、変数に入れなくても十分意味が伝わる場合は、無理に変数にしないほうがソースコードの量も少なくなり読みやすくなる場合があります。onigiriTotal)マジックナンバー。何を意味しているか一見わからない数値のことですよね。変更前のソースコードを見ると、onigiriCountが5になればtrueになることがわかりますが、5という数値は何の意味を持っているのかわかりません。自分が書いたソースコードでも(私は)1ヶ月も経てば何を意味していたか思い出せなくなります。自分にも他人にも優しいソースコードを残しておくために命名しておきたいところです。労力で皆が救われます。まとめ可読性を上げるリファクタリングや拡張性を担保するためのリファクタリングなど、リファクタリングの中にも種類があると思います。今回取り上げた五つの項目は可読性を上げるためのリファクタリングにあたるでしょう。絶対的に必要ではないけれども、やっておけば作業効率が上がるかもしれません。人に優しいソースコードを書くことで作業効率が上がり、ストレスを下げ早く仕事を終わらせられることに一役買いたい今日この頃でした。LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。このメンバーの記事をもっと読むWebサイト・アプリケーション制作に従事。エンジニアとして主にフロントエンド領域を担当。PopularPR連載一覧イベント情報Web制作デザインTechnologyAIオウンドメディアSEO対策アプリ開発システム。