keigo

【概要】

• 水道企業局の設備保全クラウドサービス
• 設備の保全情報の一元管理するシステム
• 過去のデータを用いて作業周期の見直しや対応策を講じる事ができ、作業の効率・質を向上させることができる
• リリースは完了しており、BtoBシステムのためクライアントに引き渡して設定・徐々に運用を開始している状況。
  しかし、多機能のシステムで運用ケース洗い出し不足があり、障害が発生したら即時対応するような状態でした。
• 一元管理する主な機能は以下の通り
  • 設備管理　管理対象の設備や機器の情報管理
  • 作業指示　作業内容の計画・実績の管理
  • 作業標準　繰り返し行う作業のテンプレートの管理
  • 予防保全　繰り返し行う作業の周期および期間の管理や、作業標準機能との関連付けも整備し、個々の作業指示を自動生成
  • 懸案管理　作業時に生じた課題や問題点、共有事項の管理
  • 停止計画　カレンダーで作業タスク・停止期間が管理できる
  • 承認管理　承認依頼を出したときに担当者にメール送信する機能を持つ

2022年10月〜2023月9月の開発期間でリリース、2023月9月からバックエンド担当者の開発を引き継ぎ、リードエンジニアとして現在まで障害対応・追加設計・開発をしつつ運用していました。現在のチーム構成は以下の通りでした。

• プロジェクトマネージャー
  • 2名（内1名タスク管理・顧客打ち合わせ）
• 開発チーム
  • 9名

開発フローはウォーターフォール開発を採用しており、設計・開発で詰まった場合はモブプロ・ペアプロなども行いました。
リードエンジニアとしては主に以下の業務を行いました。

• 追加機能開発
  • 新規画面・新規APIの作成
  • オフライン画面の設計・開発
• 技術的負債の返済活動
• 相談対応
• バックエンド（Node.js）保守・運用
• フロントエンド（React.js）保守・運用

【業務内容】

• システム追加開発の要件定義及び調査資料の作成
• バックエンド及びフロントエンドでの不具合の保守・運用・実装
• オフライン環境での動作させるPWA化の設計及び実装
• 開発環境の5倍以上の速度改善

【習得スキル】

• システム構築の要件定義及び調査技術の向上
• React及びNodeでの実装速度、コード品質の向上
• PWA化の理解、設計、実装
• Excelを用いた設計資料の作成、調査技術
• 全体システムの最適化を考えた提案及び調査資料の作成

##【業務内容】
・システム構築の要件定義及び調査資料の作成
・Node、React、MySQL、Dockerでのローカル及び本番環境の構築
・Docker、独自クラウド環境に合わせたPrismaORMの導入
・連絡ツールの調査及び導入
・ReactでMock化した初期画面の作成
・Cookie及びsessionStorageを利用した値保存の設計及び導入
・MaterialUIを用いたcalendar、combobox等の各種コンポーネントの作成
・Node、PrismaでのCRUD機能の作成
・多機能タイムラインライブラリreact-calendar-timelineの導入及び作成
・開発メンバーのサポート
・システムの最重要画面になる作業指示画面の作成
・開発テストtestArtsを用いたテスト設計書、テストケースの作成及び実行
・添付ファイルアップロード、ダウンロードの作成
・CSVアップロード、ダウンロードの作成

##【習得スキル】
・システム構築の要件定義及び調査技術
・Reactでのhooks、useEffect、UIコンポーネントの網羅的理解及び実装
・Reactでの多言語化対応の構築
・Node&Prismaでの初期構築及び実装
・システム構築の要件定義及び調査技術

【着任期間】

2021年04月 〜 2022年08月

【業務内容】

・不動産査定BtoBシステム依頼画面・管理者画面の環境構築
・不動産査定BtoBシステム依頼画面に予算管理機能の追加
・不動産査定BtoBシステム管理者画面に１対多登録の地域・物件種別の登録、編集機能の追加

【実績・取り組み等】

