私たちは、オンラインで携帯電話を手で持っていることに慣れているので、どのような技術がこれを実行するのに役立っているかを考えることさえ止まらないことがよくありますアプリ。 通常、それは問題ではありません-私たちがライトをオンにするとき、私たちは電気について考えていません。, ただし、ビジネス用のアプリを作成するという決定に直面した場合、SPA（single page application）の意味と、マルチページアプリケーション（MPA）との違いを理解するのに役立ち

この記事では、シングルページアプリケーション（SPA）とは何か、SPAがユーザーや企業にどのような利点をもたらすのか、SEOとどのように連携するのか、その長所と短所、そして最後に、SPAがBlazor、Angular、Reactなどのテクノロジーとどのように連携するのかについて説明します。js、およびVue。ジェイ-エス-,

======================

この問題では、

• 単一ページアプリケーション定義
• 単一ページアプリケーションの利点
• 単一ページアプリケーションの欠点
• 単一ページアプリケーションの移行問題
• ユーザーのためのSPAのメリット
• 企業のためのSPAのメリット
• 単一ページアプリケーションアーキテクチャ
• SPAとAngular、React。js、Vue。js、および。,ネット

======================

シングルページアプリケーションとは何か、なぜシングルページアプリケーションが必要なのか

シングルページアプリケーションは、使用中にページをリロードする必要がなく、ブラウザ内で動作するアプリです。 Facebook、Googleマップ、Gmail、Twitter、Googleドライブ、さらにはGitHubなど、毎日使用するアプリを考えてみましょう。 これらはすべてスパの例です。

正しく設定されたSPAの最大の利点の一つは、ユーザーがページのリロードなどを待つことなく、アプリの自然環境を楽しむユーザーエクスペリエンス（UX）です。, あなたはJavaScriptプログラミング言語を搭載している同じページに残ります。 P>

• SPA-シングルページアプリケーション（上記のように）
• MPA-マルチページアプリケーション（リンクをクリックすると新しいページをロードする従来のアプリ）
• PWA-プログレッシブウェブアプリケーション（JavaScriptまたはそのフレームワークを使用して構築され、アプリケーションのように動作することができるウェブサイト、すなわち、JavaScriptまたはそのフレームワークを使用して構築されたウェブサイト、すなわちアプリケーションのように動作する, あなたは、例えば、アプリとしてあなたの携帯電話のホームページに追加することができます）

シングルページアプリケーションの利点：なぜシングルページ

シングルページアプリケーションの主な利点は、その速度です。 SPAのニーズのほとんどのリソース（HTML+CSS+スクリプト）は、アプリの起動時にロードされ、使用中にリロードする必要はありません。 変更されるのは、サーバーとの間で送受信されるデータだけです。 その結果、アプリケーションはユーザーのクエリに非常に敏感であり、常にクライアントとサーバーの通信を待つ必要はありません。,

Googleによる多くの研究とAmazonやWal*Martなどの企業による主要な調査結果によると、ページの読み込みに200ミリ秒以上かかると、ビジネスを台無しにする可能性があり、少なくとも多くのお金がかかる可能性があることが示されています。 たとえば、Amazonは、ページロードの追加遅延の1秒は、彼らに売上高の1％を要すると言います（これは、Amazonの売上高を考慮すると、年間$16億です。)

開発者の視点から見ると、このようなアプリの作成は合理化され、最適化されています。, サーバー上でページをレンダリングするコードを記述する必要はありません。 開発プロセスを開始するためにサーバーは本当に必要ありません。 あなたは始めるためにファイルからキックオフすること また、開発を完全に再利用と同じバックエンドサーバサイドコードおよび効率的なAPIは、webアプリケーション、ネイティブモバイルアプリです。

シングルページアプリケーションは、開発者チームが一緒に作業している場合に優れています。, フロントエンド開発者は、バックエンドAPIに基づいて最高のユーザーエクスペリエンスを作成し、美しいユーザーインターフェイスを実装することにもっと注意を払うことができます。

単一ページアプリケーションのデバッグは、Angular BatarangとReact（Spaに使用される技術）のための特別なツールを持っているので、Chromeブラウザを使用しても簡単です。 用コンソールで監視できるネットワークとして運営しているページ要素と関連するデータです。,

キャッシュ処理も非常に効率的です-アプリケーションは、一つだけの要求を送信し、送信されたすべてのデータを格納し、このデータを使用することが これは、ユーザーが貧弱な接続を持つ可能性がある場合に特に重要です-接続が改善されたときにサーバーと同期されるため、アプリを使用することができま

上記でProgressive Web Apps（PWA）について言及しましたが、Spaは簡単にPWAに変換することができます。 これにより、開発者はローカルキャッシュを提供し、クライアントとユーザーにオフライン体験を提供できます。,

