【Vue3×TypeScript】画像プレビューをPhotoSwipeで実装してみた
PhotoSwipeは、高性能な画像ギャラリーライブラリで、モバイルやデスクトップ、様々なブラウザで高いパフォーマンスと使い勝手を提供するライブラリである。当記事では、いくつかの主要な特徴と実装方法について解説する。また検証環境だが、Vite×Vue3×TypeScriptで構築された環境
教育業界向けの学習アプリや電子カルテの開発
期間
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設計とテスト設計を経験したことで、これまでより少し上流工程に携わることができました。このフェーズでは、作業の基準が自分ではなく、「開発チームのメンバーにとってどうか」になるので、上流工程ならではの難しさもこの現場で感じることができました。