・Nuxt.js・Next.jsを用いた環境構築を経験。
・Vue３のComposition APIを用いて値取得・保持を行い、ORMのPrismaを用いて１対多のデータ取得で地域・物件種別の取得を行いました。
・AdminJS用のモジュールであるsequelizeを用いて複雑な１対多の登録・編集の作成を行いました。

【習得スキル】

・Nuxt.js・Next.jsを用いた環境構築
・Nuxt.js,Vue3,Prismaでの開発手法の理解
・AdminJS（FW）,Sequelizeでの開発手法の理解

【Nuxt.js・Next.jsを用いた環境構築】

READMEに従っての環境構築でしたが、依頼画面では、prismaが正常に動作しなかったため、ライブラリを新しく追加し、動作できるよう修正しました。管理者画面では、カスタムパッケージを使うsequelizeのパスが正しく指定されておらず動作しなかったため、ライブラリを更新し、修正しました。
また、ORMのPrismaを用いたprisma db seedによるDBデータの作成・Sequelizeを用いたsequelize-autoによるモデル定義の更新にも理解を深めました。

【予算管理テーブルの作成】

地域・物件種別の取得には、１対多の関係での取得が必要で、GraphQLを用いないORMを使用した取得方法は初めて経験でした。whereやinclude等による取得を行い、if文やfor文をうまく利用して顧客が求める予算管理テーブルの作成を実現しました。

【管理者画面の地域・物件種別の登録、編集機能の追加】

AdminJSという最新のFWを用いた開発はかなり複雑で、該当するHTMLファイルですらコード上で内製化されていたため、処理フローの理解に３〜４日ほどかかりました。最適化された方法ではないですが、sequelizeのqueryでsqlが柔軟に作成できる事を理解し、responseで受け取ったデータを途中加工することで作成・編集の処理を作成しました。

【着任期間】

2021年9月 〜 2022年03月

【業務内容】

・環境構築
・自社作成ページの遷移先URLを設定できる機能の追加
・連携先SNSのエンドポイントの変更
、送信するパラメータの修正対応
・slack通知連携をしているlambda-functionのエラーコードメッセージの表示追加、単体テストの追加
・lambda-functionのcircleCIを用いた自動テスト(CI)の追加
・外部APIとの新規連携（倉庫システム）

【実績・取り組み等】

・Kotlinを用いたintellJでの開発環境の設定方法。
また、Vue,AWSCLI,GraphQLとの連携及び疎通テスト方法学びました。
・VueのVuexを用いたstoreの活用方法。
Kotlinのkolinを用いて依存関係をinterface化したクリーンアーキテクトでの開発を学び、GraphQLを用いて遷移先URL設定機能を作成しました。
・Lambdaを用いたpythonコードの開発及びAWSのサービスでのテスト手法を学び、エンドポイントの変更を行いました。
・pythonのvenvを用いて単体テストの作成を行いました。
・.circleci/config.ymlの処理を理解し、runコマンドを用いた自動テストを追加しました。
・外部API（倉庫システム）連携の際の要件定義、DBテーブル定義、作成コードの詳細設計を行いました。

【習得スキル】

・バックエンドKotlin,フロントエンドVue(TypeSript)を用いた開発手法の理解
・GraphiQLを用いたGraphQLの理解
・Gitを用いた開発フローの実行
・issueの記述内容をコードレベルにする
・DBテーブルの詳細設計及び処理フローの詳細設計
・クリーンアーキテクトの理解
・アーキテクチャ図・ドメイン駆動開発(DDD)の理解
・KotlinのHTTPクライアントFuelの組み込み

【当時の課題・行動】

「入社３ヶ月以内にフロント•バックエンドを含めた一通りの開発を行えるようになること」が課題でした。倉庫システムの独自外部APIを新規で組み込んだ開発を行い、3つのテーブルを新規作成し、AWSのSQSやCloud Watchでのログ監視を利用したインフラ利用含め、一通り開発することができました。

【今後の課題・反省点】

