本記事の内容
-
そもそもJavaScriptを学習する必要性
-
SPA(シングルページアプリケーション)とは？
-
SPAの原理
-
SPAのデメリット
筆者について
-
Web系エンジニアとしてサーバーサイド、フロントエンドの両方を実装
-
中でもJavaScriptが得意
-
得意言語はC#、PHP、JavaScript、Java
前置き
当記事では、JavaScriptをJSと表記します。
Contents
そもそもJSを学習する必要性
まずは、なぜJSを勉強する必要があるのか？を明確にしましょう
ご存知の方は読み飛ばしてください。
JSはフロントエンドの「動き」を実現するために必要
言葉の説明
-
フロントエンド：ユーザーが直接目で見ることができる領域の処理。ブラウザやデスクトップアプリの見た目に関わる範囲。
-
サーバーサイド：データベースの操作などの人が目で見ることができない処理のこと。フロントエンドの対義語。
こちらの記事をご覧の方は、HTMLとCSSを既にある程度学習した人が多いと思います。
HTML、CSSはWebアプリを作る際の「見た目」を作るためのマークアップ言語でしたね。
だけどHTMLとCSSだけだと「動き」を実現するのに限界がありますが、JSを利用すると極端な話なんでもできます。
例えば以下のHPとか素晴らしいですよね。
見ていて楽しいし、「動き」があるものに対して人は視線を向けるので、見せたい情報に動きをつけることでユーザーの視線をコントロールできるメリットもあります。
JSを使用したアニメーションは下記のUdemy動画コンテンツがおすすめです。
>> 【JavaScript＆CSS】ガチで学びたい人のためのWEB開発徹底実践（フロントエンド編）
Udemyとは？
Udemyとはプログラミング関係の動画教材を格安で購入することができるサービスです。
買い切りなので本やプロゲートより安くておすすめです。
別の記事でも紹介しているのでご覧ください。
SPA(シングルページアプリケーション)を構築できる
JSの目的は動きをつけることだけではありません。
SPAという、イケてるWebアプリを作ることができる
SPAという言葉を聞き馴染みのない方もいらっしゃると思います。
SPAとはシングルページアプリケーションの略で、一言で説明すると文字通り１ページしかないWebアプリです。
ざっくり説明すると以下のようなイメージです。
HTMLとSPAの違い
-
HTMLは画面の数だけHTMLファイルがある(index.html, home.html, login.html setting.html など。)
-
SPAはindex.htmlのたった１ページしかない ※通常index.htmlとつけますがファイル名はなんでもOK
HTMLの場合はページの数だけHTMLを作る
例えば通常のWebアプリでトップページ内のログインボタンを押すとログイン画面に切り替わりますよね。
理由としては簡単で、ログインボタンが押されたら「ログイン画面用のHTMLに表示を切り替えているから」です。
単純ですね。他にも「設定」ボタンを押されたら、設定画面用のHTMLを表示します。
だけどSPAは違います。
SPAの場合は変化した部分だけ書き換える
SPAの場合ログインボタンを押してもログイン画面の見た目に切り替わりますが、実際はログイン画面には遷移しないという状況が起こります。
これがSPAの特徴なのですが、SPAは「ページが変更された分だけ書き換える」ということが行われているからです。
例えば下記の画像をご覧ください。※ご存知の方も多いプロゲートです。
画面上部のヘッダーに「コース一覧、スライド検索、ランキング、ヘルプ、アカウント情報、お知らせ情報」と並んでいることを覚えておいてください。
次に、一番左上の「HTML＆CSS」コースを選択してみます。
するとHTML＆CSSのページに移動しますが、ヘッダーはまだ表示されていますね。
理由は単純でどのページにも共通的にヘッダーを表示しておきたいからです。
ここで問題となっているのが表示されるヘッダーは同じなのに、１ページ丸ごとHTMLを差し替えている点です。
ページ全体のHTMLを差し替えるより、差分だけ更新した方が速度が早い
ページが切り替わっても部分的に同じ箇所があるので、丸ごと切り替えるってすごく無駄な処理だってことは直感的に分かるかと思います。
大前提として、「HTMLとCSSをブラウザに理解させて画面に表示する」という描画処理はコンピューターにとって結構ハードワークです。
したがってヘッダーは残しておいて、単純にそれ以外の部分を差し替えればヘッダーを描画する時間分だけ省略できるので早くなります。
これを実現するのがSPAです。
SPAの原理
とりあえずSPAがなんで早いのはわかったけどどうやって実現しているのか？
どこが変化したかを見張ってくれている人がいる
SPAを使いたいからといって、私たちが「ヘッダーは残しておいて、他の部分だけ変更してね！」とコンピューターにプログラムを書く必要はありません。
私たちは通常通り、普通に「ログインボタンを押したらログイン画面に移動してね！」というプログラムを書けばOKです。
なぜなら「仮想DOM」という仕組みを使って、「現在画面に表示されている内容と、私たちが実現したいこと(ログイン画面を表示すること)の差分を自動的に算出して、必要な箇所だけ差し替えてくれる」からです。
仮想DOMって？
仮想DOMとはすごく簡単に説明すると、HTMLを画面に表示しないけどHTML構造だけコンピューター側で保持しておく仕組みです。
「仮想」だからホントは存在しないけど、コンピューター側では「存在している」ように振る舞います。
そのため、現在のHTML構造と実現したいHTML構造の差分を確認して、違うとこだけ更新することで高速な画面切り替えを実現できます。
具体的には以下のようなイメージです。
HTMLの場合
<body>
<div>
<header>
<h1>ヘッダーです</h1>
</header>
</div>
<div>
<div>
HPのメイン部分
</div>
</div>
</body>
SPAの場合
<body>
<div>
<header>
<h1>ヘッダーです</h1>
</header>
</div>
<div>
<div>
ログイン画面
</div>
</div>
</body>
これら２つのHTMLは「HPのメイン部分」と「ログイン画面」しか違いはありません。
なので、１ページ全て切り替えるのではなく「HPのメイン部分」を部分的に「ログイン画面」に切り替えるという処理を実現します。
SPAのデメリット
サクサク動いでストレスの少ないSPAですが、デメリットもあります。
代表的なデメリット
-
その①：初期ローディングに時間がかかる
-
その②：Internet Explorerだとほぼ無理
-
その③：開発者が少ない
その①：初期ローディングに時間がかかる
SPAは一度開いてしまえばサクサク動きますが、初期ローディングに時間がかかる場合があります。
これは、初期ローディング時にアプリ内の処理を全て読み込むことで読み込み後の速度を上げているためです。
初期ロードしたデータをデバイスのメモリに保存し、それ以降はメモリから処理を呼び出すことで軽い動きを実現しているんですね。
なので業務系Webアプリやツイッター・インスタなどの、一度開いたらしばらく滞在するアプリに向いています。
逆にパッと見てすぐ立ち去るようなWebページにはあまり向いていないと言えます。
その②：Internet Explorerだとほぼ無理
Internet Explorerは既にマイクロソフトがサポートを終了していますが、あまりPCに詳しくない人はインターネットといえば「Internet Explorer」を思い浮かべる方が多いです。
サポートが終了しているので、最近のWebフレームワークは「Internet Explorer」での動作保証をしていないケースが多いです。
したがって、SPAを使う顧客が「どのブラウザを使っているか？」などのユーザーの環境を意識しなければなりません。
とはいえ、今時「Internet Explorer」を使う人はほとんどいないので心配しすぎる必要はありません。
現在ではWindowsのデフォルトブラウザも「Microsoft Edge」です。
※以外と気付いていない人が多い。。。
その③：開発者が少ない
SPAを開発できるWebデザイナーが少ないというデメリットがあります。
そのため、デザイナーが作ったHTMLをエンジニアがSPAに書き直すという無駄な作業が必要になります。
SPAでコーディングできるWebデザイナーがいれば開発工数が短くできるのですが、「HTMLとCSS以外は専門外！」なデザイナーが多いという点でデメリットと言えます。
逆にSPAを書けるデザイナーがいれば結構無双できると思います。
まとめ
今回はJavaScriptでSPAという、これまでの通常のWebアプリとは違うアプローチをできるということをご紹介しました。
ただデメリットもあるので、なんでもかんでもSPAにすると逆に初期ロードに時間がかかるケースもあるので使いどころは取捨選択が必要ですね。
次は、具体的にどうやってSPAを作るのか？とおすすめフレームワークをご紹介したいと思います。