はじめに

みなさんはレスポンシブ対応はどのように動作確認してますか？ブラウザがどんどん高機能になっているのでブラウザで終わらせてしまうケースもあると思います。でもブラウザのレスポンシブモードと実機の見え方って結構違ってたりするんですよね。スマホの実機テストは簡単に出来るのでブラウザテストと併用してやってみてはいかがでしょう。

手順

Step1. package.jsonのscriptsを修正

// package.json

{
  "scripts": {
    "dev": "cross-env HOST=0.0.0.0 PORT=3000 nuxt",
  },
}

Nuxt.js環境を構築した初期の状態では"dev": "nuxt"になっていると思いますが、そこにcross-env HOST=0.0.0.0 PORT=3000を追加してあげます。これで同じネットワーク内の端末からアクセス可能になります。同じネットワーク内とは、簡単に言えば同じwi-fiに接続している状態のことを指します。

Step2. PCと実機テストしたいスマホを同じwi-fiに接続

同じwi-fiに繋ぐと、PCとスマホが同じネットワーク内となり、相互間でアクセス出来るようになります。

Step3. Nuxtを起動

yarn devを実行してNuxt.jsを起動すると以下のようにURLが表示されると思います。

Step4. スマホからアクセス

さきほど表示されたURLをスマホのお好きなブラウザに入力してアクセスしてみてください。開発中の画面がスマホで見れるようになっているかと思います。

さいごに

クロスブラウザ対応はあまり楽しめませんが、レスポンシブ対応は結構好きです。ただもう少しデザインセンスがあればなと、こればかりは嘆いてばかりです。まぁ、嘆いてばかりいても仕方ないので、餅は餅屋と思って諦めます。