【SPAって何？】シングルページアプリケーションについて考える

Eyes, JAPAN Blog > 【SPAって何？】シングルページアプリケーションについて考える

開発

2021/2/19

【SPAって何？】シングルページアプリケーションについて考える

Daichi Hasegawa

この記事は1年以上前に書かれたもので、内容が古い可能性がありますのでご注意ください。

はじめまして！2月からアルバイトとして働くことになりました。長谷川です。今後とも宜しくお願いします。
実は12月末からインターンをさせていただいていまして、Eyes,JAPANに来て2ヶ月といったところです。

簡単に自己紹介しますと、以前は製造業で働いていたおり、IT業界とは無縁な生活を送っていた社会人です。つまり未経験からIT業界へ挑戦している形になります。（どういった経緯でIT業界を目指すことになったのかは割愛します。）
私にとって、IT業界は右も左もわからないことばかり。前職では幅を利かせていましたが、いざ業界が変わるとまったく通用しない。「井の中の蛙」とはまさにこのことだなと実感しています。このように毎日学びの連続で大変ではありますが、充実感を感じています。

紹介と感想はこれくらいにしまして、、

私は現在、Eyes,JAPANにきて以下のようなことに取り組んでいます。
・既存のサイトの修正や更新作業
・Wordpressでオリジナルテーマの作成
・LP（ランディングページ）のテンプレートの作成
・日報メールに下書きが生成されるシステムを作ったり（といっても簡単なやつ）
・その他いろいろ

それらに取り組んでいく中で、最近「SPA（シングルページアプリケーション）」といったものを知りました。
難しそうだけど面白そうだなと思ったので、今回、自身の学習の為にも記事にまとめてみました。

そもそもSPAとは？

SPA（シングルページアプリケーション）

結論から言ってしまうと

SPAとは単一のWebページでアプリケーションを構成する設計構造の名称です。
※デジタル・マーケティングブログから引用。

どうゆうこと？？ってなりますよね。私もなりました。
そこで、私が実際に制作したクイズアプリをもとに解説していきます。

未経験の方で、ポートフォリオとか「何作っていいかわからん！」って人がいましたら、ぜひ参考にしてみてください。

HTMLとCSSのみ使用した場合のWebページの問題点

以下の画像は、クイズアプリのwebページです。
機能としては、問題に対してや答えをクリックすると、正誤判定がアラートで表示され、次の問題に移り変わるようになっています。

１．

２．

３．

４．

５．

６．

７．

さて、これをHTMLとCSSだけで実装すると、どうなるでしょうか？？
例えば、以下のようにたくさんファイルを作らなくてはいけませんね。（アラート機能は別として）
・index.html
・index1.html
・index2.html
・index3.html
・
・
・
このように、問題の数だけファイルが必要です。

今回のクイズは問題の数が少ないので、頑張れば作れそうですよね。ですが、これが何十問もあったらどうでしょうか？

ファイルが違うということは、問題も回答していくたびに、サーバーにリクエストしてファイルを表示する動作が発生します。その都度ファイルを読み込まなければいけないので、クイズが表示されるのに時間がかかるということです。

つまり、ユーザーにいらぬストレスを与えることになります。

また、管理者側としてもファイルが増えると更新作業や管理作業が大変になってしまいますよね。

○○○.htmlは何個もいらない

これがSPAの肝です。
SPAで実装すると、htmlファイルは１つだけでいいんです。（もちろん画像だったら画像用のフォルダが必要です。）
htmlファイルはそのままに、ユーザーのアクションに合わせて変更したい部分だけを変更する機能。

これが冒頭でも説明した
「SPAとは単一のWebページでアプリケーションを構成する設計構造の名称です。」
の私なりの解釈です。

どんなメリットがあるかをシンプルにまとめると以下の通りです。
ユーザー目線
・いちいちサーバーにリクエストをしなくて良いからサクサク使える。

管理者目線
・ファイルが少なくてすむため、更新作業や管理がしやすい。
・なんかオシャレな感じで作れる。

他にもたくさんメリットはありますが、私の説明できる範囲でまとめています。
※SPAのプロの方に言わせてみれば、全然違う！雑魚アプリ！と罵倒されるかもしれませんが、まだまだ初心者なので勘弁してください。

アプリケーションと言われると難しい印象を持つと思いますが、シンプルに考えましょう。

SPAを実践してみる

Javascript使って実装する

以下のコードは、実際に私が実装してみたものです。SPAに挑戦です！

HTML

