ID:62683さん

プロジェクトの概要

• CLIで利用していた画像処理機能をWebアプリ化

チーム情報

• コマンドを利用して機能を利用できるWebアプリ開発エンジニアとしてプロジェクトに参画。

担当業務

• 機能開発
• テスト

課題

バックグラウンドで処理を実行

• 画像のアップロードを終えて、画像処理コマンドを叩いた後に、画像処理が完了したことをどう把握するのかを考える必要があった。

ユーザーが利用しやすい画面設計

• バックグラウンドで処理が続行されるため、動的に表示を変更させてステータスを表示させる必要があった。

例外処理や運用を考えた設計

• エラーが発生した場合の原因の特定しやすさやエラー画面作成などが必要だった。

取り組み、工夫点

バックグラウンドで処理を実行

• 画像のアップロードを終えて、画像処理コマンドを叩き画像処理が完了して処理が完了するまで、フロント側でsleep処理で確認APIを叩きファイルとディレクトリの状況から状態を把握する構成として機能を成立させた。

ユーザーが利用しやすい画面設計

• 動的にステータスを表示するために、画面構成はSPAとして型安全の恩恵を受けるためTypeScriptとReactを選定した。
• 開発期間が1〜2週間ほどしかなかったため、TailwindCSSを利用して画面構築効率を高めた。

例外処理や運用を考えた設計

• エラーのコードなどを固定値として定義して、どの部分に原因があったのかわかるようにした。
• バックエンド処理にLogを出力させるコードを仕込み原因となったコードを把握して、原因解決を早くするための工夫をした。
• Reactは本来viewライブラリであるため表示部分に専念させて、極力の処理をバックエンドに集めてそれをLaravel側で作成したAPIを叩くというシステム構成にして拡張しやすい設計とした。

成果

• クライアントからのFBもほとんどなく、短期間で機能要件を満たした成果物を作ることができた。
• 運用時に思わぬエラーが起こった際の原因特定もしやすい。