Web Engineer / Indie App Maker

よしだのアイコン

工夫と 効率と 持続性

Webアプリケーションエンジニア。
業務では、教師や児童生徒向けのwebサービスの開発運用をしています。
休日は子どもと一緒に考えたゲームや学習アプリをつくっています。

  • 6本 公開中のアプリ
    (うち iOS 4本)
  • 155回 ゲームの
    改善リリース
  • 〇本 noteの
    記事
つくったものを見る 30秒で経歴を見る
scroll

01

About

About /Career

  1. 2011

    学習教材出版社に入社

    営業経験後、社内の情報システム部門へ異動。

    • VB.NET
    • C#
    • VBScript
    • ASP.NET
    • BAT
    • HTML/CSS
    • SQL Server
  2. 2018

    デジタルコンテンツ関連の部署へ異動

    教師や児童生徒向けのWebサービスの運用開発を担当。

    • jQuery
    • JavaScript
    • HTML/CSS
    • ASP.NET
    • Backlog
    • GitHub
  3. 20202020年5月〜2022年4月

    解説動画閲覧サービスを統合・クラウド化

    教科や商品ごとに約20種類に増えていたプログラムを、1つのSPAとして再設計してAWSへ移行。動画だけでなく音声・PDF・外部リンクもまとめて見られる「コンテンツハブ」に一新。

    • 約20種 → 1つのSPA
    • リリース1年で7万人以上が利用
    • Vue.js
    • JavaScript
    • jQuery
    • HTML/CSS
    • Express
    • AWS
    • Backlog
    • Teams
  4. 20222022年5月〜2023年4月

    Googleフォームミニテスト作成サービスを新規開発

    自社のプリント作成サービスの問題データから、簡単に作成できるWebサービスを設計・開発。「教科共通システム」としてAWS上に構築。

    • 1年で約5,000人・延べ1万回以上の利用
    • TypeScript
    • Vue.js
    • Vite
    • Node.js
    • Bootstrap
    • AWS Lambda
    • S3
  5. 20242024年4月〜進行中

    ミニテスト作成システムを統合・AWSへ移行

    教科ごとに8つ乱立していた自社のプリント作成サービスを、Googleフォームミニテストも作れる1つのサービスとして、AWS上に統合中。

    • 8サービス → 1つへ統合中
    • 16,000人以上の基盤をトラブルなく移行
    • TypeScript
    • Vue.js
    • Vite
    • C#
    • Express
    • AWS Lambda
    • S3
    • CloudFront
    • IIS
    • Figma
  6. 20262026年4月〜進行中

    Web投影教材の統合・モダン化

    小学校教師向けWeb投影教材を、TypeScript × Vue.js で再開発し、モノレポ形式で統合。Claude Code などを使ったAI駆動開発で進め、再現できるように手順書を社内に公開中。

    • 5つのサービス → 1つのモダン環境
    • TypeScript
    • Vue.js
    • Bootstrap
    • Vitest
    • Playwright
    • S3
    • CloudFront
    • CloudWatch
    • Figma
    • Claude Code
    • GitHub Copilot

About /Skills

Frontend

  • TypeScript
  • JavaScript
  • Vue.js
  • jQuery
  • HTML/CSS
  • Bootstrap
  • React*
  • Tailwind CSS*

Backend

  • Node.js
  • Express
  • C#
  • ASP.NET
  • VB.NET
  • SQL Server
  • IIS

Cloud

  • AWS(S3・CloudFront・Lambda・CloudWatch etc.)
  • Cloudflare Workers*

Test / Tools

  • Vitest
  • Playwright
  • Vite
  • npm / pnpm
  • Volta
  • GitHub
  • Backlog
  • Figma

AI-driven dev

  • Claude Code
  • GitHub Copilot
  • AI駆動開発の手順化

Mobile / Media

  • Capacitor(iOSアプリ化)*
  • Codemagic(iOSビルド・配信)*
  • WebAudio*
  • SVGアニメーション*

* は個人開発で使っている技術です。

About /Certs

  • 2015 基本情報技術者試験 国家試験
  • 2016 応用情報技術者試験 国家試験
  • 2018 プロジェクトマネージャ試験 国家試験
  • 2019 ICT支援員 教育ICT
  • 2026 AWS Certified AI Practitioner AWS

02

Apps

個人で企画から開発まで手がけたアプリです。

自分が便利なアプリ

Web版 公開中 / iOS 準備中

頭痛手帳

気圧による頭痛などの痛みと服薬を記録し、直近30日の服薬日数を目安の範囲内で「やりくり」できるようにするアプリ。キャラクター「ねむひつじ」が寄り添います。

  • React
  • TypeScript
  • Vite
  • Capacitor
  • Cloudflare
  • 保存処理をリポジトリ層にまとめ、Web と iOS で切り替え
  • 服薬カウントの計算ロジックに単体テスト
  • 健康データは端末の外に送らない設計
アプリを見る

Web 公開中 / 自分用

AWS 認定 学習カレンダー