シングルページアプリのデメリットはなぜなのページを利用していますか？

シングルページアプリケーションのすべての利点にもかかわらず、何も完璧ではありません。 スパが理想的な解決策ではない時代をチェックしてみましょう。

単一ページのアプリケーションの欠点とはどういう意味ですか？

シングルページアプリケーションは、ブラウザにより大きな負荷をかけます。 たとえば、ユーザーが低消費電力デバイスを使用している場合、速度の点でアプリのエクスペリエンスが低くなります。

メモリリークがないことを確認する必要があるため、JavaScriptに関する追加の問題が発生します。, アプリは一度に長時間実行できるため（ページのライフスタイルが分単位でカウントされたMPAとは対照的に）、SPAが必要以上に多くのメモリを消費しな さもなければ、高速読み込みページの喜びは、ユーザーのデバイス上の利用できないメモリの低迷によって破壊されます。

JavaScriptのもう一つの欠点は、ユーザーがデバイスで無効にするだけで、JavaScriptなしでwebサイトやアプリの情報にアクセスする方法を追加する必要があることです。

JavaScriptのもう一つの欠点は、ユーザーがデバイス,

SPAの使用または構築について覚えておくべきもう一つの重要なことは、セキュリティです。 クロスサイトスクリプティング（XSS）と新しいページがロードされないという事実のために、ハッカーはあなたのウェブサイトにアクセスし、クライアント側

したがって、あなたのビジネスのための単一ページのアプリケーションを構築することを考えている場合は、これが起こらないように必要な予防措置

もう一つのセキュリティ上の問題は、機密データのプライバシーです。 最初のページの読み込みには、すべてのユーザーが利用できない情報を含めてはいけません。, SPA全体がすぐにユーザーのデバイスにロードされるため、ログインの背後にある必要があるデータや、まったく利用できないデータを誤って与える可能性があ

単一ページのアプリケーションのためのSEOの最適化

SEOの最適化は、我々はSPAの欠点でそれに別のセクションを捧げることにした理由である、単一ページのアプリケーションを持っているときはトリッキーです。

たとえば、アプリがログイン経由でのみアクセスできる場合など、検索エンジン最適化（SEO）にあまり依存しない場合は、Spaを使用する方が安全です。,

ブログを持っている場合は、一方で、従来のサーバーレンダリングされたページとは対照的に、検索エンジンがSPAウェブサイトのインデックスを作成する これは、URLが実際には変更されず、異なるページには通常URLアドレスがないためです。

したがって、URL設定を気にしたくない場合は、サーバーサイドレンダリング（SSR）をサポートするフレームワークを選択してください。 さらに、iframeウィンドウを使用せず、静的Urlを使用し、ページ上のスクリプトを最適化してスピードアップしないでください。, 最後に、ページにHTML5for Google crawlerがアクセスできるようにしてください。

また、サーバーメッセージ、特に200および404エラーに特別な注意を払う必要があります。

シングルページアプリケーションの移行の問題

シングルページアプリケーションは、ウェブサイトのユーザーエクスペリエンスを簡素化するために天から送 それは速く、便利である;それはほとんど完全である。 それは本当にそうですか？,

MPAからシングルページアプリケーションへの移行を考えているときは、賛否両論を止めて検討する必要があります（上で述べました。)

SPAをいつ使用するか

“いつ単一ページアプリケーションを使用する必要がありますか？”動的なプラットフォームと小さなデータ量を必要とするビジネスや個人のウェブサイトがある場合、単一ページのアプリケーションは良い考えです。 上記のように、バックエンドAPIはwebアプリとモバイルアプリの両方に使用できるため、将来モバイルアプリを開発する予定の場合にも素晴らしいオプションです。,

主な欠点はSEOですが、アーキテクチャはSaaS（Software-as-a-Service）プラットフォーム、閉鎖されたコミュニティ、ソーシャルネットワーク（Facebookがそれを使用する理由です）に適し これの理由はこれらの場所がGoogleの調査のための最適化を必要としないことである。

MPAを使用する場合

幅広いサービスと製品を持つ大企業は、より伝統的なマルチページアプリケーションの恩恵を受けるでしょう。 そのようなビジネスはオンライン店、会社の場所、カタログおよび市場を含んで, このようなアプリケーションの管理も、複数のユーザーデータベースに接続できるため、はるかに簡単です。

最後に、これらのタイプの企業は、Google、Bing、およびその他の検索エンジン（彼らが提供する製品やサービスを販売するため）で見つけたいので、検索エンジン最)

ユーザーのためのSPAの利点

エンドユーザーのためのシングルページアプリケーションの主な利点は、もちろん、アプリのロード速度だけでなく、オフライン,

