ID:40178さん

・React NativeにおけるiOS/androidアプリ開発
・Next.js を用いたWebアプリの開発（クライアントサイド）
・AWS CDKによるサーバ設定
・Xcodeでのスキームおよびビルド設定
・Testflightによるアプリ配布
・Android Studioを用いたビルド設定、apkファイル生成
・BigQueryを用いたデータレイクおよびデータマートに相当するテーブル構築とSQLクエリの作成
・Firebaseプロジェクトを用いたサービス構築
・治療アプリにおけるABテストの新規導入のための設計と実装

・React Nativeを用いたスマホアプリの開発
・Firebaseを用いたDBやfunctionsの作成
・XcodeからApp Store Connect でのアプリリリース、App Store Reviewチームによる審査への対応
・Testflightでのアプリ配布

開発

自社プロダクトであるAI学習サービスの開発・設計（2020/4〜現在）

使用技術・ツール

React, Redux, TypeScript, Redux Thunk, Cloud Functions, Firebase Authentication, Node, Express, GCR, GKE, Datadog, Brightove Video, Mailgun, Sentry, Wovn

チーム規模・状況

全員がフロントエンド・バックエンドのタスクを担うことがあったが、基本的にチームは以下のような構成だった。

• チーム構成
  プロダクトマネージャー：1人
  サーバーサイドエンジニア：（時期によって）1-3人
  フロントエンドエンジニア：（時期によって）1-2人（このうち1人が自分）
  デザイナー：2人

タスク詳細

Reactアプリケーションのフロントエンドのリファクタリング

• どのような課題があったか：
  • フロントエンドにテストが無かったのでテストを導入しようとしたが、Componentが肥大化していたことでテストの導入がしずらかった。また、Componentのlocal stateの規模が大きすぎたり、Component内部でAPIを叩いていたことでComponentと副作用を伴うロジックが密結合になっていた。
• どのように行ったのか：
  • Component内で扱っていた一部のlocal stateを切り出してReduxで管理するようにした。
  • Redux Thunkを導入することで、Component内部で扱っていたAPIをRedux Thunkに切り出した。
• 何が解決されたのか：
  • 各Componentで重複したロジック（非同期処理周り）をRedux Thunkに集約することができたことでComponent内部の冗長性が減った。また、データを参照する時もactionを発行するのみとなりシンプルになった。
  • ComponentとAPIの密結合が解消されたことでComponentを分解することができ、それによってユニットテストを導入することができた。
  • Componentが参照するstateがReduxのstateになったことで、Componentで参照するstateのデータで齟齬が起きにくくなった。

アプリケーションの新機能の設計および実装

プロダクトマネージャーとデザイナーから機能とデザインのインプットを受け、仕様に関しての設計を行い新機能の開発を行った。

ユーザにユニークIDと所属部門の情報を追加してそれらで管理できるような新機能：

 - 担当：フロントエンド
 - なぜ行ったのか：大規模クライアントでは、例えば1000人以上のメンバーを抱えていたため管理画面にて管理・検索をしにくい状態であったため。
 - 何が解決されたのか：大量のメンバーが存在するチームにおいて管理画面でのメンバーの管理のしにくさが解消され、管理者がより快適にメンバー管理を行うことができるようになった。
 - どのように行ったのか：ユニークIDや所属部門のstateを追加する実装を行った。所属に関してはReduxを利用することで、どこの画面からも所属一覧を参照できるようにした。所属の情報に関してlocal stateではなくReduxを採用したのは、多くの画面（コンポーネント）で参照する必要があったため各コンポーネントのlocal stateで管理するよりグローバルなstateとして管理した方が情報の齟齬が起きにくかったり、データフローも分かりやすいと考えたため。

