{{date}} {{catName}} {{title}}

弊社サイトのWORKSトップページに制作実績を紹介する9個の画像があります。
9個の画像の上の帯にある文字がカテゴリの絞り込みで、この文字を選択すると、そのカテゴリで絞り込まれた結果が9個の画像として表示されます。
また、「ALL」などを選択した場合、9個の画像の下にページの切り替えを行う黒い丸印が表示され、クリックすると2ページ目、3ページ目と切り替わります。

なんか凄いの？

実際、ただ9個の画像が入れ替わっているだけのシンプルなつくりですが、ユーザーのストレスにならないように、できるだけ高速に画像の入れ替えを行っています。
そして、その「高速」のために、実にいろいろなことを行っているのです。

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

WORKSページはシングルページアプリケーション（以下SPA)として作られています。
SPAというのは、ページ遷移を行わずに、コンテンツのみをインタラクティブに入れ替える機能を持ったWEBページです。

通常のWEBページは、ヘッダーやフッター、メニューバーなど、複数のページで同じものを表示しています。ページを遷移した場合でもヘッダーやフッターは変わりません。
しかし、WEBブラウザはページ遷移を行うと、同じものでも一旦削除し、再度表示する処理を行います。当然その分、通信や描画といった作業が重複してしまいます。

SPAは一度表示したものは消さず、変更があった部分だけを書き換えます。PCで見ている方は、WORKSページを開きブラウザのアドレスバーを確認しながらコンテンツを切り替えてみてください。内容が変わってもアドレスは変わっていないのを確認できます。

JSON

「ジェイソン」と読みます。
テキストでデータを作成する際の記述方法で、JSONで記述されたテキストファイルをJSONファイルと呼びます。

WORKSの全ページの文字情報は、１つのJSONファイルに記述されています。つまりWORKSページ用のJSONファイルを読み込めば、全WORKSページの情報が手に入るという事です。
しかも純粋なテキストファイルなので、ファイルサイズも非常に小さいです。本日の時点で、WORKSの記事は45件ですが、JSONファイルのサイズは70kb程度です。

このようなJSONファイルを読み込むことで、記事情報を追加取得する必要が無くなります。つまり、最初にJSONファイルを読み込んでブラウザのメモリに保存しておけば、サーバーと通信しなくても好きな時に好きなだけ記事を表示できるのです。

Web Worker

前述のとおり、文字情報は全てブラウザ内に保存されていますが、画像は都度サーバーから取得しなければなりません。しかも9個づつ入れ替えるため、一度に9個の画像を取得する必要があります。そうなると画像（取得処理）が渋滞を起こしてしまいます。

渋滞を起こさずに、しかも画像を取得したら即表示できるように、スムーズに処理を行う必要があります。Web Workerというのは簡単に言うと、ブラウザの処理を邪魔せずにバックグラウンドで作業を行う仕組みです。
ブラウザで入れ替え作業を行いつつ、裏側で画像の取得を行っています。

Vue.js

取得した画像はVue.jsというフレームワークを使用して表示されます。
コンテンツの入れ替えというのは、やり方を間違えると負荷の多い作業になってしまいます。下手をするとページを１から読み込むのと変わらない処理量になってしまいます。
Vue.jsはその辺の処理を上手に行い、スムーズなコンテンツの入れ替えを実行してくれます。

WebWorkerが画像を1つ取得する度にVue.jsの処理を呼び出し、画像の表示を瞬時に行ってくれます。

このように、いろいろな技術を組み合わせてWORKSページは出来ております。
おかけで、通信状況が良ければ、バババババッと気持ちよく画像が表示されるページになりました。