トップページに戻る

Webアプリの構成

　このページでは、典型的なWebアプリケーションの構成について説明します。

• ユーザ (クライアント、Webブラウザ): フロントエンド、クライアントサイド、ユーザインターフェース
  　ユーザが直接操作し、また、情報の表示をする部分。
  言語: HTML, CSS, Javascript, php, python (Pyodide/WebAssembly)
  　
• サーバ (Webサーバ): バックエンド、サーバエンド
  フロントエンドからrequestを受け取り、処理した情報をフロントエンドへ返す。
  必要に応じてデータベースサーバなどのミドルウェアと通信を行う。
  言語： ruby, python, python, サーバサイドJavascript (Node.js)、C++, Rust, Goなど
  　
• データベース: ミドルウェア、バックエンドDB
  Webアプリがセッションを超えて保持するデータは、データベースに保存されます。
  データベースはJSON, YAML, TOML, CSVなどの単純なファイルであっても構いませんが、
  本格的なWebアプリでは、MySQL, PostgreSQL, Microsoft SQLサーバなどのSQLデータベースや、
  Mongo DBなどのNoSQLデータベースサーバを利用しています。
  　フロントエンドから直接ミドルウェアにアクセスするように構成することも可能ですが、
  通常はセキュリティの問題から、バックエンドアプリとのみ通信を行い、フロントエンドには、
  API や GET, POST requestを通じて情報を返送します。

上記のように構成要素を分けることにより、以下のような利点と制限があります。

• フロントエンド
  　クライアントPC上でインタラクティブなWebアプリを動かすことができます。
  一方、フロントエンドのプログラムはWebサーバから送られてくるため、クライアントPCの操作が
  可能になると非常に危険です。
  　そのため、クライアントサイド言語がクライアントPC上のファイルや情報にアクセスする際には、
  強い制限がかかっています。
  ・ クライアントPC上のファイルやディレクトリリストは取得できない
  　　クライアントPCのファイルを参照する場合は、ユーザがファイルを選択するようにアプリを構成する必要があります。
  　　また、ファイルをダウンロードする際も、規定のディレクトリへダウンロードするか、ダウンロード先をユーザが選ぶ必要があります。
  ・ クライアントPCの情報のほとんどにアクセスできない
  　　一部のＯＳ，ＰＣ情報、Ｗｅｂブラウザ情報だけアクセス可能です。
  　
  　このような制限を緩和して柔軟性のあるアプリを作るためには、サーバサイドアプリを併用する必要があります。
  　
• バックエンド、サーバサイド
  　サーバサイドでは、ＯＳやhttpサーバが許可していれば、サーバ内のファイルや情報にアクセスできます。
  Javascriptは本来クライアントサイド言語として実装されているため、このままではサーバ内のファイルなどにアクセスできません。
  Node.jsは、Javascriptをベースに、一般的なクライアントデスクトップアプリを作れるようにAPIなどを拡張したものであり、
  サーバサイドJavascriptとも呼ばれます。
  　ruby, python, python, C++, Rust, GoなどはもともとクライアントPCの情報を利用できる言語であり、
  そのままサーバサイトアプリの作成ができます。
  

おまけ： Node.jsについて

　Javascriptも、Node.jsを使うことにより、pythonやCのように、一般的なアプリケーションを作ることができます。
たとえば、Visual Studio CodeやAtomといったエディタは、Node.jsベースのフレームワーク Electron を使って作られています。

Electronについてはこちら