ID:49463さん

## 概要 オンライン本人確認サービス（eKYC） ^[1](#note1) の否認率^[2](#note2)の改善。 改善を行うことで否認率を約20%程度下げることに成功。 *補足1 「eKYC」とは ユーザーがPCやスマートフォン等で本人確認書類や顔写真を撮影し、送信することで本人確認を完了させることができるサービスを指します。 *補足2 「否認率」とは、 ユーザーが撮影し送信した本人確認書類や顔写真の画像が不鮮明であったり、重要な部分が隠れているものは否認として取り扱います。 弊社では、否認されたユーザーの数/書類や顔写真を提出したユーザーの合計を「否認率」と定義しています。 ## 取り組み - UIの変更 - 視覚的にユーザーが分かるような工夫 - 検知ロジックの見直し - 画像が不鮮明等の理由で提出されても否認となるような画像を未然に防ぐロジック - 撮影プロセスの見直し - 別端末での撮影に誘導 ## 使用技術 - 言語: - Vue.js（Ver.2） - Class Component - Provide / Injectによる状態管理 - EventBusの利用 - TypeScript - 分析ツール: GCP BigQuery, Sentry - ライブラリ: eslint, jest, cypress - ソース管理: GitHub - コミュニケーション: Slack ### その他 - BigQuery ## プロジェクト規模 - フロントエンドチーム（全5名） - PdMチーム - CSXチーム 否認率改善のプロジェクトリーダーとして関わる ## 苦労した点 - 短い期間で根本原因の分析・問題解決の打ち手を考える・打ち手を実行し効果を測定を行ったこと - 2ヶ月以内に顧客が求める目標の否認率に到達させること

### 概要 プロダクトの起動に数10秒かかることが分かり、パフォーマンス改善に着手しました。 ## 取組み - Vendor Chunkの細分化 - Dynamic Importによるチャンクの読み込み - チャンクは必要なタイミングで読み込む - .browserslistrcから不要なブラウザを削除 - 使用しているライブラリのサイズを削減する - ファイルサイズが小さいversionに切り替える - 例：Sentry6系 → 7系 / @babel/runtime-corejs2系 → 3系 - 不要なライブラリを削除する - 不要なロケールファイルの削除 ## 使用技術 - 言語: Vue.js,Vanilla JS - ビルドツール: Vite,Vue CLI,Webpack - 分析ツール: Sentry ## プロジェクト規模 - フロントエンドチーム（全5名）

## 概要 フロントエンドエンジニアの1人として越境ECサイトの開発に参画しました。 ## 使用技術 Nuxt.js (Vue.js) / Typescript / Scss / Laravel(PHP) / AWS ## 課題 数年前に開発した越境ECサイトがあり、下記のような問題がありました。 ### UIの問題 - 機能が多くユーザーが使いづらい。またクライアントにヒアリングすると、実際に使用されていない機能がほとんどであった。 - ページの読み込みが非常に遅いページがある。 - サイト全体でデザインの統一感がない。またレスポンシブ対応も不十分であった。 ### 保守・カスタマイズ性の問題 - jQueryやKnockout.jsなど旧来の技術がメインで構築されていた。 - フロント部分はLaravelのbladeで書かれており、Laravelの知識がない方がカスタマイズしづらい状態であった。 - スタイルはCSSで書かれており、使われていないCSSファイルが存在している・クラス名に統一感が無く分かりづらい。 ## 取組み ### モダン技術へのリプレイス Larabelのblade・jQueryで書かれたフロント部分を、Nuxt.jsとTypescriptでリプレイスを行いました。 ### CSS・クラス名の見直し #### ①CSSからScssへの切り替えを提案 Bootstrapのように直感的にスタイルを書けるTailwind.cssかScssどちらを採用するか話し合いになった際、下記の理由を挙げScssを提案し採用に至りました。 [Scssを提案した理由] ①Tailwind.cssは、HTMLに直接クラスを書くためHTMLの要素が長くなり、可読性が下がる。②ScssであればTailwindを使用したことがないコーダーやデザイナーの方でも扱いやすい。 #### ②BEMを採用 これまではクラス名に統一感がない、パフォーマンスの悪いCSSセレクタ（例：table > tbody > tr ...）という問題があり、保守性・パフォーマンスともに問題がありました。BEMを使用することで、無駄なCSSのマッチング処理によるパフォーマンス低下を防げるとともに、HTMLの要素同志の関係性が分かりやすくなるという考えからBEMを採用いたしました。 ## 苦労した点 海外のフロントエンド・バックエンドメンバーと開発を進めていくため、進め方や情報共有の仕方に初めのうちは戸惑いました。できる限り彼らが分かりやすい書き方に従ったり、情報共有不足にならないようにこまめに連絡を取り合うようにしました。

## 概要 2021年2月より、デジタル名刺アプリ「handshake」(https://www.handshakee.com/) （月間6万UU）の開発にフロントエンドエンジニアとして参画いたしました。担当業務としては、React（Next.js）を使用したフロントエンド開発です。 ### 使用技術 ユーザーがストレスなくアプリを使用できるようにするため、高速なページ遷移を実現できるNext.js を採用しました。 フロント：Next.js (React) バックエンド：Go その他：Docker ## 工夫した点 ### 保守性を意識した開発 コンポーネントを作成する際、Atomic Designの考えに基づき、ファイルを役割ごとに分割しました。結果的に他のエンジニアやデザイナーの方との情報共有がスムーズになりました。 ### チーム開発を意識した開発 CSSに関してTailwind.cssかSCSSのどちらを導入すべきかという議論になった際、デザイナーの方もCSSの内容を見たい or 触る可能性があるという話があったため、学習コストの低いSCSS導入を提案しました。

## 概要 マークダウン形式で書かれた文章から、通常の文字とマークダウンのタグ(codeなど)を識別して、単価を計算するものです。プログラミングスクールが運営するメディアのライターをしていた頃に、単価計算に時間がかかっていたので効率化のため開発いたしました。 URL : https://easy-count.vercel.app/ ### 使用技術 フロント：Next.js (React) ## 工夫した点 ### スピードを意識した開発 とにかくスピーディーに開発を進めるため、CSSはTailwind.cssを導入しました。結果的に1ヶ月以内で開発が完了し、自分が書いた記事の単価計算をスムーズになりました。 ## 苦労した点 Next.jsに関する日本語記事が少ないため、英語の記事やドキュメントを積極的に読むようにしました。また勉強会に参加して、Reactを実務で扱っている方に頻繁に相談して、疑問点を解決しました。

積み立て投資サービスの機能毎にリポジトリを分割するマイクロサービスが採用されていました。その中で口座開設、積み立て投資の取引を行うアプリ部分のリポジトリをVue2系から3系へのアップデートを行いました。 【業務内容】 - 口座開設、積み立て投資アプリに関わるリポジトリをVue 2系から3系へアップデート - 各コンポーネントに閉じ込められていたデータ操作ロジックをリポジトリパターンを採用して分離し保守性を向上 - 簡素なUIだったものをユーザーにとって使用しやすいUIに変更 - Atomic Designに基づいたコンポーネント分割 - CSSのリファクタリング（不要な記述を削除、共通部分をグローバル変数化）を行い保守性を向上