所属部門別で管理権限を設定できる新機能：

 - 担当：フロントエンド
 - なぜ行ったのか：大規模クライアントでは、マスター管理者の下に紐づくような、例えば所属部門単位での管理者権限がある方が便利だというフィードバックを受けていたため。
 - 何が解決されたのか：所属部門ごとに管理者権限を付与することができ、より細かくメンバー管理を行えるようになった。
 - どのように行ったのか：もともと存在していた管理者権限あり/なしの二つのステータス加えてその中間のステータスとして所属別の管理者権限を追加した。それらのstateを追加したり、管理者権限あり/所属別管理者/管理者権限無しのそれぞれのステータスで何ができて何ができないといった権限設計を行いながらそれらの実装を行った。またこの機能はオプション機能であるため、この機能を購入したクライアントのみこの機能を利用できるように特定のモードとして定義してUIやUXの出しわけを行った。

ユーザ情報の要素によって絞り込み検索できる新機能：

 - 担当：バックエンド
 - なぜ行ったのか：名前以外でのメンバー検索方法がなかったため特定のメンバーに到達およびそのメンバー情報を編集をするUXが良くなかったため。
 - 何が解決されたのか：特定のメンバーを検索する時に、例えば管理者権限の有無や所属部門での検索が行えるようになり、より簡単にメンバーの情報編集が行えるようになった。
 - どのように行ったのか：ユーザに設定されている情報（管理者権限の有無/受講ライセンス/所属部門/タグなど）によって、絞り込んで検索表示できるようにした。フロントエンドから渡されるクエリによって、それらの内容によってクエリを継ぎ足しながらmongoDBから取得するようにした。なるべくDBに負担をかけないこととコードの可読性をあげるために、クエリを継ぎ足しながらDBからデータを取得するロジックにした。

アプリ概要

音楽専用の質問箱（個人開発 2020/7〜現在）

使用技術

React, TypeScript, Node.js, Cloud Functions, Firestore, Firebase Hosting, Firebase Authentication, TwitterAPI, SpotifyAPI, MaterialUI, Figma

技術選定について

• 自分1人で設計、開発、リリースする前提であったためサーバサイドに関してはBaaSを利用しようと思いFirebaseを選択した。
  • DBに関しては、Firestoreを選択した。Realtime Dataseを選択しなかったのはクエリの制限があったためである。Realtime Dataseは、絞り込みと並び替えを同時にできないといった制限があった。
• フロントエンドに関しては型安全な開発を行いたいと思っており、フレームワークはTypeScriptと親和性の高いReactを採用した。また、Hooksを用いることでロジック部分に関してより自由度が高いと考えた。

タスク詳細

• Firebase AuthenticationとTwitterAPIを使用したログイン機能実装
• React Componentの実装
  • コンポーネントの不要なレンダリングを防ぐために、Hookを用いて適切にmemo化・callback化を行っている。
• Cloud Functionsを用いた各種APIの実装
• Cloud FunctionsとFirebase Hostingを用いたTwitter OGP表示ロジックの実装
  • TwitterOGPを作成するためにmetaデータを動的に変更する必要があった。そこで、Hostingのrewritesで指定したURLをトリガーにしてFunctionsを呼び出しその中でmetaデータの更新を行いTwitterOGPに表示するようにした。
  • metaデータの中の画像に関しては、Tweetする度に投稿内容によって異なった文字列をセットする仕様にしていた。最初はSVGで対応しようと考えていたがOpen Graph ProtcolはSVG対応していなかったので他の方法を考えた。Cloud FunctionsがImageMagickをデフォルトでサポートしていたので、ベースとなる画像をPNGで用意し、Functionsの中でImageMagickで文字列をセットして、Cloud Storageにアップロード→metaデータにセットするようにした。クライアント側でCanvasで書き換える方法もあったがクライアントの環境依存が原因でうまくOGPが生成されないことを避けたかったこともあり、Functionsで完結するロジックを採用した。
• SpotifyAPIを使用したSpotifyデータ取得ロジックの実装
• TwitterAPIを使用したTwitterのフォロー・フォロワー情報の取得
• Spotifyのプレイヤーの実装
• Firebase Hostingを使用してReactアプリケーションのHosting

現在実装中のリンク（2021年3月にα版リリース予定）

https://pitchask-front.web.app/