1. 好きな画像を設定できる五十音表メーカーを作った
子どものひらがな学習用に、好きな画像を設定できる五十音表メーカーをAIと制作。友達の顔や馴染みのある物を使い、愛着を持てる教材にカスタマイズ可能。localStorageで画像を保存し、サーバーへのアップロードを回避。印刷用CSSも実装。
主なトピック:
- 五十音表メーカー: ブラウザ上で各文字に好きな画像を自由に設定できるツール
- localStorage: 画像をサーバーにアップロードせずブラウザ内に保存してプライバシー保護
- AI活用: 高速に教材を制作し、子どもが関心を持てるようカスタマイズ
- 印刷用CSS: @page指定でA4横向きなど印刷時の最適化を実装
- 教材カスタマイズ: 市販品では対応できない個別ニーズに応える手法
- その他: ひらがな学習, 愛着, 著作権配慮 etc...
(コード例あり)
2. AI駆動開発大阪支部で「詳しくない分野でのVibe Codingで困ったことと学び」を発表してきました
サーバーサイドエンジニアがVibe CodingでiOSアプリ開発に挑戦。AIは毎回違う提案をし、古い手法を勧めるなど騙されまくる。基礎知識がないと判断できず回り道が多かった。Deep ResearchなどAIで高速に学び、基礎理解後は開発が加速した事例を紹介。
主なトピック:
- Vibe Coding: AIをフル活用したコーディング手法だが、0->1は不安定で騙されやすい
- 基礎知識の重要性: アーキテクチャや公式APIなど最低限の理解が必須
- Deep Research: 特定領域の自分専用書籍やハンズオンを作成して高速学習
- 一貫性のない提案: AIが毎回異なるアーキテクチャを提案する問題
- CLAUDE.md: 理解したアーキテクチャをAIに指示して制御する
- その他: SwiftUI, Observable, Clean Architecture etc...
3. v0 にデザインシステムを与えて、統一感あるデザインに仕上げよう！
v0（VercelのAIツール）にデザインシステムを「コンテキスト」として与えることで、統一感のあるデザインを生成。プロンプトだけでは配色や余白がばらつきがちな問題を、タイポグラフィやカラーパレットなどのルールを共有して解決。サンプルも用意されておりすぐに試せる。
主なトピック:
- v0: 自然言語からReact/Next.js/Tailwind CSSのコードを生成するAIツール
- デザインシステム: タイポグラフィ、カラーパレット等の原則を定義し一貫性を確保
- コンテキスト共有: globals.cssやshadcnレジストリでデザインルールを与える
- 統一感の実現: 配色・余白・インタラクションを全体で一貫させる仕組み
- Vercelエコシステム: 最適化されたモダンな技術スタックでプロトタイピング
- その他: Tailwind Config, shadcn/ui, ECサイト etc...
4. 【C#】非同期処理の基本
C#の非同期処理の基本概念を解説。Taskは「誰かに頼んだ仕事」、awaitは「その仕事が終わるまで待つ」というイメージで理解。同期処理・逐次・並行の違い、デッドロックの原因と対策、Task.Runの正しい使い方をコード例付きで説明。
主なトピック:
- Task: 非同期処理を表すオブジェクトで「誰かに頼んだ仕事」のイメージ
- await: タスク完了を待ちつつスレッドを解放し他の処理を可能にする
- デッドロック: 同期的な待機と非同期処理の混在で発生、ConfigureAwait(false)で回避
- Task.WhenAll: 複数の非同期処理を並行実行して処理時間を短縮
- Task.Run: 同期処理を別スレッドで実行するラッパー、I/O処理では不要
- その他: スレッドプール, Thread.Sleep, File.ReadAllTextAsync etc...
(コード例あり)
