技術記事、プロジェクト、そして日々の個人的な学びを記録しています

最新のブログ記事

Figma MCP機能概要 - コード生成の仕組みと実際のレスポンス

Figma MCP機能概要 - コード生成の仕組みと実際のレスポンス

Figma MCPサーバーの主要機能とツール概要を紹介。デザインからのコード生成の仕組み、実際のレスポンス形式を実例とともに解説します。

  • AI
  • 開発ツール
  • フロントエンド
Figma REST APIで画像アセットを自動書き出し

Figma REST APIで画像アセットを自動書き出し

Files endpointでExport設定を探索し、Images endpointで画像URLを取得。Node.jsスクリプトによる画像アセット自動書き出しの実装方法を紹介します。

  • 開発ツール
  • フロントエンド
Figma REST APIの認証とセットアップ

Figma REST APIの認証とセットアップ

Figma REST APIの基本を学びます。Personal Access Tokenの取得、環境変数設定、curlコマンドでの動作確認を通じて、APIのセットアップを進めます。

  • 開発ツール
  • フロントエンド
MDXのシンタックスハイライト:react-syntax-highlighterからShikiへの移行

MDXのシンタックスハイライト:react-syntax-highlighterからShikiへの移行

MDXのシンタックスハイライトをShikiに移行した際の記録。React Server Componentによるクライアントバンドル0KB化、CSS変数のみでのテーマ切り替え、VSCode品質のハイライト実現など、パフォーマンス最適化の実践的手法を解説します。

  • フロントエンド
GitHub Copilot Agent Skillsを活用したタスクの自動化

GitHub Copilot Agent Skillsを活用したタスクの自動化

GitHub CopilotのAgent Skillsを活用して、プロジェクト固有の作業手順をスキルとして定義し、必要な時に自動的にロードさせる方法を実践例とともに解説します。

  • AI
  • 開発ツール
  • ディレクション
Instruction files / Prompt filesで実現するGitHub Copilot Chatの階層的コンテキスト管理

Instruction files / Prompt filesで実現するGitHub Copilot Chatの階層的コンテキスト管理

Instruction filesとPrompt filesを活用した階層的なルール管理手法を解説。プロジェクト全体の基本方針からファイル種別ごとの詳細規約、定型作業の自動化まで、3種類の設定ファイルを組み合わせて一貫性のある開発環境を構築する方法を紹介します。

  • AI
  • 開発ツール
  • ディレクション

シリーズ