seiei-sogen. dev
こんにちは、 seiei-sogen

聖永宗玄 Software Engineer

約 12 年の Web 開発経験を持つフリーランスエンジニアです。Next.js / React / TypeScript を中心としたフロントエンドを軸に、Rust や Hono などバックエンドにも領域を広げ、要件の整理から設計・実装・改善までを一貫して推進します。「価値のあるソフトウェアを早く継続的に提供する」というアジャイル原則を行動指針に、お客様に持続的に価値を届けることを大事にしています。

seiei-sogen — フロントエンドデベロッパー & UI デザイナー, ノートPCで作業する様子

技術スタック

日々の実装で実際に使っている技術スタック。

主戦場

Next.js / React / TypeScript

強み

認証・決済・フォーム・状態管理・パフォーマンス改善

対応可能

Rust / Hono / Rails / Laravel / GraphQL / DynamoDB

最近の関心・実務活用

Claude Code / Codex / tsumiki / Coding Agent

項目 名称 期間 レベル
フロントエンド TypeScript 2020〜 `@tsconfig/strictest` や `noUncheckedIndexedAccess` を活用した型安全な実装ができる。
JavaScript 2019〜 トランスパイル環境構築から、スクラッチでコードを書ける。
Next.js 2021〜 v10〜v16(Pages Router / App Router / Server Components)までの実務経験あり。
React 2020〜 実務での EC サイト・業務システム・新規 SaaS の開発経験あり。
Vue.js 2019〜 単一ファイルコンポーネント・スロット・アニメーションなどの機能を利用できる。
Tailwind CSS 2024〜 v4 と class-variance-authority(CVA)を組み合わせた設計経験あり。
Sass / CSS 2014〜 スクラッチでの Web ページ構築。BEM / FLOCSS による CSS 設計の実務経験あり。
HTML 2014〜 スクラッチ Web ページ構築。HTML メールなどの古い形式も対応可能。
three.js / React Three Fiber 2024〜 GaussianSplats3D を React に組み込んだページを実装できる。
状態管理 / フォーム Redux Toolkit 2020〜 asyncThunk による非同期処理・エラーハンドリングを実装できる。
TanStack Query 2023〜 導入から商品サジェスト機能の追加まで実務経験あり。
XState 2024〜 Redux からの状態管理リファクタリングを実務で実施。
Jotai 2024〜 Read Only Atom で再レンダリングを抑えた状態管理ができる。
SWR 2022〜 他の状態管理ライブラリと組み合わせた検索アプリの実装経験あり。
React Hook Form 2023〜 Yup / Zod と組み合わせたフォーム実装とバリデーションができる。
TanStack Form 2025〜 Valibot と組み合わせたフォーム実装の経験あり。
Zod / Valibot / Yup 2023〜 フォームバリデーション・API スキーマ・型生成での実務利用。
バックエンド / DB Rust(actix-web / async-graphql) 2026〜 GraphQL API 開発の実務経験あり(UseCase 層実装・mutation / query のリファクタ)。
Node.js / Hono 2025〜 API をゼロから設計・実装。Bun Test、Zod スキーマでの型安全化を含む。
Ruby / Ruby on Rails 2021〜 Active Record / Ransack / CarrierWave による CRUD・検索・画像保存を実装できる。
PHP / Laravel 2019〜 Eloquent による CRUD、マイグレーション、認証認可機能を実装できる。
MySQL 2025〜 `LOCK TABLES` による排他制御を含むバッチ処理の設計経験あり。
Drizzle ORM 2025〜 新規テーブル設計・マイグレーションを実施できる。
Amazon DynamoDB 2025〜 aws-sdk による接続・操作の実装経験あり。
GraphQL 2025〜 urql / Apollo + GraphQL Code Generator の実務利用経験あり。
認証 / 決済 / 外部連携 better-auth 2025〜 メール認証・OAuth(Google / LINE)・パスワードリセットを新規実装できる。
Auth0 / Amazon Cognito 2024〜 Auth.js 連携によるログインフロー・セッション管理を実装できる。
SendGrid 2025〜 メール送信 API 連携を実装できる。
外部決済サービス 2025〜 クレジット / キャリア決済の外部 IF 連携・XML / 文字コード処理を実装できる。
Treasure Data 2025〜 分析基盤への連携処理の実装経験あり。
テスト / 品質 / 開発環境 Vitest 2024〜 ユニットテスト環境の導入・運用経験あり。
Jest 2021〜 ts-jest で TypeScript ユニットテストを書ける。SWC 導入で実行速度 70 倍向上の実績あり。
React Testing Library 2021〜 React コンポーネントのイベントテストを書ける。
Cypress 2021〜 ESLint と共存させた環境構築から E2E テストを書ける。
Bun Test / MSW 2025〜 API テスト・モック開発を実装できる。
Storybook 2025〜 共通 UI コンポーネントのバリエーション確認を実施できる。
ESLint / Biome / Oxlint 2022〜 Flat Config 整備・Oxlint 導入で静的解析を約 37 秒 → 約 12 秒に短縮した実績あり。
Vite / Docker / GitHub Actions 2022〜 開発環境・CI / CD パイプライン構築の実務経験あり。
Coding Agent Claude Code 2024〜 カスタムスキル整備、要件定義〜実装の一貫推進に活用。Coding Agent 全般で通算 約 2 年。
GitHub Copilot 2024〜 コード生成補助として継続的に利用。
Cursor / Codex / Gemini CLI 2024〜 案件特性に応じて使い分け。
classmethod/tsumiki 2025〜 仕様駆動的な開発フローに組み込んで利用。
ソフト Photoshop / Illustrator 2014〜 画像加工・デザイン資材からのコーディングに利用できる。
XD 2020〜 デザインからコーディングができる。
Movable Type / WordPress 2017〜 CMS の新規記事作成・更新・リリースができる。
Excel / Word / PowerPoint 2008〜 設計書・ビジネス文書・資料を作成できる。
DaVinci Resolve 2021〜 カット・フェードアウトなどの簡単な動画編集ができる。

