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

#フロントエンド

@nogataka /

AI時代だからこそ、ソフトウェア開発の体系的な理解が必要になる。「動くコード」と「正しいソフトウェア」を分ける7つの観点

  • AI時代でもソフトウェア開発の体系的な理解が不可欠
  • 要件定義・データモデル・アプリケーション設計・セキュリティ・テスト・インフラストラクチャの7つの観点が重要
  • コードの背後にある原理や設計判断を理解しないと、AI生成コードの信頼性や保守性が保証できない
AI時代だからこそ、ソフトウェア開発の体系的な理解が必要になる。「動くコード」と「正しいソフトウェア」を分ける7つの観点 - Qiita

@sikeda107 /

Next.js Server Actions を Storybook でスマートにモックする方法

  • Next.js Server ActionsをStorybookでモックするためのツールが公開された
  • @akfm/vite-plugin-storybook-mock-server-functionsとsb.mock()によるモック手法が比較されている
  • Storybookのpreview.tsにモックを登録する必要があるが、ツールを使うとストーリーごとに直接設定できるようになる
Next.js Server Actions を Storybook でスマートにモックする方法

@nogataka /

備忘録：Next.jsのServer ActionsをRSC・React 19から理解する。SSR・Hydration・再描画との関係を1本の流れに整理する

  • Next.js App RouterでServer ActionsとRSCを組み合わせたUI更新フローを解説
  • RSC Payload生成・Client ComponentのHydration・Server ActionによるDB更新・revalidatePathによるキャッシュ再検証
  • Server ActionはDB更新後に再検証処理を明示的に記述する必要があり、Client Componentに渡すPropsはシリアライズ可能な値に限られる
備忘録：Next.jsのServer ActionsをRSC・React 19から理解する。SSR・Hydration・再描画との関係を1本の流れに整理する - Qiita

@nogataka /

備忘録：Next.js App RouterでServer Actions方式とAPI方式をどう使い分けるか。判断基準と選定フローを整理する

  • Next.js App RouterでServer ActionsとAPI方式の使い分けを判断基準と選定フローで整理した
  • Server Actionsはフォームactionで関数呼び出し、API方式はfetchでHTTPリクエスト、外部システム利用やWebhook対応に適する
  • 外部から呼び出されるか、Webhookやファイル処理が必要かで選択し、Service層を共通化するべきである
備忘録：Next.js App RouterでServer Actions方式とAPI方式をどう使い分けるか。判断基準と選定フローを整理する - Qiita

@nogataka /

備忘録：今さらNext.jsの全体像を整理する。App Router・RSC・Server Actions・キャッシュがどう噛み合うのか（Next.js 16 / React 19）

  • Next.js 16ではApp Router、Server Components、Server Actions、キャッシュが連携してWebアプリケーションを構築する
  • Server Componentsでデータ取得、Client Componentsでブラウザ状態管理、Server Actionsでデータ更新、キャッシュ機構でデータ再検証
  • Server ActionsとRoute Handlersは用途が異なるため、画面専用処理とHTTPインターフェースで使い分けること
備忘録：今さらNext.jsの全体像を整理する。App Router・RSC・Server Actions・キャッシュがどう噛み合うのか（Next.js 16 / React 19） - Qiita

@Tokoyami Saku｜常闇 朔 /

プログラミング知識ゼロの俺が、AIゲーム制作ツール『Combos』でホラーゲームを作ってみた

  • AIゲーム制作ツール『Combos』でホラーゲームを作成した体験が紹介されている
  • プロンプトでキャラクター生成とマップ構築をAIに任せ、2Dでの実装に切り替えた
  • プロンプトの解釈精度が高くないため、修正作業が頻繁に必要で時間かかる
プログラミング知識ゼロの俺が、AIゲーム制作ツール『Combos』でホラーゲームを作ってみた｜Tokoyami Saku｜常闇 朔

@uhyo /

React 19.3 browser() APIの使いみち～FUNSTACK Routerの場合～

  • React 19.3のbrowser() APIをFUNSTACK Routerで利用してpathless SSRのOutlet挙動を改善した
  • browser()はSSR時にサスペンドを強制し、SuspenseのフォールバックUIを表示する。OutletをSuspenseで囲む必要がある
  • SSR時にOutletの中身が決定できない場合、SuspenseのフォールバックUIを表示することでハイドレーションミスマッチを防げる
