Scraps 最終更新 2026/10/02 03:40

#フロントエンド

@BABY JOB 開発部 /

Claude はデザイン実務で使える？デザイナー3人が別々のプロダクトで1ヶ月検証してみた

  • Claudeはデザイン業務で実務的に使えることが実証された
  • Claude Desktopでペルソナ作成やHTMLプロトタイプ作成、Claude DesignでUIたたき台作成が速く、Figmaと比較してデザインと実装のズレが減った
  • Claudeで生成したデザインは微調整や関係者レビューではFigmaに戻る必要があり、プロダクトのコードやデザインシステムの整備がAIの効果を左右する
Claude はデザイン実務で使える？デザイナー3人が別々のプロダクトで1ヶ月検証してみた

@吉川雅彦 /

「ページのトップへ戻るボタン」はなぜ非推奨か

  • 「ページのトップへ戻るボタン」はアクセシビリティやユーザビリティの問題で非推奨
  • スクリーンリーダーに認識されない、動きによる不快感、ターゲットサイズの不足、フォーカスの問題、z-indexの管理が難しい
  • スクリーンリーダー対応でテキストを配置し、アニメーションを制御し、ターゲットサイズを確保する必要がある
「ページのトップへ戻るボタン」はなぜ非推奨か

@いなにわうどん /

TypeScript ライブラリとして動作する組版エンジン minitype を公開しました

  • TypeScriptライブラリとして動作する組版エンジンminitypeを公開
  • npmパッケージとして提供され、Node.js/Bun/Webブラウザで動作、TypeScriptオブジェクトで文書構造を記述可能
  • 組版処理を専用言語に依存せず、汎用プログラミング言語から直接実行できる仕組みが特徴
TypeScript ライブラリとして動作する組版エンジン minitype を公開しました

@kotarou2211 /

通信環境が悪い学園祭でも動く「オフライン単独レジ（POS）」を1枚のHTMLで作った

  • オフライン単独で動作するPOSシステムを1枚のHTMLで実装した
  • HTML/CSS/JSのみで構築、localStorageでデータ保存、スマホ・タブレット対応
  • 通信環境に依存せず、端末内にデータを保持する設計が特徴的で、学園祭などの現場で信頼性が確保できる
通信環境が悪い学園祭でも動く「オフライン単独レジ（POS）」を1枚のHTMLで作った - Qiita

@takahiro_honda /

【個人開発】MLBの試合日程をGoogleカレンダー・Appleカレンダーに自動同期するWebアプリを作りました【React/TypeScript/iCalendar】

  • MLBの試合日程をGoogleカレンダー・Appleカレンダーに自動同期するWebアプリを開発した
  • iCalendarフォーマットでカレンダーを自動更新、Firebase FunctionsでICSファイルを動的に生成
  • カレンダーの自動更新には6時間ごとのリフレッシュ間隔を設定し、URLリライトでFirebase Functionsを呼び出す仕組みを採用
【個人開発】MLBの試合日程をGoogleカレンダー・Appleカレンダーに自動同期するWebアプリを作りました【React/TypeScript/iCalendar】 - Qiita

@OnuuuumaX /

Claude Codeでトライ！④ - Claude CodeとFlutterで麻雀点数計算アプリを作ってみた

  • Flutterで麻雀点数計算アプリをClaude Codeで実装し、画像認識と点数計算ロジックを分離した
  • TFLiteとYOLOモデルで麻雀牌を検出、Flutterで役・符・点数計算ロジックを実装
  • 牌認識の精度に依存せず手動入力で点数計算できるMVPを先に実装する設計が効率的
Claude Codeでトライ！④ - Claude CodeとFlutterで麻雀点数計算アプリを作ってみた - Qiita

@kamogashira /

