Webアプリケーションを公開するまでのつぶやき 13

プロローグはこちら↑。

アンチパターンを直す

        <a
          v-if="isMobaile"
          v-bind:href="favorite.geocode.toScheme()"
          target="_blank"
          >ここへいく</a
        >
        <a v-else v-bind:href="favorite.geocode.toUrl()" target="_blank"
          >ここへいく</a
        >

これはお気に入り画面に作ったここへいくボタンなのですが、URLを作るのにextentionを使っています。
実はこれアンチパターンなんですよね。
stringに生やしてはいけないメソッドを生やしています。
この機能はstringの機能として相応しくないので、別な実装をすべきなのですがこれを作った時には関数をどこに定義すればいいのか分からなかったのでこんな実装をしてしまいました。

しかし、つよつよエンジニアにやり方を教えてもらってのでリファクタしたいと思います。

関数を作る

apiから取得するgeocodeはlon,latの形式なのでこれを一旦splitで分解します。
そのcomponentに閉じた機能であればそのファイル内に書いてもよいみたいな感じなのでFavoriteScreen.vueに関数を書きます。 

type GeoCode = {
  lon: string;
  lat: string;
};

function parseGeocode(geocode: string): GeoCode {
  const [lon, lat] = geocode.split(",");

  return {
    lon,
    lat,
  };
}

function geocodeToScheme(geocode: GeoCode): string {
  return (
    "http://maps.google.com/maps?f=q&hl=ja&geocode=&q=" +
    geocode.lat +
    "," +
    geocode.lon +
    "&z=19&ie=UTF8&dirflg=w"
  );
}

function geocodeToUrl(geocode: GeoCode): string {
  return "comgooglemaps://?q=" + geocode.lat + "," + geocode.lon + "&zoom=17";
}

ついでに
set()でごちゃごちゃ計算していたモバイルかどうかっていうのも関数にしてみました。

function setIsMobaile(): boolean {
  const userAgent = window.navigator.userAgent.toLowerCase();
  const isMobaile =
    userAgent.indexOf("iphone") != -1 ||
    userAgent.indexOf("ipad") != -1 ||
    userAgent.indexOf("android") != -1 ||
    userAgent.indexOf("mobile") != -1;
  return isMobaile;
}

const isMobaile = ref(setIsMobaile());

こんな感じ。
set()がすっきりしました。
import、exportについても教えてもらったので、共通処理なんかを別のファイルにまとめるとかもできそうです。

そんな訳でextentionsはディレクトリ毎削除です。
また、必要になったら作るかもですが一旦は関数でなんとかなりそうです。

今回はここまでです。
ここまで読んで下さってありがとうございました。