この記事では、Angularアプリケーションの構築中にSPAアーキテクチャを採用することの主な利点について説明し、Spaに関する一般的な質問に答えます。

この記事は、進行中のAngular For Beginnersシリーズの一部です。

• Angular For Beginnersガイド-はじめに（セットアップ環境）

• Angular For Beginnersガイド：なぜAngular？, トップの利点

• 初心者ガイドのための角度-コンポーネント対ディレクティブ

• なぜ単一のページアプリケーションは、利点は何ですか？ スパとは何ですか？

なぜSPAアーキテクチャ？

最初の質問から始めましょう：なぜ単一ページアプリケーション（Spa）？ このタイプのアプリケーションは何年も前から出回っていますが、公共のインターネットではまだ普及していま

そして、なぜそれですか？

そのための正当な理由と、それが近い将来に変更される理由についてのさらに良い理由の両方があります。,

Spaは、SaaS（Software as a Service）プラットフォームやインターネットサービス全般のプライベートダッシュボード部分を構築するだけでなく、エンタープライズデータ駆動型およびフォーム集約型のアプリケーションを構築するために、ここ数年

しかし、AngularはSpaとしてアプリケーションを構築することを強制しますか？

答えはいいえ、そうではありませんが、そのようにアプリケーションを構築することの多くの利点を考えると、それがもたらす興味深い可能性です。 これは重要な質問に私たちをもたらします：

なぜあなたはSPAとしてアプリケーションを構築したいですか？,

これはしばしば当たり前のことです。 みな用途ですが、どのように大きな利点のでしょうか？ キラー機能の少なくともカップル、右がある必要がありますか？

それでは、あまり頻繁に言及されない機能から始めましょう：実稼働展開。

本番環境でのSPA使用の利点を理解することは、実際には重要な質問にも答えます。

単一ページアプリケーションとは何ですか？

ソフトウェア開発における名前がうまく選択されていないことがあり、それは多くの混乱につながる可能性があります。, それは確かに用語SPAの場合ではありません。! √

あなたがアクションで単一のページのアプリケーションを見たい場合は、私はAngularUnivhttps://angular-university.ioに向かうためにあなたを招待し、最新のコースのリスト上のホームページをクリックして起動し、トップメニューにあります。

ナビゲートを開始すると、ページが完全にリロードされず、ユーザーがアプリケーションをナビゲートするときに新しいデータのみがワイヤー経由で送信されます。,

そのようなアプリケーションを構築することの利点と、それがどのように機能するのかについて説明しましょう。

Chrome開発ツールを使用して、インデックスを調べてみましょう。ホームページ（またはナビゲートして更新をヒットした場合は他のページ）にダウンロードされるAngularUniv webサイトのhtml。

ダウンロードされるページは、Chromeネットワークタブパネルに表示される最初のリクエストです。

一つのことに気づきましょう–このページはほとんど空です！ タグを除いて、ここで起こっていることはあまりありません。,

注：実際のウェブサイトでは、ダウンロードされたページには、Angular Universalを使用してサーバー上で事前にレンダリングされたHTMLもあります

CSSとJavascriptバンドルの名前に注意してください：すべてのCSSとアプリケーション（Angularを含む）のすべてのJavascriptは、index.html-これは完全に異なる静的サーバーから来ています：

この場合、二つのバンドルは実際にはamazon s3バケットから来ています！,

また、バンドルの名前はバージョン対応であることに注意してください：この特定のバージョンのアプリケーションをデプロイしたデプロイビルドが実行されたタイムスタンプが含まれています。

シングルページアプリケーションの本番展開の利点

上記で見たシナリオは、実際にはシングルページアプリケーションのかなりクールな利点です。

シングルページアプリケーションは、本番環境で、さらには時間の経過とともにバージョンにもデプロイするのが非常に簡単です！,

単一のページアプリケーションは、より伝統的なサーバー側でレンダリングされたアプリケーションと比較すると、デプロイが非常に簡単です。index.htmlCSSバンドルとJavascriptバンドルを持つファイルです。

これらの3つの静的ファイルは、Apache、Nginx、Amazon S3、Firebase Hostingなどの静的コンテンツサーバーにアップロードできます。

もちろん、アプリケーションはデータを取得するためにバックエンドを呼び出す必要がありますが、Node、Java、PHPなど、まったく異なる技術で必要に応じて構,

実際には、NODEでREST APIや別のタイプのバックエンドをビルドする場合、Typescriptでもビルドできるため、サーバーとクライアントの両方で同じ言語を使用でき、それらの間でいくつかのコードを共有することさえできます。

本番環境での単一ページアプリケーションのバージョニング

フロントエンドを単一ページアプリケーションとしてデプロイするもう一つの利点は、バージョ ビルド出力をバージョンアップするだけです（上記の黄色で強調表示されたCSSとJSバンドルを生成します）。,

