スキル・専門領域

何ができて、どのような仕事を任せられるか。技術スタックと対応可能な業務についてご紹介します。

スキル概要

各分野での経験年数と得意領域をご紹介します。

5年2ヶ月
フロントエンド

UI/UX開発に関連する技術

4年6ヶ月
バックエンド

サーバーサイド・データ処理に関連する技術

4年3ヶ月
インフラ・DevOps

インフラ・運用に関連する技術

対応可能な業務・役割

このような仕事をお任せください。

フロントエンド開発

モダンな UI/UX を実現するための設計と実装。

  • React を使った UI 設計と実装
  • コンポーネント設計とデザインシステム運用
  • パフォーマンス改善(Core Web Vitals 対応)
  • アクセシビリティを意識した実装

主要技術

HTML/CSSJavaScriptTypeScriptReactNext.jsAstroRemixSolidJSVue.jsTauriSass/SCSSCSS ModulesTailwind CSSstyled-componentsEmotionshadcn/uiMUI (Material UI)Ant DesignDaisy UIJotaiZustandReact Hook FormZodFramer MotionGSAPStorybookVitestJestReact Testing LibraryGitFigmaNotionUIデザインプロジェクト管理CursorGitHub CopilotClaude CodeDevinOpenCodeZedAI開発ツール導入

バックエンド開発

API とデータベースを中心としたサービス開発。

  • REST API の設計と実装
  • 認証・認可の設計と運用
  • データベース設計と最適化
  • バッチ処理やジョブの設計

主要技術

TypeScriptNext.jsRemixZodJestNode.jsBunExpress.jsHonoSupabaseFirebaseClerkStripePostgreSQLSQLiteLibSQL (Turso)NeonPrismaDrizzle ORMGitRustGoPythonPHPNotionプロジェクト管理CursorGitHub CopilotClaude CodeDevinOpenCodeZedAI開発ツール導入

インフラ・DevOps

クラウド基盤と開発環境の整備。

  • サーバーレス基盤の設計・運用
  • CI/CD パイプラインの整備
  • Docker を用いた環境構築
  • 監視・ログの設計

主要技術

AWSVercelCloudflareGoogle Cloud PlatformDockerGitHub ActionsGitNotionプロジェクト管理CursorGitHub CopilotClaude CodeDevinOpenCodeZedAI開発ツール導入

UI/UXデザイン

ユーザー体験を重視したデザインと設計。

  • Figma を使った UI デザイン
  • プロトタイピングとユーザーテスト
  • デザインシステムの構築・運用
  • アクセシビリティを考慮した設計

主要技術

FigmaUIデザイン

技術スタック詳細

カテゴリ別に主な対応範囲を整理しています。

フロントエンド

UI/UX開発に関連する技術

プログラミング言語

HTML/CSSHTML/CSS
セマンティックHTMLアクセシビリティ対応レスポンシブデザイン+2
JavaScriptJavaScript
ES6+構文非同期処理(async/await)DOM操作+2
TypeScriptTypeScript
型設計API型安全化フロント/バックエンド統一型定義+3
Rust
CLI開発Leptosを使用したWeb開発所有権・借用の基礎+1
Go
CLI開発MCPサーバー実装HTTPサーバー+1
Python
REST API開発スクリプト作成データ処理
PHP
WordPressテーマカスタマイズ簡易的なPHP編集

フレームワーク

ReactReact
UI設計コンポーネント設計状態管理+2
Next.jsNext.js
App Router設計SSR/SSG/ISR運用API Routes/Route Handlers+3
AstroAstro
静的サイト生成Islands Architectureマルチフレームワーク対応+1
Remix
SSR/SSGネストルーティングフォーム処理+1
SolidJS
リアクティブUI構築シグナルベース状態管理コンポーネント設計
Vue.js
Composition APIコンポーネント設計リアクティブシステム
Tauri
デスクトップアプリ開発クロスプラットフォームRust連携+1

スタイリング

Sass/SCSS
変数・ミックスインネスト構文関数・演算+1
CSS Modules
コンポーネントスコープCSSクラス名の自動生成Sass/SCSSとの併用
Tailwind CSSTailwind CSS
ユーティリティクラス設計カスタムテーマ作成プラグイン開発+2
styled-components
テンプレートリテラルCSS動的スタイリングテーマプロバイダー+1
Emotion
css propstyled APISSR対応

状態管理

JotaiJotai
アトム設計派生状態(derived atoms)非同期状態管理+1
Zustand
ストア設計ミドルウェア活用永続化+1

UIライブラリ

