矢野慎吾

# 役割 - サーバーサイド・インフラ担当 # 私がしたことを時系列で記載 ## 設計 - フロントエンド担当と話し合い機能要件を洗い出し - 機能要件を元にER図の作成 - 技術選定（Next.js, Nest.js, Docker, TypeORM, MySQL, AWS(EC2, RDS, Cognito, SES, など)） ## 技術調査 - Nest.jsでのREST ful APIの構築は初めてだったため、Nest.jsとTypeORMの学習を始める - 管理画面とユーザー側のアプリケーションでDB共有が必要なためDockerを使ってローカル環境での別アプリケーションから同じDBにアクセスする環境構築方法を調べる - その他は実装しながら調べつつ進めていく ## 実装 - 開発者は2人、フロント担当とサーバーサイド担当のみ。 - 開発期間は6月から10月末までの5ヶ月間。 - フロントをNext.js、サーバーサイドをNest.js、SPAを11月にリリース。 - AWSのEC2へデプロイ # 私が出したバリュー ## 技術 - 基本設計 - ER図 - 要件定義 - 機能要件 - 開発環境構築 - OpenAPIの構築 - PlantUMLを用いたER図の共有 - Dockerを使い2アプリ間でDBを共有できるローカル開発環境を構築 - githubを用いてバージョン管理とタスクをissueで管理 - テスト環境構築 - AWS EC2でユーザー側アプリケーションと管理画面側アプリケーションのテスト環境を構築 - 静的ファイルをS3に保存し、Clowd FrontをCDNとして経由して取得 - RDSでDBを構築。2つのアプリケーションでDBを共有 - pm2を使ってフロントとバックのサーバーを永続化 - 本番環境 - ユーザー側のアプリケーションはEC2のCPU使用率に応じてカスタムAMIを作ってオートスケールするように調整 - フロント - metaタグを編集し、URLのthumbnail、twitter用カード、facebook用カードの表示を調整 - サーバーサイドから受け取ったエラーメッセージを使ったエラーハンドリングの調整 - Googleタグマネージャーの埋め込み - パスワードの表示非表示ボタンと削除ボタンの実装 - バックエンド - 機能ごとモジュールに分けAPIを作成 - モジュールごとのリクエストボディとなるDTOを作成し、バリデーションを実装 - DBのリレーションの構築 - HTTPリクエストが大きくなることを想定し、バッチ処理を実装 - Stripe決済を実装 - DBを更新する部分や、Auth部分のロギングを実装 - DBを更新するメソッドはトランザクションで管理し、エラーハンドリングを行い、エラーの場合はロールバックされるように調整 - 郵送業者用のCSVに適合した内容のCSV出力機能を実装 - AWS Cognitoを用いた認証周り全般を実装 - AWS Lambdaを用いて認証メールをカスタマイズ - AWS SESを用いた一斉メール送信APIを実装 ## 技術ではないところ - プロダクトオーナー、マーケティング担当、フロントエンド担当、のコミュニケーションのハブとなり、意見やアイデア、または不満がある場合にMTGを企画し、情報共有に努めていた。 - 時間外も業務に関わる知識のインプットの時間に使う姿勢 - 元お笑い芸人の特性を活かした楽しいコミュニケーション # 開発における課題と解決策と成果 ## 未経験の言語での開発と実装 - Nest.jsとTypeORMでサーバーサイドのAPIを実装した経験がなかったことと、ドキュメントがどちらも英語しかなかったため学習の時間が不十分なまま開発がスタートしてしまった。 - 課題の解決に多いに活躍したものはGitHub Copilotでした。コメントアウトで何を実装したいかを書き、最初の部分のコードを書くことでメソッドの候補が出ることでそれをテストし、開発スピードの向上と学習の両方が得られました。 ## フロントとのAPIエンドポイントの共有 - OpenAPI（Swagger Editor）を用いることでエラーハンドリングの内容も含めて共有できた。これによりフロント側の問題なのかサーバーサイド側の問題なのかの切り分けができた。 ## ローカル環境での2アプリ間でのDB共有 - 1つのアプリケーションではサーバーはローカルで立ち上げ、もう一つのアプリケーションではバックエンドサーバーをDockerで立ち上げることで、2つのアプリケーションをDocker Networkで繋ぎ、Dockerで起動しているMySQLの一つのDBを共有して使うことができた # 私のセールスポイント - これからもっと成長できると思っています！ - 一昨年の10月からプログラミング学習を始め、新しい知識を手に入れることが楽しくて寝食を忘れて勉強しております！ - コミュニケーション能力は高いほうなので、実装以外のところでも開発に貢献できると思っています。

