モバイルフォンでlocalhostを見る方法

今日では、デスクトップだけでなくモバイルデバイスでもウェブサイトやウェブアプリケーションが素晴らしい見た目と感じを持つことが、これまで以上に大切です。モバイル対応を助けるために多くのツールが年々作られてきました。例えばResponsivelyやChromeの組み込みの「Inspect」ツールなどがありますが、たまには作業途中でもスマホからリアルタイムに進捗を見れたら、もっと楽でスムーズになることもあります。

幸いなことに、ブラウザで見ているそのlocalhostをスマートフォンで見る簡単な方法があります。

前提条件：この方法を使うためには、あなたの電話とコンピュータが同じwifi信号に接続されている必要があります。

ステップ１：ローカルプロジェクトをlocalhostで実行

コンピュータで、特定のプロジェクトに必要な手順に従ってアプリを立ち上げ、ブラウザのlocalhostに表示させましょう。localhostポートがタブで開かれているかを確認してください。

ステップ２：ローカルIPアドレスを取得

ターミナルを開いてipconfigと入力します。たくさんのテキストが表示されますが、IPv4 addressと書かれた行を探します。

見つけたアドレス（例えば111.111.1.111といった形ですが、数字は異なるものです）をスマホのブラウザ（Chrome、Safariなど）のアドレスバーにポート番号とともに入力します。先ほど開いたマシンのポート（localhost:3000や8000など）を付け加えると、以下のような形になります。

123.456.7.890:3000

すべての数字を正確に入力し、localhostポートが実行中であれば、スマホでプロジェクトのモバイルビューが表示されるはずです。デスクトップで変更を保存すると同期してリロードされます。

おめでとうございます！これで特別な開発ツールを使用したり、特殊なソフトウェアをインストールしたり、半完成のアプリをデプロイしたりせずに、特定のモバイルデバイスでプロジェクトがどのように見えるかのライブビューを手に入れることができました。この方法には特別な開発ツールは付属していませんが、他の手段を通じた「モバイル」ビューの一貫性のなさがなくなるので、それを確認するのに役立ちます。

こちらの記事はdev.toの良い記事を日本人向けに翻訳しています。
https://dev.to/paytoncodes/how-to-view-localhost-on-your-phone-13ij