Vue 3とTypeScriptで仮想スクロールを実装: 「vue-virtual-scroller」の使い方
Vue 3とTypeScriptを使用したvue-virtual-scrollerライブラリの使い方と実装方法を解説する。仮想スクロールの基本から、DynamicScrollerとRecycleScrollerの違い、さらには動的なアイテムサイズへの対応方法まで、実用的なテクニックも紹介している。
教育業界向けの学習アプリや電子カルテの開発
期間
2023年12月 ~ 現在
職務の概要
フロントエンドエンジニアとして、教育機関が使用する学習アプリやカルテシステムの開発に従事した。Nuxt3とTypeScriptを使った開発業務以外にも、API設計や、Playwrightを活用したE2Eテスト設計・プロセスの構築に従事。
組織構成
使用技術
| プログラミング言語（フレームワーク, ライブラリ） | CSS3（Sass, Tailwind CSS） JavaScript（Pug, Vue.js, Nuxt.js） |
| OS | Mac, Windows |
| 各種ツール | ◾️テストツール Playwright ◾️バージョン管理/CI・CD GitHub, GitHub Actions ◾️プロジェクト管理/コミュニケーションツール Backlog, Slack ■ デザイン Figma |
この現場での学び
テスト設計と構築
開発しているアプリケーションのE2Eテストの設計と構築全般を担当しました。私主導でテスト設計をするのは初めての経験だったので、他の開発メンバーがスムーズにテストの作成ができるように意識をしました。
【チーム開発】E2Eテスト導入と運用をスムーズに進めるために意識していること
テストプロセス構築の過程で、Playwrightというツールにも詳しくなることができました。これまで、Cypressを使ったE2Eテストの構築は経験していたので、今後E2Eテストの構築を担当する機会があれば、これまでの経験を活かすことができると思います。
API設計
開発スタイルがデザイン→フロントエンドモック実装→バックエンドの流れだったこともあり、API設計に携わりました。フロントのモック実装を行う過程でデータ構成を決め、パラメーターやリクエストボディを決めていくイメージです。
API設計とテスト設計を経験したことで、これまでより少し上流工程に携わることができました。このフェーズでは、作業の基準が自分ではなく、「開発チームのメンバーにとってどうか」になるので、上流工程ならではの難しさもこの現場で感じることができました。
