search

sumakokima2 / resium-sample2

0 stars 0 forks source link

[TASK] React 1-1. SPA （Single Page Application）, Reactの設計思想, Flux #8

Open sumakokima2 opened 5 years ago

sumakokima2 commented 5 years ago

Wikiの項目

[TASK] React 1-1. SPA （Single Page Application）, Reactの設計思想, Flux https://github.com/darwin-education/training/issues/21

構成

用語確認

シングルページアプリケーション（英: single-page application、SPA） シングルページアプリケーション（英: single-page application、SPA）とは、単一のWebページのみから構成することで、デスクトップアプリケーションのようなユーザ体験を提供するWebアプリケーションまたはWebサイトである。必要なコード（HTML、JavaScript、CSS）は最初にまとめて読み込むか[1]、ユーザの操作などに応じて動的にサーバと通信し、必要なものだけ読み込みを行う。(Wikiより引用)

手順

  1. シングルページアプリケーションのメリット

    1. ユーザ体験の充実 これまでのウェブアプリケーションの場合、ユーザのブラウザごとに異なるコードが必要であったり、ページを遷移するたびに、新たなデータをインポートする必要があった。以下に具体的な例を3点あげる。1つめは「背景では全体の画面を切り替えつつも」「チャット画面を残す」といったことが実装可能になることである。2つめは、「音楽を再生しながら」「表示ページ（タブ）の変更」ができるようになる。3つめは、Twitter や Facebook などのようにプッシュ型の通知を提示することができる点である。 つまり、シングルページアプリケーションでは「〜しながら」「〜を継続すること」ができる点が、従来のウェブアプリケーションの構成と大きくことなるといえる。

    2. 高速なページ遷移 これは想像するに容易であると思われる。従来の構成では、ページを切り替える度に、遷移先のHTML全体をサーバーから読み込む必要があった。一方、シングルページアプリケーションでは、初期ロードの時点で全部のデータが包括されている。つまり、ページの切り替えごとにデータを読み込むというロスがなくなるため、自ずとページ遷移が高速になる（非同期）。

    3. ネイティブアプリの代わりになりうる 上記2点の利点からもわかるように、シングルページアプリケーションでは従来のウェブアプリケーションに比べて表現が大幅に広がる。HTML 5、CSS 3、およびJavaScriptを使用してWebページのように作成される。さらに、最適化されたキャッシュを通じてオフライン機能を提供することが可能になる。例えば、画面遷移のアニメーションだったり、プッシュ通知だったり、ホーム画面の設定であったりなどである。これらによって、あたかも、ネイティブアプリケーションのような表現と挙動が可能になる。

    4. プログレッシブウェブアプリ（Progressive Web Apps: PWA) 近年では、プログレッシブウェブアプリ（Progressive Web Apps: PWA) という概念がGoogle開発者から提唱されている。 ・アプリの安定性（ネットワーク障害時の処理など） ・体感速度 ・ユーザーエンゲージメント（ユーザーの満足度・ユーザー体験など多岐の物事を要因とするアプリへの依存度）の点で最高のパフォーマンスをユーザーに提供すること が目的である。 シングルページアプリケーションの行き着く先は、プログレッシブウェブアプリと類似すると考えている。

  2. シングルページアプリケーションのデメリット

    1. 開発の複雑さ 一般に言われている点ですが、これは私たちが勉強すれば解決する問題でしょう。

    2. 初期ロードの時間 最初に全データをロードするため、最初のロードに負荷がかかることは自明である。ページ遷移の度にロードするコストはなくなるが、単純にJavascriptの量が増えるともいえる。

rot1024 commented 5 years ago

とても良いです…！