Scraps 最終更新 2026/10/01 23:40

#フロントエンド

@Seunghyun Cho /

React Compiler を Babel なしで入れて、useMemo を書くか迷うのをやめた

  • React Compiler を Babel なしで導入し、手動メモ化を減らす方法を実装した
  • Oxc による React Compiler 実装と TanStack Table v9 への移行、lint で手動メモ化を禁止するルール
  • AI 生成コードのメモ化判断を減らすため、手動メモ化を原則禁止し lint で機械的に検出する
React Compiler を Babel なしで入れて、useMemo を書くか迷うのをやめた

@カミナシ エンジニアブログ /

フロントエンドなんてバイブコーディングで良いこの時代に、私は

  • フロントエンドの設計とUX改善がAI時代でも重要
  • Nani翻訳の非ブロッキング処理、Linearの同期エンジン、楽観的更新のロールバック設計
  • 体験改善にはデータモデルやアーキテクチャの前提を変える設計が必要で、フロントエンドの都合から出発する発想が重要
フロントエンドなんてバイブコーディングで良いこの時代に、私は - カミナシ エンジニアブログ

@ryo-a /

ARG（代替現実ゲーム）と「ソースの閲覧」

  • Webサイトのソースコード閲覧を前提としたARGゲームデザインの手法が紹介されている
  • フロントエンドとバックエンドの処理分離、正誤判定をバックエンドで行う設計、通信データの情報漏洩防止
  • フロントエンドのソースを閲覧されてもギミックが破綻しないようにバックエンドで処理を分離する必要がある
ARG（代替現実ゲーム）と「ソースの閲覧」

@tofu_frontend /

:has()で不要になったJavaScript 10選

  • :has()で不要になったJavaScriptの10個のケースが紹介されている
  • :user-invalidで入力状態の判定、:has(img)で画像の有無のレイアウト変更、:has(input:checked)でチェックボックスのスタイル変更
  • :has()の特異度が高くなるので、意図しない上書きを防ぐために:where()を使うべき
:has()で不要になったJavaScript 10選 - Qiita

@TeamHayes /

日本語が読めなくても自動運転AIチャレンジに参加できるように: ドキュメントとツールを英語対応した話

  • 日本語が読めないチームが自動運転AIチャレンジに参加するため、ドキュメントとツールを英語対応した
  • 日本語のみの11ページ以上を英語に翻訳、ツールメッセージに日本語と英語を併記、画像に代替テキストを追加
  • 翻訳では意味を変えずコマンドや数値をそのまま保持し、ビルド警告を増やさない工夫がされている
日本語が読めなくても自動運転AIチャレンジに参加できるように: ドキュメントとツールを英語対応した話 - Qiita

@comelsatom /

【GAS × LINE × Gemini】遠く離れて暮らす母のために、お薬飲んだよbotを作った話（401エラーとの闘いを超えて）

  • LINE Messaging APIとGASで遠方の母親向けの薬の飲み忘れ防止システムを構築した
  • LINEのリッチメニューとGASのWebhookで自動リマインドを実装、Gemini APIで脳トレクイズを生成
  • LINEの401エラー対策として検証ボタンのリプライトークンをチェックする処理を追加した
【GAS × LINE × Gemini】遠く離れて暮らす母のために、お薬飲んだよbotを作った話（401エラーとの闘いを超えて） - Qiita

@Nkzn /

クロスプラットフォーム開発が解決するコスト、解決しないコスト

  • クロスプラットフォーム開発は実装コストを減らすが、同期コストや品質保証コストは依然として発生する
  • コード共有で実装コストを減らすが、iOSとAndroidの仕様同期やテストコストは残る、React Nativeとネイティブの境界コストも発生
  • 技術選定ではコスト構造の変化を考慮し、自分たちの組織に合った選択が必要
クロスプラットフォーム開発が解決するコスト、解決しないコスト

@wfukatsu /