# 私がしたことを時系列で記載 ## β版の作成 - PHPとjavascript,jQuery、axiosなどの技術を用いて作成 - アンケートを実施し、UIUXに関するフィードバックを取得 - 実証実験をしてくれるところがないか自治体へ交渉を始める # 正式版の開発 ## 設計 - ER図の作成 - ロバストネス図の作成 - ユースケース図の作成 ## 実装 - フレームワークにLaravelを採用 - レスポンシブデザインにするためにtailwindCSSを採用 - UIデザインを知人に依頼 - コア機能を実装し、データベースを移行 ## 実証実験 - 5月末にとある自治体の1800人が参加するイベントで実証実験に使っていただけることが決定 - ワークショップを主催している方の協力のもと、実証実験の前に30人の方にテストで使用してもらいアンケートを取得 - アンケートを元にUIを改善し、違和感なく操作できるところまで修正が完了する - 実証実験の効果測定のために、google analyticsを導入する # 私が出したバリュー ## 技術 - 基本設計 - ER図、ロバストネス図、ユースケース図などを作成し、view画面などを考える - 開発環境構築 - dockerを活用し、チームで開発できるよう環境を構築 - githubを用いてバージョン管理 - フロント - bingMapsAPIを使い、地図を使ったアプリケーションを実装 - tailwindCSSを活用し、レスポンシブ対応を実装 - バックエンド - Laravelを使い、DBはmySQLを選択。phpMyAdminと連携し、リレーショナルデータベースを実装 - AR.jsを使ったARマッピング - テスト的にブラウザ内で外部カメラを立ち上げて、ARオブジェクトもマッピングが可能かを確認した - map API ## 技術ではないところ - 前向きな姿勢と問題解決へのアクション - 本来はReactを使ったSPAにする予定だったが、実証実験の期限に間に合わせるためにReactの実装は中断。 - 前向きな姿勢から生まれた協力者 - プログラミングを学んで半年で新しい技術をキャッチアップする速度 # 開発における課題と解決策と成果 ### そもそも開発経験ゼロから地図上に動画をマッピングすることはできるのかという問題 - 技術的な基礎はPaizaのスキルチェックの問題を毎日解くことで、数学的なアルゴリズムを覚えていないと解けない問題以外はほぼ解けるようになり、開発のコーディング、データの扱いに困ることはあまりなかった - BmapQuery.jsというbingMaps APIに関連するライブラリを使うことで、iframを地図上にマッピングさせることができ、地図上で動画が見れるようになりUXが向上した。 - ライブラリではカスタマイズしきれない部分のみ、bingMapsAPIの英語のドキュメントを読み、解読し、ライブラリにない機能をカスタマイズして追加することができUIが向上した。 ### マップ上に動画投稿したユーザー情報、動画、位置情報、カテゴリー情報など様々な情報を紐付ける必要があった - Laravelというフレームワークを使うことで、データベースのリレーショナルを簡単に行うことができ、ユーザーのフォロー情報、動画のお気に入り情報、カテゴリー、などの中間テーブルを作り、動画情報とユーザー情報の主キーと連携させることで、簡単にユーザーや動画に紐づく情報が取れるようになった。 ### 実証実験に伴い、投稿された動画内容の説明欄の情報をデータベースから取ってきて表示させる際にURLなどがあればリンクとして扱うがあったが、XSS対策も施す必要があった - まず先にhtmlspecialcharsを使って、HTMLを使ったscriptなどは埋め込めないようにし、その後に正規表現を活用し、httpもしくはhttpsから始まるものを抽出し、抽出したものをHTMLに変換しリンクとして表示させた - しかし、ふるさと納税に関するバナーのHTMLを動画説明欄に入れたいとの要望があったので、バナーのリンクを「特定の単語」を入力してもらえれば、その単語に紐付いたバナーが埋め込まれるように対応したことで、ふるさと納税に関する実証実験を行うことが決まった。 # 私のセールスポイント - これからもっと成長できると思っています！ - 去年の10月からプログラミング学習を始め、ツラいところもありましたが、新しい知識を手に入れることが楽しくて寝食を忘れて勉強しております！ - コミュニケーション能力は高いほうなので、実装以外のところでも開発に貢献できると思っています。