tag:crieit.net,2005:https://crieit.net/tags/%E3%83%9B%E3%83%83%E3%83%88%E3%83%AA%E3%83%AD%E3%83%BC%E3%83%89/feed Crieitでタグ「ホットリロード」に投稿された最近の記事 2018-10-29T13:18:13+09:00 https://crieit.net/tags/%E3%83%9B%E3%83%83%E3%83%88%E3%83%AA%E3%83%AD%E3%83%BC%E3%83%89/feed tag:crieit.net,2005:PublicArticle/14481 2018-07-16T07:53:17+09:00 2018-10-29T13:18:13+09:00 https://crieit.net/posts/90d2d9333da1e59c8ba89783b91fe3f7 <h2 id="ホットリロードとは？"><a href="#%E3%83%9B%E3%83%83%E3%83%88%E3%83%AA%E3%83%AD%E3%83%BC%E3%83%89%E3%81%A8%E3%81%AF%EF%BC%9F">ホットリロードとは？</a></h2> <p>ローカル開発環境（<code>http://localost:8080/</code>）でフロント側の開発しているとき、僕は今まで<br /> ①ファイル編集 → ②保存 → ③ブラウザでcommand + R...を繰り返し確認していました。</p> <p>が、ホットリロードを取り入れると、①ファイル編集 → ②保存した瞬間に、編集したファイルを読み直してストレスなく開発を進めることができます（最近知りました...orz）。これは知っているのと、知っていないのでは開発のスピードが全然違ってくるので、一度試してみる価値はあるかもしれません...。</p> <p>とても簡単に構築することができるのでぜひ試してみて下さい。</p> <h2 id="ホットリロードの環境構築"><a href="#%E3%83%9B%E3%83%83%E3%83%88%E3%83%AA%E3%83%AD%E3%83%BC%E3%83%89%E3%81%AE%E7%92%B0%E5%A2%83%E6%A7%8B%E7%AF%89">ホットリロードの環境構築</a></h2> <p>ホットリロードにはvueのcliでもなく、React Hot Loaderでもなく、npmの『live-server』というプラグインを使います（おそらくこれが一番簡単）</p> <p>※npmコマンドは事実行できる環境にしておいてください</p> <p>以下のコマンドをターミナルで実行します。</p> <pre><code>$ npm install -g live-server $ cd <開発のディレクトリ> $ live-server . </code></pre> <h2 id="確認"><a href="#%E7%A2%BA%E8%AA%8D">確認</a></h2> <pre><code>[http://127.0.0.1:8080/](http://127.0.0.1:8080/) or [http://localost:8080/](http://localost:8080/) </code></pre> <p>このコマンドででホットリロードで開発できるローカル開発環境が手に入るので、ぜひ試してみてください！</p> フジワラ＠CLOCK