ヒアリング不足によるコード修正が多くあり、決めた仕様そのものを変更してしまうこともありました。
仕様の理解が曖昧なまま開発を進めてしまったことが原因のため、システム仕様の理解に時間を取り、理解を深めるべきだったと感じています。

【開発環境の構築】

Java用のIDEであるIntellJを用いたgradle(Java)の設定を行い、Vue・Kotlinを疎通させる開発環境の構築を行いました。awsCLIを設定し環境変数の設定を行い、dockerでmySQLコンテナを立ち上げて、local環境で動作させることができました。フロントにはNode.jsのnpmを用いてVue.jsのコードを動作させました。

【youtube広告用URLの設定】

フロントにはmockが採用されていて、GraphQL(mock)・TypeScriptを用いてURLカラムの追加を行いました。改修ごとのバージョン変更、GraphQL定義、TypeScriptでのデータ定義、Vuexでの状態管理 を行い、実装しました。

【Lambdaを用いたメディア連携の仕様変更】

メディア連携先の仕様変更によるURL及び送信パラメータの変更を行いました。
pythonを用いたクラス定義、パラメータ作成、実行の実装を行いました。

【CircleCI自動テストの追加】

単体テストを作成するため、.circleci/config.ymlに自動テストを追加しました。
runコマンドを追加し、環境変数を読み込んで、dockerコンテナのユニットテストを行いました。
また、venv（python仮想環境）を用いて単体テストを実装しました。

【倉庫システムの連携】

業務効率化のため、新規倉庫が持つ外部APIとの連携をkotlinで実装しました。
「モデルケース作成→非機能要件の洗い出し→実装」までを一貫して行いました。
具体的には、倉庫システムが持つ商品との連携のタイミングはどうするのか、システム上で必要なケースは出庫・入庫のため、そのために必要な項目のみの洗い出しを行い、必要な情報のみを保存するようにしました。非機能要件については「実装すべきかどうかについて」を上司と話し合った上で最適化を目指し実装しました。行なった実装・要件は下記になります。
DDD・HttpClient(Kotlin/Fuel)の追加・Workbenchの利用・環境変数の設定・SQSへのメッセージ送信(slack通知)・外部API機能の組み込み・単体テストの作成・フロント（Vue）の作成・AWSリージョンでのLambda、SQSの設定

【AWSの使用経験】

【具体的にどのように使用したのか】
・ECSのタスク定義を変更した環境変数の追加設定（ssmパラメータ追加設定含む）
・AWS Lambda・SQSの作成または設定、DynamoDBのテーブル作成または設定
・DynamoDBを使用したNoSQLへのデータ登録・更新
・Cloud Watchのログを確認したエラー修正・SQSUI上でのメッセージ送信
【使用に際する工夫点】
・環境変数に「http~」という記述を直接記載できなかったため、ssmパラメータに設定するようにし、ECSに設定されたタスク定義のコンテナ内に環境変数を追加してタスク定義を更新しました。
・使用するリージョンやサブネット・Timeout設定は予め決められていたため、相違ないよう修正箇所を確認しながら設定を行い、設定方法の理解を深めました。
・NoSQLのDynamoDBを利用し、値の取得を高速化させ、処理速度を早めるため使用されていました。
値追加のタスク時には、Mapで値が入るよう作成し、値がなければカラム自体を追加しないよう作成しました。
・【Lambdaを用いたメディア連携の仕様変更】の時に変更したpythonコードの動作確認のため、Slackを利用して、stagingにタスクブランチを反映させ、SQSUI上で送信する値を作成して、Cloud Watchのログを確認しながら動作確認を行いました。最後まで動作が動いているか、最後にログを挟んでの動作確認も行いました。

【着任期間】

2021年01月 〜 2021年05月

【業務内容】

・ECサイトの修正・ページ追加
・決済機能の修正・追加
・顧客用業務システムの改修・追加実装
・Excel・CSV出力の追加実装

【実績・取り組み等】

