【プロジェクト概要】
医療系システムの開発業務です。本案件では、旧式のバーションアップが目的になります。そのため、旧式の改善点は改修し、新規で新機能を実装す必要がありました。バックエンドはPHP(laravel)、フロントエンドは、React/Typescriptを採用しております。
【利用技術・言語】
TypeScript, React.js, JavaScript, HTML5, CSS3, Sass, Docker, GitHub
【デザインツール】
AdobeXD
【役割】
デザイン/コーディング/フロントエンド
【実装例】
■ページ遷移機能(react-router-dom v6)
■モーダル機能(フルスクラッチ実装/useState)
■アコーディオン機能(フルスクラッチ実装/useState)
■パネル並び替え機能(react-beautiful-dnd)
■フォーム検索機能(React Hook Form)
■ベースコンポーネントの作成と管理(Storybook/AtomicDesign)
【担当業務・得意だったこと・努力した点など】
この業務において私の立ち位置は、デザイン作成→コーディング→フロントエンド開発の一連の流れを担当しています。デザイン作成およびJSXコーディングから参画し、画面が完成後は担当のバックエンドエンジニアに作成画面を流すイメージで業務を進めています。
開発初期は、作成したコンポーネントをStorybook上で保管し、他エンジニアとの認識齟齬を無くすことから始めました。開発中期からはバックエンドのデータが用意されるので、axiosを使用し、モックで作成されたtableタグ等にCRUD実装を進めています。
得意だった点は、Reactのライブラリの一つであるemotionをチームの誰よりも使えた点です。元々、その他の運用保守業務でCSSとSassの経験があることで、スタイリングには慣れており、デザインからコーディングの作業時間は予定されていた進捗よりも大きく上回りました。予定を上回ることで、フロントエンドの残タスクを巻き取り、上記実装例を機能化することに貢献しました。
これらの経験の中でも、一番胸を張れるポイントとして、クライアントのニーズである「一画面にできるだけ機能を詰め込みたい」を実現できたことです。本案件のような業務系アプリは一画面に機能を入れ込む仕様が多く、仮にAtomicDesignでスタイルや位置関係を調整したとしても、CRUD操作等々でスタイルが崩れてしまうことが課題でした。私自身、デザイン/コーダー出身ということもあり、emotionのSassで解決を試みました。Sassでは、ネストで書ける点を活かしコンポーネント単位でブレイクポイントを設けることで、画面の不要な崩れを解消しました。
また、努力したポイントとして、Typescript(Ts)の短期的なキャッチアップは踏ん張りました。アサイン当初は、型概念の理解度も低く、エラー解決に苦労しました。ただ、昨今のフロントエンドではTsは必須ということもあり、学習意欲は高く、業後にUdemyや書籍等でキャッチアップしました。エラーで手が止まりながらも、コードに食らいついた結果、現在では、フロントエンド周りで発生するエラー処理は独力で解決できるようになりました。今ではデプロイまで及んでませんが、フロントとAPIの繋ぎこみをより理解したいと思うようになり、趣味でDjango×React/Tsで業務アプリを黙々と作っています。