JavaScriptはブラウザ、サーバー、モバイルで使えますが、動く場所が変われば扱える情報も変わります。
一つの言語で書けることと、一つのアプリとして安全に配布できることは同じではありません。
画面、秘密情報、データ保存、端末機能の置き場所を決めると、Webとモバイルの構成を比べられます。
JavaScriptを含むアプリ構成や依頼先を目的別に整理したガイドでは、Webサービスとモバイル開発を相談するときの選択肢をまとめています。
| 実行場所 | JavaScriptの担当 | 置いてはいけないもの |
|---|---|---|
| ブラウザ | 画面、入力、API呼出し | 外部サービスの秘密鍵 |
| Node.jsサーバー | 認証、業務処理、データ連携 | 利用者端末だけに必要な画面状態 |
| React Nativeアプリ | モバイル画面と端末API連携 | 更新できないサーバー秘密情報 |
一つのJavaScriptを三つの実行場所へ分ける
ブラウザのJavaScriptは利用者の端末で動き、画面操作や通信を担当します。
MDNのJavaScript Guideでは、言語の基本構文、オブジェクト、クラス、非同期処理などを確認できます。
Node.jsは同じ言語をサーバー側で実行する環境であり、Node.jsの公式入門はブラウザ外で動く特徴と非同期I/Oを説明しています。
React Nativeの公式ドキュメントは、JavaScriptの基礎を前提にAndroidとiOSのネイティブ部品を扱う入口を示しています。
| 境界 | ブラウザ | Node.js | React Native |
|---|---|---|---|
| 主な入出力 | DOM、フォーム、Web API | HTTP、DB、ファイル、外部API | 画面、タッチ、端末API |
| 更新方法 | Web配信 | サーバーへデプロイ | ストア配布とアプリ更新 |
| デバッグ対象 | ブラウザと通信 | プロセスとサーバー環境 | JSとOS別ビルドの両方 |
三つを同じ箱に入れず、どの処理がどこで実行されるかを一行ずつ説明できる状態にします。
その説明が曖昧な処理は、秘密情報の漏えい、重複実行、端末差の不具合につながります。
外部サービスの秘密鍵はブラウザへ置かない
ブラウザへ配信したコードと設定は、利用者が確認できる前提で設計します。
決済サービスや生成AIなどの秘密鍵をブラウザへ置かず、Node.jsサーバーが秘密鍵を保持して必要な処理だけを代行します。
Node.jsの実行環境の説明を踏まえると、要求の流れは次のように分けられます。
- ブラウザは利用者の入力を検査し、自社APIへ送ります。
- Node.jsはログイン状態と権限を検査します。
- Node.jsはサーバー内の秘密情報を使って外部APIへ要求します。
- 外部APIの応答から、利用者へ返してよい項目だけを抽出します。
- ブラウザは結果を画面へ表示し、失敗時の再試行方法を示します。
入力検査をブラウザだけに置くと、直接APIを呼ばれたときに防げません。
使いやすさのための検査をブラウザに置き、信用判断のための検査をサーバーでも必ず行います。
共有コードはデータ規則から選ぶ
JavaScriptをWebとモバイルで使う利点は、すべての画面を同じにすることではありません。
日付の整形、入力値の検証、料金計算、APIの型など、OSへ依存しない規則が共有候補です。
MDNの言語ガイドで扱う配列、オブジェクト、モジュールなどは共有しやすい一方、DOM操作はモバイル画面へそのまま持ち込めません。
共有候補を選ぶときは、次の監査表を作ります。
| コード領域 | 共有候補 | 分離する理由 |
|---|---|---|
| 入力スキーマ | 高い | 同じAPIへ同じ形式を送るため |
| 業務計算 | 高い | OSに依存しない純粋な規則にできるため |
| 画面部品 | 条件付き | Webとネイティブで部品体系が異なるため |
| 権限、通知 | 低い | OS別の許可とライフサイクルがあるため |
| ビルド設定 | 低い | 配布先ごとの署名と成果物が異なるため |
共有率を目標にすると、端末固有の処理まで無理に抽象化しがちです。
変更理由が同じコードだけを共有し、異なる理由で変わる画面や権限処理は分けます。
React Nativeはネイティブ境界を見積もる
React NativeはJavaScriptやReactの知識を使ってモバイル画面を構成できます。
公式のReact Native入門では、Core ComponentsとNative Components、AndroidとiOSの違いを学ぶ経路が案内されています。
カメラ、Bluetooth、位置情報、通知、決済を使う場合は、対応ライブラリの保守状況とOS別設定を調べます。
JavaScript側の呼出しが同じでも、権限文言、バックグラウンド制約、ストア提出物は端末ごとに確認が必要です。
試作では一画面を作るだけでなく、AndroidとiOSの両方でビルドし、権限拒否とアプリ復帰を試します。
ネイティブ側に不具合が出たとき、チームがビルドログと端末ログを追えるかも採用条件です。
Webかモバイルかは更新経路で決める
同じサービスでも、URLへアクセスすれば使えるWebと、ストアから導入するモバイルでは更新経路が違います。
頻繁に内容を変える業務画面ならWebが扱いやすく、カメラや通知を継続的に使うならモバイルの価値が高まります。
構成案を比べるときは、次の場面を一枚に書きます。
- 初回利用者がどこから起動し、ログインするかを描きます。
- 通信が切れたとき、入力中データをどこへ残すかを決めます。
- 新しい版を出したとき、古い利用者がいつ更新されるかを確認します。
- 端末を変更したとき、データと認証をどう引き継ぐかを決めます。
- 障害時に画面、API、外部サービスのどこで止まったかを追えるようにします。
Webとモバイルを両方持つ場合は、APIを共通の契約にし、画面固有の状態を混ぜません。
どちらか一方から始める場合も、将来の共通化より現在の利用場面を優先します。
JavaScriptアプリ開発のよくある質問
JavaScriptだけでアプリを作れますか？
画面からサーバーまでJavaScript系の技術で構成できますが、実行環境と担当範囲は分かれます。
ブラウザ、Node.js、モバイルの境界を定義し、データベース、認証、ストア配布に必要な仕組みも含めて設計します。
Node.jsはブラウザのJavaScriptと同じですか？
言語の基本は共通ですが、利用できるAPIと動く場所が異なります。
ブラウザは画面やDOMを扱い、Node.jsはサーバーのHTTP処理やファイル、外部サービス連携を担当する構成が一般的です。
JavaScriptでスマホアプリを公開できますか？
React Nativeなどを使ってAndroidとiOS向けに公開できます。
ただし、JavaScriptを書くだけで完了するわけではなく、OS別のビルド、署名、権限、端末テスト、ストア提出を行います。
JavaScriptは実行場所の境界が品質を決める
JavaScriptアプリでは、同じ言語で書ける範囲より、各実行場所に何を任せるかが重要です。
- ブラウザは利用者の画面を担当し、秘密情報を保持しません。
- Node.jsは認証、業務処理、外部APIとの安全な接続を担当します。
- React Nativeはモバイル画面を作れますが、OS別ビルドと権限確認が残ります。
- 共有するのは入力規則や業務計算など変更理由が同じコードです。
- Webとモバイルは端末機能だけでなく更新経路と障害対応で比較します。
高い処理性能やネイティブ部品との接続が必要な場合は、C言語、C++アプリ開発の用途とGUI環境で境界の切り方を確認できます。
