2023年5月13日（土）
| key | value |
|---|---|
| 名前 | 木村一貴 |
| 年齢 | 満27歳 |
| 居住地 | 東京都渋谷区神山町 |
| 最寄駅 | 渋谷駅 |
| 最終学歴 | 立教大学 理学部 化学科 |
| Zennアカウント | https://zenn.dev/k_kazukiiiiii |
環境構築からリリースまで1人ですべて対応可能
HTML5 | CSS3 | JavaScript | jQuery | TypeScript | React | React Native | Next.js | Recoil | Redux | Redux Toolkit | Apollo Client | GraphQL | React Query | SWR | Swagger | aspida | Web Components | Lit Element | Storybook | styled-components | emotion | TailwindCSS | Lodash | rfdc | date-fns | dayjs | Moment | Jest | React Testing Library | Cypress | PlayWright | ESLint | Prettier | Husky | lint-staged | Renovate
小規模サービスなら1人で設計と実装が可能
Node.js | Express | Nest.js | Prisma | PHP | Laravel | Ruby | Ruby on Rails |
小規模サービスなら1人で設計と実装が可能
MySQL | PostgreSQL | PlanetScale | Vercel | Heroku | GitHub | GitHub Pages | GitHub Packages | GitHub Actions | Docker | Docker Compose | nginx | Apache | AWS | GCP | Auth0 | Hasura | Firebase | fastlane
Storybook を GitHub Actions で GitHub Pages へ自動デプロイする
↑の「機能要件」を自分で設定して、その機能要件を満たすための実装を実現しました。
以下のURLで、その成果物を確認することができます。もしよろしければご覧ください！
- React + TypeScript を使用した共通コンポーネントを独自で実装する
- developブランチにpushする度に GitHub Pages へ自動デプロイするワークフローを定義する
- Storybook のファイルをビルドしてデプロイするブランチは gh-pages ブランチに設定する
Storybook | GitHubPages | デプロイ環境
私は大学時代は理系でしたので、大学時代からプログラミングを学んでいました。
社会人になってから本格的にWeb系のフロントエンジニアとしてキャリアを歩み、
Sierでの受託開発、自社開発企業での自社サービス開発のどちらも経験して参りました。
既存機能の追加・改修と新規開発のどちらも経験しているため、
プロジェクトに応じてどちらでも柔軟に対応することが可能です。
技術的な得意分野はWEBフロントエンド領域における新規開発です。
React・TypeScript・Next.jsを用いた新規開発をメインにこなしてきたため、
WEBフロントエンド領域の業務範囲は一通り網羅しています。
メンバーに実績を認めていただき、
自分が主催となって社内勉強会の登壇を行った経験もございます。
今後も今までの経験分野に限定することなく
その案件で必要とされている技術やビジネス知識を身に付けていき
「上流工程から逆算して仕事をこなすエンジニア」になることを目指しています。
以下に、過去に携わらせていただいたプロジェクトに関する概要と詳細を記載していきます。
React Native を使用したマッチングアプリのクロスプラットフォーム（iOS / Android）開発
2022年10月 〜 現在
- React : 18.1.0
- React Native : 0.70.2
- TypeScript : 4.8.3
- Apollo Client : 3.6.9
- GraphQL : 16.6.0
- react-native-config : 1.4.11
- react-native-firebase/app : 16.4.6
- react-native-firebase/auth : 16.4.6
- react-native-firebase/messaging : 16.4.6
- アプリケーションの要件定義・基本設計
- React Native iOS 開発環境の構築
- React Native fastlane を使用して Testflight で内部テストが実施できる環境の構築
- React Native fastlaen match を使用して iOS の証明書周りの情報を GitHub で管理する環境の構築
- React Native Android 開発環境の構築
- React Native fastlane を使用して Google Play Store で内部テストが実施できる環境の構築
- Firebase を使用して Appleでサインイン Googleでサインイン 電話番号でサインイン 機能の新規実装
TODO（現在進行中）
アダルト用のサブスクリプション動画配信サービスの大規模新規開発
2021年11月 〜 2023年3月末日まで
- React : 18.2.0
- Emotion : 11.9.0
- TypeScript : 4.6.4
- Next.js : 12.2.2
- Apollo Client : 3.6.8
- GraphQL : 15.5.1
- Jest : 28.1.0
- jest-environment-jsdom : 28.1.0
- ts-jest : 28.0.2
- testing-library/jest-dom : 5.16.4
- testing-library/react : 13.3.0
- testing-library/user-event : 14.4.3
Jestのバージョン28でテストを実施する場合、jsdomがデフォルトではインストールされなくなった
なので、jest-environment-jsdomを別途installする必要が出てきたので追加した
- UIコンポーネントのテストを Jest + React Testing Library で実装
- GitHub Actions を用いた CI / CD ワークフローの作成
- 作品詳細画面の仕様確認 and UIコンポーネント設計 and API繋ぎ込み
- 作品詳細画面に関するコードの修正内容を実施したチームメンバーに対するレビュー
- Apollo Client + GraphQL を用いた offset pagination 機能の新規実装
- Apollo Client + GraphQL を用いた cursor pagination 機能の新規実装
- 無限・仮想スクロールをチームメンバーが共通で使用できるコンポーネントの実装
基本的には以下に示す「サブスクリプション動画配信サービスの大規模新規開発」と同様のコードを使用して実装を行ったが、React のバージョンが18になったことでレンダリングの仕組みが、ReactDOM.render() の代わりに createRoot() を使用するようになった。その関係でバージョン差異によるエラーを解決するために調査を実施する必要があったが、その調査を積極的に実施し、チームのメンバーにナレッジを共有して、React のバージョン18に対応できるような共通のHooksなどを実装することで社内の生産性向上に大きく貢献した。
サブスクリプション動画配信サービスの大規模新規開発
2021年11月 〜 2023年3月末日まで
- React : 17.0.2
- Emotion : 11.4.0
- TypeScript : 4.3.4
- Next.js : 12.0.7
- Apollo Client : 3.4.17
- GraphQL : 15.5.1
- Jest : 27.0.6
- ts-jest : 27.0.4
- testing-library/jest-dom: 5.14.1
- testing-library/react : 12.0.0
- testting-library/react-hooks : 7.0.2
- testing-library/user-event : 14.4.3
- playwright : 1.29.2
※1 testting-library/react-hooks は React 18 のプロジェクトの場合は不要になります
※2 詳しくは、React 18 で Custom Hooks のテストを書くときの注意点 にまとめています
- UIコンポーネントのテストを Jest + React Testing Library で実装
- GitHub Actions を用いた CI / CD ワークフローの作成
- 作品詳細画面の仕様確認 and UIコンポーネント設計 and API繋ぎ込み
- 作品詳細画面に関するコードの修正内容を実施したチームメンバーに対するレビュー
- Apollo Client + GraphQL を用いた offset pagination 機能の新規実装
- Apollo Client + GraphQL を用いた cursor pagination 機能の新規実装
- 無限・仮想スクロールを共通で使用できるコンポーネントの実装
- Jest + React Testing Library を使用したコンポーネント単位の結合テストの実装
- PlayWright を使用して、自分が実装した作品詳細画面のE2Eテストの実装
UIデザインシステムのライブラリ開発とUIデザインシステムを社内の npm package として公開したものを yarn で取り込んで画面を作成していくという開発手順で画面実装を進めていきました。開発手法は「スクラム開発」を用いて毎週スプリントを回していました。スプリントプランニングで決めたポイント数が未達になったことはほとんどなく、むしろ常に予定のポイント数を上回るポイントを消化し続けました。「仕様が決まっていない」を言い訳にせずに「決まっていないなら仕様を把握している人を捕まえて仕様を訊く、もしくは決めにいく」というスタンスで毎日仕事に取り組んでいました。この仕事に取り組むスタンスと毎週のスクラムのポイント数が社内で高く評価されまして、ベンダー企業が大手企業ということもあり、当初の契約時点の単価よりも約20万円多い単価をいただけるようになりました。結果的に12月1日と期限を定めた納期のリリースに間に合う、という価値を発揮するために大きく貢献できました。
スマホで履歴書を簡単に作成できるWebサービスの開発
2022年8月 〜 2022年10月まで
- React : 18.2.0
- Emotion : 11.10.0
- TypeScript : 4.7.4
- Next.js : 12.2.3
- Recoil : 0.7.5
- React Query : 3.39.2
- aspida/react-query : 1.11.0
- aspida/axios : 1.11.0
- Jest : 28.1.3
- jest-environment-jsdom : 28.1.3
- ts-jest : 28.0.7
- testing-library/jest-dom: 5.16.5
- testing-library/react : 13.3.0
- testing-library/user-event : 14.4.3
Jestのバージョン28でテストを実施する場合、jsdomがデフォルトではインストールされなくなった
なので、jest-environment-jsdomを別途installする必要が出てきたので追加した
- フロントエンドの技術選定
- GitHub Actions を用いた CI / CD ワークフローの作成
- Docker を用いたフロントエンドの仮想コンテナ環境の作成
- Husky・lint-staged・Prettier・ESLintの導入
- svgファイルを React のファイルに変換するために svgr の導入
- Atomic Design を用いた共通コンポーネントの新規実装
- React で PDFのプレビュー画像を表示する機能の新規実装
- 履歴書を新規作成するまでに必要な画面をすべて実装
- 履歴書を編集するまでに必要な画面をすべて実装
- Jest + React Testing Library を使用したコンポーネント単位の結合テストの実装
チーム構成は、プロダクトマネージャー1人、フロントエンドは自分1人、バックエンドは1人のチーム構成で開発を進めていきました。こちらのプロジェクトは副業で参画していたので、基本的には土日と平日の夜に時間を確保して作業を進めていきました。自分は1人で開発を進めていったので、環境構築からすべての画面実装に至るまでの過程をすべて1人で実施しました。フロントエンドの開発OpenAPIのYAMLファイルを submodules で取り込んでそのYAMLファイルから aspida を用いて型定義ファイルを生成した上で画面実装を行っていく、というフローで仕事を進めていきまして、結果的に納期を10月の末までと定めたのですが、その納期に間に合うためのプロダクトを作成することに成功し、リリースする、というゴールに大きく貢献しました。
B to B 向けの人事管理をラクにする管理画面開発
2022年4月 〜 2022年7月まで
- React : 17.0.2
- Emotion : 11.9.0
- TypeScript : 4.7.4
- Next.js : 12.0.10
- Recoil : 0.7.0
- React Hook Form : 7.33.1
- SWR : 1.2.2
- aspida/swr : 1.9.0
- aspida/axios : 1.9.0
- フロントエンドの技術選定
- GitHub Actions を用いた CI / CD ワークフローの作成
- Docker を用いたフロントエンドの仮想コンテナ環境の作成
- Husky・lint-staged・Prettier・ESLintの導入
- svgファイルを React のファイルに変換するために svgr の導入
- Renovate を用いたパッケージの依存管理
- Atomic Design を用いた共通コンポーネントの新規実装
- 管理画面の「アカウント一覧画面」の新規実装
- 管理画面の「ワークフロー一覧画面」の新規実装
- 管理画面の「コネクション一覧画面」の新規実装
チーム構成は、プロダクトマネージャー1人、フロントエンドは自分含めて4人、バックエンドは1人のチーム構成で開発を進めていきました。こちらのプロジェクトは副業で参画していたので、基本的には土日と平日の夜に時間を確保して作業を進めていきました。開発環境の構築からドキュメントの作成までの業務をやった後には、仕様をプロダクトマネージャーと会話をして機能要件の認識に齟齬がない状態を構築した上で、画面実装を進めていくというフローで仕事を進めていきました。フロントエンドの進捗が悪い、ということだったので緊急で案件に参画した状況だったのですが、早急にキャッチアップを行い、実装を進めていくことで、納期であるベータ版公開日である7月に成果物を納品出来ました。期日までにプロダクトを作ることに大きく貢献しました。
シェアードタレントネットワークのWebアプリケーションの新規開発
シェアードタレントネットワークとは、最終選考に残ったが、通勤や給与の条件が合わないなど何らかの理由で採用に至らなかった、
2番目に優秀な"銀メダリスト"の情報を、企業が他社と共有するプラットフォームのことである
2021年9月 〜 2022年3月まで
- React
- Emotion
- TypeScript
- Next.js
- Recoil
- React Hook Form
- SWR
- aspida/swr : 1.9.0
- aspida/axios : 1.9.0
- フロントエンドの技術選定
- フロントエンドの環境構築手順を記したドキュメントの作成
- フロントエンドのコンポーネント設計方針を記したドキュメント作成
- GitHub Actions を用いた CI / CD ワークフローの作成
- Docker を用いたフロントエンドの仮想コンテナ環境の作成
- Husky・lint-staged・Prettier・ESLintの導入
- Renovate を用いたパッケージの依存管理
- Atomic Design を用いた共通コンポーネントの新規実装
- サービス全体の画面数である「15画面」の新規実装
チーム構成は、フロントエンドは自分2人、バックエンドは1人のチーム構成で開発を進めていきました。こちらのプロジェクトは副業で参画していたので、基本的には土日と平日の夜に時間を確保して作業を進めていきました。会社にフロントエンドエンジニアがいない状況だったので、横展開ができるようにフロントエンドの環境構築手順を社内のドキュメントツールに記載したことで、他のプロジェクトのメンバーでもフロントエンドの開発がスムーズにできるようなドキュメントの整備を実施しながら「サービスを構成する15の画面」の実装をほとんど1人で実装しました。ベータ版を公開するのが3月だったのですが、3月の納期に間に合うように大きく貢献しました。
ホテル予約サイトのコンポーネントリファクタリング業務・テストを導入することによる品質改善業務
2021年8月 〜 2021年11月末まで
- React
- React Hooks
- styled-components
- TypeScript
- Next.js
- REST API
- Atomic Design の原則に基づいてコンポーネントを整備する
- コンポーネント設計 をメインで担当
- コンポーネント実装 をメインで担当
- コーディング規約 を新規で作成・運用
- utils 配下の 共通関数 の 単体テストコードの作成
既存のサービスが「Atomic Design」を用いてコンポーネント設計を行っていたのだが、「Atomic Design」の原則に全く従っていなかったので、自分が開発リーダーとなってコンポーネントの整備を行った。コンポーネントの分離作業を行うことで、既存のコンポーネントの責務の分離に大きく貢献。業務時間外には、実際に自分で新規で作成したコンポーネントを自分のリポジトリでカスタマイズして実装して残しておくことで、今後の現場でいつでも使い回せるような準備を整えた。
共通コンポーネントのnpmパッケージ化・新規開発
2021年7月 〜 2021年8月末まで
- WebComponents
- Lit Element
- JavaScript
- TypeScript
- webpack
- WebComponents + Lit を用いたコンポーネント実装
- Buttonコンポーネントの新規実装
- SelectBoxコンポーネントの新規実装
- DatePickerコンポーネントの新規実装
- 検索モーダルコンポーネントの新規実装
- 人数設定モーダルコンポーネントの新規実装
WebComponents + Lit を用いたコンポーネント実装は初めて行ったが、短期間でキャッチアップを行い、実装完成まで1人で担当した。Vue.js のプロジェクトでも、Reactのプロジェクトでも使用できる再利用性の高いコンポーネントを作成したことで、プロジェクトを横断してカスタムエレメントを使い回せるような仕組み作りに大きく貢献した。
ツアー予約サイトの新規開発
2021年5月 〜 2021年7月末まで
- React
- React Hooks
- Emotion
- TypeScript
- Next.js
- REST API
- フロントエンドチームの開発リーダーとして抜擢
- 要件定義や技術選定の上流工程の業務から行った
- Atomic Designを用いたコンポーネント設計
- 30〜40個ほどの共通コンポーネントの実装
- 30〜40個ほどの共通コンポーネントのストーリーファイル作成
- GitHub Actions を用いたCI / CDワークフローの作成
- Dockerを用いた仮想コンテナ環境の作成
- Husky・Prettier・ESLint の導入
- Renovateを用いてパッケージの依存管理を行った
- コーディング規約に則ったメンバーのレビュー対応を行った
フロントエンドチームの「開発リーダー」として新規開発を行った。デザインも決まっていない状況下だったが、共通コンポーネントの実装から始めて、フロントエンドのみで出来ることから開発を進めていった。しかしプロジェクトが予算の関係で途中で中断となってしまい、リリースまで行うことができなかった。とても残念だった。しかし、新デザインで共通コンポーネントを作成したので、今後のプロダクト開発を円滑に進める基盤作りに大きく貢献。
ホテル予約サイトのバグ回収業務・新機能の実装・パフォーマンス改善業務
2021年1月 〜 2021年5月末まで
- React
- styled-components
- TypeScript
- Next.js
- REST API
- 既存サービスのバグ回収
- Storybookの導入・運用をメインで担当
- 4つの静的ページの新規実装を全て1人で担当
- 既存のサービスのトップページのリプレイス業務を1人で担当
- コーディング規約がなかったので新規で作成・運用
- Webフロントエンドパフォーマンス改善業務
コーディング規約がなかったのでまずはコーディング規約の整備を行った。チームで一貫したコーディングを行う基盤を整えることで、レビュー工数の削減に大きく貢献。また、レビュー体制がチーム内レビューだったので、積極的にレビューを行い、フロントエンドチームのレビュー文化の確立に大きく貢献した。また、Webフロントエンドパフォーマンス改善業務を担当した際には、既存のサービスがNext.jsを使用していたのにも関わらずSSRが適用されていないことに自分が気が付きSSRが適用されるような修正を加えることで、サービスの「LightHouse」のスコアアップに大きく貢献した。
動画面接サービスの管理画面の新規開発
2020年7月〜2021年1月末まで
- React
- styled-components
- TypeScript
- REST API
- Toggleコンポーネントの実装
- SelectBoxコンポーネントの実装
- Inputコンポーネントの実装
- ページコンポーネントの実装
- カスタムフックの実装
- 表示とロジックに責務を分離したコンポーネント実装
- React・TypeScriptを用いた新機能の実装
- 仕様変更に関する機能の追加・改修業務
管理画面の新規開発に途中から参画した。
新機能の追加実装が主な担当業務だった。
やるべきタスクと納期が明確に決まっている状況下で
納期の遅延なく実装を完了させることで、プロダクトのリリースの時間削減に貢献した。
ECサイトの既存機能の追加・改修業務
2019年8月〜2020年6月末まで
- React
- styled-components
- REST API
- 既存のサービスの「バグ回収」がメイン業務
- 実装、保守運用をメインで担当
- API連携と非同期処理の実装
- 既存コードのリファクタリング
Reactを用いたバグ回収業務がメイン業務だった。
迅速なバグ対応を行うことで、プロダクトの品質向上に大きく貢献した。