経歴

Web コーダーからフリーランスのフルスタックエンジニアまで、これまでの経歴。

フルスタックエンジニア

2025 - 現在

フリーランス

Rust(actix-web / async-graphql)による GraphQL API 開発と Next.js(App Router)でのフロントエンド開発を横断するフルスタック案件に従事。不動産系 SaaS、学習系新規サービスの認証・決済・月次継続課金バッチなど、実運用に耐える領域を要件整理から実装まで一貫して担当。

フロントエンドエンジニア

2022 - 2024

フリーランス

Next.js / React / TypeScript を中心としたフロントエンド開発に従事。大手電機メーカー R&D の AI / 3D 連携、大規模グローバル EC の Next.js リプレイス、SNS サービスの TS リファクタリングなど。状態管理改善・テスト・CI / 静的解析の高速化にも貢献。

バックエンド / フロントエンドエンジニア

2017 - 2022

株式会社サンデーアーツ

スクラム開発で Rails / Vue.js、Laravel / PHP / Vue.js、Next.js / TypeScript / Redux Toolkit を用いた業務システム・大規模システム開発に従事。プロジェクトリーダーとしてスコープ管理・品質管理・要件定義にも関わる。

Web コーダー

2014 - 2017

派遣社員(複数現場)

キャリア初期として金融・教育・民間企業サイトのコーディング・メンテナンスを担当。HTML / CSS / JavaScript、BEM / FLOCSS による CSS 設計、Photoshop / Illustrator、Movable Type などの CMS 運用の基礎を実務で構築。

よくある質問

設計で具体例を語れるものや、どのような基準で行っているかを教えてください。

まず、設計時に一貫して意識している判断軸は以下の 4 点でございます。 1. 失敗時の安全性 — 冪等性・排他制御・データ保全(特にバッチ・決済領域) 2. 責務分離 / 凝集度 — Clean Architecture、Package by Feature、UseCase 層の導入 3. PR・変更単位の分割戦略 — レビュー可能な粒度で安全に置換できる単位に切る 4. 型と静的解析でガードする — TypeScript strictest、Lint、CI ゲートでの担保 具体例としては、以下のような設計経験がございます。 ① 某新規サービス立ち上げ案件 月次継続課金バッチ 約 4,200 行のサブスクリプション課金バッチを単独で設計・実装いたしました。月次課金は障害時の影響が大きいため、冪等性・再実行性・二重決済防止を設計の中核に据えております。処理済みデータは status=complete で管理し、再実行時にも安全に再開可能な構成とし、MySQL の LOCK TABLES で二重実行・競合を防止しております。 → 「障害時の影響が大きい領域では、再実行しても壊れない設計を最優先する」という基準を体現した事例でございます。 ② 某新規サービス立ち上げ案件 退会機能 論理削除フラグではなく、Archive テーブルへ退避する方式 を採用いたしました。データ保全性・運用性(後追いでの追跡可能性)を優先した判断でございます。 ③ 某不動産系 SaaS 案件 API 設計リファクタ 汎用 delete mutation を、リソースごとの個別 mutation に 3 分割 PR でリファクタリングいたしました。責務の明確化と、フロント・バック横断でレビュー可能な PR 粒度を両立させることを基準としております。 ④ 某大手電機メーカー R&D 案件 ディレクトリ構成 書籍『Bulletproof React』を参考に "Package by Feature" を提案・採用し、ESLint Flat Config 約 300 行を新規整備いたしました。機能単位での凝集を高め、スケール時の検索容易性・保守性を優先しております。 ⑤ 某大手グルメサービス 外国語版予約機能 Clean Architecture を意識したレイヤード構成に、Redux Toolkit と React Testing Library を導入いたしました。長期運用への耐性とテスタビリティを基準とした設計でございます。 いずれも「対象領域のリスクと寿命に応じて、どの基準を優先するか」を判断した上で設計しており、設計手法そのものを目的化しないことを意識しております。

リーダー経験について教えてください。

2 件のプロジェクトでリーダーを経験しております。 ① 某大手航空会社向け 保険システム 運用保守フェーズ 10 名以上のチームのリーダーとして、Laravel / PHP / Vue.js を用いた開発に加え、要件定義・設計書作成・タスクの割り振り・スケジュール管理・品質管理を担当いたしました。 ② 某暗号資産取引所 サイトリリース案件 Web コーダー 3〜5 名のチームの進行管理とマネジメントを担当し、サイトリリースまでをやり切りました。 いずれもスコープ管理(タスクの割り振り、スコープのコントロール)と品質管理(2 人以上のチェック・ブラウザチェックの義務付け)を意識したチーム運営を実践しております。