Tsuchida R
エンジニアになろう！と思ったその時からエンジニアをしている者です。
プロフィール
技術スキル
- ▸コンポーネント設計、アニメーション実装、WebGLを用いた表現に加え、UI/UXやアクセシビリティを意識したフロントエンド開発
- ▸Next.jsを中心に、Vue.js / Gatsby.js / Reactを用いた開発経験
- ▸Gatsby.js + Laravelによるスクラッチ開発、DLPOを用いたABテスト、Salesforceを利用したコンバージョン導線の設計・実装
- ▸Next.jsのApp Routerを用いたルーティング設計、データフェッチ、パフォーマンスを意識した実装（個人開発）
ソフトスキル
- ▸実装方針の整理、タスク分解、コードレビューを通じて、チーム全体の生産性と品質向上を意識した開発推進
- ▸PM・ディレクター・デザイナー・外部エンジニアと連携し、要件整理から実装までを円滑に推進
- ▸更新性・拡張性・運用負荷を考慮した設計を重視し、継続的な改善を前提とした開発
スキル
実務経験に加え、個人開発を通じて習得したスキルも含まれています。
言語・マークアップ
HTML / CSSJavaScriptTypeScript
FW & ライブラリ
ReactVue.js（部分使用）Next.js（個人開発）Nuxt.js（運用経験のみ）Gatsby.jsjQuery
3D / 表現系
WebGLThree.js
CMS / ヘッドレスCMS
WordPressMovable Type（運用がメイン）microCMS
Others
DockerTailwind CSSSupabaseTursoFirebasePrismaDrizzleBetter AuthResendCornerstoneSmartSkill CampusDLPOSalesforce（フォームハンドラー）AWS（既存環境）
このポートフォリオで使用した主な技術スタック
▸Next.js 16
▸TypeScript
▸Tailwind CSS v4
▸shadcn/ui
▸microCMS
▸Better Auth
▸Supabase
▸Drizzle
▸Zod
▸Resend
このポートフォリオの主な仕様
▸コンテンツ管理
microCMSをヘッドレスCMSとして採用。学習記事や制作実績を管理画面から簡単に追加・編集でき、APIを通じてコンテンツを取得しています。
▸認証・権限管理
Better Authを使用した認証システムを実装。管理者権限のアカウントだけが新規ユーザーを作成でき、実績情報へのアクセスを制御しています。
▸認証状態による表示制御
ログイン状態によって表示されるコンテンツを動的に切り替え。未認証ユーザーには学習・デモのみを表示し、認証済みユーザーには実務の制作実績も閲覧可能にしています。
▸データベース設計
Supabaseを採用。Drizzleで型安全なスキーマ定義とマイグレーション管理を行い、認証情報を安全に保存しています。
▸お問い合わせフォーム
Resendを使用したメール送信機能を実装。Zodによるバリデーションで入力内容をチェックし、管理者への通知メールと送信者への確認メールを自動送信します。