Webアプリケーションの仕組み

この記事は、初心者および最新のWebアプリケーションの用語と技術に関する少しのガイダンスが必要な人を対象としています。 この記事では、Webアプリケーションがサイトとどのように異なるか、Webアプリケーションとは何か、それらが何で構成され、どのように機能するかについて説明します。

1. Webアプリケーションとサイトの違い

私にとって、サイトは基本的に有益で静的なものです。会社の名刺、レシピのサイト、都市ポータル、またはウィキです。 リモートサーバーに配置され、リクエストに応じてブラウザに提供される、事前に準備されたHTMLファイルのセット。



サイトにはさまざまな静的要素が含まれており、HTMLファイルのようにその場で生成されません。 ほとんどの場合、これらは写真、CSSファイル、JSスクリプトですが、他のファイルもあります：mp3、mov、csv、pdf。



ブログ、連絡フォームのある名刺、たくさんの効果のあるランディングページ、簡単にするためにサイトも参照します。 ただし、完全に静的なサイトとは異なり、サイトには既に何らかのビジネスロジックが含まれています。



また、Webアプリケーションは技術的に複雑なものです。 ここでは、ユーザーの要求に応じてHTMLページがオンザフライで生成されます。 メールクライアント、ソーシャルネットワーク、検索エンジン、オンラインストア、ビジネス向けオンラインプログラムなど、これらはすべてWebアプリケーションです。

2. Webアプリケーションとは

Webアプリケーションは、その主要コンポーネントのさまざまな組み合わせに応じて、いくつかのタイプに分類できます。

1. バックエンド（アプリケーションのバックエンドまたはサーバー側）は、どこにでも配置できるリモートコンピューターで実行されます。 PHP、Python、Ruby、C＃などのさまざまなプログラミング言語で作成できます。 サーバー側のみを使用してアプリケーションを作成すると、セクション間の移行、フォームの送信、データの更新の結果として、サーバーは新しいHTMLファイルを生成し、ブラウザーのページがリロードされます。
2. フロントエンド（アプリケーションのフロントエンドまたはクライアント側）は、ユーザーのブラウザーで実行されます。 この部分は、Javascriptプログラミング言語で書かれています。 アプリケーションは、ユーザーデータを1セッションより長く保存する必要がない場合、クライアントパーツのみで構成できます。 たとえば、写真編集者や簡単なおもちゃなどです。
3. シングルページアプリケーション（SPAまたはシングルページアプリケーション）。 より興味深いオプションは、バックエンドとフロントエンドの両方が使用される場合です。 それらの相互作用を使用して、ブラウザーでページをリロードすることなく動作するアプリケーションを作成できます。 または、単純化されたバージョンでは、パーティション間の移行によりリブートが発生しますが、パーティション内のアクションはリブートなしで実行されます。

3. PyhonフレームワークDjango別名バックエンド

開発では、フレームワークは、Webアプリケーションの作成に役立つ既製のライブラリとツールのセットです。 たとえば、Pythonプログラミング言語で記述されたDjangoフレームワークの動作原理を説明します。



最初のステップは、ユーザーからルーター（URLディスパッチャー）への要求です。この要求は、どの関数を呼び出して要求を処理するかを決定します。 決定は、正規表現と関数の名前で構成される規則のリストに基づいて行われます。そのようなURLの場合、そのような関数です。



ルーターによって呼び出される機能は、ビューと呼ばれます。 任意のビジネスロジックを内部に含めることができますが、ほとんどの場合、次の2つのうちの1つです。データはデータベースから取得され、準備されて前面に返されます。 または、リクエストが何らかのフォームからのデータとともに送信された場合、このデータはチェックされてデータベースに保存されます。



アプリケーションデータはデータベース（DB）に保存されます。 最も一般的に使用されるリレーショナルデータベース。 これは、定義済みの列を持つテーブルがあり、これらのテーブルが列の1つを介して相互接続されている場合です。



データベース内のデータは、作成、読み取り、変更、および削除できます。 これらのアクションを示すために、CRUD（Read Read Update Delete）という略語に出くわすことがあります。 データベース内のデータを照会するには、特別なSQL言語（構造化照会言語）が使用されます。



Djangoでは、データベースを操作するためにモデルが使用されます。 それらを使用すると、通常のpython開発者に対してテーブルを記述し、クエリを実行できます。これははるかに便利です。 この利便性のために支払う必要があります。そのようなクエリは、純粋なSQLを使用する場合に比べて遅く、機能が制限されます。



データベースから受信したデータは、フロントへの送信用に準備されます。 テンプレートに置き換えて、HTMLファイルとして送信できます。 ただし、1ページのアプリケーションの場合、これはすべてのJSスクリプトが接続されているHTMLページが生成されるときに1回だけ発生します。 その他の場合、データはシリアル化され、JSON形式で送信されます。

4.フロントエンドとも呼ばれるJavascriptフレームワーク

アプリケーションのクライアント部分は、Javascript（JS）プログラミング言語で記述され、ユーザーのブラウザーで実行されるスクリプトです。 以前は、すべてのクライアントロジックはJQueryライブラリの使用に基づいていました。これにより、DOM、ページ上のアニメーションを操作し、AJAXリクエストを行うことができます。



DOM（ドキュメントオブジェクトモデル）は、HTMLページの構造です。 DOMの操作は、HTMLタグの検索、追加、変更、移動、および削除です。



