ID:28649さん

## どういうプロジェクトなのか ブロックチェーン技術を用いてピアボーナスを目的とした仮想通貨のプロジェクトです。 表題にもある通り会社の利益とコインの価値が紐付いているので、会社の売り上げが好調であればあるほどコインの価値が上がっていく仕組みです。 --- ## どうやったらコインが貰えるのか？ 本アプリケーションにはTwitterやFacebookのようなタイムラインがあり、そこのフォームから同僚に対して感謝の言葉と共に『いいね』を送る事ができます。 この『いいね』を月単位で誰がどれくらい貰ったのかを集計し、マーケットに出回った『いいね』の総量のうち各ユーザーの『いいね』シェア率を算出して、その分だけコインが貰えるといった比例分配方式で運用を行なっています。 --- ## 何をしたのか？ プロジェクト初期の段階では開発メンバーが私一人であった為、フルスタック領域で技術選定・設計・開発を担当しておりました。 各領域の詳細については以下の通りです。 - WEB - クライアントサイド - React/ReduxによるStore設計 - ビルド時に意図しないパラメータが可能な限り渡らないようにFlowによる静的型付けを用いて検知 - セマンティックを意識したComponentをAtomic Designを用いて作成 - 開発当時はデザイナー不在だった為、各Componentと全体のデザインバランスを見ながらよしなに作成 - Jestを用いたユニットテストの実装 - サーバーサイド - API設計 - ブロックチェーンとのAPI連携のロジック実装 - DB設計、およびビジネスロジックの実装 - Blockchain - スマートコントラクトをSolidityを用いて設計・実装 --- ## こだわった点 ### ■ WEB技術のみでユーザービリティの向上を測ること およそ半年ほど前、WEB版をローンチするタイミングでiOSアプリの実装はできないかと社長から相談されましたが、私は以下のような課題から今回は見送った方がいいと思いますと提案しました。 - 現段階では社内でしか使われていない小規模なアプリケーションなので、一般のユーザーの方の目に触れるAppStoreにデプロイする明確なメリットが見当たらないこと - そもそも審査に通るかが怪しいこと（当時AppStoreがブロックチェーンを利用したアプリは審査を通さないと公言していた為） - まだプロジェクトの方向性やマネタイズをどうするかが定まっていない状態で、レンタルサーバー代とは別でApple Developerに登録して余計なコストがかかること - 開発メンバーにネイティヴアプリの実装経験がある人がいない為、いつ頃までにリリースできるかどうか不透明であること とはいえユーザーの利便性を意識するのも重要だと思うので、WEB技術のみで解決できることは解決したいと思い、PWAの導入を検討しはじめて、以下を社長に提案しました。 - ホーム画面に追加してモバイルアプリのようにページが開ける事 - 現段階ではAndroidのみではあるがプッシュ通知が送れる事 - キャッシュを利用してオフライン環境でもページが開ける事 最終的に現段階はPWAで実装を行い、上記の課題を解決していきつつ可能であればネイティヴアプリ版の実装を検討するということでお話は一度フィックスとなりました。 ### ■ クライアントサイドにおけるパフォーマンスチューニング 表題の件については以下2点を重点的に意識しました。 - 初期ページ読み込みの高速化とファイルの圧縮 - 不要な再レンダリングによるアニメーションや動作のカクつき・遅延の対応 **初期ページ読み込みの高速化とファイルの圧縮** SSRで初期ページ読み込みを高速化していたのですが、Code SplitingとWebpackのsplitchunksによるファイルの圧縮を行うことでよりページの読み込みが高速化される事が見込めたので導入しました。 また、ファイルサイズにおいてはwebpack-bundle-analyzerを用いて定期的にファイルサイズが大きくなっていないかの調査を行ない、Presentational Componentでファイルサイズのwarningがあれば不自然のないように分離したりと言った事を行なっていました。 **不要な再レンダリングによるアニメーションや動作のカクつき・遅延の対応** アプリケーションをローンチするまでComponentの開発はSFCをベースに行なっていったのですが、機能追加をしていくに連れて1ページ内で読み込むComponentの量が膨大になっていき、ちょっとしたアニメーションや動作でカクついてしまったり、遅延してしまう事が明確なっていきReact DevToolsを使って調査を行なった結果各Componentが大量に再レンダリングされている事が判明しました。 その為、各ComponentをSFCからPureComponentに変更してShouldComponentUpdateを用いて改善を行なっていった結果、不自然のない快適な操作が行える状態にまで持っていく事ができました。 ### ■ 100%JavaScriptのプロジェクトであること これはほぼ余談レベルのお話ですが個人的にJavaScriptに強い思い入れがある為、クライアンドサイドはもちろんサーバーサイドも含めて全てJavaScriptの環境であることを意識して開発を行いました。（GitHubリポジトリのの言語シェア率はJavaScriptが100%を占めています）