Web App2026年10月〜11月
Naoki Kitade's Portfolio Site
担当: 情報設計 / UIデザイン / フロントエンド・エッジAPI実装 / 自動テスト設計
日々の制作物や技術ノートを整理して公開するために構築したWebサイトです。情報設計からAstroとTypeScriptによるフロントエンド実装、Cloudflareのエッジ関数を用いたお問い合わせ機能、自動テスト環境の整備までを一貫して行いました。
#Astro#TypeScript
詳細 →
Web Frontend Engineer
北出 直規 / Naoki Kitade
Naoki Kitade.Portfolio Site
Web制作の実務経験を礎に、論理的な思考と型安全性を大切にしたフロントエンド開発に取り組んでいます。
デザインの意図を汲み取ったUI実装と、コンピュータサイエンスやJava・リレーショナルデータベースの基礎を土台に、利用者に寄り添った保守性の高いWebサイト制作を心がけています。
TypeScriptReactAstroTailwind CSSJavaSQL
CalendarApp.tsx
TypeScript
// 1. イベントモデルの型定義
interface CalendarEvent {
id: string;
date: Date;
title: string;
priority: 'high' | 'standard';
}
// 2. 祝日判定とフックの実装
export const useCalendar = () => {
const [events, setEvents] = useState<CalendarEvent[]>([]);
const isHoliday = useCallback((d: Date) => {
return holidaySet.has(formatDate(d));
}, [holidaySet]);
return { events, isHoliday };
};
TypeCheck: 0 errors
React & Astro
CAPABILITIES
私にできること
Webデザインの実務経験と、プログラミングやデータベース設計の基礎を組み合わせて取り組んでいます。
UI/UX & Web Design
直感的なデザインと実装
過去のWeb制作実務の経験を活かし、情報構造の整理からレスポンシブなマークアップ、利用者の負担を減らすUI設計を心がけています。
HTML5/CSS3Tailwind CSSFigmaUI設計
Frontend Engineering
型安全で保守しやすい開発
TypeScriptによる厳密な型定義と、ReactやAstroを活用したコンポーネント設計により、長期的な運用を見据えた実装を行っています。
TypeScriptReactAstroState Management
Documentation & Logic
図解を用いた丁寧な資料化
Javaやデータベース正規化の学習を通じて、複雑なロジックをフローチャートや仕様書に落とし込み、チームに正しく共有する姿勢を大切にしています。
Mermaid図解ER図 / DB正規化仕様書・マニュアルJava基礎
ABOUT ME
これまでの制作実務やシステム開発の歩み、大切にしている考え方
これまでの背景やスキルセット、保有資格を簡潔にまとめています。
SELECTED WORKS
主な制作物
Web App2026年10月〜現在
VBAカレンダーアプリのWeb化と再構築
担当: 要件定義 / UI設計 / フロントエンド実装
デスクトップ依存のExcel VBAカレンダーを、マルチデバイス対応・データ共有可能なモダンWebアプリケーションへと再構築しました。
#Astro#TypeScript
詳細 →
業務改善・DB2026年9月〜10月
AccessDBによる業務改善システム & 体系的解説ドキュメント
担当: 要件分析 / 第3正規化DB設計 / SQLクエリ作成 / 解説PDF執筆
現場の業務課題ヒアリングからリレーショナルDB設計、SQLクエリ構築までを一貫して実施し、ER図やテーブル定義書を含む詳細解説ドキュメントを作成しました。
#Access#SQL
詳細 →ARTICLES & DOCUMENTS
技術記事・ドキュメント
セキュリティ・設計/8 min read
Cloudflare Turnstileとは？お問い合わせフォームをボットから守る仕組みと基本
利用者に画像選択パズルの負担をかけずに自動プログラムによる不正送信を判定できる「Cloudflare Turnstile」の概要から、サーバー側でのトークン検証フロー、隠しフィールドとの併用・リセット処理の基本までを図解で整理します。
アーキテクチャ・設計/18 min read
Zodとは？TypeScriptで入力チェックと型定義をひとつにまとめる基本
TypeScriptと組み合わせて実行時のデータ検証と型定義を一元管理できるライブラリ「Zod」の概要から、HTMLフォーム属性との役割の違い、単一情報源による設計までを図解とコードで整理します。
アーキテクチャ・設計/6 min read
Webサイト制作におけるフレームワークの選び方まとめ
Webサイトの配信方式である動的生成と静的サイト生成の仕組みの違いから、WordPress・Next.js・Astroの特徴と目的に応じた選び方までを図解で整理します。