質問: create-react-appのGetting Startをよんでいたところ、npm startでlocalhostサーバーが立ち上がるようでした JSを実行するだけなのに、なぜサーバーを立ち上げる必要がありますか? 直接結果のファイルを参照してはいけないんですか? サーバーとReactの関係性を教えてください。 よろしくお願いします。
回答: 「できあがったReactを使ったサイトを確認するだけなら、HTMLをローカル上で直接開いて見ればいいじゃ無いか?」 たぶん、そう思ったのででしょう。しかし、このローカルで直接HTMLを開く事にはいくつかの問題があります。 ### 1. 絶対パスがあると、正しく表示できない。 最近のWebサイトはCSS、JavaScript、アイコンなどの画像、他ページへのリンク等について絶対パスを使う傾向があります。これは、HTMLの階層が変わってもコードを変更しなくても良いようにです。react-appも例外ではなく絶対パスになるようになっています。 例えば、HTMLに``と書かれていますが、もし、ローカルで閲覧したらどうなるでしょうか? HTTPサーバーとして見る分には、そのサーバー上の"/static/js/main.js"を見に行くでしょう。しかしローカル上で開いた場合、ローカルドライブ上の"/static/js/main.js"を見に行きます。UNIX/Liunxならまさしくルートから辿ったそのパス、Windowsなら"C:\static\js\main.js"等(ドライブはHTMLが置いてあるドライブ)を見に行くと言うことです。 ルート直下やドライブ直下からプロジェクトファイルを置くわけには行きませんから、結局、相対パスに直していくしかありません。しかし、最初に言ったとおり、react-app自体が絶対パスで作るようになっているため、色々と書き替えないといけません。これはとても大変で手間がかかることです。 ### 2. セキュリティ上の制約により、正しく表示できない。 HTTPサーバー上とローカル上ではセキュリティ上の制約が異なります。ローカルに対しての方がセキュリティが高めになっています。例えば、ajax等を用いて、別のファイルを取ってきて、それをHTML上に反映させるとしたい場合、ローカルのファイルだとうまくいきません。なぜなら、セキュリティ上の制約でajax等ではローカル上のファイルは取得できないからです。もし、ローカル上のファイルをajax等で取得できるなら、サイトを見ただけで、ローカル上のファイルを取得されてどこか別の場所にアップロードされてしまうといった、ヤバイサイトが作れると言うことです(``はローカルのファイルを取得できますが、自動的に取得されないように、いくつもの制限があります)。 ブラウザや設定によって異なりますが、他にもローカル上特有の制限がいくつかあります。そのため、昔ながらの単純なサイトならまだしも、JavaScriptの機能をフルに利用したモダンなサイトではローカル上で開いてもうまくいかないでしょう。 大きく上の二つが問題と思います。他にもリアルタイムで反映する(watchを使えばできないことないので、そこまでシビアじゃない)、デバッグがしやすい工夫がしてある(react-appを本格的に使ったことがないので、react-appがそうなっているかは不明です)、等の利点があります。もし、上の問題を回避したいと思うと、ビルドしてWebサーバーにアップロードしてから確認と、手間が増えますし、Webサーバーをすぐに用意できる環境じゃないと、開発が滞ります。 react-appだけではなく、ビルドツールで言えば、parcelも開発時はサーバーを起動することが前提ですし、webpackもwebpack-dev-severを使用すれば同じことができます。また、静的サイトジェネレーター(JekyllやHugo等)のほとんどもそのようなサーバー起動による開発が前提です。より本番に近い環境の方が開発時の確認がしやすいというのがあるのだと思います。