最新のブログ記事
GitHub Codespacesでnpmからpnpmへ移行する
GitHub Codespacesでnpmからpnpmへパッケージマネージャを移行するための、devcontainer.json設定、Corepackによる自動セットアップ、依存関係の再インストール手順です。
- 開発ツール
DevContainerの基礎知識：開発環境をコードで定義する
DevContainerの基本概念、devcontainer.jsonの設定方法、ローカル環境とクラウド環境での使い方を紹介します。
- 開発ツール
GitHub Copilotの全体像：人間中心のAI活用を実現する設計思想
GitHub Copilotの各サービスは、人間が主体でAIが補助するという明確な設計思想に基づいています。IDE、Web、エージェント機能それぞれの目的と、人間中心のワークフロー設計への活用方法を紹介します。
- AI
- 開発ツール
- ディレクション
Next.js App RouterのMDXにMermaidダイアグラムを統合する実装方法
Next.js 15のApp RouterとMDXを使用したブログにMermaidダイアグラムを統合する実装方法を、既存のシンタックスハイライターとのコンフリクト回避、ライトモード・ダークモードへのテーマ対応、フローチャート・シーケンス図・クラス図・ガントチャートなど多様なダイアグラムの描画方法とともに解説します。
- フロントエンド
Figma MCP機能概要 - コード生成の仕組みと実際のレスポンス
Figma MCPサーバーの主要機能とツール概要を紹介。デザインからのコード生成の仕組み、実際のレスポンス形式を実例とともに解説します。
- AI
- 開発ツール
- フロントエンド
Figma REST APIで画像アセットを自動書き出し
Files endpointでExport設定を探索し、Images endpointで画像URLを取得。Node.jsスクリプトによる画像アセット自動書き出しの実装方法を紹介します。
- 開発ツール
- フロントエンド
シリーズ
DOM画像化
snapDOMを活用したDOMの画像変換に関する記事シリーズ。
GitHub Copilot コンテキスト管理
GitHub Copilotの効果を最大化するためのカスタムインストラクション設定ガイドシリーズ。
GitHub Copilot ワークフロー活用
GitHub Copilotの設計思想から各機能（coding agent、code review）の活用方法まで、人間中心のAI活用ワークフローを構築するための実践ガイドシリーズ。
Figma REST API入門
Figma REST APIの認証から画像アセット自動書き出しまで、基礎から実践的な活用方法を学ぶシリーズ。
Figma MCP入門
Figma MCPサーバーの基本セットアップから機能の使い方まで、実際に試しながらAIとデザインの連携を学ぶシリーズ。
GitHub Codespaces 活用ガイド
GitHub CodespacesとDevContainerを活用した開発環境構築の基本から、パッケージマネージャ移行などの実践的な設定まで学ぶシリーズ。