AJAX（非同期JavaScriptおよびXML）は、サーバーへの非同期（ページをリロードせずに）リクエストを行い、データを交換できるようにする技術の一般的な名前です。 Webアプリケーションのクライアント部分とサーバー部分は異なるプログラミング言語で記述されているため、情報を交換するには、格納されているデータ構造（リストや辞書など）をJSON形式に変換する必要があります。



JSON（JavaScript Object Notation）は、クライアントとサーバー間でデータを交換するための汎用形式です。 これは、任意のプログラミング言語で使用できる単純な文字列です。



シリアル化とは、リストまたは辞書をJSON文字列に変換することです。 例：



辞書：

{ 'id': 1, 'email': 'mail@example.com' }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

シリアル化された文字列：

  '{"id": 1, "email": "mail@example.com"}'
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

逆シリアル化とは、文字列をリストまたは辞書に逆変換することです。



DOMを操作することにより、ページのコンテンツを完全に制御できます。 AJAXを使用すると、クライアントとサーバー間でデータを交換できます。 これらのテクノロジーを使用すると、SPAをすでに作成できます。 ただし、複雑なアプリケーションを作成する場合、jQueryベースのフロントエンドコードはすぐに混乱を招き、保守が難しくなります。



幸いなことに、バックボーンマリオネット、Angular、React、VueなどのJavascriptフレームワークがJQueryに取って代わりました。 それらは異なる哲学と構文を持っていますが、それらはすべて、はるかに便利にフロントエンドでデータを管理することを可能にし、ページ間のナビゲーションを作成するためのテンプレートエンジンとツールを持っています。



HTMLテンプレートは、特定の値の代わりに変数が使用され、さまざまな演算子（ if 、 forループなど）が使用できるスマートHTMLページです。 変数が置換され、演算子が適用されるときにテンプレートからHTMLページを取得するプロセスは、テンプレートレンダリングと呼ばれます。



結果のページがユーザーに表示されます。 SPAの別のセクションに切り替えるには、別のテンプレートを使用しています。 テンプレートで他のデータを使用する必要がある場合、それらのデータはサーバーから要求されます。 データを含むすべてのフォーム送信は、サーバーへのAJAXリクエストです。

5.クライアントとサーバーが相互に通信する方法

クライアントはHTTP経由でサーバーと通信します。 このプロトコルの基本は、クライアントからサーバーへの要求と、クライアントからサーバーへの応答です。



クエリでは、通常、データを取得する場合はGETメソッドを使用し、データを変更する場合はPOSTを使用します。 リクエストには、ホスト（サイトドメイン）、リクエスト本文（POSTリクエストの場合）、その他の多くの技術情報も含まれます。



最新のWebアプリケーションは、SSL / TLS暗号化をサポートするHTTPの拡張バージョンであるHTTPSプロトコルを使用します。 暗号化されたデータ伝送チャネルの使用は、このデータの重要性に関係なく、インターネット上で良い形になりました。



HTTPの前に行われる別の要求があります。 これはDNS（ドメインネームシステム）クエリです。 要求されたドメインがバインドされているIPアドレスを取得する必要があります。 この情報はブラウザに保存されるため、これに時間を費やす必要はありません。



ブラウザからのリクエストがサーバーに到達しても、すぐにはDjangoに到達しません。 まず、Nginx Webサーバーによって処理されます。 静的ファイル（たとえば、画像）が要求された場合、Nginx自体がクライアントに応答してそれを送信します。 リクエストが静的でない場合、NginxはそれをDjangoにプロキシ（転送）する必要があります。



残念ながら、彼はその方法を知りません。 したがって、別の層のプログラムが使用されます-アプリケーションサーバー。 たとえば、Pythonアプリケーションの場合、uWSGIまたはGunicornになります。 そして今、彼らはDjangoにリクエストを送信します。



Djangoはリクエストを処理した後、HTMLページまたはデータを含むレスポンスとレスポンスコードを返します。 すべてが順調であれば、応答コードは200です。 ページが見つからない場合、-404; エラーが発生し、サーバーがリクエストを処理できなかった場合、500。これらは最も一般的なコードです。

6. Webアプリケーションでのキャッシュ

Webアプリケーションとソフトウェアの両方、およびコンピューターとスマートフォンのプロセッサーレベルの両方に存在する、私たちが常に遭遇する別のテクノロジー。



キャッシュは、頻繁に使用されるデータを、別の方法で計算または準備するたびにデータベースから取り出すのではなく、すぐにアクセスできる場所に保存する開発の概念です。 キャッシュの使用例：

• Djangoでは、レポート内のチャートのデータを受信するように要求されました。 データベースからデータを取得し、準備し、クイックアクセスでデータベースに格納します（たとえば、memcachedを1時間使用します）。 次のリクエストで、すぐにmemcachedからそれらを取得し、フロントエンドに送信します。 データの関連性がなくなったことが判明した場合、それらを無効にします（キャッシュから削除します）。
• 静的ファイルのキャッシュには、CDN（コンテンツ配信ネットワーク）プロバイダーが使用されます。 これらは世界中にあるサーバーで、静的な配布用に最適化されています。 サーバーではなくCDNに写真、ビデオ、JSスクリプトを配置した方が効率的な場合があります。
• すべてのブラウザは、デフォルトで静的ファイルのキャッシュを有効にします。 これにより、サイトを開くのは初めてではなく、すべてが著しく高速に読み込まれます。 開発者にとってマイナスは、キャッシュを有効にすると、コードに加えられた変更が常にすぐに表示されるとは限らないことです。