AWS 認定3資格(AI Practitioner / Cloud Practitioner / Solutions Architect)を、受験日までに取るための学習計画アプリ。スマホひとつで、思いついたその場で Claude Code に頼む「バイブコーディング」で作りました。

  • React 19
  • TypeScript
  • Tailwind CSS
  • zustand
  • PWA
  • 学習範囲をロードマップで表示し、分野ごとの進み具合が分かる
  • 受験日から逆算して、平日・休日の学習時間に合わせて予定を自動で割り当て
  • カレンダーはドラッグ&ドロップで予定を動かせる(タッチ対応)
  • 確認問題 593問と、本番形式の演習つき
アプリを見る

子どもと楽しむアプリ

4本を App Store で配信中です。

iOS 配信中

だんごむしのぼうけん

子どもと一緒に考えたストーリーをもとにした、だんごむしが主人公の冒険ゲーム。全24面・敵やいきものの図鑑つき。

  • Vanilla JS
  • WebAudio
  • 自作ビルド
  • Capacitor
App Store で見る

iOS 配信中

ピコとけいさん1年生

キャラクター「ピコ」と一緒に、たし算・ひき算・さくらんぼ算を練習できる知育アプリ。

  • SVGアニメ
  • 共通ライブラリ
  • Capacitor
App Store で見る

iOS 配信中

ピコとくく

ピコと九九をおぼえるアプリ。「おぼえる・れんしゅう・テスト」の3段階で、メダルを集めながら たまごを育てていく。

  • Vanilla JS
  • 読み上げ
  • Capacitor
App Store で見る

iOS 配信中

ピコとめくって

1〜4人で遊べる、カードめくりゲーム。2枚そろえる「そろえる」、おぼえて当てる「みつける」、時間内に全部おもてにする「めくる」の3つの遊び方。8・16・24枚から選べて、ヒントもある。

  • Vanilla JS
  • みんなで遊べる
  • Capacitor
App Store で見る

03

Cast

アプリに登場するキャラクターたちです。さわってみてください。

ピコ

「けいさん」「くく」「めくって」のピコのシリーズに登場するガイド役。SVGアニメーションで動き、つつくと「？」が「！」になります。

ピコと仲間達

「ピコとけいさん1年生」にだけ登場する、水色・ピンク・黄緑の3匹。

だんごむし

「だんごむしのぼうけん」の主人公。粘土のような質感で、つつくと丸まります。子どもと一緒に考えた動きで冒険します。

ぼうけんで出会う ハチ

空から急降下してくる、ゲームの敵キャラクター。

赤いスカーフのねむひつじ 青いスカーフのねむひつじ

ねむひつじ

「頭痛手帳」に登場する、赤いスカーフの女の子と青いスカーフの男の子。気分に合わせて切り替えて使えます。

月の上で眠る ねむひつじ

たまご

「ピコとくく」で育てる、緑のたまご。九九の「れんしゅう」で段をクリアするたびに、ひびが入って生まれ、少しずつ大きくなっていきます。

たまご

ピンクのたまごあおのたまごむらさきのたまごオレンジのたまごぎんのたまご

04

Focus

Focus /気をつけている考え方

  1. 工夫 / UX

    本当に、
    わかりやすいか。

    使う人の目線で。迷わせない画面で。使いやすさと価値を両立します。

  2. 効率 / 要件定義

    何を作り、
    何を作らないか。

    入り組んだ要件を、シンプルな仕様に絞る。優先度と時期から、日程と進捗まで見ます。

  3. 持続性 / 保守性

    未来で、
    困らないか。

    優先順位や本質を踏まえ、将来の保守性を守れる判断をします。

Focus /AI駆動開発の実践

個人開発は、AIと役割を分けながら進めています。

サイクル

  1. 1

    ルールを書く

    リポジトリごとに CLAUDE.md を置き、目的・守ること・確認の手順を書く。

  2. 2

    役割を分ける

    方針や設計の判断は自分。仕様が決まった実装や単純作業はAIに任せる。

  3. 3

    自動で確かめる

    単体テストと、スマホサイズのスクリーンショット(Playwright)で確認する。

  4. 4

    実機で触る

    実機で遊び、気になるところはスクショに印をつけて伝える。

  5. 5

    記録して、くり返す

    変更履歴と資料を毎回更新。次の会話でもAIが経緯をたどれる。

設計の工夫

  • 保存先を差し替えられる設計。保存処理をリポジトリ層にまとめ、Web と iOS で実装だけを切り替える。
  • 計算ロジックは必ずテスト。服薬日数のカウントなど 18ファイル・143件の単体テスト(Vitest)。
  • 健康データは端末の外に出さない。天気APIに送る位置情報も、地域程度に丸める。
  • 仲間との共有はサーバー側でも検証。Cloudflare Workers + D1。パスワードは PBKDF2 でハッシュ化。
src/storage/keyValueStore.ts
export interface KeyValueStore {
  get(key: string): Promise<string | null>;
  set(key: string, value: string): Promise<void>;
  remove(key: string): Promise<void>;
}
// Web: localStorage / IndexedDB
// iOS: @capacitor/preferences

開発ログ: だんごむしのぼうけん

改善リリースv155

遊んでみて気づいたことを、すぐ直す。その積み重ねの主な節目です。

06

Contact

読んでくださって、ありがとうございます。面談や仕事のご相談など、お気軽にご連絡ください。

X(旧Twitter)でDM@pik0389

このページのどこかに、どんぐりが5つ隠れています。

冒険の記録

探索度
0%

記録は この端末の中にだけ保存されます。