React 19.3 browser() APIの使いみち～FUNSTACK Routerの場合～

@Hatachi /

「なぜ画面とロジックを分けるの？」実務1ヶ月目のエンジニアが理解したMVVMのメリットと役割分担

  • MVVMパターンで画面とロジックを分離することでメンテナンス性が向上する
  • データバインディングで画面更新を自動化、ロジックをViewModelに集約
  • Viewにロジックを書くと仕様変更時の修正範囲が広がるため、ViewModelに処理を移すことが推奨される
「なぜ画面とロジックを分けるの？」実務1ヶ月目のエンジニアが理解したMVVMのメリットと役割分担 - Qiita

@kasumi_sato /

【JavaScript】HTML5 Canvas API応用編！画像処理・アニメーション・インタラクションまで徹底解説

  • Canvas APIで画像処理・アニメーション・インタラクションを実装する方法が解説されている
  • 画像の読み込みと描画、ピクセルデータの操作、requestAnimationFrameを使ったアニメーション、マウス・キーボードイベントの処理
  • 画像の読み込みはonloadでタイミングを制御し、ピクセル操作はgetImageDataとputImageDataを使うことで画像加工が可能になる
【JavaScript】HTML5 Canvas API応用編！画像処理・アニメーション・インタラクションまで徹底解説 - Qiita

@OnuuuumaX /

【Godot 4.x】2D脱出ゲームを作ってみる⑬〜アイテムの使用とエンディング演出を実装する〜

  • 暖炉の点火状態に連動した背景切り替えと金庫ギミックを実装
  • Global.FIRE_LITフラグを参照した背景差し替え、時計ギミックの角度計算と額縁ギミックの配列比較を組み合わせたダイヤル錠処理
  • シーン遷移時の入力ブロックと白フラッシュ演出でシーン切り替えのカクつきを隠す実装を確認する
【Godot 4.x】2D脱出ゲームを作ってみる⑬〜アイテムの使用とエンディング演出を実装する〜 - Qiita

@Toyo_m /

最近話題の「AI時代の開発者5つのアーキタイプ」について考える

  • AI時代のエンジニアは5つのアーキタイプに分類される
  • プロトタイパー、ビルダー、スイーパー、グロワー、メンテナーの役割が提示され、それぞれの特徴と課題が説明されている
  • 各アーキタイプの役割はプロジェクトの状態に応じて変化し、チームの能力ポートフォリオを診断するフレームワークとして活用すべきである
最近話題の「AI時代の開発者5つのアーキタイプ」について考える - Qiita

@やすだ.dev@毎日投稿 /

【新機能】Claude Codeに `/design` が来た──「作ってから直す」が「並べて選んでから作る」に変わります

  • Claude CodeにUIデザイン案生成機能の/ designコマンドが追加された
  • 既存コードベースを読みUIスタイルに合わせた3方向のUI案を生成し、キャンバス上で編集可能
  • 実装前に複数案を比較できるが、手動保存が必要でリサーチプレビューのため仕様変更の可能性あり
【新機能】Claude Codeに `/design` が来た──「作ってから直す」が「並べて選んでから作る」に変わります｜やすだ.dev@毎日投稿

@y_abe_bc /

Genkit Dartでゲーム用のAI会話システムを作る

  • Genkit DartでFlameを使ったゲーム風のAI会話システムを実装可能
  • サーバーはステートレスで会話履歴をクライアントに保持、Genkitのstructured outputでセリフと選択肢を同時に生成
  • クライアントに状態を保持する設計はセキュリティリスクがあるため、本番環境ではサーバーに状態を保存する必要がある
Genkit Dartでゲーム用のAI会話システムを作る - Qiita

@FLUX /

AIスライド作成、新時代へ ― AIで作ったスライドを、高精度で“編集できるPPTX”に変換する方法

  • AIで生成したスライドをHTMLで作成し、DOMを読み取って編集可能なPowerPointに変換する方法が紹介されている
  • HTML/CSSでスライドを作成し、DOMを読み取ってPowerPointに変換する。画像ではなく図形とテキストで再現
  • 変換後のスライドはすべて編集可能で、ブランドに合わせたカスタマイズが可能
AIスライド作成、新時代へ ― AIで作ったスライドを、高精度で“編集できるPPTX”に変換する方法