概要
HTML5、CSS3、JavaScript、EJS、Storybook を用いて UI モジュールとコンポーネントを作成し、レスポンシブ対応、パフォーマンス最適化、テストまで担当しました。
技術スタック
JavaScript
HTML
CSS
SCSS
jQuery
EJS
Storybook
Webpack
Git
GitHub
XD
VS Code
MacOS
📅
期間
2020年12月～2021年3月
🔗
ライブ
Coming Soon
チーム構成
👤フロントエンドエンジニア: 2
👤デザイナー: 1
👤ディレクター: 1
主な機能
- 1HTML5、CSS3、JavaScriptでインタラクティブなUIを実装
- 2EJSで動的テンプレート生成とページレンダリング
- 3Storybookでコンポーネントのドキュメント作成・再利用性向上
- 4レスポンシブデザインと画像最適化、コード圧縮、非同期処理でパフォーマンス改善
- 5単体テストとバグ修正を実施
- 6納品準備とドキュメント整備
課題と解決策
不動産サイトに必要な物件検索やフィルター、地図表示などのUIを、複数ページで共通利用できる構成にする必要がありました。Storybookを用いてUIコンポーネントを整理・可視化し、EJSテンプレートと組み合わせることで、動的データを扱いながらも実装の一貫性を保ちました。
成果
コンポーネントの再利用性が向上し、ページ追加や修正時の実装工数を削減できました。Storybookによるドキュメント整備により、UI確認や品質チェックがしやすくなり、安定した品質での納品を実現しました。
