コードを共通化する理由

Web制作をしていると、同じようなコードを何度も書く場面があります。

たとえば、

ヘッダー

フッター

お問い合わせボタン

CTA

見出し

カード

ボタン

パンくずリスト

などです。

最初のうちは、

「必要な場所にそのまま書けばいいのでは？」

と思うかもしれません。

実際、小さなサイトであれば、それでも問題なく動きます。

ただ、ページ数が増えてくると、同じコードを何度も書く方法は一気に管理しにくくなります。

そこで重要になるのが、

コードの共通化

です。

今回は、なぜコードを共通化した方がいいのかについて紹介します。

コードの共通化とは？

簡単に言えば、

同じ役割のコードを1か所にまとめて、複数の場所から使い回せるようにすること

です。

たとえば、WordPressであれば、

header.php

footer.php

template-parts

get_template_part()

などを使って、共通部分を分割できます。

Reactであれば、ボタンやカードなどをコンポーネントとして切り出して再利用するのも共通化のひとつです。

つまり、

同じものを毎回作るのではなく、1つ作って使い回す

という考え方です。

理由① 修正が楽になる

共通化する一番大きなメリットは、

修正箇所を減らせること

です。

たとえば、10ページあるWebサイトで、すべてのページに同じお問い合わせボタンがあるとします。

各ページに同じHTMLを直接書いている場合、ボタンの文章を変更しようとすると、

10ページすべて修正する必要があります。

一方で、ボタンを共通パーツにしておけば、

1か所変更するだけですべてのページに反映できます。

ページ数が少ないうちは大きな違いを感じないかもしれません。

しかし、

10ページ

20ページ

50ページ

と増えていくほど、共通化の効果は大きくなります。

理由② 修正漏れを防げる

コードを複数箇所にコピーしていると、

「このページだけ修正するのを忘れていた」

ということが起こります。

たとえば、電話番号を変更するとします。

サイト内の10か所に電話番号が直接書かれていれば、

9か所変更して1か所だけ古い番号が残る、

ということもあり得ます。

共通化されていれば、修正する場所そのものが少なくなります。

つまり共通化は、

作業時間を減らすだけではなく、ミスを減らすための仕組み

でもあります。

理由③ デザインの統一がしやすい

Webサイトでは、

「同じボタンなのにページごとに少しデザインが違う」

という状態はできるだけ避けたいところです。

コピーして作っていると、

あるページでは、

paddingが16px

border-radiusが8px

別のページでは、

paddingが18px

border-radiusが10px

といった微妙なズレが発生することがあります。

共通パーツとして管理していれば、

同じボタンは同じコードを使うことになります。

そのため、

サイト全体のデザインに一貫性を持たせやすくなります。

理由④ コード量を減らせる

同じコードを何度も書けば、その分ファイルの中身も増えていきます。

たとえば100行あるパーツを5ページにコピーすれば、

単純に500行です。

共通化しておけば、

100行のパーツを1つ用意して、それぞれのページから呼び出すだけで済みます。

コード量が減ることで、

ファイルが読みやすくなる

必要なコードを探しやすくなる

修正箇所を把握しやすくなる

といったメリットがあります。

理由⑤ 開発スピードが上がる

共通パーツが増えてくると、新しいページを作るときも楽になります。

たとえば、

ボタン

カード

見出し

CTA

お問い合わせエリア

などがすでに用意されていれば、

新しいページでもそれを組み合わせるだけで制作できます。

毎回ゼロから作る必要がありません。

つまり共通化は、

今の開発を楽にするだけではなく、将来の開発を速くするための準備

でもあります。

理由⑥ 保守しやすいサイトになる

Webサイトは、公開したら終わりではありません。

公開後にも、

電話番号変更

営業時間変更

デザイン変更

サービス追加

CTA変更

キャンペーン変更

など、さまざまな修正が発生します。

そのため、Web制作では、

「今作れるか」だけではなく、「あとから直しやすいか」

も重要です。

コードが整理されていないサイトは、制作時には問題なくても、半年後や1年後に修正しようとすると非常に大変です。

共通化しておけば、変更箇所を把握しやすくなります。

これは実案件では特に重要です。

何でも共通化すればいいわけではない

ただし、

共通化すればするほど良い

というわけでもありません。

たとえば、そのページでしか使わない小さな要素まで無理に共通化すると、逆にコードを追いにくくなることがあります。

大切なのは、

今後も複数箇所で使う可能性があるか

を考えることです。

個人的には、

2〜3か所以上で使う

今後も増える可能性がある

サイト全体でデザインを統一したい

一括変更する可能性がある

こういったものは共通化を検討していいと思います。

実案件では特に重要

学習用の小さなサイトであれば、多少コードが重複していても大きな問題にはなりません。

しかし、実案件では事情が違います。

納品後に、

「電話番号を変更してください」

「お問い合わせボタンの文章を変えてください」

「CTAの色を変えてください」

といった修正依頼が来ることがあります。

そのときに、

10ファイル変更するのか、

1ファイル変更するのか。

この差はかなり大きいです。

実案件では、

動くコードを書くことだけではなく、あとから変更しやすいコードを書くこと

も重要だと感じます。

共通化は未来の自分のためでもある

コードを書いているときは、

「これくらいコピーでいいか」

と思うことがあります。

ただ、数か月後にそのコードを見るのは、自分かもしれません。

そのとき、

「どこを修正すれば全部変わるんだ？」

という状態になると、自分自身が困ります。

逆に整理されていれば、

「ここを変更すれば全部反映される」

とすぐに分かります。

共通化は、チーム開発だけではなく、

個人制作でも非常に重要な考え方

です。

まとめ

コードを共通化する理由は、単にコードを短くするためではありません。

修正が楽になる

修正漏れを減らせる

デザインを統一できる

コード量を減らせる

開発スピードが上がる

保守しやすくなる

といったメリットがあります。

特にWeb制作では、

「同じコードを何回書くか」ではなく、「変更が発生したときに何か所直す必要があるか」

という視点を持つと、共通化の重要性が分かりやすいです。

僕自身もWeb制作をしていて、以前より

「これは共通パーツにできないか？」

と考えることが増えました。

コードは動けば終わりではありません。

あとから自分や他の人が触りやすい状態にしておくことも、良いコードを書くうえで大切なことだと思います。