ID:54140さん

# プロジェクトの概要 好きなお酒に出会えるマッチングアプリ # 主要な機能 - 好きなお酒を調べられる - 調べたお酒がどこのお店に置いているかを調べられる。 - 自分の趣向のお酒がわかる # チーム構成 - フロントエンド：2人 - バックエンド：1人 # 担当領域 フロントエンド（管理画面）のコンポーネント設計からAPIとの連携を全て一人で担当 フロントエンドコーディングのライブラリーとしてはMaterial-uiを採用した。こちらの導入を決めた理由としては管理画面で特にデザインの指定はなかったため、スピード感を持って実装できることが決め手になった。 APIの連携にはswaggerを使い、こちらを参照をしながら実装を行った。 アプリとしての規模はそこまで大きくはなくpropsで十分に対応できる範囲であるという判断でReduxなどの状態管理用のライブラリーは使わずに基本的にはHooksを用いてstateの管理を行った。 # フロントエンド側のプロジェクトの流れ - フロントエンドの技術選定 - 環境の構築（ユーザー部分を担当している別のプロジェクトのメンバーが対応,Material-ui、styled-components、axios、etc...） - ATOM部分の細かいボタンやフォームパーツ、Atomsを組み合わせたMolecules 、共通のコンポーネント、処理をラップするTemplateとなるコンポーネントの実装 - バックエンドのAPIが早めに進んでいたこともあり、swaggerを参照しながらページごとの実装を進めた。 # 苦労した点 フロントエンド（管理画面）の実装を一人で対応をしており、基本的に一人で実装を行ったことにより、詰まった時に精神衛生的にはあまりよくなかった。Reactを使ったプロジェクトも初めてであったため、困った時はユーザー側の担当者がどのようなコードを書いているか等を参考にしながら何とか対応をすることができたと思っている。

# プロジェクトの概要 歯医者の医院にむけたWeb予約システム開発。 利用シーンとしては - Webでの予約受付 - 医院内での予約受付 - 医院の医者による患者データ参照 # チーム構成 - フロントエンド：6人 - バックエンド：4人 # 担当領域 フロントエンドのコンポーネント設計からAPIとの連携を担当 フロントエンドコーディングのライブラリーとしてはstyled-componentsと、Material-uiを採用した。 styled-componentsを使った拡張性の高いコンポーネントを作成。 Material-uiではアイコン、サイドバー、トースト、モーダルなどの導入コストは低く、リッチなUIを提供するところのみの採用をし、Material-uiを普段触らないメンバーでも学習コストがないよう意識をして導入をした。 # フロントエンド側のプロジェクトの流れ - フロントエンドの技術選定 - 環境の構築（Prettier、ESLint、Redux、Mateiral-ui、styled-components、etc...） - ATOM部分の細かいボタンやフォームパーツ、Atomsを組み合わせたMolecules 、共通のコンポーネント、処理をラップするTemplateとなるコンポーネントの実装 - バックエンドのAPIの実装が済んでいるところの連携を行う。フォームライブラリでformikを採用（プロジェクトのリーダーの案）formikのstateの管理によって通常のuseStateの管理とは違い、簡潔な管理ができた印象がある。 # 苦労した点 ver2として使われているアプリケーションのリプレイスになり、ve2のデモ画面を触りながら挙動を確認し、バックエンド側メンバーとの連携をしながらのAPI連携はコミュニケーションコストもかかる点で大変だったポイントだが、スラックのテキストと、goオンラインで随時コミュニケーションを取りながら実装をして対応することができた。 # プロジェクトによる学び 今回初めてTypeScriptを使った実装を行った。型を意識した実装をすることでエラーハンドリングにかける時間、型を定義することによるアプリケーション全体の可読性が上がったことを体験できたことがよかった。

