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のMDXにMermaidダイアグラムを追加する
Next.js 15のMDXを使用したブログにMermaidダイアグラムを追加する実装方法を、既存のシンタックスハイライターとのコンフリクト回避、ライトモード・ダークモードへのテーマ対応、フローチャート・シーケンス図・クラス図・ガントチャートなど多様なダイアグラムの描画方法とともにまとめた記事です。
- フロントエンド
Figma MCP機能概要 - コード生成の仕組みと実際のレスポンス
Figma MCPサーバーの主要機能とツール概要を紹介。デザインからのコード生成の仕組み、実際のレスポンス形式を実例とともに解説します。
- AI
- 開発ツール
- フロントエンド
Figma REST APIで画像アセットを自動書き出し
Files endpointでExport設定を探索し、Images endpointで画像URLを取得。Node.jsスクリプトによる画像アセット自動書き出しの実装方法を紹介します。
- 開発ツール
- フロントエンド
Figma REST APIの認証とセットアップ
Figma REST APIの基本を学びます。Personal Access Tokenの取得、環境変数設定、curlコマンドでの動作確認を通じて、APIのセットアップを進めます。
- 開発ツール
- フロントエンド
MDXのシンタックスハイライト：react-syntax-highlighterからShikiへの移行
MDXのシンタックスハイライトをShikiに移行した際の記録。React Server Componentによるクライアントバンドル0KB化、CSS変数のみでのテーマ切り替え、VS Code品質のハイライト実現など、パフォーマンス最適化の実践的手法を説明します。
- フロントエンド
GitHub Copilot Agent Skillsを活用したタスクの自動化
GitHub CopilotのAgent Skillsを活用して、プロジェクト固有の作業手順をスキルとして定義し、必要な時に自動的にロードさせる方法を実践例とともに解説します。
- AI
- 開発ツール
- ディレクション
Instruction files / Prompt filesで実現するGitHub Copilot Chatの階層的コンテキスト管理
Instruction filesとPrompt filesを活用した階層的なルール管理手法を解説。プロジェクト全体の基本方針からファイル種別ごとの詳細規約、定型作業の自動化まで、3種類の設定ファイルを組み合わせて一貫性のある開発環境を構築する方法を紹介します。
- AI
- 開発ツール
- ディレクション
クライアントサイド画像生成のフォントライセンスと法的リスク対策
DOM画像化ライブラリ（html2canvas、dom-to-image等）使用時のフォントライセンス問題を解説。Google Fonts等の安全なライセンス選定から、ベクター埋め込み・Webフォント規約・SNS拡散等の具体的リスクまで、法的観点から実装時の注意点を詳しく説明します。
- ディレクション
- フロントエンド
WebサイトにおけるAIクローラーへの学習対策と意思表示
AI学習クローラーへの対応として、現状で考えうる技術的制御（メタタグ・robots.txt・llms.txt・HTTPヘッダー）と法的整備（利用規約）を組み合わせたアプローチを紹介します。
- ディレクション
- SEO