Kiro５兄弟のいまどきのセキュリティ基礎知識 ― Kiro CLIとDraw.io MCPで信頼境界を描くまで

  • Kiro CLIとDraw.io MCPで信頼境界を描くための調査リポジトリが必要
  • 調査リポジトリに公式ドキュメントとOSSソースのURL、取得日、版、原文引用を蓄積し、論理構成図・物理構成図・シーケンス図を作成
  • 調査リポジトリの確定事実と作図仕様を元にKiro CLIに依頼し、Draw.io MCPで図を作成する際は人間のレビューが必要
Kiro５兄弟のいまどきのセキュリティ基礎知識 ― Kiro CLIとDraw.io MCPで信頼境界を描くまで - Qiita

@yushi-s /

Claude in Chromeでブラウザ操作の検証作業の自動化

  • Claude in ChromeでTodoMVCの主要機能をブラウザ操作で自動検証した
  • クリック・テキスト入力・ダブルクリック・ホバーといった操作を実行し、GIFで録画して結果をレポート
  • レイアウト変化に伴う座標ずれに注意し、スクリーンショットで状態確認が必要な点が実務上の注意点
Claude in Chromeでブラウザ操作の検証作業の自動化

@Knowledge Work Developers Blog /

FDEはスーパーエンジニアの仕事ではない。ナレッジワークがAI×組織力で挑む顧客課題解決の新しい形

  • FDEはエンジニアが顧客の現場に直接出向き、AIエージェントを開発する新しい働き方
  • エンジニアとエージェントストラテジストがチームで顧客の課題解決に取り組み、知見をプロダクトに還元する
  • FDEはチーム戦で取り組むことで、エンジニアのスキルを広げながら顧客の課題に柔軟に対応できる体制を構築している
FDEはスーパーエンジニアの仕事ではない。ナレッジワークがAI×組織力で挑む顧客課題解決の新しい形｜Knowledge Work Developers Blog

@yushibats /

【2026年版】目的別で選ぶ おすすめUIコンポーネントライブラリ12選

  • 2026年版UIコンポーネントライブラリ12選が目的別に紹介された
  • shadcn/uiはCLIでコンポーネントをコピーし、AI対応が◎。Tremorはチャート専用で300以上のブロックを無料提供
  • AIコーディングツールとの相性が開発速度に影響するため、MCP対応状況を確認すべき
【2026年版】目的別で選ぶ おすすめUIコンポーネントライブラリ12選 - Qiita

@kaito /

ローカルでの開発やめませんか？Claude Code / Cursorで開発の8割をクラウドに移した話

  • クラウドエージェントで開発の8割を移行し、ローカル作業を最小限に抑える運用を実施
  • 専用VMで環境を隔離し、コマンド自動実行とUI操作を可能にし、複数リポジトリを1環境で扱える
  • ローカルで行うのはUI調整と計画作成に限定し、他の作業はクラウドで完結させる
ローカルでの開発やめませんか？Claude Code / Cursorで開発の8割をクラウドに移した話

@Urushihara-T /

生成AI（Gemini）使いこなしの技術（序章）

  • Geminiを活用した生成AIの使い方をステップバイステップで解説する連載が開始される
  • AIチャットの基本操作、ペルソナ設定、プロンプト事前設定、コンテンツ生成、データ処理・分析の各テーマが掲載されている
  • 各回のテーマは業務効率化やコンテンツ生成に直結する実践的な内容で、Geminiの機能を活用した具体的な操作が紹介されている
生成AI（Gemini）使いこなしの技術（序章） - Qiita

@今道拓真 /

毎朝8時、AIから「答えの書いていない問題」が届く — 訓練を自動化した仕組み、全部公開します

  • 毎朝のAIトレンド便を自動生成し、問題解決力を鍛える仕組みを公開
  • プロンプト・出題フォーマット・採点表・skillの中身をすべて共有、実際のコードと照合して採点
  • 実際の差分と照合して辛口で採点し、できていた点を具体的に名指すことが重要
毎朝8時、AIから「答えの書いていない問題」が届く — 訓練を自動化した仕組み、全部公開します