Haruka

Engineer

プロジェクトの詳細

Webサイトリニューアル開発のフロントエンドとして途中から参加。 開発初期はリニューアルタスクの実装、QA、バグ修正を担当。 リニューアル後、保守運用フェーズではリリース作業や管理画面の修正など担当する範囲を広げ、お客様との打ち合わせや仕様決めに参加。 また、その中で要件定義・保守改修・新規開発タスクの実装とスケジュール調整を担当。 後任へのプロジェクト引き継ぎ時、プロジェクトの全体像や知見を共有しすぐに参加できるよう情報整理と共有を実施。

使用技術

  • フロントエンド：React, Redux
  • バックエンド：Go（API）, PHP（管理画面）
  • インフラ周り：AWS, Jenkins, Docker, MySQL
  • チケット管理：Redmine

参加期間

  • 2019年5月〜2021年3月

開発規模

  • リニューアル時期：11人
  • 保守運用フェーズ：3〜4人

プロジェクトでの課題

フレームワークを使って簡単なプログラミングができる程度の実力で初めて案件に参加したため、全体的に必要な知識が不足していた。 そのため、実践の中で基礎知識のキャッチアップをし足りないところは自己学習を進めていくことが課題だった。

主な取り組み

  • 開発タスクの実践と自己学習
  • CSV生成のスピード向上

【フロントエンド】

CSSライブラリ（styled-components）でページのデザイン修正やReactコンポーネント修正など、フロントエンドのコードを理解してきたところで、問い合わせフォームの作成という流れでタスクを任されました。

分からなかったCSSやReactの勉強は、本と並行してプロジェクトのコードを照らし合わせながら勉強することで知識になると考え、できる限り手を動かしながら試行錯誤してみることを大切にしました。

問い合わせフォームを1から作成するタスクでは作成にあたって、ページコンポーネント定義、デザイン作成、APIへのリクエストを行いStateを管理するReduxの定義、文字数バリデーションを実装しました。 フォームの値を送信する際、2重で送信してしまうバグの解決が1番苦労しました。 当時の理解ではロジックの実装に時間がかかるため、 以下の3点のことを意識しました。

  1. プロジェクト他に記述があるならそれを参考にする
  2. なければ、何か便利メソッドでできないか調べる(配列であればfilter, mapなど)
  3. それでもないならロジックを考え調べながら実装する

実現するための処理を最初から考えて組むよりも、他の人が書いたコードを調べる方が書き方を知る機会やが足がかりになり、結果的に効率の良い実装できると考えています。

この案件が自身の初めて関わるプロジェクトとなったため、わからないところは上司に教えて頂きながらタスクを進めていきました。

【バックエンド】

フロントエンドタスクがある程度こなせるようになり、保守作業に移行したためリソース削減のため担当者から受け持つ形で社内パッケージである、管理画面CMSのデータの検索・CSV生成機能のスピードを上げる開発をしました。 検索機能の実現にあたって、フレームワークを使わずPHPのみを使って実装するので、考慮する点が沢山ありました。 そのため、バックエンドのエンジニアと相談しながら、大まかな設計やどの部分を修正するといいかなどを一緒に考えながら進めていくことで、バックエンドの知識を吸収しながら実装できました。

1番難関だったFormリクエストを受け取りそのパラメーターからSQLを作成しデータのリクエストでは、クエリを保持するため$\_GET変数を使い、リクエストを行いました。実装したコードのレビュー時にはSQLインジェクションできる状態だと指摘を受け、検索クエリからSQLを叩くパラメータをエスケープすることで起こりづらいコードに変更できました。

【タスクの要件定義と設計】

リリースする作業の引き継ぎと実施を行ないました。デプロイには専用の端末を使いJenkinsから直接デプロイを走らせることで反映しました。DockerでJenkinsのイメージを構築して使ってみることでvimやdocker、jenkinsにまずは慣れて何を行うものなのかを知れるようにしました。

保守運用フェーズでは、開発リソースの縮小に合わせてバックエンド・リリース作業と担当する部分が増え、お客様との打ち合わせや要件定義・設計にも参加するようになりました。その際、やるタスクとやらないタスクの調整に注意しながら行うようにしました。要件定義では現状のコードを見て、大規模な改修が必要なタスクなどは代替案を提案し、できないで終わらせるのではなく実現可能な形で提案できるように心がけました。

後任の引き継ぎに関しては、コードリーディングをしていたことでプロジェクトの概要を把握でき、情報が正しいかどうかを判断しながら整理して、見るべき資料をまとめる作業をしました。そのため、共有がスムーズにできプロジェクトの引き継ぎを問題なく終えることができました。