&lt;body&gt;
&lt;div class="container"&gt;
　　　　
　　　　&lt;div class="jumbotron mt-5"&gt;

　　　　　　&lt;div class="d-flex justify-content-center"&gt;
　　　　　　　　&lt;div id="js-question"class="alert alert-primary"role="alert"&gt;
　　　　　　　　　　ここに問題が入ります！
　　　　　　　　&lt;/div&gt;
　　　　　　&lt;/div&gt;

　　　　　　&lt;div id="js-items" class="d-flex justify-content-center"&gt;

　　　　　　　　&lt;div class="m-2"&gt;
　　　　　　　　　　&lt;button type="button"id="js-btn-1"class="btn btn-primary"&gt;解答の選択肢&lt;/button&gt;
　　　　　　　　&lt;/div&gt;
　　　　　　　　&lt;div class="m-2"&gt;
　　　　　　　　　　&lt;button type="button"id="js-btn-2"class="btn btn-primary"&gt;解答の選択肢&lt;/button&gt;
　　　　　　　　&lt;/div&gt;
　　　　　　　　&lt;div class="m-2"&gt;
　　　　　　　　　　&lt;button type="button"id="js-btn-3"class="btn btn-primary"&gt;解答の選択肢&lt;/button&gt;
　　　　　　　　&lt;/div&gt;
　　　　　　　　&lt;div class="m-2"&gt;
　　　　　　　　　　&lt; button type="button"id="js-btn-4"class="btn btn-primary"&gt;解答の選択肢&lt;/button&gt;
　　　　　　　　&lt;/div&gt;

　　　　　　&lt;/div&gt;

　　　　&lt;/div&gt;

　&lt;/div&gt;

&lt;script src="app.js"&gt;&lt;/script&gt;

&lt;/body&gt;

const quiz = [
    {
        question: '株式会社Ｅｙｅ＇ｓ　Ｊａｐａｎができたのは年は次のうちどれ？？',
        answers: [
            '1990年',
            '1995年',
            '1997年',
            '2006年'
        ],
        correct: '2006年'
    }, {
        question: '株式会社Ｅｙｅ＇ｓ　Ｊａｐａｎの代表取締役は次のうちだれ？？',
        answers: [
            '山寺　純さん',
            'マークザッカーバーグ',
            'スティーブジョブズ',
            'チャップリン'
        ],
        correct: '山寺　純さん'

    }, {
        question: '株式会社Ｅｙｅ＇ｓ　Ｊａｐａｎの掲げているビジョンは次のうちどれ？？',
        answers: [
            'ざるそばともりそばは区別がつかない。',
            'おはぎとぼたもちは区別がつかない。',
            '優れたテクノロジーは魔法と区別がつかない。',
            'カフェオレとカフェラテの区別がつかない。'
        ],
        correct: '優れたテクノロジーは魔法と区別がつかない。'
    }
];

const quizLength = quiz.length;
let quizIndex = 0;
let score = 0;

const $button = document.getElementsByTagName('button');
const buttonLength = $button.length;

const setupQuiz = () =&amp;amp;gt; {
    document.getElementById('js-question').textContent = quiz[quizIndex].question;
    let buttonIndex = 0;
    while (buttonIndex &amp;amp;lt; buttonLength) { $button[buttonIndex].textContent = quiz[quizIndex].answers[buttonIndex]; buttonIndex++; } } setupQuiz(); const clickHandler = (e) =&amp;amp;gt; {
    if (quiz[quizIndex].correct === e.target.textContent) {
        window.alert('正解！！');
        score++;
    } else {
        window.alert('不正解！！');
    }

    quizIndex++;

    if (quizIndex &amp;amp;lt; quizLength) {
        setupQuiz();
    } else {
        window.alert('終了！あなたの正解数は' + score + '/' + quizLength + 'です！');
    }
};

let handlerIndex = 0;
while (handlerIndex &amp;amp;lt; buttonLength) { $button[handlerIndex].addEventListener('click', (e) =&amp;amp;gt; {
        clickHandler(e);
    });
    handlerIndex++;
};

細かい解説は省略しますが、簡単に説明すると

HTML上の「ここに問題が入ります！」と「解答の選択肢」と入っているところをJavascriptで抜き出して、
そこに、ユーザーのアクションに合わせて文字が切り替わるようにしています。

つまり、変えたい場所とその場所に入れるものを用意してあげること。
それをJavascriptを使って、うまくつなげることができればSPAが実現できます。

これを応用すればWebサイトやLPを作る際にも役に立ちそうですね！
私自身の次回の課題ですね。