ID:62522さん

## 概要 <li>メガネショップの企業の顧客情報及び販売管理のwebシステムの機能追加及び改修</li> <li>メガネショップのユーザー側(お客様)の上記のwebシステムと連携したECショップwebアプリの機能追加及び改修</li> ## チーム構成・規模 - プロジェクトマネージャー : 2人 - バックエンド: 3人 - フロントエンド: 6人 ## プロジェクトでの自分の担当 - バックエンド及びフロントエンドを担当していてバックエンドがメイン ## 使用技術 - PHP, Laravel, React, Redux, Redux-Form, redux-saga, Mysql, Docker, AWS, Postman ## 苦労した点 - このプロジェクトは入社して最初のプロジェクトでした。 ですのでシステムの仕様や使う技術に関して知識をつけることが大変でした。 ## 苦労した点の解決 過去の仕様書を読み漁り、自己学習等で格技術等を使い アプリを作ることで身につけました。 ## 詰まった課題 ECショップのメインページにおすすめ商品の画像がスライド(カルーセル)で流れているのですがこの中にひとつ動画(音付き)を埋め込めるようにするというタスクで動画が表示された時は動画が再生が何故か音が重複して遅れて流れている。 動画は一つしかないのに重複して流れるということは動画が複数あるということだがコンポーネントで 表示している動画は一つしかない ## 課題に対しての取組み react-slickを使用していたのでreact-slickの作り出すhtmlを検証ツールで確認して、react-slickが要素をクローンしていることがわかりこのクローンが制御できていないのが原因だと突き止めました。

## 概要 - 健康食品会社の会員の方のみが登録できるフリマ（購入者と出品者共に会員）アプリの機能追加・改修 ## チーム構成・規模 - プロジェクトリーダー : 1人 - バックエンド: 1人 - フロントエンド: 1人 ## チーム内の自身の役割 - バックエンドとフロントエンド担当 ## 使用技術 - PHP, Laravel, TypeScript, React, Redux, redux-thunk, Mysql, Docker, AWS, Postman ## タスク - 取引中の取引連絡時の通知メール機能作成 ### 課題 以下の様な条件でメールを飛ばすのですがこれらの分岐を一つの取引連絡時の通知メール送信の関数の中で 行うとメインの処理がぶれる - 出品者が取引連絡をしたとき、購入者にメールが届く - 購入者が取引連絡をしたとき、購入者にメールが届く - 購入者が取引連絡をしたとき、出品者にメールが届く ### 取組み これらのメール発信のきっかけが出品者なのか購入者なのかの分岐やメールの送信先は出品者か購入者かどうかの分岐等をPHPのトレイトに処理を移してメインの処理をわかりやすくしました。 また、メールを送る際の文言も出品者と購入者で違うのですが多少の違いしかないのでわざわざ別関数を作るほどではなかったので、このトレイトのなかに関数を作りその中で出品者にメールを送る際の文言と購入者に送る文言を分岐しました。 - バナー画像クリックで特定の出品者の商品ページに遷移 ### 課題 アプリのトップページに画像のカルーセルスライダーがありその中にバナー広告として特集したい商品の画像を埋め込み クリックした時にその商品の出品者の商品ページに遷移する様にする 画像の前後をチラ見せする様にして欲しいとの要望もあり(センターモード) ### 取組み 画像の前後をチラ見せする必要があったので現状使っているライブラリーではできなかったのでreact-slickをインストールして 現状のものと差し替えました。 画面遷移先はバナー広告をクリックした時に出品者の商品ページのidを渡す様にして遷移