・顧客用ふるさと納税管理システムのDBのカラム・テーブル追加の実装を行いました。
この実装で管理側からECサイトへの反映まで一通り実装を経験しました。
・顧客からヒアリングするのは営業担当だったため、システムの説明・進行連絡の連携を取り、不用意な実装を行わないよう業務に取り組みました。
・クレジットカード決済代行サービス「ベリトランス」への変更・導入を経験。
・ワンストップ管理システムの構築でPDF出力の改修を経験。
・顧客データのCSV・Excel出力の構築を経験しました。

【習得スキル】

・システム全体の理解・それに最も適したコードの実装
・リファクタリング
・開発未経験者とのヒアリング・連携
・PDF出力の実装
・CSV・Excel出力の実装

【当時の課題・行動】

1月～5月までの間は一通り実装を経験したため、自分が実装するコードの可読性・実装速度の向上が課題でした。
10を超えるサイトの改修を行い、読みやすく最も適したコードとなるよう意識し、実装しました。

【今後の課題・反省点】

実装内容のヒアリングでクライアントが作りたいものを正確に把握しきれていなかったため、少し違うものを実装してしまうことがありました。
わかるまでヒアリングを行い、正確な実装を行うべきだったと感じています。

【Yahoo!公金支払い→ベリトランスへの決済サービスの変更】

クライアントからの要望で決済サービスの変更を行い、作成された仕様書に従って実装を行いました。
個々の遷移先ページの作成と決済テストを行い、開発・本番共に動作確認を行いました。
また、既存のYahoo!公金支払いは残したまま設定した日付によって自動でベリトランスに決済が切り替わるよう実装を行いました。

【Excel・CSV出力の実装】

管理システム上の大量の顧客データを別の場所に移すため、1からPHPの処理を書いて情報の取得を行い、そのデータをCSVに書き込む実装を行いました。
実装理由は読み込み先のデータフォーマットがCSVでないと読み込めなかったためです。
ExcelはPHPライブラリ「PHPExcel」を用いて実装を行い、出力データをExcel読み込み用形式に変更することでExcel出力を行いました。

【ワンストップ管理システムの構築】

私が作成したワンストップ管理システムでは、情報取得の際、バックグラウンド処理としてnohupを使用していました。
なので、実装変更の際には必要な変数を内部で書き込み、直接URLを叩くことで出力結果の確認行いました。
また、書類作成のバーコード出力・PDF出力の実装も行いました。

着任期間

2020年09月 〜 2020年11月

【業務内容】

・コーディングデータを元にフロント作成
・画面崩れ・レスポンシブ対応の調整
・非同期処理の修正・追加

【実績・取り組み等】

・全ページのフロント回りを担当。
画面崩れの対応・レスポンシブの調整・動作確認まで行いました。
・外注のコーディングデータにミスが多々ありましたが、自ら調整する部分・修正依頼する部分を切り分けて効率的に作業を進めました。
・jQuery・Ajaxの非同期処理の追加実装を経験しました。

【習得スキル】

・デベロッパーツールの扱い方
・jQuery・Ajaxの実装方法
・システムの仕様の理解及びコードの書き方

[当時の課題・行動]

jQuery・PHP・Ajaxの理解が課題でした。
PHPコードの繰り返し処理・多次元配列や連想配列を正しく理解することができなかったため、抜本的な基礎知識が足りていないと感じ、アプローチとして毎日朝5時に起床し、progateでPHPやJavaScriptなどの技術を1からすべて学び直しました。
1ヶ月程続けた事で徐々に既存コードを理解できるようになり、フロント回りの実装を行えるようになりました。
また、Ajaxも非同期処理の仕組みやhtml・Jsonへのデータ構造の変換から学び、Ajax通信後にjQueryが動かないという問題が起きていたため、Ajax通信前にリクエストを返すbeforeSendを用いてデータ通信を行いました。

[今後の課題・反省点]

