ITのSPAとは？初心者にもわかりやすく解説
目次
- SPAとはアプリの見た目を良くする技術
- Single Page Applicationってどういう意味？
- なぜSPAが必要なのか？
- SPAを使っているWebアプリ
- SPAを作るのに使われる道具
- SPAのメリット
- SPAのデメリット
- SEO的にはどうなの？
- これからの時代はSPA？
- SPAを作れる制作業者
- おわりに
SPAとはアプリの見た目を良くする技術
Webアプリ制作NARUPORTのnarupoです。
ITでよく聞くSPAとは一体何なのでしょうか？
SPAとは「エスピーエー」と読み、「Single Page Application」の略称です。
これはWebアプリの見た目と操作感を良くする技術のことです。
わりと最近出てきた技術で、いわゆる「今どきでオシャレ」なWebアプリを作るのに使われます。
- SPAはWebアプリの見た目を良くする
- SPAはWebアプリの操作感を良くする
Single Page Applicationってどういう意味？
「Single Page Application」は「シングル・ページ・アプリケーション」と読みます。
どういう意味でしょうか？
直訳すると「単一ページのアプリケーション」という意味になります。
単一ページのアプリケーションって？
SPAの特徴として、リンクなどをクリックしても、ブラウザでページの更新が発生しないということがあります。
つまり、画面を更新せずに、画面の部分部分を切り替えて表示して、見た目を変更することが可能です。
この特徴から「ページが複数必要無い」つまり「単一ページ」のアプリケーションと呼ぶことが出来ます。
ちなみに「アプリケーション」というのは、ソフトウェアのことです。
ここでは特に「Webアプリケーション」のことを指します。
Webアプリケーションとは、いわゆる「イイね！」ボタンがあったり、コメントの投稿フォームがあるページのことで、ブラウザから使うことが出来るアプリケーションのことを指します。
有名なところだとTwitterなどがそうですね。
たとえば↓のようなものもWebアプリケーションです。
なぜSPAが必要なのか？
なぜSPAが必要なのでしょうか？
私たちは日頃から「もっと派手にしたい」とか「もっと豪華にしたい」などの欲求を持っていますが、それらは技術を進化させる原動力となってきました。
たとえばゲームはグラフィックを良くするために新しいハードを出したり、新しい技術をよく取り入れます。
Webでもアプリの見た目と操作感を良くするためにSPAという新しい技術が導入されました。
つまりSPAを使うと、それまでの固定化されていたページから、見た目がよく動く豪華なページを作ることが可能になるわけですね。
「動き」をデザインに取り入れることは以前から行われてきましたが、SPAを使うとその「動き」をさらに良くすることが可能です。
SPAを使っているWebアプリ
ここでは実際にSPAを使っているWebアプリを紹介したいと思います。
まず有名な所で「SoundCloud」です。
これは楽曲の投稿アプリなのですが、音楽プレーヤーや全体の構成などSPAで構築されています。
それから先ほども紹介しました「鳴沢神社」という私が作ったアプリもSPAです。
これはお願い事をしたり、おみくじを引いたり出来るアプリです。
そしてこれも私が作った「お題メーカー」というお題を表示するアプリです。
私が作った「3Dダンジョン迷路」というWebゲームもSPAを取り入れています。
SPAを作るのに使われる道具
まず何より必要なのがJavaScriptです。
- JavaScript
これはプログラミング言語ですね。
それからSPAを作るのに有名な道具として↓があります。
- Vue
- React
ちなみに私はVue（ビュー）を使っています。
SPAのメリット
SPAを使うと「オシャレ」で「今どき」なWebアプリを作れます。
ページの更新が必要なくなるので操作感も良くなります。
それから最初のロード以外は全体的な通信量も減らすことができます。
SPAのデメリット
ページを表示した時の最初の読み込みに若干時間がかかります。
まぁ通信量はネット全体的にこれから増えていく傾向があるので、そんなに気にする必要はないかもしれません。
それからSPAのOGPに対応していないサイトがまだあります。たとえばTwitterはまだ対応していません（2020年現在）。
SEO的にはどうなの？
SPAは昔はSEO的に難がありました。
GoogleがSPAに対応していなかった時代はSEO的に問題がありましたが、今はGoogleの検索ロボットがSPAも認識してくれるので、大丈夫になっています。
私の作ったSPAのアプリも、Googleの検索結果にはちゃんと表示されます。
このアプリにはGoogleアナリティクスを導入していますが、しっかりSPAのページが認識されています。
- SPAはGoogleの検索結果にも表示される
- SPAはGoogleアナリティクスでも認識される
これからの時代はSPA？
今はまだ移り変わる途中の時代なので、これの判断はなかなか難しいです。
SPAではなく旧来の技術でアプリを作っているところもまだまだ多いです。
昔は、SPAはSEO的に問題があることからなかなか普及しなかったのですが、そのSEOの問題もすでにGoogleはクリアしています。
そしてなにより、これからの時代は大容量通信の時代になってきます。
つまり画像や動画がどんどん表示できる時代です。
そうなると、ブラウザの更新なしにすぐに画像を表示できるSPAが有利になるのは目に見えています。
おそらくですが、これからの時代はSPAの流れになるのではないのでしょうか。
SPAを作れる制作業者
↓の業者ではSPAに対応したWebアプリの制作が可能です。
おわりに
最後になりましたが、SPAについてまとめてみたいと思います。
- SPAはWebアプリの見た目と操作感を良くする
- SPAは今どきのオシャレな技術
- SPAは若干、最初のロードが遅い
- SPAはGoogleの検索結果に表示される
- SPAはGoogleアナリティクスで解析できる
ちなみにNARUPORTではSPAアプリの制作が可能です＾＾
ご依頼はこちら↓のフォームからどうぞ。
- お問い合わせ - NARUPORT
姉妹ブログを見に行く。
