ID:69598さん

### 概要: このプロジェクトは、JavaScriptとJQueryで開発されたWebアプリの置き換えを行うものです。元々は大学内で利用するためのシンプルな構造のアプリでした。ですが、最近では小中学校や資格予備校などでの需要が増加しており、汎用的な利用を目指してデザインと機能のリプレイスが行われました。 ### 背景と目的 旧アプリはJavaScriptとJQueryで作成され、大学内で使用されていました。 新アプリは、スマホやタブレットの利用を考慮したレスポンシブデザインや多言語対応、他社製ゲーム要素の統合などの課題に取り組んでいます。 ### 規模感、チーム構成、担当した役割 ・工数6人月 ・ディレクター1名・バックエンド1名・フロントエンド2名構成 ・担当はフロントエンド開発 ### 使用技術: JavaScript・Vue3・Vuetify3・CompotisionApi・VueRouter・Pinia・PHP・CodeIgniter・PostgreSQL ### 課題 ・リリースバージョンごとに画面仕様が違う ・初心者向けにわかりやすいコードの実装 ### アプローチと工夫: ・リリースバージョンごとに画面仕様が違う のちの修正が来るであろう部分は共通化せず、リリースバージョンごとにコンポーネントを作ることで対応しました。 ・初心者向けにわかりやすいコードの実装 コード意図がわかるコメントの追記、責務ごとのコンポーネント分割、watchなどを極力減らした実装など認知負荷を下げるように実装しました。 ### 成果: 新しい技術を用いた開発環境での経験を積み、リニューアル案件での新規制作という経験を得た。Vue3, Vuetify3, Piniaなどの最新技術を習得し、新しい知識とスキルを獲得しました。

### 概要: このプロジェクトは、船舶の航路情報や気象情報などを地図やグラフで表示するフロントエンド開発です。API開発は他社が行い、私たちはフロントエンドのみを担当しています。 ### 背景と目的 船舶情報の視覚的な表示を行うため、地図やグラフを使用します。 ### 規模感、チーム構成、担当した役割 ・毎月0.5~2人月（現在も保守を行なっています） ・フロントエンド2名構成 ・担当はフロントエンド開発 ### 使用技術: JavaScript・Vue3・ElementPlus・Pinia・GridLayoutPlus・OpenLayers・HighCharts・Tabulator・WebWorker ### 課題 ・Vue2→Vue3への移行 ・数万件あるデータのパフォーマンスチューニング ### アプローチと工夫: ・Vue2→Vue3への移行 Vue3への移行にはElemantUIからElementPlusへの移行、vue3での破壊的な変更への対応（v-deepや.syncなど）、ElementUIのCustom themeの移行、GridLayoutPlusへの移行をする必要がありました。 画面表示が表示できるように→GridLayoutの移行→ElementPlusへの移行→vue3での破壊的な変更への対応→ElementUIのCustom themeの移行→動作確認→cssの調整 の手順で移行を行いました。 ・数万件あるデータ整形に伴うUX低下対策とパフォーマンスチューニング Object.freeze()を使用してリアクティブ制御を最適化し、パフォーマンス向上させました。 また大量データの表示にWeb Workerを使用してマルチスレッド対応を行い、表示速度を改善しました。 ### 成果: Vue3へのバージョン移行やパフォーマンスチューニングなど、複数の課題に取り組みながら、改善と向上を達成しました。 この経験により、Vue.jsの最新機能やパフォーマンス最適化の手法を習得し、現在のプロジェクトに活かすことができるようになりました。また、チーム内でのコラボレーションや新技術への適応能力も向上し、今後の開発にも貢献できる自信を得ることができました。

### 概要: 航海士が適切な航路を選定できるように、船の運行管理情報を表示するアプリを開発。既存の海運情報Webアプリを基に、特定の機能を絞って再開発しています。API部分は他社が担当し、このプロジェクトではフロントエンドのみを開発。 ### 背景と目的 船舶情報の視覚的な表示を行うため、地図やグラフを使用します。 ### 規模感、チーム構成、担当した役割 ・3人月 ・フロントエンド2名構成 ・担当はフロントエンド開発 ### 使用技術: Typescript・Vue3・ElementPlus・Pinia・GridLayoutPlus・OpenLayers・HighCharts・Tabulator ### 課題 ・基となるアプリの負債解消 ### アプローチと工夫: ・基となるアプリの負債解消 基となったアプリはその旧バージョンの2つの画面が1つにまとまったという経緯があるため、可読性が悪かったり、データ構造が効率的ではない箇所が存在した。 今回の開発で必要な機能に特化したデータ構造を設計し、パフォーマンスを向上させた。 ### 成果: Typescriptを新たに導入し、型定義、ジェネリクス、オブジェクトリテラルの活用方法を学びました。不可読なコードの解析を通じて、データ構造の再設計を行い、アプリの既存問題を特定。この知識は今後の保守や運用の際に役立つと思います。