軽いLoL辞典

世界的人気ゲームのアイテム検索アプリ

概要

Riot Games社製ゲーム『League of Legend』のアイテム一覧を閲覧できるSPA。
使用した技術

WordPress（PHP）、JavaScript、CSS、webpack、Docker
要件と実現方法
- ・アイテム詳細画面への画面遷移にHTTPリクエスト（ページ遷移）は行わない
  　→ JavaScript でモーダルウィンドウにアイテム情報を渡して表示
- ・ただし、アイテム詳細画面へのダイレクトリンクはしたい
  　→ クエリパラメータでアイテムごとのパスを表現、ダイレクトリンク実現
- ・2週間に一度、ゲームのアップデートによるアイテム情報の更新を自動化したい
  　→ WordPress管理画面からゲーム提供のjsonファイルの最新版をリクエスト、自動更新
- ・カテゴリ、タグによる絞り込み機能
  　→ PHPがカテゴリとタグを持つアイテム一覧を生成、JavaScriptによりそれらを絞り込み
- ・画像は極力軽量化したい
  　→ webpackにより画像を一括でリサイズ、圧縮、webp化。
課題

ページの初回閲覧時、全アイテムを一斉に読み込むため重いため以下改善が必要
・ファーストビュー付近のアイテムのみを先行して読み込ませる
・トンマナに合わせた読み込み中のプレースホルダー設置