LoginSignup
3
1

More than 3 years have passed since last update.

SPAとは?

Posted at

はじめに

はじめまして。
現在、営業をしながら独学でプログラミングを学んでいます。
学んだプログラミング知識を頭の中で整理するべく、コチラに言語化していきたいと思います。

直近Reactでアプリ開発をしていたため、まずはSPAから。
(以前、Rubyで個人開発のアプリを作った時に、ページ遷移の遅さにストレスを感じて、SPAの勉強を開始した次第です。。)

SPAとは

SPAはシングルページアプリケーションの略で、アプリケーションの設計構造の名称のこと。
(フロントエンド開発で耳にします。)

非SPAのアプリケーションは、ページ遷移のたびにページ全体のレンダリング(画面上に描画)が発生。
一方、SPAを導入しているアプリケーションの場合は、ページ全体をレンダリングするのではなく、変更する部分のみを書き換え、その結果を画面に表示することができる。

SPAの何がいいのか?

動作性が向上する

遷移する度にページ全体をレンダリングしていると、時間がかかり使用感としてストレスを感じるが、
SPAでは「変更が必要な部分のみを書き換える」という形をとっているため、滑らかに画面の表示内容を変えることができる。
(滑らかすぎて、かなり気持ちいい。)

逆にSPAのデメリットは?

最初のページ表示に時間がかかる

初めのページローディングには時間がかかる。
SPAを実装するためには、Javascriptのコード量が多くなるため、それが原因で初回のページ表示には時間がかかってしまう。

SPAはどんなアプリに向いてる?

SPAはページ遷移などのユーザーアクションに対するリアクションの速さに強みがあるため、
滞在時間が長く、ユーザーアクションが多くなるアプリケーションで強みを発揮する。

逆に初めのローディングに時間がかかるという弱みを持っているため、
ストレスがかかるとすぐに離脱されてしまうブログとかには向いてないそう。

まとめ

初めてSPAで実装した時は動きが滑らかすぎて、感動しました。
最初は概念の理解が難しかったですが、最近徐々にわかってきたかもしれない。。

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1