皆さんこんにちは、ALL CONNECTでWEBプログラミングを担当している江端です。
GWも過ぎてしまいましたね。皆さんはどんな連休を過ごしたのでしょうか？
私は毎年、GW、お盆、年末と年に3回、小中の同級生と家族ぐるみでバーベキューと忘年会をしています。もう10年以上続いています。それぞれ、結婚して子どもができて、その子どもと一緒に友達と集まることができるのは、とてもうれしく思います。
今年のGWも集まってバーベキューをして過ごしました。

さて、今日はバグの出にくい実装方法について、考えてみたいと思います。

いかに手を抜くことができるかを考える

私には部下がいるのですが、先日こんなことがありました。
検収後の修正を終え、レビューをしていた時のことです。
レスポンシブなページでフリーダイヤルを表示している箇所があり、部下はスマホでアクセスされた場合はそのフリーダイヤルをaタグで囲むtelリンクをつけ、PCでアクセスされた場合ばtelリンクをつけないという修正をしました。

私：「どういう風に修正したか、ソースを見せて」
部下：「はい。これです。jQueryでユーザーエージェントを取得し、まずはデバイスを判定します。
　　　そして、aタグのテキストを取得して、正規表現でフリーダイヤルかどうかを調べます。
　　　フリーダイヤルだったら、そのテキストをaタグのhref属性に入れます。」

私：「う～ん。これ、テストした？」
部下：「はい。しました。」

私：「どんなテストした？」
部下：「Chromeで確認し、ユーザーエージェントをスマホにして確認しました。」

私：「この正規表現も？」
部下：「はい。しました。」

私：「きちんと、電話番号のパターンを洗い出した？」
部下：「……。いいえ。」

私：「違うブラウザでも確認した？」
部下：「……。まだです。」

私：「私だったら、サーバーサイド(弊社はPHPで実装しています)でユーザーエージェントを取得して、ifとendifを使ってPCならaタグをつけない。スマホならaタグをつけてhrefにtelリンクを入れるかな。だって、テストするの嫌だもん。」
部下：「なるほど…。」

フロントエンドでプログラミングすると必ず、クロスブラウザチェックをしないといけません。
サーバーサイドでできることはサーバーサイドでやったほうが1回のテストで済みます。
正規表現を使うとマッチするパターンのテストケースとマッチしないパターンのテストケースを洗い出さなければなりません。

1つの機能を実装するのに、方法はいくらでもあります。でも、複雑なロジックを組めば組むほど、テストケースを洗い出すのに一苦労します。

いかに手を抜くことができるかを考えると、意外と簡単に実装できることがありますので、皆さんもこのことを念頭にいれておくと良いのではないでしょうか?