learn-tech

Motion / Video

FrameScript

React + CSS で動画を組み立てるモーショングラフィックスソフト。コードベースで動画を書ける。

Web Platform

View Transition API

DOM 変更前後をブラウザに自動で補間させる Web 標準 API。SPA / MPA どちらでも、数行で滑らかな遷移が作れる。

3D / React

React Three Fiber

Three.js のシーングラフを React のコンポーネントツリーとして書けるレンダラ。drei 等のエコシステムと合わせて使う。

3D / WebGL

Three.js

WebGL を扱うデファクトの 3D ライブラリ。R3F の土台でもある本体側の使い方を一通り。

HTML / a11y

HTML アクセシビリティ

セマンティック HTML から ARIA、フォーカス管理、スクリーンリーダ、テスト方法まで。

Mobile / React

React Native + Expo

Expo Router でファイルベースに書く現代的な RN アプリ開発。Expo SDK・EAS・パフォーマンスまで。

Shader / GLSL

GLSL

WebGL/Three.js で動くシェーダ言語。頂点・フラグメント・SDF・ノイズ・ライティングまで。

Bot / Platform

Discord 開発

Bot 開発、スラッシュコマンド、Interactions、Gateway / Intents、Webhook、Embed、ボイス、運用上の注意点。

Web / Backend

Hono

Cloudflare Workers / Bun / Deno / Node など多ランタイム対応の軽量 Web フレームワーク。RPC で型も共有できる。

Web Platform

PWA

Manifest と Service Worker でインストール可能・オフライン動作・プッシュ通知・バックグラウンド同期まで。

Network

ネットワーク

OSI / TCP-IP、IP・ルーティング、TCP/UDP、DNS、HTTP/1-3、TLS、WebSocket、CORS、CDN まで。

AI / LLM

AI エージェント開発

LLM 基礎、プロンプト、Tool Use、エージェントループ、MCP、RAG、評価、運用までを横断する。

Animation / JS

JS で自作するトゥイーン

requestAnimationFrame からのアニメ実装。lerp / イージング / Tween クラス / キーフレーム / タイムライン / スプリングまで。

Backend / BaaS

Supabase

Postgres + Auth + Realtime + Storage + Edge Functions + RLS。Firebase の OSS 代替。SaaS でもセルフホストでも動く。

DB / ORM

Prisma

TypeScript / Node 向けの型安全 ORM。schema 駆動のマイグレーション、型推論された Client、Edge 対応まで。

Database

データベース

RDB / NoSQL の使い分け、設計、インデックス、トランザクション、レプリケーション、パフォーマンスまで。

SQL

SELECT / JOIN / 集計 / Window 関数 / CTE / DDL / UPSERT / JSON / 全文検索を Postgres 中心に。

SVG / Web

SVG

座標系、基本図形、path 完全解説、グラデ・フィルタ、テキスト、CSS / JS / SMIL アニメーションまで。

CSS / Animation

animation-timeline

CSS の scroll-driven animations。scroll() / view() / animation-range / 名前付きタイムラインで JS なしのスクロール連動。