SPAは線形のユーザーエクスペリエンスを提供するため、ウェブサイトをナビゲートし、これまたはそのものを見つける場所を理解するのは簡単です。 たとえば、Saucony SPAには明確な始まり、中間、および終わりがあります。 Ui/UXデザインを使用して、Sauconyアプリ開発者は、顧客の旅を楽しいものにするために視差スクロールと遷移を使用しています。

シングルページアプリケーションは、ほとんどの場合、すべてのユーザーが必要とするので、あまりにも、モバイルデバイス上で素晴らしいです（無限のFacebookの壁 リンクをクリックする必要はなく、スクロールを楽しむだけです。,

ビジネス向けSPAの利点

ビジネスに関しては、同じバックエンドAPIをwebとモバイルの両方で使用できるため、単一ページのアプリケーション開発 その結果、情報のフローの合理化、なりやすさをネットワークの逐次モバイルアプリケーシ

SPAの速度最optimizationの利点を考慮すると、ユーザーは高速なアプリを使用することに興味があるため、企業も利益を得ることができます（ergo、何かを購入するか、またはアプリをより頻繁に使用することができます。,)

単一ページアプリケーションアーキテクチャと単一ページアプリケーションの仕組み

単一ページアプリケーションの仕組み シングルページapアーキテクチャでは非常に容易なものになるだろう-これらのクライアント側の技術でHUSPIとして任に反応した。js、Angular、およびVue。js）とサーバー側の技術（私たちは通常Nodeを使用します。js)

サイトがユーザーに表示されるときのレンダリング方法に関しては、三つのオプションから選択できます。,

Client-side rendering(CSR)

1. ブラウザはサーバーからHTMLファイルの要求を送信します
2. サーバーはスタイルとスクリプトがリンクされた単純なHTMLファイルですばやく応答します
3. jsの実行中にユーザーは空のページまたはローダーイメージを見ます
4. アプリケーションはデータをフェッチし、ビューを生成し、DOMに挿入します

これは、サーバーがサーバーを使用する準備ができています

これにより、サーバーがサーバーを使用することができます

シンプルなwebサイトの場合はオプションですが、クライアント側で情報をレンダリングするには、デバイスから多くのリソースが必要であり、ブラウザ, その結果、このオプションは三つの中で最も遅いかもしれません。 同時に、トラフィックの多いwebサイトを持っている場合は、サーバーとあまり話すことなくユーザーに情報を提示するので、CSRの方が良いでしょう。また、ソーシャル共有オプションが必要な場合は、CSRのすべてのページに通常同じopen graph（og:)値があるため、SSRまたはSSGのいずれかを使用する必要があります。,ng(SSR)

1. ブラウザはサーバーからHTMLファイルの要求を送信します
2. サーバーは必要なすべてのデータを取得し、アプリケーションをレンダリングし、アプリのHTMLファイルをその場で生成します
3. ユーザーは利用可能なコンテンツを見ます
4. 単一ページのアプリケーションフレームワークは、イベントをアタッチし、仮想DOMを生成し、その他のアクションを実行します
5. アプリケーションは使用できる状態です

サーバー側のレンダリングはオプションです。これは、単一ページのアプリケーションの速度とユーザーのブラウザーに過負荷をかけないため、アプリを高速にするためです。,

静的サイトジェネレータ(SSG)

1. ブラウザはサーバーからHTMLファイルの要求を送信します
2. サーバーはすでに準備されたHTMLファイルですぐに応答します
3. ユーザーはページを見ます
4. アプリケーションはデータをフェッチし、ビューを生成し、DOMに挿入します
5. アプリケーションは使用できる準備ができています

良い高速なオプションですが、webサイトに動的コンテンツがある場合は、このオプションを忘れないでください。静的サイトジェネレータは、静的ページをより重視しているため、あなたの親友ではありません（名前からすでに推測している可能性があります）。,)

Angular、Reactを使用して単一ページアプリケーションを行う方法。js、およびVue。js

私がこの記事を書いていたとき、私はHUSPIでここで使用されている単一ページアプリケーション作成の面で世界のベストプラクティスが何であるかを理解するために私たちの開発者と相談しました。

HUSPI開発者は数多くのフレームワークを試してテストし、さまざまな作業背景を持っていますが、Angular、React、Vueのフレームワークがあり、バックエンドノードのメイン（お気に入り）が一つあると言って団結しています。ジェイ-エス-, EmberやKnockoutなど、市場で入手可能な他のフレームワークはいくつかありますが、それほど多くは使用していません。

単一ページアプリケーションを構築するには、応答性のあるページを構築するためにAJAXとHTML5が必要ですが、Angular、React、およびVueはSPAのクライアント側

何を選択する-反応、角度、またはVue？

これらのフレームワーク間の比較のトピックに関するいくつかの記事を書いています。, しかし、それらを比較するものを見ているかといったメリットとシングルページアプリケーション作成.

Angularおよびシングルページアプリケーション