ビルドするフロントエンドアプリケーションのバージョンを指定するパラメータを使用して、SPAを提供するサーバーを設定できます：それはそれと同じくらい

このタイプの展開は非常によくスケールします：Nginxのような静的コンテンツサーバーは非常に多数のユーザーに対してスケールできます。

もちろん、このタイプのデプロイとバージョン管理は、アプリケーションのフロントエンド部分に対してのみ有効であり、これはバックエンドサーバーには しかし、それでも、それは持っている重要な利点です。

しかし、本番環境の展開は単一ページアプリケーションの唯一の利点ですか？,

シングルページアプリケーションとユーザーエクスペリエンス

ほぼすべてのユーザーインタラクションでサーバーからすべてを常にリロードしているwebアプリケーションを使用したことがある場合、そのタイプのアプリケーションは、

• 一定のフルページリロード

• また、そのすべてのHTMLを取得するためにサーバーにネットワークを前後に移動するために、ユーザーエクスペリエンスが低下することを知ることができます。,

単一ページアプリケーションでは、根本的に異なるアーキテクチャアプローチを使用することによって、この問題を解決しました。

SPAでは、最初のページロード後、ネットワーク経由でHTMLが送信されなくなります。 代わりに、データのみがサーバーから要求される（またはサーバーに送信される）。

したがって、SPAの実行中は、データのみがワイヤを介して送信されるため、HTMLを常に送信するよりも時間と帯域幅がはるかに短くなります。 SPAで一般的にワイヤーを通過するペイロードのタイプを見てみましょう。,

たとえば、AngularUniv SPAでは、コースをクリックすると、HTMLはワイヤーで送信されません。 代わりに、すべてのコースデータを含むJSONペイロードを受け取るAjaxリクエストを取得します。

ご覧のとおり、コースのHTMLバージョンは、すべての開始タグと終了タグのために、プレーンなJSONオブジェクトと比較すると、はるかに大きくなりますが、同様のページを何度も何度も読み込むと、重複したHTMLがたくさんあります。

たとえば、ページのヘッダーやフッターのようなものは常にブラウザに送信されていますが、実際には変更されていません。,

これにより、単一ページアプリケーションの第二の大きな利点がここにあります：より少ない帯域幅が必要とされるため、より少ないフルページのリロード

それでは、どこでもSpaを使用しないのはなぜですか？

Spaには多くの利点があるのであれば、なぜ公衆インターネット上で大規模に採用されていないのでしょうか？ それには正当な理由があります。

比較的最近まで、Googleやyahoo!などの検索エンジン時に割り出しが正しくページです。 しかし、今日はどうですか？,

過去には、廃止された特別なAjaxクロールスキームを使用するためのいくつかの推奨事項がありました。 それで、Googleは今Ajaxを完全にレンダリングできますか？

公式発表では、Google検索が一般的にAjaxをクロールできるようになったという情報がありますが、まだ完全にはクロールできないという報告があります。

そして、代わりにProgressive enhancementを使用することをお勧めします。 それでは、この段階では、公共のインターネットでSpaを使用することは可能ですか、まだできませんか？

検索エンジンフレンドリーなスパ？,

SPAのパフォーマンスとユーザーエクスペリエンスを優れたSEOプロパティと共に持つことが可能です。Angular Universal pre-rendering engineを使用することで、次のことが可能になります。

• バックエンドでアプリケーションをプリレンダリング
• Angular
• とともにHTMLをブラウザに出荷し、クライアント側でAngular bootstrapを持ち、SPA

Spaは今後より頻繁になりますか？,

各ページのリロードで、はるかに改善されたパフォーマンスとユーザーエクスペリエンスで自分自身を更新しないだろうアマゾンのSEOフレンドリーなバージョ

だから、SEOフレンドリーなSpaの技術的な利点は、モバイル上で重要であり、さらにそうであり、我々はSEOフレンドリーなSPAアプリケーションのこれらのタイプ

しかし、これはこのセクションの最後の質問をまだ未回答のままにします。, あなたは最後のいくつかのセクションを読んだ後、この段階で考えなければなりません：

起動時にサーバーから最小限のHTMLのみがロードされる場合、ページ

このセクションの最後の質問、そしておそらく最も重要な質問につながります：

シングルページアプリケーションはどのように機能しますか？

確かに、サーバーからHTMLをロードするだけなので、どのように機能しますか？ アプリケーショ では、新しいHTMLはどのようにして来ますか？,

ブラウザが表示内容を変更する唯一の方法なので、どこかに新しいHTMLが生成されなければならないので、それは正しいですか？

答えは簡単で、従来のサーバーベースのアプリケーションと比較して、単一ページのアプリケーションが実際に動作する方法と関係があります。