AIと帳票デザイナを作った25日（5）プレビューとPDFが一致しない

  • プレビューとPDFの不一致を解決するための40件以上のIssueを処理した
  • 無警告で空になる要素タイプの対応、テスト基盤の強化、フォントの不一致修正、1.4mmのズレの修正
  • Issueを1つずつ切り出して処理し、テスト基盤を先に整備することで効率的に問題を解決した
AIと帳票デザイナを作った25日（5）プレビューとPDFが一致しない

@nagi-0106 /

Reactの「コンポーネント」とCMSの「モジュール」は何が違うの？

  • ReactコンポーネントとCMSモジュールは再利用目的は同じだが設計思想が異なる
  • コンポーネントは機能分割で粒度が細かく、モジュールはテンプレート断片で粒度が粗い。データ受け渡しはpropsと変数の違いがある
  • CMSモジュールはテンプレート内変数で暗黙的にデータを受け取るが、Reactはpropsで明示的に渡す必要がある
Reactの「コンポーネント」とCMSの「モジュール」は何が違うの？ - Qiita

@kei /

A第9話 Obsidian × Local LLM Hub「設計図こそ最強の武器！アプリをプランニングしよう」／【AI入門小説】猪突猛進系！新人OL？がローカルLLMを学んだら

  • ObsidianとLocal LLM Hubを活用してアプリの設計図を作成する方法が紹介された
  • 二重括弧リンクでアイデアをつなぎ、グラフビューで視覚化し、Local LLM Hubでメモを仕様書に変換する
  • 設計図をしっかり作ることで、AIの答えが多少ブレても正しいルートに戻れる
A第9話 Obsidian × Local LLM Hub「設計図こそ最強の武器！アプリをプランニングしよう」／【AI入門小説】猪突猛進系！新人OL？がローカルLLMを学んだら｜kei

@NAVYSHUNTA /

本学で開催されたカンファレンスに参加した感想 (Frontend Conference Fukuoka 2026)

  • Frontend Conference Fukuoka 2026でフロントエンド技術の歴史やテスト手法、AIフレームワークの話が紹介された
  • JavaScriptの高速化技術やHonoフレームワークのAI対応、Integration Testの実装難易度の特徴が挙げられた
  • テストを書く際には実装と仕様の複雑さが大きな障壁になることが分かった
本学で開催されたカンファレンスに参加した感想 (Frontend Conference Fukuoka 2026) - Qiita

@yama3133 /

(ハンズオン)nx-plugin-for-awsで積読管理アプリを作ってAWSにデプロイしてみよう

  • Nx Plugin for AWSで積読管理アプリを作り、AWSにデプロイする手順を実践
  • tRPC APIとReactサイトの追加、Cognitoによるログイン機能、DynamoDBテーブルの作成と接続、インフラプロジェクトの構築
  • Cognitoのユーザープールを削除する際は削除保護を外す手順が必要で、手動で確認作業が必要
(ハンズオン)nx-plugin-for-awsで積読管理アプリを作ってAWSにデプロイしてみよう - Qiita

@kanryu /

うっかり世界最強のWasmコンパイラに並行処理（マルチスレッド）を載せたら、なぜか1.46KBまで縮んだ件

  • WASMマルチスレッドを1.46KBで実現する新しいアーキテクチャが公開された
  • ホスト主導のメモリハンドシェイクとruntime.jsの統合、Goライクな並行構文が特徴
  • ブラウザのセキュリティヘッダーを設定しないと共有メモリが使えない
うっかり世界最強のWasmコンパイラに並行処理（マルチスレッド）を載せたら、なぜか1.46KBまで縮んだ件 - Qiita

@TAKA0917 /

60歳から個人開発。AIに助けてもらいながら、Flutterでダンスアプリを作ってApp Storeに公開した話

  • 60歳の個人開発者がFlutterでダンスアプリを開発しApp Storeに公開した
  • FlutterでiOSとAndroidの両方を対応、AIにコードを相談しながら開発、動画処理を端末内で行う設計
  • AIに相談しながらコードを書くスタイルが開発に役立ち、エラーが発生しても調べて対応した
60歳から個人開発。AIに助けてもらいながら、Flutterでダンスアプリを作ってApp Storeに公開した話 - Qiita