コードはどこで動くか — ブラウザ・サーバー・スマホアプリ

この記事は、書いたコードがどこで動くかを扱います。

動く場所は、ブラウザの中、サーバーの中、スマホに入れたアプリの中の 3 つです。

Web アプリのコードは、ブラウザとサーバーの 2 か所で動く

利用者の端末で HTML を読み取り、画面を描くソフトウェアがブラウザ（browser）、要求をいつでも受け付けられるようにしてあるコンピュータがサーバー（server）です。

代表的なブラウザは Chrome・Safari・Edge・Firefox です。

ブラウザが直接読んで実行できる言語は JavaScript です。

my-app は 4 つのファイルでできていて、画面の 2 つがフロントエンド、予約を受ける server.js がバックエンドです。

利用者が URL を開くと、画面の 2 つだけが端末に届きます。

同じ my-app のファイルでも、動く場所は 2 つの囲みに分かれます。

端末に届くのは index.html と app.js だけで、そのあと 2 つの囲みの間を通るのはデータだけです。

次の 3 行のうち、真ん中はブラウザの中にだけ、最後はサーバーの実行環境の中にだけある機能です。

console.log("予約する");
console.log(navigator.language);
console.log(process.version);

この 3 行をブラウザの中で動かすと、結果は次のように分かれます。

Web アプリのコードは 2 か所に分かれる

画面を作る index.html と app.js は利用者の端末に届き、ブラウザの中で動きます。

予約を受け付ける server.js は公開サーバーから出ないので、他人に見せない文字はこちら側に書きます。

スマホで使えるようにする方法は、 Web アプリのままか、ネイティブアプリか

スマホにもブラウザが入っています。

my-app は、スマホのブラウザで URL を開けばそのまま動きます。

これが 1 つ目の方法で、コードを作り直す必要はありません。

端末の中でアプリの起動・画面・通信・ファイルを管理するソフトウェアがOS（Operating System）で、スマホなら iOS や Android です。

2 つ目の方法がネイティブアプリ（native app。OS の上に直接入れて動かすアプリ）で、iPhone 用と Android 用を別々に作り、App Store と Google Play を通して届けます。

アプリを端末に置き、OS から起動できる状態にすることがインストール（install）です。

図のとおり、ネイティブアプリは OS の上に載り、 Web アプリはその OS に入っているブラウザの上で動きます。

サーバーへ要求を送る側のプログラムや端末をクライアント（client）と呼び、端末で動く側をクライアントサイド、サーバーで動く側をサーバーサイドとも呼びます。

どちらを選ぶかは、長所と短所を並べて決めます。

ブラウザから使えるのはブラウザが用意した機能までで、それより広く端末の機能を使いたいときがネイティブアプリです。

ストアの検索から見つけてもらいたいときも同じで、どちらにも当てはまらなければ Web アプリのままにします。

1 つのソースコードから複数の OS 用のアプリを作る仕組みもあり、その名前は次の記事で扱います。

届け方が変わっても、server.js は共通

Web アプリのままにすれば、スマホのブラウザで URL を開くだけで動きます。

ネイティブアプリは iPhone 用と Android 用を別々に作ってストアから入れてもらいますが、どちらを選んでも server.js と reserve.db は公開サーバーに置いたままです。

手元で動いている状態と、公開して動いている状態は何が違うか

作った my-app は、まだ自分のパソコンからしか開けません。

コードを動かす場所としての自分のパソコンの中をローカル（local）と呼びます。

ローカルで開く http://localhost:3000 の末尾の番号は、同じパソコンの中で相手を区別するためのもので、この講座の「URL を入れると何が起きるか」の記事で扱います。

囲みの中が自分のパソコン 1 台で、ブラウザも server.js も reserve.db もその中にあります。

公開すると、この 1 台の中身が 2 か所に分かれますが、役割ごとの顔ぶれは変わりません。

動くファイルの名前は、ローカルでも公開後でも同じです。

4 つのファイルをまとめて自分のパソコンの外の公開サーバーへ移すことが、デプロイです。

4 つのファイルは公開サーバーに移り、自分のパソコンに残るのはブラウザだけです。

どの端末からでも同じ example.com を開けば、同じ画面が出ます。

ローカルのままでは、外から届く要求を受け付けないので、他の人の端末からは使えません。

localhost:3000 は打ち込んだ端末自身を指すので、同僚のスマホから打っても自分のパソコンには届きません。

公開する作業の中身は、この講座の「デプロイと環境変数 — 手元で動いたものを公開するまで」で扱います。

置く場所が変わると、使える人が変わる

入門書の手順で動いた my-app は、自分のパソコンの中、つまりローカルからしか開けません。

4 つのファイルを公開サーバーへ移すと他の人の端末からも開けるようになり、この作業がデプロイです。