従来のアプリケーション（今日の公共インターネットの大部分を含む）では、HTMLへのデータ変換（またはレンダリング）がサーバー側で行われています。,

一方、単一ページアプリケーションは非常に異なる方法でそれを行います：

SPAでは、アプリケーションの起動後、HTML変換プロセスへのデータがサーバからクライアントに移動されました–Spaは、ブラウザで実行されているテンプレートエンジンと同等のものを持っています！

そして、この情報を手にして、単一ページアプリケーションに関する重要なポイントを要約して、このセクションをまとめましょう。,-Spaの利点とその仕組みに関する重要な概念

SPAとしてアプリケーションを構築することで、かなりの利点が得られます。

• ユーザーに大幅に改善されたエクスペリエンスをもたらすことができるようになります。

• ユーザーがアプリケーションをナビゲートすると、アプリケーションのデプロイがはるかに簡単になります。

• アプリケーションは、使用されている帯域幅が少なく、ページ全体の更新が発生しないため、アプリケーションのデプロイがはるかに簡単になります。

• 本番環境では、少なくとも確かにクライアント部分：必要なのは、最小3つのファイルを提供する静的サーバー、つまり単一ページインデックスです。,html、CSSバンドル、およびJavascriptバンドル。

• コード分割を使用して、必要に応じてバンドルを複数の部分に分割することもできます。

• アプリケーションのフロントエンド部分は本番環境でのバージョンが非常にシンプルであるため、必要に応じて以前のバージョンのフロントエンドへのロールバックが簡素化されます。

これは本番環境でのSpaの唯一の可能なデプロイシナリオです。,

その他の運用シナリオ

その他のシナリオには、アプリケーションの大部分を事前レンダリングし、静的ホスティングサーバーにすべてをアップロード

今日はSEOに優しいSpaを作るのがこれまで以上に簡単なので、Spaが頻繁に使用されていないシナリオでは、将来的に採用が増加する可能性があり,

Spaの仕組み

単一ページアプリケーションがこれらの利点をもたらす方法は、内部的に動作する方法にリンクされています。

• 起動後、データのみがJSONペイロードまたはその他の形式としてワイヤー経由で送信されます。 しかし、アプリケーションの実行後、HTMLやCSSはワイヤー経由で送信されなくなりました。,

単一ページアプリケーションがどのように機能するかを理解するための重要なポイントは次のとおりです。

サーバー上でデータをHTMLに変換してからワイヤー経由で送信するのではなく、SPAではその変換プロセスをサーバーからクライアントに移動しました。

変換はクライアント側で最後に行われ、ユーザーにはるかに改善されたユーザーエクスペリエンスを与えることができます。

私はこれがスパの利点をあなたに納得させることを願っています。, そうでない場合は私に知らせてください、そしてそれがそうでない理由を教えてください。また、この段階では、すぐにいくつかのコードをお見せしたいと思います。 こんにちは、Angularで小さなHello World SPAを構築し、そこから取り出しましょう。 今後どのように概念を導入していま地図の小型アプリケーションとしての整備が欠かせません。

私はこの記事がSpaの主な利点を理解するのに役立ち、あなたがそれを楽しんだことを願っています！,

この記事は、進行中のAngular For Beginnersシリーズの一部です。

• Angular For Beginnersガイド-はじめに（セットアップ環境）

• Angular For Beginnersガイド：なぜAngular？ トップの利点

• 初心者ガイドのための角度-コンポーネント対ディレクティブ

• なぜ単一のページアプリケーションは、利点は何ですか？ スパとは何ですか？,

私はより多くの章が出てくるときに通知を受け取るために私たちのニュースレターを購読することを勧めます：

あなただけのAngularを学び始めている場合は、初心者のためのAngularコースを見てください：

Angular上の他の記事

また、あなたが興味深いかもしれない他の人気のある記事を見てください：

• Angularを始める-開発環境のベストプラクティスyarn、angular cli、ideのセットアップ
• なぜ単一のページアプリケーション、利点は何ですか？ スパとは何ですか？,
• Angular Smart Components vs Presentation Components：違いは何ですか、それぞれをいつ使用するのですか、そしてなぜですか？
• Angular Router-Bootstrap4とネストされたルートでナビゲーションメニューを構築する方法
• Angular Router-拡張ガイド付きツアー、一般的な落とし穴を避ける
• Angularコンポーネント-基礎
• Observable Data Servicesを使用してAngularアプリを構築する方法-避けるための落とし穴
• Angularフォームの紹介-テンプレート駆動対モデル駆動
• Angular ngFor-trackByを含むすべての機能を学ぶ、なぜそれは配列のためだけではないのですか？,
• Angular Universal In Practice-AngularでSEOに優しい単一ページアプリを構築する方法
• 角度変更検出は本当にどのように機能しますか？