## 概要 - 幾つかの水産卸業の会社が合併したがシステムはマスターはA社、会計はB社などバラけているので それを一つの基幹システムとして統合するための新規開発 複数の会社で共同で作っています。 私の所属している会社は複数のチームに分かれています。 　 - マスタチーム （所属している会社が完全担当） 　 - 債権債務チーム (所属している会社が完全担当) 　 - 在庫配送チーム (所属している会社が完全担当) 　 - 発注管理チーム (一部担当) ## 使用技術 - PHP, Laravel, React, Redux, Redux-Form, redux-saga, Mysql, Docker, Postman,TailwindCss ## チーム構成・規模 - チーム - マスタチーム - 債権債務チーム - 販売管理チーム - 受注管理チーム - 発注管理チーム - 在庫配送チーム ## 担当チーム - マスタ - プロジェクトマネージャー : 1人 - バックエンド: 3人 - フロントエンド: 3人 ## チーム内の自身の役割 - バックエンド、フロントエンド担当 - 新人のサポート - 取引先マスター等の主要マスターのAPI、UIを作成 ## 課題 - UI側のバリデーションがRedux-Formのバリデーションの作法に従ってif文で条件で必須や文字数制限をかけていましたが fieldarrayなど階層が深くなるとファイル内でループ文があちこちに現れてきたりしてコードが汚くなっていた ### 解決策 validationモジュールを作成してその中でlaravelのFormRequestの配列に対してのバリデーション みたいに ネストがある場合、オブジェクトはドット区切り、配列はアスタリスクとドットで区切り指定するだけで（arrayb.*.ob)でこのドットやアスタリスクをもとにvalidationモジュールの中で階層構造を再帰関数で作り出す様にして、ネストのある要素に対してのバリデーションをスッキリさせました。 - プレビュー付き画像のアップロードのコンポーネントを作成するためライブラリーを選定していたのだが 削除ボタン付きのが見つからない ### 解決策 プレビュー付き画像のアップロードライブラリーのリポジトリーを落としてきてシンボリックリンクを貼ってライブラリーを加工して削除ボタンと削除機能を追加 その他気づき 条件分岐が複雑なフローのときテストコードから書き始めたことにより条件が整理かつモジュール分割が自然に出来た

## 概要 匂いの識別や調香、可視化などをクラウドサービスとして提供している自社プロダクト ## 課題 AIに匂いの学習するための学習モデルを作成するが、この学習モデルの学習状況はステータスを持っている(学習中と学習済み) このときステータスはDBの情報でバックエンド側でステータスを更新しているので フロントでリアルタイムに反映されない ## 取り組み バックエンドでステータスを更新した事をフロントに反映させる為、WebSocketを使う事を決定してDjangoのWeb socketライブラリのDjango Channelsを導入して、学習モデルを作成済みにする(cerelyのタスクが完了)した際にその学習モデルのステータスをフロントに渡して更新するようにしました ## 課題 バックエンドで使うトークンを変更するとなったが フロントの非同期ライブラリとしてaxiosを使っているがリクエストヘッダをその都度書いているので影響範囲が広い ## 取り組み Axiosをラップしたプラグインを作り ヘッダ等を共通化また、リポジトリパターンを導入してテスト可能性を向上

## 概要 幾つかの水産卸業の会社が合併したがシステムはマスターはA社、会計はB社などバラけているのでそれを 一つの基幹システムとして統合するための新規開発 複数の会社で共同で作っています。 私の所属している会社は複数のチームに分かれています。 　 - マスタチーム （所属している会社が完全担当） 　 - 債権債務チーム (所属している会社が完全担当) 　 - 在庫配送チーム (所属している会社が完全担当) 　 - 発注管理チーム (一部担当) 【使用技術】 PHP, Laravel, React, Redux, Redux-Form, redux-saga, Mysql, Docker,Postman,TailwindCss 【チーム構成】 - マスターチーム - 債権債務チーム - 販売管理チーム - 受注管理チーム - 発注管理チーム - 在庫配送チーム 【チームでの自分の役割】 担当チーム：債権債務チーム 役割：バックエンド、フロントエンド担当 【意識していること】 債権債務チームは金額の集計等で複雑なsqlを扱っています。 その中でsqlのパフォーマンスチューニング等やN+1等の解決などを行っています。 複雑なクエリはテストを書き期待通りのデータが取れているかを保証するようにしています。 また、現在はフェーズとして総合テストに入っており、 そのバグの対応に従事しています。 その中で意識していることは修正する際はテストコードを書き動作を保証することです。 また、可読性が悪い場合は無理の無い範囲でリファクタしてオブジェクトに処理を分けることです。