ID:53603さん

### プロジェクト概要 #### 参加したプロジェクトは、どのようなプロジェクトだったか？ 法律を味方に、企業を伸ばすを理念に。 経営、運営する中で起こる法律に関わる疑問に対して、カジュアルな内容から専門的な内容まで気軽に質問ができ、24時間後に登録弁護士の複数回答を受け取ることができるサービスです。 #### 自分の役割 ##### 開発者として サービス立ち上げから参加させて頂き、技術設計、技術選定、API設計、開発環境構築、CI,CD導入、制作、サーバー構築、保守、運用までの全ての作業を担当しました。 #### マネージメントとして 基本的にやっていたことが営業、戦略チームとのやり取り、開発チームの開発スケジュール管理、全体的なクオリティーチェック、タスクの割り振りなどの マネージメント業務を行っていました。 ### 取り組んだ内容 #### どのような業務に取り組んだか 参画当初はフロントのみの担当でしたが、途中でバックエンドの方が抜けたのでバックエンド、インフラ構築も担当しました。 そのあとは、チーム開発の運用を円滑に行うために、営業、戦略チームからの要望から開発してローンチするまでのロードマップを作成して会社全体に定着させるなどの 技術者としてだけではなく、プロダクトマネージャー的な仕事もやっていました。 #### 具体的に、どのようなアプローチで取り組んだか？ ##### 技術者 ###### フロントエンド 主にやっていたこと、使っていた技術。 - フロントエンドはNext.js + TypeScriptを使って開発 - yarnのworkspaceの環境を構築 (3つほどのprojectを全て一つのリポジトリで管理) - Storybookを使ってUI管理 - Stripeを使った決済開発 - skywayを使ったビデオチャット機能作成 - Visual Regression Test、Jestを使ったtest (スナップショットのみのtestです。) - 企業と弁護士のメッセージチャット機能 - バックエンドがREST APIで開発していたのでSWRとかを使わずに自作のhookを開発してAPIとの連携をしやすいように環境構築 ###### バックエンド 主にやっていたこと、使っていた技術。 - バックエンドの言語はGO、データベースはMySQLを使用 - ORMはgorm、web frameworkにはginを使っていました。 - 自分がバックエンドに携わる前はMVC設計だったのですが、プロジェクトの設計をドメイン駆動設計にしようって話になり、ディレクトリ構成から、データベースの設計のリファクタリングを行っていました。 - 検索機能のチューニング。主にsqlの見直し、全体検索をelastic searchに移行など - 自分がバックエンドに携わる前はTestが書かれていなかったのでTestを導入 (関数単体のテスト、実際にAPIを叩いた時にテスト) - Stripeを使ったサブスクリプション開発 ##### その他 - github actionを使ったCI、CD構築 - GCPのBigQueryを使ったログ集計 - レビュアーとしてコードのチェック ##### マネージメント 営業、戦略チームから降りてきた要望をgithubのissueにタメてもらい、会社の状況と開発状況からどの要望をいつまでに対応するかなどを営業、戦略チームと交渉。 決まった内容を細かくタスク分割をして、自分を含め手伝ってもらっていたエンジニア2名、デザイナー1名にタスクを割り振り作業を円滑に進められるようにしていました。 ちなみにタスク管理は全てgithubのprojectsを使って管理、ドキュメントの管理は全てNotionを使って管理してました。

## プロジェクト概要 ### 参加したプロジェクトは、どのようなプロジェクトだったか？ 89-studioさんの実績を載せるポートフォリオサイト制作です。 <br> クライアントの要望が 1. 実績一覧を認証有りのページにする、 2. CMSを導入する 上記以外は全て自分に任せて頂けた案件でした。 なので、要件定義、開発設計、開発は自分一人で担当しました。 ### 自分の役割 開発だけではなく、提案から仕様決めなどの上流工程から参加しました。 従来のサーバー、デザインがレガシーだったので、レガシー環境から脱却もやらせて頂きました。 <br /> ## 取り組んだ内容 ### どのような業務に取り組んだか CMSのモデル設計、AWSの環境構築などの設計周り、 環境構築からコーディング、CI CDの設定などのweb開発における全ての業務を担当しました。 ### 具体的に、どのようなアプローチで取り組まれましたか？ 好きに開発をしていいとの事だったので今まで使った事がないmicroCMSを使ってみたり、v2のBarba.jsを使ってみたりと今まで使った事がないツールをで開発をしました。 アニメーションはサイトのトンマナにあった物をクライアントに提案したり、デザインもどうしたらユーザーに使いやすいサイトになるかなどクライアントに寄り添いながら開発をしました。 <br /> ## なぜその技術を利用したのか ### React ヘッドレスCMSを使っていて動的な部分があり、そこはReactを使った方がやりやすかったので選定しました。 いつもはNext.js、Create React Appを使っていたのであまりReactの開発環境を独自で作っていなかったのですが、今回はReactのレンダリング、Hot reloadなどを一から作って開発をしたのでとても良い経験になりました。 ### microCMS 今までヘッドレスCMSはContentfulを使っていましたが、人気の高いmicroCMSを使ってみました。 レスポンスの形が綺麗なのと、構造体を思うように作れるなどとても気持ちよく開発が出来ました。 ### AWS 制作会社に勤めていた時はずっとAWSでサーバーを構成をしていたので今回も選定しました。 構成はフロントの部分は CloudFront + S3、Route 53を使ってDNSの設定、SSLの設定、Amazon SESを使ったメールサーバー構築など幅広く携わりました。 ### Barba.js ページ遷移アニメーションする時に、Next.js、Nuxt.jsなどRouter機能を使えば出来ますが、フレームワークはDOMをとってきてのアニメーションがやりずらいので、今回はフレームワークを使わずBarba.jsでページ遷移アニメーションするようにしました。 v2になってからコードの書き方がvueのenter、leaveのように直感的にアニメーションが書けるようになったので複雑なアニメーションの制御がしやすかったです。 <br> ## 開発において技術的にどのような工夫を行ったのか 実装に関してはアニメーションがしやすいようにgsapのライブラリをPromiseでラップする独自の関数作成、文字一文字をspanでラップする関数などのユーティリティー関数を最初の段階で作成して開発効率をあげました。 開発環境はとにかく早い環境構築という事で、html、cssは最初のビルド以外は差分ファイルを抽出して、差分があるファイルのみをビルドするようにしたり、jsはwebpackDevMiddleware、webpackHotMiddlewareなどを使ってビルドスピードをあげたりと開発のストレスを極力無くす工夫をしました。 <br /> ## 次に活かせる学び 要件定義、開発設計、フロントエンド業務、サーバー構築と全ての業務に携わらせて貰ったのでとても勉強になりました。 特にAWSのSESの設定は SMTP、POP、DNSなどの知識が高められたのが良かったです。