shadcn/uishadcn/ui
コンポーネントのカスタマイズテーマ設定Tailwind CSSとの統合+1
MUI (Material UI)
コンポーネント活用テーマカスタマイズsx prop+1
Ant Design
コンポーネント活用テーマカスタマイズForm管理+1
Daisy UI
プリセットコンポーネントテーマシステムTailwind CSS統合

アニメーション

Framer MotionFramer Motion
基本アニメーションジェスチャー対応レイアウトアニメーション+1
GSAP
TweenアニメーションTimelineシーケンスScrollTrigger+1

フォーム

React Hook Form
フォーム状態管理バリデーションエラーハンドリング+1
Zod
スキーマ定義バリデーション型推論+1

テスト

VitestVitest
ユニットテストコンポーネントテストモック+1
Jest
ユニットテストスナップショットテストモック/スパイ+1
React Testing Library
コンポーネントレンダリングユーザーイベントシミュレーションアクセシビリティクエリ+1

開発ツール

StorybookStorybook
コンポーネントカタログインタラクションテストビジュアルリグレッションテスト+1
GitGit
ブランチ戦略マージ/リベースコンフリクト解消

バックエンド

サーバーサイド・データ処理に関連する技術

ランタイム

Node.jsNode.js
REST API設計認証・認可非同期処理+1
Bun
ランタイムパッケージマネージャーバンドラー+1

BaaS

SupabaseSupabase
認証設計RLS設計リアルタイム+1
Firebase
FirestoreAuthenticationHosting+1
Clerk
ユーザー認証セッション管理マルチテナント+1
Stripe
決済実装サブスクリプションWebhook処理+1

APIフレームワーク

Express.js
REST API設計ミドルウェア構成ルーティング+1
Hono
エッジAPI開発TypeScript連携軽量APIサーバー+1

データベース

PostgreSQLPostgreSQL
スキーマ設計クエリ最適化運用・保守
SQLite
ローカルDBプロトタイプ開発エッジDB
LibSQL (Turso)
エッジDBレプリケーションサーバーレス連携
Neon
サーバーレスDBブランチ機能オートスケーリング

ORM

Prisma
スキーマ設計マイグレーション型安全なクエリ
Drizzle ORM
スキーマ定義クエリビルダーマイグレーション

インフラ・DevOps

インフラ・運用に関連する技術

クラウド

AWS
サーバーレス設計IAM管理監視設計
Vercel
デプロイ自動化プレビュー環境Edge Functions+1
Cloudflare
CDN設定Workers開発Pages連携+1
Google Cloud PlatformGoogle Cloud Platform
Cloud RunCloud FunctionsCloud Storage+1

コンテナ

DockerDocker
Dockerfile作成Compose運用CI連携

CI/CD

GitHub ActionsGitHub Actions
ワークフロー設計カスタムアクション自動デプロイ

その他

デザイン・マネジメント・AIツール等

デザイン

Figma
UIデザインプロトタイピングデザインシステム+1
UIデザイン
UI設計コンポーネント設計レスポンシブデザイン+1

マネジメント

Notion
ドキュメント管理プロジェクト管理ナレッジベース+1
プロジェクト管理
要件定義スプリント計画タスク管理+1

AIツール

Cursor
AI補完コードリファクタリングチャットベース開発+1
GitHub Copilot
コード補完インライン提案Copilot Chat+1
Claude Code
エージェント型開発複雑なリファクタリングプロジェクト横断タスク
Devin
自律型開発タスク自動化デバッグ+1
OpenCode
ターミナル統合コード生成ファイル操作
Zed
高速編集AI補完リアルタイムコラボ+1
AI開発ツール導入
ツール選定導入計画策定チームトレーニング+1

スキル開発の方向性

現在注力している3つの方向性と、それに向けた学習内容をご紹介します。

Rustを使用したアプリケーション開発

高パフォーマンス・安全性を重視したRust製アプリケーションの開発スキルを習得

学習中

  • Leptosによるフルスタック開発
  • Axumを使ったバックエンドAPI
  • Tauriでのデスクトップアプリ
  • WebAssemblyの活用

関連スキル

RustTauriWebAssembly

サーバーレスフルスタック開発

エッジコンピューティングとBaaSを活用した、スケーラブルなフルスタックアプリケーション構築

学習中

  • Supabase Edge Functions
  • Cloudflare Workers × Hono
  • Vercel AI SDK
  • エッジデータベース(D1, Turso)

関連スキル

SupabaseCloudflareVercelHono

プロダクトマネージャーへの成長

技術とビジネスを橋渡しし、プロダクトの価値を最大化するPMスキルの習得

学習中

  • プロダクトマネジメント基礎
  • ユーザーリサーチ手法
  • データ駆動意思決定
  • プロダクト戦略立案

関連スキル

プロジェクト管理UIデザインFigma