既存の実装ではAjax通信ではなく、jQueryプラグインの「FancyBox」を用い、ポップアップを出して普通にデータ通信を行なっていたため、外注のjQuery実装と差異が生じて、1からAjaxを実装しないといけないという状態でした。
その時に1から組むよりもこちらで既存の「FancyBox」複製して実装した方が早いと考え実装したのですが、「FancyBox」の理解・調整・レスポンシブ対応がうまく行えず、最終的に上司が修正し、Ajaxで実装を行いました。
他の社内のコードでは全てAjax通信で行っていたため、無理せず参考にし、Ajaxで実装を行う方が賢明だったと感じています。

[フロントエンドの実装に関して]

フロントの調整にデベロッパーツールを頻繁に用いるようになり、コード内の文字検索・Cookieの確認・styleの適用状況の確認及び調整を行いました。
styleもツール上で直接タグに追加することで無駄な時間を省き、効率的に実装を行いました。

着任期間

2020年11月 〜 2020年12月

【業務内容】

・コーディングデータを元にフロント作成
・画面崩れ・レスポンシブ対応の調整
・ポイント制へのシステム仕様変更
・決済機能の修正・追加

【実績・取り組み等】

・全ページのフロント・サーバーを担当。
ポイント制移行に伴い、DBのテーブル及びカラムの追加。
既存のシステムを残したポイント制移行の仕様変更を行いました。
・1ヶ月とタイトな期限でサーバーは初めての担当だったため、
残業・休日出勤を行い業務に取り組みました。
かなり過酷でしたが、期限の日程を守り納品することができました。
・クレジットカード決済代行サービスF-REGI（ エフレジ ）への変更・導入を経験。

【習得スキル】

・PHP（ETHNA）の理解及び実装
・var_dumpを用いたデバックの活用方法
・決済機能のAPIのテスト・導入
・DBの理解・phpAdminの操作
・SQLの実装

【当時の課題・行動】

期日が短くバックエンドの実装もしたことがなかったため、まず形にして「クライアントに出せるものにする」というところが至上命題でした。
バックエンドのコードの理解・DBカラムの把握・phpAdminの使用など、問題は山積みで部署内も皆忙しく、助けてもらうことができなかったため、休日出勤・時間外労働も行いながら必死にキャッチアップしました。
特に寄附・注文完了部分の「寄附→ポイントに変更」の変更実装はコードが長く、細分化をおこなっていない、いわゆる「スパゲッティコード」になっていたため、処理の把握が難しく、なかなか手を付けることができませんでした。
そこでvar_dumpによる出力を用い、分岐処理で切り分けることで処理一つ一つの出力結果を確認し、手探りで実装を行いました。
その経験から出力結果がおかしいと感じたら、すぐにデバックを用いて返り値を確認するようになりました。

【今後の課題・反省点】

今後も外注先に発注するため、「できる限りコーディングの問題点をピックアップしてフィードバッグしてほしい」と言われていたのもあり、指摘点をまとめるという作業に時間を取られ、実装作業の時間が取れないという「本末転倒」な事態になってしまっていました。
実装を行う→大きな修正でない限りこちらで修正→納品後まとめてフィードバッグ
上記の手順で行う方が効率的に実装できたと感じています。

【PHPのFW「ETHNA」の理解】

バックエンドのコード理解のため、action→view→templateの流れの理解・actionやviewの用途・Smartyテンプレートの実装方法を学び、FW及びPHPの理解を深めました。
iniファイルの中に何度も使用する変数の設定を行ったり、functionとして切り出せるよう汎用的な「ユーティリティ」コードを作成し、コードの汎用性・可読性を上げることを意識しました。

【決済代行サービスF-REGI（エフレジ）の仕様変更】

APIの取得は既存コードを使用しましたが、決済サービス使用時の返り値によって画面遷移を変更したいと要望があり、決済サービスに問い合わせての画面遷移URLの変更。エフレジの仕様書を確認して返り値を把握し、返り値によって画面遷移を変更させました。
また、決済テストの際、社内で独自サーバーを用いて開発環境にセキュリティをかけていることが原因になり、APIの返り値が返ってこないということがありました。その結果を上司に伝え、別でサブドメインを公開用で作成してもらい、無事テストを行うことができました。