2025/02/28(金) JSConf.jp おかわり Node学園46時限目
The Clean ArchitectureがWebフロントエンドでしっくりこないのは何故か / Why The Clean Architecture does not fit with Web Frontend
2025/02/28(金) JSConf.jp おかわり Node学園46時限目
エンジニアのためのコミュニケーションベストプラクティス
ダイニーの urahiroshi です。 自分は前職のメルカリ、現職のダイニーで計3年くらい Engineering Manager を務めてきましたが、Engineering Manager の本質的な役割は「チームや組織のパフォーマンスを最大化すること」だと考えています。そのためには、チーム開発におけるメンバー間のスムーズなコミュニケーションが不可欠です。 これまでコミュニケーションに関するフィードバックを行ってきた中で、よく見られる改善点がいくつかあったため、それらをベストプラクティスとしてまとめてみました（それぞれのセクションで一つずつ本が書けるくらい多数のプラクティスが挙げられるテーマだと思いますが、特に頻出するポイントに絞っています）。皆さんのチーム開発にも役立てていただければ嬉しいです！ レビューをするときのプラクティス 指摘にはWhyを書き、Howを押し付けない ❌️ Ba
タイトル通りです。 誰でも投稿できるのでオススメの提供お待ちしてます！ フォーマットは自由です、1投稿でいっぱい紹介してくれてもいいです AIツールやデザインツールとかも気になる！！ ターミナル設定とかも気になる！！ Figmaのおすすめプラグインも気になるな〜！ 2022年にやった過去のスクラップ
こんにちは、しば田です！ この記事では自分がProject Rulesをどのように運用しているかを書いていきます。 設定ではなく運用という表現が近いです。 注意事項 以下に語る運用が正解かは分からないです。1つの参考程度にお読みください。 Cursorのアップデートでこの記事は一瞬で陳腐化する可能性があります。ご了承ください。 TL;DR まずは結論から。現時点での僕の考えるベスプラは以下です。 日々アップデートして育てる 育てやすい構成にしておく 複数のmdファイルの中身を結合するスクリプトを作ってmdcファイルを生成する mdcファイルの参照ルール（Auto Attach、Description、alwaysApply）には落とし穴があるので気をつける この運用のメリット エージェントのパフォーマンスが地道に改善されていく チームで共有できるようになる 自分の運用のサンプルを以下に置い
はじめに こんにちは。Game Platform DevのDong Hun Ryoo、Takenaka、Zhang Youlu（Michael）、Hyungjung Leeです。私たちの組織は、ゲームパブリッシングに必要なさまざまな機能を開発・運用する役割を担っています。 私たちは最近、組織内の業務効率を高めるためにさまざまなLLM（large language model）アプリケーションを開発し、それと連携してLLMOpsシステムの構築プロジェクトを行いました。プロジェクトの主な目標の一つは、参入障壁が高いLLMアプリケーション開発を、職種に関係なく誰でも簡単に作成できる環境を構築することでした。そのため、さまざまなことを考えながら試行錯誤を経た結果、誰でも簡単にアクセスできる開発・デプロイ環境を整えました。 今回の記事では、LLMアプリケーションの一般的な開発方法と開発プロセスで直面
The DuckDB Local UI
The DuckDB project was built to make it simple to leverage modern database technology. DuckDB can be used from many popular languages and runs on a wide variety of platforms. The included Command Line Interface (CLI) provides a convenient way to interactively run SQL queries from a terminal window, and several third-party tools offer more sophisticated UIs. The DuckDB CLI provides advanced feature
SSRで認証をどうするべきか？
既存プロジェクトにNext.js等のSSRを導入する場合は既存の認証機能を維持したり活かしたりする必要があります。しかしSSRの認証とCSR(SPA)の認証は同じではなく、簡単に共有できるものではありません。 ここでは複数のテックブログの事例を見ながら、この難しさと本物のウェブサービスで採用された解決策を見ていきます。 CSRとSSRの認証の違い まず最初に、CSR(SPA)とSSR[1]の認証の違いをざっくり紹介します。技術的制約を理解していただくことが目的です。 クライアント視点では、認証システムは突き詰めると、トークン(鍵)[2]を安全に保管し、必要時にサーバに渡す(鍵穴に差し込む) ことです。この２つに絞って解説します。[3] https://www.flaticon.com/free-icons/vault (by IYIKON) https://www.flaticon.com
【Gemini】GPU不要！超軽量TTSとLLMを使ったチャットWebサービスの構築 ～ UTAU収録音声を用いたTTS ～
はじめに エイプリルフールネタとして、「蒼月ハヤテ」という歌声合成音声ツール用の素材キャラクターを作りました。 その際に配布サイトも自作したのですが、折角キャラクターと歌声生成用の自分の声データがあったので、それらを組み合わせてLLM=>TTS(text-to-speech)を繋げたら、まるで自分のクローンが喋っているようになると思ったので、隠し機能としてTTSでのお試しと会話機能をWebに展開しました。 今回は備忘も込めて、各種技術の紹介をしようと思います。 できあがりイメージ ざっくり使用技術 Typescript arwes (frontend design) Next.js Gemini API (LLM) tone.js (sound) render.com (deploy) upstash (security) 要件の整理と技術選定 元々は「UTAU」という合成音声用の素材配布
1. Computer use「Computer use」は、「CUA」(Computer-Using Agent)の実用的な応用であり、「GPT-4o」の視覚機能と高度な推論を組み合わせて、コンピューターインターフェースの操作やタスクの実行をシミュレートします。 2. Computer use のしくみ「Computer use」は、連続ループで動作します。このツールは click(x, y) や type(text) のようなコンピュータ操作を送信し、ユーザーのコードがそれをコンピュータやブラウザ環境で実行します。その後、結果のスクリーンショットがモデルに返されます。 このしくみにより、ユーザーのコードは人間がコンピュータインターフェースを操作する動作をシミュレートし、モデルはスクリーンショットを分析して環境の状態を理解し、次のアクションを提案します。 このループを活用することで、クリ
こんにちは。LayerX AI・LLM事業部 SREのshinyorke（しんよーく）と申します。 現在はAI・LLM事業部のAIプラットフォーム「Ai Workforce」1人目のSREとして、 SRE（Site Reliability Engineering）の戦略策定と導入、実装。 企業への導入に際する技術的なサポート・伴走。 SREチーム立ち上げの為の組織作り。より具体的にはSREの採用と育成。 以上のミッションを担っています、入社から現在までの営みはこちらのブログで紹介しています。 tech.layerx.co.jp 一人目SREとして情報とノウハウを泥臭く取りに行きながら、さっさと行動して少しずつSREのプラクティスを浸透させましょう。というスタンスで泥臭く、時にはパワフルにやってきた話を前回のブログでは紹介させてもらいました。私達の行動指針的には「Trustful Team」
re-why-the-clean-architecture-does-not-fit-with-web-frontend.md
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Railsを快適に開発するための最新フロントエンドツールキット（翻訳）｜TechRacho by BPS株式会社
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: Keeping Rails cool: the modern frontend toolkit—Martian Chronicles, Evil Martians’ team blog 原文公開日: 2024/12/10 原著者: Irina Nazarova（CEO）、Travis Turner（技術編集者） サイト: Evil Martians -- ニューヨークやロシアを中心に拠点を構えるRuby on Rails開発会社です。良質のブログ記事を多数公開し、多くのgemのスポンサーでもあります。 日本語ブログ: 合同会社イービルマーシャンズ - Qiita はじめに Evil Martiansは、Railsでのスタートアップ支援や構築を行っており、RubyとRailsがチームの生産性と競争力の強化につながることも熟知してい
In the beginning (that is, the 90’s), developers created the three-tier application. Per Martin Fowler, these tiers were the data source tier, managing persistent data, the domain tier, implementing the application’s primary business logic, and the presentation tier, handling the interaction between the user and the software. The motivation for this separation is as relevant today as it was then:
Ruby on Rails の View に React 製社内デザインシステムを導入した話（freeeサイン） - freee Developers Hub
はじめに by @solt9029 freeeサインの開発に携わっているソフトウェアエンジニアの塩出（@solt9029）です。 freeeのプロダクトには、freee会計やfreee人事労務をはじめとし、非常に多くのものが存在します。このような状況下で、各プロダクトがそれぞれ独自のデザインを採用してしまうと、プロダクト間で似たような操作に微妙に異なるデザインや体験が採用されてしまい、ユーザーの認知・学習コストが不必要に増加してしまいます。 そこで、ユーザーがプロダクト間で類似する操作や体験が統一的に行えるように、社内では「vibes」や「標準UI」といったデザインシステムが開発されてきました（vibesや標準UIの導入背景や詳細などについては、デザインシステム “Vibes” の育てかたやデザインシステムを拡張し、プロダクト開発の共通基盤を目指すをご参照ください）。 freeeのプロダク
はてなブックマークのブックマーク数が多い順に記事を紹介する「はてなブックマーク数ランキング」。3月3日（月）～3月9日（日）〔2025年3月第2週〕のトップ30です*1。 順位 タイトル 1位 人類はもう生成AIに勝てないと痛感したDeep Researchの使い方 #ChatGPT - Qiita 2位 退職代行業者撃退マニュアル 3位 エンジニアってなんか性格悪い人多くね？ 4位 リュウジさん「金沢駅近辺でここいっとけって美味しいお店教えてください」→おでん、すし、ラーメンなど、みなさんおすすめの金沢グルメが集結 美味しそうな料理の写真も盛りだくさん - Togetter [トゥギャッター] 5位 おすすめの音楽サイトを延々と紹介していく記事 | 仁義なき音楽巡り 6位 １０億円かけた虐待判定ＡＩ、こども家庭庁が導入見送り…ミス６割で「実用化困難」 : 読売新聞 7位 クレカの表現規制
技術選定を未来に繋いで活用していく | ドクセル
技術選定を未来に繋いで 活用していく sakito / @__sakito__ 実例！フロントエンドの技術選定とその後を ADRから振り返る 2025.03.26 1 使用フォントについて 自己紹介 • Sakito • X: @__sakito__ • BlueSky: @sakito.bsky.social • 所属: サイボウズ株式会社 • kintone 開発 • プロダクトデザインマネージャー • Webフロントエンドエンジニアマネージャー • 週4勤務 • 週1は復業 技術選定を未来に繋いで活用していく 2
ADRで意思決定し、そのADRを破棄して新しくADRを作成する実例を紹介します - GraphQLクライアントのキャッシュアルゴリズム変更編 - ROUTE06 Tech Blog
ROUTE06 でソフトウェアエンジニアをしている @MH4GF です。2025/03/26 に、Findy Tools さん主催の「実例！フロントエンドの技術選定とその後を ADR から振り返る」というイベントで登壇します。 発表タイトルは「チームの性質によって変わる ADR との向き合い方と、生成 AI 時代のこれから」の予定です。サイボウズ株式会社の @sakito さん、ファインディ株式会社の @puku0x さんとパネルディスカッションも行います。オンラインのイベントなので、ぜひお気軽にご参加ください！ findy-tools.connpass.com 発表に先立ち、私が関わったプロジェクトで運用していた Architecture Decision Record(ADR) のマークダウンファイルをできるだけそのままの形で公開します。 私は ADR を「意思決定をアップデートするた
The Unix shell is over 50 years old, but it still defines how programmers use their computers. We type a few words in a terminal, and milliseconds later an ephemeral factory comes online: the Unix pipeline. Data streams through a network of simple programs working concurrently, like robots on the factory floor, executing a computational choreography we composed seconds ago. Its job done, the facto
フロントエンド、というよりUI一般では、ユーザーの操作に対してまったく無反応なのは良くありません。ユーザーが意味のある操作をしたならば、何らかのフィードバックを返すべきです。 例えば、何かをユーザーのクリップボードにコピーするボタンというのはありがちですが、クリップボードに何かを書き込んでもそれだけだと目に見える変化がないので、追加で「コピーしました」のような通知を出すというのはよくあるパターンです。 ここでは、そのような通知が、ちょっとフェードインしながら表示され、一定時間後にフェードアウトしながら消えていくという要件を想定することにしましょう。 transitionを使う基本的な実装 まずはReactの部分をざっくりお見せします。 import { useState } from "react"; import "./styles.css"; export default functi
Move from idea to production using GenAI and Operations (GenAIOps) OverviewThe world of Generative AI (GenAI) is buzzing with excitement and potential, but harnessing this transformative technology requires more than just powerful models. It demands a deep understanding of operational strategies, best practices, and the evolving landscape of GenAI and Operations (GenAIOps). This blog post offers a
Xee: A Modern XPath and XSLT Engine in Rust By Martijn Faassen • 2025-03-27 • Tags: xml, rust, xpath, lxml For the last two years I've been working on a programming language implementation in Rust named Xee. Xee stands for "XML Execution Engine" and it supports modern versions of XPath and XSLT. Those are programming languages, and yes, that's XML stuff. Now hold on. Your brain might shut down whe
agent loop )@᪪ �7vપ You are Manus, an AI agent created by the Manus team. You excel at the following tasks: 1. Information gathering, fact-checking, and documentation 2. Data processing, analysis, and visualization 3. Writing multi-chapter articles and in-depth research reports 4. Creating websites, applications, and tools 5. Using programming to solve various problems beyond development 6. Variou
The State of Vue.js Report 2025 | Co-created with Vue & Nuxt Core Teams
From its humble beginnings as a promising project to its position as one of the most popular frontend frameworks, Vue.js has undergone a remarkable transformation. Monterail has actively participated in this evolution—learning, contributing, and evolving alongside the framework. From first discovering Vue in 2015 to becoming official Vue & Nuxt Partners, the State of Vue.js Report 2025 marks our d
Ubie で副業として Backend For Frontend (BFF) サーバーの開発を担当している nissy-dev です。 今回は、モジュラモノリスアーキテクチャにおける Prisma を利用した DB アクセスの課題と、その課題に対処するために作成した lint ルールについて詳しく解説します。 NestJS と Prisma で作るモジュラモノリス ユビーでは、BFF の GraphQL サーバーを実装する際に、NestJS を利用したモジュラモノリスを採用しています。この BFF サーバーは、マイクロサービスを呼び出すだけではなく、Prisma を使用したデータベースへのアクセスも行います。 モジュラモノリスの設計において、モジュール間の独立性の確保は非常に重要です。「ソフトウェアアーキテクチャの基礎」にも次のような説明があります。 優れたモジュール性を維持することは、暗
Cursor for Large Projects
With all this "vibe" coding, many devs think that Cursor and Claude are just for prototypes. While Cursor is great at writing new code, it’s also very effective at structuring code, standardizing, refactoring, and maintaining large projects. It’s super exciting since you can build software 5-30x faster. This guide shares my workflow for Cursor and how to use it for large projects. For context, her
適切なメモリシステムを選択する際には、以下の点を考慮することが重要です： プロジェクトの特性: 規模、複雑さ、継続期間 作業スタイル: 個人作業か共同作業か、作業の連続性 情報の性質: 構造化された知識か経験的知識か、更新頻度 自動化の程度: どの程度の自動処理が望ましいか カスタマイズの必要性: 標準的な使用か特殊な要件があるか 次世代メモリシステムの方向性 現在のAIツールのメモリシステムを分析すると、Devinが先行する中で今後の発展方向として以下のようなトレンドが見えてきます： マルチモーダルメモリ: コード、ドキュメント、図表など異なる形式の情報を統合的に管理 分散協調メモリ: チームメンバー間で共有されるメモリ空間の構築 自己組織化メモリ: ユーザーの作業パターンから自動的に最適な構造を学習 これらの発展により、AIアシスタントはより人間に近い理解力と長期的な文脈把握能力を獲得
Bunのバンドル処理がMacで60％高速化。Webサーバ機能ではホットリロードによりコード変更が自動的に反映 JavaScriptランタイムのBunは、最近のアップデートでバンドラ機能の高速化やホットリロード機能を備えたWebサーバなどの新機能などが追加されました。 ホットリロードによるフロントエンド開発支援 先月（2025年2月）22日に公開されたBun v1.2.3では、フロントエンド開発に便利なホットリロード機能がWebサーバ機能（Bun.serve()）に搭載されました。 ホットリロードにより、BunのWebサーバ機能で表示しているWebページのコードを変更すると、自動的にその変更がWebページの表示に反映されます。 In the next version of Bun Bun.serve() gets builtin support for hot reloading front
V8’s end-tier optimizing compiler, Turbofan, is famously one of the few large-scale production compilers to use Sea of Nodes (SoN). However, since almost 3 years ago, we’ve started to get rid of Sea of Nodes and fall back to a more traditional Control-Flow Graph (CFG) Intermediate Representation (IR), which we named Turboshaft. By now, the whole JavaScript backend of Turbofan uses Turboshaft inste
JSer.info #727 - TypeScript 5.8がリリースされました。 Announcing TypeScript 5.8 - TypeScript TypeScript 5.8では、conditional return typeの改善、require(esm)の対応、--module node18を追加が行われています また、Node.jsの--experimental-strip-typesと合わせた設定をする--erasableSyntaxOnlyフラグの追加、--libReplacementフラグの追加なども行われています。 erasableSyntaxOnlyオプションは、次の機能を禁止することで型を取り除くだけで、JavaScriptとして実行できるTypeScriptのコードを書くための設定です。 enum declarations namespaces and
Form Control Styling Level 1 など: Cybozu Frontend Weekly (2025-03-25号)
Form Control Styling Level 1 など: Cybozu Frontend Weekly (2025-03-25号) こんにちは！サイボウズ株式会社フロントエンドエンジニアのsaku (@sakupi01)です。 はじめに サイボウズ社内では毎週火曜日にFrontend Weeklyと題し「一週間の間にあったフロントエンドニュースを共有する会」を開催しています。 今回は、2025/03/25のFrontend Weeklyで取り上げた記事や話題を紹介します。 取り上げた記事・話題 CSS Form Control Styling Level 1 First Public Working Draft CSS Form Control Styling Level 1 の First Public Working Draft が公開されました。 長年OSやブラウザ間で一貫し
～noren.ts #1「TypeScriptのエラーハンドリングを極める」～ ダイニーイベントレポート｜ダイニー公式
こんにちは！ダイニー採用広報のkanonです。 先日、ダイニー主催のエンジニア向けイベント『noren.ts』を開催いたしました！ダイニーとしては初めての試みとなる、ダイニー主催の技術イベント。イベント開催までの各メンバーの動きやイベント当日の様子、登壇内容についてをまとめています。自社イベントの開催を考えている方々にとって、少しでも参考になれば幸いです！ 『noren.ts』とは？ダイニーがフルスタックに TypeScript を活用している経験や、有識者による実践的な知見などを皆さまと交換することで、TypeScript について学び合える場にしたいという想いからダイニーが主催しているエンジニア向けイベントです。 『noren.ts』という名前は、「のれん」と「TypeScript」を掛け合わせた名称で、誰でも気軽に参加できる場を提供するというコンセプトを表しています。 今後も定期的に
Semih Salihoğlu CEO of Kùzu Inc. & Associate Prof. at UWaterloo We’re excited that members of our community are already building applications with the WebAssembly (Wasm) version of Kuzu, which was only released a few weeks ago! Early adopters to integrate Kuzu-Wasm include Alibaba Graphscope, see: 1 and 2, and Kineviz, whose project will be launched soon. In this post, we’ll showcase the potential
How Cursor (AI IDE) Works
Understanding how AI coding tools like Cursor, Windsurf, and Copilot function under the hood can greatly enhance your productivity, enabling these tools to work more consistently — especially in larger, complex codebases. Often when people struggle to get AI IDEs to perform effectively, they treat them like traditional tools, overlooking the importance of knowing their inherent limitations and how
Handling billions of invocations – best practices from AWS Lambda | Amazon Web Services
AWS Compute Blog Handling billions of invocations – best practices from AWS Lambda This post is written by Anton Aleksandrov, Principal Solution Architect, AWS Serverless and Rajesh Kumar Pandey, Principal Engineer, AWS Lambda AWS Lambda is a highly scalable and resilient serverless compute service. With over 1.5 million monthly active customers and tens of trillions of invocations processed, scal
The Frontend Treadmill
A lot of frontend teams are very convinced that rewriting their frontend will lead to the promised land. And I am the bearer of bad tidings. If you are building a product that you hope has longevity, your frontend framework is the least interesting technical decision for you to make. And all of the time you spend arguing about it is wasted energy. I will die on this hill. If your product is still
Interop 2025, CSS 新機能の Ship など: Cybozu Frontend Weekly (2025-03-04号)
Interop 2025, CSS 新機能の Ship など: Cybozu Frontend Weekly (2025-03-04号) こんにちは！サイボウズ株式会社フロントエンドエンジニアのsaku (@sakupi01)です。 はじめに サイボウズ社内では毎週火曜日にFrontend Weeklyと題し「一週間の間にあったフロントエンドニュースを共有する会」を開催しています。 今回は、2025/03/04のFrontend Weeklyで取り上げた記事や話題を紹介します。 取り上げた記事・話題 Intent to Experiment: Interest Invokers Interest InvokersのIntent To Experimentです。 interesttarget属性を利用することで、要素に「興味を示した」際（hoverや割り当てたhotkey押下などの際）に特定
There is a way to apply a stroke to web text across all browsers: .stroke-text { -webkit-text-stroke: 5px red; }Code language: CSS (css) Despite the vendor prefix there, it works across all browsers. But I’ve never liked it… until recently. I’m not sure if I’ve ever spelled out exactly why, so first let me do that. Here’s a nice R from Roslindale. Which is made up of vector points like all fonts:
デザインシステム「ITANDI BB UI」とそれを支えるStorybookの紹介 - ITANDI Engineer Blog
こんにちは！イタンジのFrontend Unit所属の薄羽です。2024年3月に中途入社しました。好きなnpmパッケージは @emotion/react です。 イタンジのFrontend Unitには主務で薄羽と西野が在籍しており、デザインシステム「ITANDI BB UI」の開発とプロダクトのフロントエンドを横断的に見ること*1を主な仕事としています。 今回はITANDI BB UIとそれを支える「Storybook」を紹介します。 ITANDI BB UI イタンジには、物件管理や申込管理など、様々な機能が存在します。それらの機能は別々のチームで開発されており、同じ見た目や振る舞いのコンポーネント（e.g., <Button>）をそれぞれのチームが実装していました。まったく同じ見た目のコンポーネントをそれぞれのチームで実装し直す必要はないはずですし、チームの裁量によって見た目や振る舞
Every modern programming language needs a formatter to make your code look pretty and consistent. Formatters are source-transformation tools that parse source code and re-print the resulting AST in some canonical form that normalizes whitespace and optional syntactic constructs. They remove the tedium of matching indentation and brace placement to match a style guide. Go is particularly well-known
Denoでフロントエンド開発 2025年春版 / Frontend Development with Deno (Spring 2025)
fukuoka.ts #3 https://fukuoka-ts.connpass.com/event/347048/
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フロントエンド開発する人、デザイナーが入れているもの(拡張、プラグイン、アプリ、設定など...)
CursorのProject Rules運用のベストプラクティスを探る
みんなのためのLLMアプリケーション開発環境の構築事例
OpenAI Responses API 入門 (11) - Computer use｜npaka
生成AI時代のCloud NativeとSREに対する考え方とスタンス - LayerX エンジニアブログ
The New Three-Tier Application | DBOS
今週のはてなブックマーク数ランキング（2025年3月第2週） - はてなブックマーク開発ブログ
A Shell for the Container Age: Introducing Dagger Shell - Dagger
ReactとCSSで一定時間表示される通知をやるときの色々な方法 - Qiita
GenAIOps: Operationalize Generative AI - A Practical Guide
Xee: A Modern XPath and XSLT Engine in Rust
Manus tools and prompts
モジュラモノリスにおける Prisma を利用した DB アクセスの秩序を保つ
Devinのメモリ活用の学びを自社サービスにどう組み込むか？
Bunのバンドル処理がMacで60％高速化。Webサーバ機能ではホットリロードによりコード変更が自動的に反映
Land ahoy: leaving the Sea of Nodes · V8
2025-03-06のJS: TypeScript 5.8(erasableSyntaxOnly)、Next.js 15.2、Lynx
Fully In-Browser Graph RAG with Kuzu-Wasm
Layered Text Headers – Frontend Masters Blog
The Art of Formatting Code · mcyoung