# プロジェクトの概要 各、楽天・Yahoo!・Amazon・など複数のネットショップで扱う、商品登録・在庫管理・受注管理・発注・仕入れといった、ネットショップを運営するのに必要な業務を一括で管理できるWebシステム開発 アプリケーション自体はリリースをされていますが、まだ開発中、デザインを調整するところも多く、こちらの対応を各担当によって行なっています。 # チーム構成 - フロントエンド：12人 - バックエンド：10人 # 担当領域 私の現在の担当領域がフロントエンドを担当しており、デザインの変更に伴い、コンポーネントを差し替えていく作業を主に担当しております。 また、JavaScriptからTypeScriptへの移行の作業が始まってきており、デザイン対応が優先ですが、TypeScriptを扱える人が少ないことからこちらの型付けを担当し実装する予定です。 # 苦労した点 今まで参画をしたプロジェクトの中でも規模が多く、ソースコードを読みとく量が多い点に苦労をしている。 現在はプロジェクトに長期に入っているメンバーに相談をする等行いながら実装を行なっております。

# camel（タブレットの機能実装） ## プロジェクトの概要 飲食店の店舗で使われているデリバリーサービスのタブレットを一元管理サービス ## 実装内容 - デリバリーサービスの新規追加実装 - 追加をされるデリバリーサービスの対応範囲によって、品切れができるか、キャンセルができるかなどを考慮しながら実装をする。 - 品切れ機能のパフォーマンス最適化、UX改善 - 大量のメニュー情報を扱う中で画面描画が遅くなる問題が発生していたのでreact-windowのライブラリーを使った描画最適化を行なった。 # camel dashboard（管理画面の機能実装） ## プロジェクトの概要 camel や toC向けのサービスの裏側のデータ登録などを行うことができるサービス ## 実装内容 - 拠点と店舗登録機能実装 - 今までCSの方で行われていた店舗、拠点の登録を管理画面で企業様に入力をしてもらい、CSの業務負荷を削減を行なった。 - その他各機能の実装調整、細かい機能改善 - tocサービスとの連絡のためのメニュー管理実装 # ToC向けの新サービス実装 ## プロジェクトの概要 正式に公表がされていないため、ここでの記述は避けさせていただきます ## 実装内容 # チーム構成 - フロントエンド：3人 - バックエンド：4人 - PM：1人 # 担当領域 サービスの特性上で専属のプロジェクトを持たずに、タブレット、管理画面、ToC向けの新サービスまで、フロントエンドからバックエンドまでを幅広くカバーをしながら実装しています。フロントエンドを実装できるのが2023年12月時点で正社員だと私しかいないので、基本は私の方で実装をすることが多いです。 ### 比較的な得意実装 - ビジネスサイドとのUI検討 - フロントエンドでのコンポーネント設計からAPI連携まで - 長期運用を見越しての保守性の高いコードを実装 # プロジェクトの流れ - PdMとプロダクトオーナーで機能の仕様を決める - アサインをされる - 技術仕様書を記載 - フロントエンド、バックエンドまで実装 # 新たな取り組み - npm packageのバージョン管理ができていなかったので各バージョンをあげるように対応中。こちらReactのversionを18にあげるタイミングでrenovateを使ったpackage管理を予定している。 - 今まで行われていなかったコンポーネント管理を行う。 - ディレクトリー構成を変更。今まで技術的な分け方でされていたものを各ページや依存する箇所に配置をするように変更。 # 苦労した点 - タブレットのフロントエンドのリポジトリででも軽量的DDDを使った開発を行っており、ディレクトリー をまたがったディレクトリー 構成になっており、少しキャッチアップに手間取ったところがある。 - 私が入る前の開発をフリーランスやインターン生の方々で実装をされており、動きはするが保守がしづらいコードが散見されるところ。 # tacomsでの学び - フロントエンドでの社員は私だけでインターン生を見ながら業務を進めていく工程で周りの作業者の進捗を考えながら実装をすすめる大変さを学べたこと - 実装をしながらリファクタリングを日々行う癖ができた。 - 技術的な面白さよりもプロダクトを育てる楽しさを感じれること。