Angularは、2010年にGoogleによって導入されたJavaScriptフレームワークです。 比較している三つのオプションの中で、Angularは最も古く、TypeScriptに基づいています。 TypeScriptのおかげで、Angularはすでに他の製品でこの技術を使用している開発者や企業の大規模なチームで使用するのに最適なオプションです。

これはフレームワークの中で最も成熟しており、GitHubにはまともな数の貢献者がいます。, 学習曲線の面では難しいかもしれませんが、同時に、それは価値があります。

単一ページのアプリケーションにAngularを使用するクライアントの中には、Google（およびGmailやGoogle Driveなどの製品）とWixがあるため、Angularを使用して単一ページのアプリケーションを作成することにした場合、あなたは素晴らしい会社になるでしょう。

# Contributors on GitHub: 997 (as of September 2019)
# Library size: 500+ KB

AngularコミュニティはAngular9.0.0をリリースしようとしています-Angularの新しいバージョンで何が期待されますか？

反応します。jsとシングルページアプリケーション

反応します。jsはFacebookによって2013年に作成されたJavaScriptライブラリです。, Facebook、Instagram、WhatsAppなどのよく知られたシングルページアプリケーションを含む、製品ライン全体で幅広く使用しています。 Facebookのほかに、UberもReactを使用しています。彼らの製品のためのjsライブラリ。

三つの競合他社のうち、ReactはGitHubの貢献者の中で最もかなりの量を持っています-千を超える-開発者が毎日直面する様々な課題を最新に保つのに役立

HUSPIの開発者は、私たちが開発するプロジェクトに対してReactを好みます（別のフレームワークの要件がない限り）。, でも軽量で、十分に成熟しては、試験されるたびたい.

Reactは、JavaScriptフロントエンドフレームワークを始めたばかりの人や、柔軟であることが好きなスタートアップや開発者にとって正しい選択です。 Reactは他のさまざまなテクノロジーやフレームワークとの優れた統合オプションを提供します。

# Contributors on GitHub: 1,336 (as of September 2019)
# Library size: 100KB

Vue.jsとシングルページアプリケーション

Vueは、元Googleの従業員Yuxi（エヴァン）あなたによって2014年に作成された三つの最年少です。, 大企業がその開発をサポートしていないにもかかわらず、Vueは人気が上昇しています。 現在、GitLab、Baidu、Alibabaなどの企業はVueを使用しています。彼らのニーズのためのjs。

フロントエンドフレームワークでシンプルさと柔軟性を好む場合は、Vueが良いオプションです。 その上、それはすべての中で最も軽量です。

# Contributors on GitHub: 281 (as of September 2019)
# Library size: 80KB

最近、Reactについての記事を書きました。js対Vue。js

シングルページアプリケーションとASP.NET （Blazor）

私たちは、追加することにしましたASP.NET 単一ページの適用のためのフレームワークそして技術のリストへの選択。, ブレイザーというブロックに新しい子供がいる GitHubリポジトリによると、これはC＃/RazorとWEBASSEMBLYでブラウザで実行されるHTMLを使用する.NET frameworkです。

Microsoftは2019年にこのフレームワークのリリースを発表しましたが、現在はバージョン1.0の準備が整っているようです。 大企業からのこの深刻なバッキングは、すぐにこのオープンソース機器を60,000+OSS企業の貢献者と3,700+OSS貢献者のコミュニティの一部にするので、Blazorの大,

Blazorは便利なツールですTypeScriptやJavaScriptは必要ないので、すべてのロジックをC＃で書くことができます。 つまり、BlazorはJavaScript Apiやライブラリとの相互運用性を提供しているため、エコシステムが大きく、JSライブラリで構成されている場合、移行に迷うことは

.Net Blazorには、クライアントのみのBlazorとサーバー側のBlazorの二つの異なるオプションもあります。 後者は、.Net Core3.0に同梱されている必要があります。 BlazorがAngular、React、またはVueを殺すことを意味しますか？ 私たちはそうは思わない。 しかし、それは目を離さないものです。

SPAを使用しています。,NET、あなたも使うことができますASP.NET コアとASP.NET マイクロソフト 単一ページアプリケーションを作成する方法ASP.NET MVC？ フロントエンドでHTMLを提供するようにバックエンドに設定します。

# Contributors on GitHub: 67 (as of November 2019) + .NET contributors of 60K+

結論

モバイルデバイスの台頭と外出先でのライフスタイルを考えると、単一ページのアプリケーションは素晴らしいです。 あなたのビジネスがSPAまたはMPAのために行くかどうか-それはあなたのビジネスアナリストと要件のための質問の詳細です。,

HUSPIには、プロジェクトの技術的ニーズを理解し、定義するのに役立つビジネスアナリストがいます（そして、アーキテクチャとプロジェクト自体をゼロから