テックニュース

Shaw と Chris が番組に出演し、スタック内のこれらのかなり重要なテクノロジーのアップグレードの背後にある考え方と課題について話します。私たちは、React のバージョン アップグレードと Next.js のバージョン アップグレードを別のものとして考えています。場合によっては、それらが前提条件となることもあります。 Next.js のものは、1) 最新バージョンのドキュメントが最良である傾向があり、2) セキュリティ上の理由で重要なサーバー側のコードが含まれるため、もう少し重要です。決して簡単なことではありません。 タイムジャンプ 00:15 ps、私たちは YouTube で 01:09...

私たちは間違いなく「AI ブラウザ」がひとつのカテゴリーになる時代に入っています。 チャットGPTアトラス 最新のドロップです。これまでの他の多くの機能と同様に、AI チャット (フープデドゥ) 用のサイドバーが組み込まれています。 「エージェント」モードは、はるかに興味深い、奇妙な輝きのオーバーレイなどです。 Web 上で何かをするように指示すると、古い大学のような試みが行われます。 サイモン・ウィソンはあまり感銘を受けていない:...

ロバートとクリスが番組に出演し、私たちがしなければならなかった選択について話します バベル。 おそらく、Babel を使用する最良の方法は、 @babel/preset-env プラグインを使用すると、最新の JavaScript 機能を快適なブラウザー サポートのレベルまで処理できるようになります。しかし、Babel はあらゆる種類のプラグインをサポートしており、クラシック エディターでは、ドロップダウン メニューから「Babel」を選択するだけで完了です。設定は表示されず、変更もできません。私たちが使用する設定は表示されます。 ない プリセット環境を使用します。 したがって、2.0 エディターに関しては興味深い立場にあります。私たちは、編集可能な構成をサポートする新しいペンには、優れた最新の構成を提供したいと考えています。また、変換されたすべてのクラシック ペンには、何も壊れない構成を提供したいと考えています。その古い構成には非常に古い部分があり、サポートしています...

レイチェルとクリスが番組に参加し、私たちが使用しているクライアント側のテクノロジーについて少し話します。 アポロ。これを使用するのは、GraphQL API があり、Apollo がその API を通過するクエリとミューテーションの作成に役立つためです。これは React フロントエンドに非常にうまく組み込まれ、必要なときに必要なデータ作業を行うために使用するフックを提供します。さらに、型付きデータを最後まで取得します。 Chris は、Apollo Cache が単に処理を高速化するだけのボーナス機能ではなく、この全体の動作に不可欠で深く統合された機能であることを学びました。 タイムジャンプ 00:06 アプリケーションのフロントエンドにデータを取り込むにはどうすればよいでしょうか? 02:57 Apolloサーバーを使用していますか? 10:17 ...

あなたが CodePen ユーザーであれば、この問題を解決している間、コンソールにノイズが発生する可能性があることを除けば、影響はありません。続ける！ CodePen では、次の図に示す埋め込みペンを用意しています。 。これらには、配置場所と同じオリジン URL ではないユーザー作成のコードが含まれています。私たちは両方になりたいです 安全 そして できるだけ寛容な...

新しい CSS 機能を入手すると、私たちはとても興奮します。まあ、とにかくそうします。これは驚くべきことです。なぜなら、それは、文字通りこれまで決してできなかったことのロックを解除することがあるからです。アーティストが新しい絵を完成させるのは素晴らしいことであり、祝われるべきことです。しかし、これはもっと似ています 新しい色のドロップ、これまで見たことのない光景が可能になります。 私にとって同じくらい刺激的なのは、 進化 新しい機能の。文字通り新しい機能を獲得するという機能の観点からも、それをより効果的に使用する方法を見つける私たちユーザーの観点からもです。 私たちは、CSS グリッドが過去 10 年間に...

AMD Ryzen AI Max+ 395 を搭載した EVO-X2 で、gpt-oss:20b を CPU/GPU/NPU で動作させて処理速度を比較します。 ! 本記事は Claude Code の生成結果をベースに編集しました。 プロセッサ: AMD Ryzen AI Max+ 395（16コア） OS: Windows 11 Pro 24H2 モデル:...

2025年10月17日(金)、Claude Codeに関するイベント『Claude Code Meetup Tokyo』がオフライン(株式会社メルカリ@六本木)、オンライン(YouTube Live)のハイブリッド形式で開催されていました。 現地参加： https://luma.com/odebilso オンライン視聴： https://aiau.connpass.com/event/369265/ 個人的にも業務でClaude Codeを使うようになっており、直近最新のClaude Codeに関する情報を収集したい！という思いもあったので当日はオンライン視聴で参戦しました。当エントリでは視聴レポートとして内容をまとめたいと思います。 ※イベント当日のX投稿も合わせてまとめています。記事内容と合わせてご覧頂けますと幸いです。 https://posfie.com/@shinyaa31/p/znEFL8W イベント概要 イベントページに記載のイベント概要は以下の通り。 ! イベントの趣旨、モチベーションClaude Code を筆頭に、 Anthropic はAI Coding の世界において一番熱い会社です。ただ単に使うだけではなく、工夫して効率よく使ったり、新しい独自な活用方法をしている人がいるでしょう。 このイベントでは、Claude Code、Claudeモデル等々の知見を学ぶことができます。 翌日から業務に取り入れたくなるような学びを提供します。 また、懇親会の時間にて同じ未来を見ている同志と情報交換する機会もございます。 セッションレポート ここからはセッション3つ、LTが計6つ発表されていました。時系列通りに内容を紹介していきます。 Claude Codeを駆使した初めてのiOSアプリ開発 登壇者：Oikon氏 登壇資料 自己紹介 グローバルハッカソン Shipatonについて 9月までモバイルアプリ開発経験が一切ないバックエンドエンジニアだった。グローバルハッカソン「Shipatton」(RevenueCat主催、賞金総額35万ドル)に参加 AIによる開発が高く評価され、ベストバイブスアワード3位に入賞。開発期間は9月6日の開始から24日のサブミットまで約3週間。 メインの開発ツールはClaude Code Claude...

こんにちは。今年6月にドリーム・アーツに中途入社したエンジニアのabです。 この記事では、先日弊社恵比寿オフィスにて初めて開催された、エンジニア向けの勉強会の様子をレポートします。 開催概要 今回の勉強会では、OSS「Dagu」の開発者であるYota Hamadaさんをお招きし、「個人開発から始めたOSSが2K Starを獲得するまで」というテーマでご講演いただきました。 さらに、弊社テックリードの伊勢川さんからも、「個人開発から始めるB2B SaaS」というテーマでLTを実施しました。 長年開発に携わってきたベテランエンジニアのお二人から、個人開発への想いやプロダクト開発のリアルに... Source link

はじめに エンジニアの皆さん、日々の開発業務でAIの力を借りる場面が増えていませんか？特に、コーディングに特化したAI、例えばOpenAIの「Codex」やAnthropicの「Claude Code」などは、生産性を劇的に向上させる可能性を秘めています。 これらの高機能なAIサービスを最大限に活用するため、有料プランを契約している方も多いでしょう。しかし、サービスの多くは海外企業によって運営されており、支払いは米ドルやユーロで行われます。その際に、普段お使いの日本のクレジットカードでは、「海外事務手数料」という隠れたコストが発生していることをご存知でしょうか。 本記事では、この手数... Source link

Webサイトのリリース後に 「一部のユーザーだけ画面が真っ白になる」「謎のエラーが飛んでくる」 といった現象に遭遇したことはありませんか？ もしかしたら、それは Version Skew（バージョンスキュー） と呼ばれる問題のせいかもしれません。 最初に こんにちは。ココナラテックの開発をしているエンジニアのもちさんです。 私はある日、手元の端末で再現性の低いエラーに悩まされました。 ブラウザキャッシュを消すと直る、でも根本原因がわからない。そんな厄介な症状の裏に、この「新旧リソースの混在」という構造的な問題が潜んでいました。 この記事では、実際に起きたトラブルの経緯をもとに、Ver... Source link

はじめに 先日、Kaggle での RSNA2025 のコンペが終了しました。自分も参加してたのですがまとまらずサブもせずに終わってしまいました。動脈瘤自体は血管にありますが、小さく RoI のクロップによる解像度の確保がキーポイントだったと思います。 そこで、セグメンテーションによる血管領域の RoI クロップを試みていましたが、timm を使った 2.5D モデルで組んだ UNet では思いの外精度が伸びず泥沼にハマりました。 共有されてるソリューションなどを見ると、MONAI や nnUNet といった医療画像での事前学習済みモデル、特に脳の血管セグメンテーションで学習されたモ... Source link

はじめに メディカルフォースは業界に特化したSaaSを開発・提供しており美容医療の次の業界として警備業向けのプロダクトの開発を進めています。 美容医療のプロダクトではNestJSを使っていましたが、警備業向けのプロダクトではHonoを採用しました。 今回は、実際に使ってみてどう感じたかに焦点を当てて書いてみます。 NestJSを使っていたときの印象 NestJSは、DIやデコレーターなどが整っていて一見「フルスタック感」のあるフレームワークです。 ただ、使っていくうちに「便利さ」と「複雑さ」が表裏一体だと感じる場面が多くありました。 良かった点 DIが標準搭載されている ... Source link

こんにちは！株式会社AI Shift で Web フロントエンドエンジニアをしている辰川です！ 今回は、筆者が愛用している Git の TUI ツールである lazygit について紹介します。 https://github.com/jesseduffield/lazygit Git 操作、こんなことで困っていませんか？ git add して git commit して git push ...。 日々の開発で繰り返す、この一連の Git 操作。 ターミナルでのコマンド入力は素早い反面、少し特殊な状況になると急に難解な呪文のように感じられますよね。 かといって、GUI...

この記事は、本日2025/10/17にリリースされたClaude Code 2.0.20以降に利用が可能となった、スキルを自作導入する方法や、チーム内で配布するための方法を解説する記事です。 公式のドキュメント記事（日本語版はまだ無い）を、まずはご確認ください。 https://docs.claude.com/en/docs/claude-code/skills カスタムスラッシュコマンド、サブエージェント、MCP、フック等の機能に加え、今回新たに「エージェントスキル（以降「スキル」と表記します）」が追加されました。 当社カンリーでも早速導入してみたので、手順を記事として公開します。 Claude Codeの新機能が何か、興味をお持ちの方 コンテキストウィンドウの制約に日々悩まされている方 Claude Codeの精度を高め、個人やチームの生産性を上げたい方 プロジェクト固有のスキルを定義することで、Claude Codeの精度が高まる CLAUDE.mdや各種設定に詰め込んでいたコンテキストが、必要に応じて呼ばれるようになる モデルによって自律的に読み込まれるため、利用者が意識せずともスキルを再利用可能 公式ドキュメント原文 What are Agent Skills? Agent Skills package expertise into discoverable capabilities. Each Skill consists of a SKILL.md...

こんにちは。PIVOTでソフトウェアエンジニアとして、Webフロントエンド、バックエンド、インフラを横断的に担当している@tawachanです。 この記事では、PIVOTのプロダクトチームでインフラのTerraform化を推進した経験を共有します。IaCできていなかった状態から、AI時代の運用を見据えた構成をゼロから設計した過程と判断基準について、振り返りながら紹介していきます。 PIVOTのチーム状況と背景 チーム体制 PIVOTはビジネス映像メディア「PIVOT」を運営する会社です。開発チームは正社員エンジニア3名、QAエンジニア1名、プロダクトマネージャー1名、業務委託で数... Source link

はじめに satoken です。先日世界初のイベントとなる TinyGo Conference 2025 を開催しました！ https://x.com/sago35tk/status/1977358331841749290 ご参加頂いた方々、ありがとうございました。快くスポンサー頂いた皆様、当日ご協力頂いたスタッフの皆様も本当にありがとうございました。 この TinyGo Conf の開催に深く関わった1人のスタッフ&酒クズとして、個人的なイベントレポートとしたいと思います。 資料まとめ 最初に当日の資料をまとめておきます。 オープニングセッション : TinyGo & TinyGo Keeb TinyGo でも GraphQL を動かしたい！ Hardware fun with Tinygo: Games...

はじめに スタディポケットでソフトウェアエンジニア / SRE として働いている@Tocyukiです。 弊社プロダクトのバックエンドは FastAPI で書かれており、パッケージマネージャーにはもちろん(?) uv を使っています。 https://docs.astral.sh/uv/ 普段よく使うコマンドなので、n番煎じ感満載ですが Python が久しぶりで uv 素人な自分のためにチートシート記事を書きました。 uv とは uv は Rust で書かれた高速な Python パッケージマネージャーです。Astral 社が開発しています。 公式では以下のように説明されています... Source link

タスク管理できない人間のぼやき ELYZAでプロダクト機械学習エンジニアをやっている中村(@tyo_yo_)です。 新しい機能を実装する際、PRD (プロダクト要求仕様書: Product Requirements Document) から実装すべきタスクを一つひとつ切り出していく作業。「ここはこうで、あそこはああで...」と考えながらチケットを作る時間って、正直コーディングより疲れませんか。 あと、歯を磨いている時にふと「あ、あの不具合直さなきゃ」と思い出す瞬間。スマホを取り出してバックログツールにメモしたり、いつのまにか混沌と化したバックログを見て目を背けてしまったり... 弊社ではGitflowに基づいた開発フローを採用しているのですが、Notionのボードビューでのタスク管理とはどうも噛み合わない部分がありました。PRやブランチの進行に合わせてカードを更新してもすぐにズレが生じたり、手動での同期が必要になったりして、結果的にどちらを信じればいいのか分からなくなる瞬間が多かったんですよね。 タスクに取りかかるという一番重いタスク タスクをやるときに何が一番大変ですかと言われれば、結局タスクをやり始める瞬間が一番大変だと思うんです。 「さて、次は何をやるんだっけ？」とタスクリスト眺めて、「これをやるには、あれを先に調べて、これを確認して...」と考えているうちに、気づけば30分経っている。やっと取り掛かったと思ったら、途中で別のタスクが気になり始めて集中が途切れる。 理想を言えば、デバッガーでn(next)キーを連打するみたいに、次のタスクが自動的に始まって、実装に集中できる状態が欲しいんですよね。「次これやって」「はい」「次これ」「はい」と、タスク管理のオーバーヘッドを最小限にしたい。 AIエージェントがタスクを管理してくれる時代？ Task MasterはClaude Codeと連携して動作するAI駆動のタスク管理ツールで、npmで公開されているオープンソースプロジェクトです(公式ページ)。 タスク管理系のAIエージェントツールってすごくいっぱいあるんですが、Task MasterはGitHub上で22.2kのスターがついていて、一番人気そうだったので触ってみました。 Task Masterの特徴 PRDを用意すれば、AIが自動的にタスクを生成して、適切なサブタスクに分解してくれます。「この機能を実装するには、まずこれやって、次にあれを...」という思考プロセスを、AIが代わりにやってくれるわけです。 最大の強みは、Claude Codeとの統合ですね。Claude Codeに「次は何やればいい？」と聞けば、Claude CodeがTask MasterのMCPツール(get_next_taskみたいなやつ)を実行してくれて、次にやるべきタスクをClaudeが進め始めてくれます。 自分がTask Masterで助かってるのは、タスク管理というものがtasks.jsonというJSONファイルによって管理されるようになることです。このtasks.jsonがsingle source of truthで、そのtasks.jsonはCLIやMCP、Claude Codeなどから様々な形でとても触りやすくなっています。 ...

はじめに こんにちは、@sugar235711です。 前回の記事から約1年が経ち、Honoはv4.6.0からv4.10.0までアップデートされているのでメモ書き程度に更新内容をまとめます。 https://github.com/honojs/hono/releases https://hono.dev/ 主要な変更点 この章では、v4.6.0以降の大きな変更点について解説します。 Contextual Storage Middlewareの追加によるContext伝搬 従来の方法 前回の記事では、リクエストごとにLoggerをContextに詰めて伝播させる方法を紹介しま... Source link

https://github.com/remix-run/remix https://zenn.dev/coji/articles/remix3-introduction https://zenn.dev/sora_kumo/articles/remix3-samples Remix3について書いてみます。 Remix3では、コンポーネントのレンダリング・再レンダリングのマニュアル(手動)でのコントロールを可能にしています。 Remix開発チームがPreactからフォークして開発中のライブラリ(Preactフォーク)がまだ公開されるレベルになっていないため、想像にすぎませんが、これらのメソッドは、Preactフォークの内部で呼ばれることになるはずです。 リリース版Remix3では、Remix.Handle.render、Remix.Handle.updateをユーザーが直接記述する機会は少なくなるはずです。 contextでの取り回しにProviderコンポーネントをかますことが必須のReactのcontextとは違い、RemixのcontextはVue.js3のprovide/injectライクにset/getで取り回しができます。 ! contextでの取り回しは親→子コンポーネントへの一方通行です。 domパッケージ(モジュール)の機能として提供されています。 Preactフォークでは、利便性のために、Remix.Handle.contextへのエイリアス？が提供されるかもしれません。 Remix3では、コンポーネントに記述されたステート(状態)の保持は、このセットアップスコープによって行われます。 Remix3では、コンポーネントはクロージャとして扱われます。 https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Closures Remix3の中でコンポーネントは一度クロージャとして実行され、実行結果が(内部変数に)格納/保持され、(同一コンポーネントから)参照可能で、関数であるのに恰もオブジェクトであるかのように扱えるようになっています。 セットアップスコープでは、ステートはミュータブル(mutable: 可変)な値として扱われます。 Remix3では、ReactやPreactベースのFWとは異なり、(セットアップスコープの段階では)ステートはミュータブル(mutable: 可変)な値として扱われます。 Preactフォークで、ステートがミュータブルな値として扱われるのか、イミュータブル(immutable: 不変)な値として扱われるのか、は不明です。 ステートの保持(自体)は(Preactフォークからは独立した)セットアップスコープで行うため、Preactフォークでステートがミュータブルな値として扱われる場合、Preactフォークに(ステート保持機能の実装は必要ないので)ステート管理機能(API)が存在しない可能性は高いです。 ! コンポーネント間でステートの共有はできないので、グローバルなステート管理には別途それ用のライブラリ(モジュール)が必要となります。 Reactではreact-domパッケージがDOM API etcをカプセル化(隠蔽)していて、Reactの(抽象化された)インターフェイス(API)を介してしかDOM API etcにアクセスできないのに対して、Remix3はDOM API/イベントetcが独自のインターフェイス(API)をもつモジュールとなっていて、それぞれにアクセス可能となっています。 Preactフォークは、Reactのように内部にイベントやレンダリングetc全てを内包するのではなく、イベントまわりはevents、DOMまわりはdom、他もそれぞれ別モジュール？、として(別に)存在し、Preactフォーク本体はそれらのモジュールを内部で利用する(Reactとは異なり)かなり？コンパクトなライブラリになると考えられます。 Remix3では、特定のライブラリに強く依存しない方針なので、自前で用意するPreactフォークにさえ強く依存しないしくみにしようとしているのかもしれません。 Preactフォークがステート(状態)管理のAPIを提供しないのか、PreactデフォルトのReactライクなステート管理APIを採用するのか、Preact SignalsのようにSignalsを採用する(Preact Signalsもどき？を統合する)のか、はたまた、第3のステート管理用APIを採用するのか、定かではありません。 https://leaysgur.github.io/posts/2022/09/07/113927/ Remix3では、ステートの保持はセットアップスコープが担当するので、Preactフォークでステート管理のAPIが提供される場合、それはReactともPreactとも似て非なるモノです。 現状のプロトタイプ？をAlien Signalsと組み合わせて利用しても面白いかと思います。 https://github.com/stackblitz/alien-signals ブラウザ(のレンダリングまわり(タイミングを含む))の実装の改善により仮想DOMが役割を終えようとしています。 Remix v3に採用されるはずのPreactフォークが仮想DOMをPreactから引き継ぐのか、仮想DOMから離脱しSolid.jsのように生DOM API+αで構築されるのか、興味深いです。 Remix v3は、WEB標準重視の方針のもと、開発されているので、Preactフォークの仮想DOMからの離脱もありえるかと思います。 https://remix.run/blog/wake-up-remix Reactによる制約から解き放たれ、設計/実装の自由度が格段に上がりました、(Reactに「おまかせ」できていた部分も考えないといけないので)設計/実装の難易度も上がりますが...。 Reactのユーザーベースは、今のところ、大きいので、そのユーザーベースからそっぽを向かれる可能性のある、React→Preactフォーク、Reactとは別の道を往く決断は自信の現れではないかと思います。 Remix開発チームの一番のスポンサーであるShopifyからの賛同は得られているはずです。 ! React ベースのReact Router7の開発・メンテナンスは継続されるので、Remix v2の既存ユーザーには、それほど大きな影響はないはず。 推敲中… Source link

Next.jsでAPIリクエストがエラーとなった場合のトースト表示を実装していたのですが、production buildではメッセージが隠されてしまう現象に遭遇しました。 An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A...

みなさん、Claude Codeは利用していますか？私はほぼ毎日使っています。 ClaudeがAWS Marketplace経由で購入できる、Claude for Enterprise Premium Seats with Claude Code Now Available in AWS Marketplaceの発表があり、個人的に盛り上がっている今日この頃です。 突然ですが、のっぴきならない事情でAWSの日本国内に閉じた形でClaude Codeを利用したいと思ったことはないでしょうか？ 思ったことがある！という方にはこの記事はピッタリだと思います。 サマリ この記事を読むと、図の... Source link

ゼロから AI SDK を学べます。 【読者】 ・AI SDK の初学者 ・React使いで AI 機能を実装したい方 ・LLM を活用したアプリケーション開発に興味がある方 【特徴は】 ・AI SDK について体系的に学習できること ・TypeScript を活用した AI アプリケーション開発 ・最新の AI SDK の利用 ・Next.js 15 の利用 ・複数の AI プロバイダーを統一的に扱う方法 【本書籍がカバーする技術】 ・AI SDK Core ・AI...

! この記事は毎週必ず記事がでるテックブログ Loglass Tech Blog Sprint の113週目の記事です！ 3年間連続達成まで残り46週となりました！ はじめに AI Agentシステムを開発したいと考えたとき、「何から手をつければいいのか？」「どのツールをどの段階で使うべきか？」と悩むことはないでしょうか。 私たちのチームでは、超初期のアイデア検証から実運用に向けた精度向上の検証に至るまで、プロジェクトの成熟度に合わせてツールを使い分けることで、開発をスムーズに進めてきました。 この記事では、ありもの（Cursor）から始め、Bedrock Agentを経て、最終的... Source link

こんにちは。クラウドエース株式会社 第四開発部の相原です。 読者の皆さんは、普段の業務でどれくらい AI を活用していますか？ おそらく、多くの方がコードの自動生成やデバッグ、ドキュメント作成といったさまざまな場面で、AI を頼れるアシスタントとして利用していることでしょう。 今や AI は私たちの日常に欠かせないパートナーになりつつあります。 しかし、その一方で、「AI を使っている」という事実が、私たちの仕事や能力に対する周りの評価にどのような影響を与えるのかについて考えたことはありますか？ 私たちは、AI という「賢いツール」を使いこなすことで、より高度な成果を出せると考えています... Source link

こんにちは近藤です 個人開発でサービスを構築する際、「認証どうしよう」「画像のストレージどこに置こう」「セキュリティ大丈夫かな」「テスト環境の構築が面倒」と悩むことはありませんか? 私は子供向け画像認識学習アプリ「KORENANI」を開発する中で、Supabaseを採用しました。 この記事で伝えること: なぜSupabaseを選んだのか（メリット） どんな制約があるのか（デメリット） どんなプロジェクトに向いているのか（判断基準） 実体験に基づいて共有します。 TL;DR Supabaseの強み: 無料プランが充実（50,000 MAU、500MB DB、1GB Storag... Source link

概要 4年目のソフトウェアエンジニアとして、一般社団法人 ソフトウェアエンジニア協会(以下SWE協会)のコーディング練習会に参加して感じた変化を共有します。 なお、Google を含む外資系ソフトウェアエンジニアのコーディングテストを準備なしで解ける方にとっては、本記事の内容は役に立たないかもしれません。 自己紹介と参加の背景 私は現在、主にマーケティングオートメーションツールを提供している会社で、ツール全体が使うデータパイプラインの構築や運用、機能開発に利用する共通基盤の開発等を行っています。 扱うトラフィックはそれなりに大きく、馴染みの薄いミドルウェアを学ぶ場面も多いのですが... Source link

! この記事の前半は、AIが出力した記事を完全無修正でお送りします。 なお、AIが出力した本来の記事タイトルは「AIに人間と区別できない技術記事を書かせる：9回の反復で到達した「完璧すぎる」という逆説」ですが、さすがに釣りタイトルになってしまうので少し変えています。 なぜこんなことを始めたのか 結論から言うと、AIに技術記事を書かせて人間と区別できないレベルまで持っていけるか、というのを試してみたくなった。Claude Code（AnthropicのCLI）を使って、反復的に記事を生成→レビュー→スタイルガイド改善、というサイクルを回す仕組みを作りました。 最初は「まあ、せいぜい7... Source link

ある日、Vercelのダッシュボードを見ると以前はだいたい100KB前後だったページのレスポンスサイズが500KB前後に増えてしまっていました。 原因はサーバコンポーネントからクライアントコンポーネントに渡すpropsが巨大だったことでした。 SCからCCに渡したpropsはRSCペイロードという形で初回レスポンスのHTMLに含まれるためです。 分かってしまえば単純なことなのですが、当時Next.jsのバージョンアップなどの改修も同時に行なっていたために原因調査に手こずりました。 そんなわけで、レスポンスサイズが5倍になったときの調査に役に立つかもしれない（？）RSCペイロードの覗き方を... Source link

現実のアプリケーションで発生するすべてのエラー・例外をResult型に変換するのは非現実的 エラーハンドリングが不要なものはUnexpectedErrorとしてまとめてしまう という現実的な落とし所を提案する記事です。 ! 記事内で使用されているResult型は@praha/byethrowが提供しているものです。 カスタムエラーの定義には@praha/error-factoryを使用しています。 ライブラリ固有の知識がなくても理解できるように、最小限のAPIのみを使用しています。 TypeScriptにResult型を導入したくなる理由 TypeScriptのエラーハンド... Source link

※ ファンタジーではありません。 もちろん丸投げでは完結できませんし、指示を無視した事もしてきます。 そこはAI駆動開発に片足突っ込んだ人なら分かる通り、一定許容する必要がありますよね。 しかし、以前この記事を書いた後で意見がまたガラッと変わるのですが、突如Codexに推し変することにしました。 https://zenn.dev/fastdoctor/articles/f2f6b90f95c039 もし以下に課題を感じてるという人がいたら、私と同じくシュタインズゲートの選択をしてはいかがでしょうか・・・😈 Claude Code使ってるが、結局パソコンの前から離れて仕事できない。 スマ... Source link

作ったもの：claude-ops-mcp https://github.com/pppp606/claude-ops-mcp/ Claude Codeの操作履歴をMCPサーバーとして提供するツールです。ClaudeCodeが自分で書いた自分のログを、自身で読み返すためのMCPです。 なぜ作ったか Claude Codeがv2になり /rewind コマンドで会話を巻き戻せるのは便利なのですが、根本的にClaude Codeは自身が行った作業の内容を理解（記憶）していないという問題があります。 「え、ちょっと何したの？」という素朴な質問に、自身のログを遡って確認するという機能はなく、あくまで推論で答えてきます。単純に不便なのと、なんだか気の毒になってきました。AIにも自分の記憶を持つ権利があってもいいんじゃないかと。 仕組み Claude Codeは ~/.claude/projects//.jsonl にセッションログを記録しています。このMCPサーバーは、そのログファイルを読み取って操作履歴を提供します。 具体的には以下のような流れです： ログファイルの自動検出：ClaudeがMCPツールを呼び出す際に渡す toolUseId を使って、現在のセッションファイルを特定 JSONLパース：ログをストリーミングで読み込み、Edit/Write/Bashなどの操作を抽出してインデックス化 効率的な検索：ファイルパスや操作種別でフィルタリングし、高速に履歴を取得 キャッシュ機構：セッション検出結果をキャッシュして、パフォーマンスを最適化 難しいことはしていません。ClaudeCode君が書いた日記を、本人が読み返せるようにしただけです。 提供される4つのMCPツール このMCPサーバーは、4つのツールを提供します。 1. listFileChanges - ファイル変更履歴の取得 特定のファイルやパスパターンに対する変更履歴を取得できます。CREATE/UPDATE/DELETE操作のみを返し、READ操作は除外されます。 パラメータ： filePath：ファイルパスまたはパターン（例："src/index.ts"、"helpers.ts"） limit：取得する操作数の上限（デフォルト：100、最大：1000） 返り値：操作ID、タイムスタンプ、ツール名、ファイルパス、変更タイプ 2. listBashHistory - コマンド実行履歴の取得 セッション内で実行されたBashコマンドの履歴をサマリー付きで取得します。 パラメータ： limit：取得するコマンド数の上限（デフォルト：100、最大：1000） 返り値：操作ID、タイムスタンプ、コマンド、終了コード、作業ディレクトリ、サマリー ...

Remix 3 は、React から脱却し、Web 標準に基づいた新しいフルスタック Web フレームワークとして再設計されました。Remix 3 は鋭意開発中ですが、この記事では React 代替に相当する箇所を部分的に動かして、実際に動作を検証してみます。 https://github.com/SoraKumo001/remix3-sample01 SPA アプリケーションとして動作させるための環境を用意します。今回はビルドに rolldown を使用します。 rolldown の設定 普通にビルドすれば依存パッケージのバンドルが行われるのですが、react/jsx-runtimeに関しては@remix-run/dom/jsx-runtimeに変換する設定が必要になります。 import { defineConfig } from "rolldown"; export default defineConfig({ ...

新しいプロダクトを立ち上げる際、どのようなソフトウェアアーキテクチャを採用するかは重要な意思決定です。これまで先人たちが築き上げてきた代表的なパターンは多くありますが、唯一の正解が存在するわけではありません。プロダクトの目的や市場、組織の性質によって最適解は異なります。 PeopleXで1年半の間に5つのプロダクトを立ち上げた経験をもとに、アーキテクチャ選定の考え方について説明していきます。 目的から出発し、実践との相互フィードバックを重ねる これはアーキテクチャに限らず多くの意思決定に共通しますが、「プロダクトゴールを起点とし、現場からのフィードバックを重ねて実践知化していく」こと... Source link

皆さんはClaude Codeが、「エンジニアが仕事中に聴いている音楽をターミナルに表示する」 という、社内ツールから始まったことをご存知でしょうか？ プロトタイプの一つとして作られたこの音楽ツールが、ファイルシステムアクセスとbash機能を与えられて進化し、最終的にClaude Codeとなったそうです。 このエピソードは、Gergely Orosz氏による「How Claude Code is built」にて言及されました。 https://newsletter.pragmaticengineer.com/p/how-claude-code-is-built Anthropic社では、Claude Codeの導入により、エンジニアの数を倍増させながら一人当たりの生産性（PR数）が67%向上 Claude Code自身のコードの約90%は、Claude Code自身によって書かれている アーキテクチャは意図的にシンプルにされている より高性能なAIモデルがリリースされるたびに、不要になった古いコードは積極的に削除される ある機能（TODOリスト）の開発では、わずか2日間で20種類以上のプロトタイプが作成されたことも アーキテクチャは意図的にシンプルにされていて、モデルの強みを最大限に活かす思想 気になったことは沢山ありますが、そのうちの一つは技術選定についての言及です。「モデルの強みを最大限に活かす（play to the strengths of the model）」 という思想に基づき、TypeScriptやReactといったAIが得意な 「on distribution」 な技術を意図的に選ぶ、というものでした。 今回は、on distributionな技術選定という、視点や事例について考えてみます。結論から言うと、AIネイティブ...

いきなりですが、2つ質問です。今まさにあなたが読んでいる文字がどうやってレンダリングされているか説明できますか？私はできませんでした。それではあるモノの仕組みを理解するために最も効率の良い方法は何でしょうか？そう、自作することです！それではフォントのパーサーとレンダラーをゼロから作っていきましょう！ 目的 小さなTrueTypeレンダラーを自作し、フォントがレンダリングされるまで流れを理解することが目的です。具体的には、Unicodeのフォントを読み込んで、任意の文字列をレンダリングしpngファイルとして書き出すまでを目標とします。実装はほぼプレーンなC++で、ベクトル演算用にglm... Source link

はじめに こんにちは、ELYZA Labチームの佐藤 (@shoetsu_sato)です。最近のLabチームの取り組みの1つとして行ってきたLLMエージェント開発の概要とELYZAにおける研究開発の内容について紹介します。 大規模言語モデル（LLM）は単なる対話システムを超えて「エージェント」としての活用が注目されています。エージェントとは、自然言語で与えられたタスクを理解し、外部ツールやデータベースを利用しながら、LLMコールを連続的に行い自律的に問題解決をする仕組みです。最近ではOpenAIやGoogle、Hugging Faceなどが次々にエージェント開発用フレームワークを公開... Source link

TLDR 先日RevenueCat主催のDevpostで開催されたハッカソンに参加して、子供向けアプリをリリースしました。 結論結果はふるいませんでした。。。残念。 とはいえ、今回、個人開発者はハッカソンで外的に期限を設定すると良いなと感じました。 元々作ろうと思っていたプロダクトだったので開発は少ししていたのですが、今回リリースまでこぎつけられたのはこのハッカソンがあったからです。 個人開発は孤独でペースメークを自分でするしかなく、期限を設定することで一定程度価値を得られると思います。 伝えたいこと：デッドラインがないと完成しない 元々作ろうと思っていたけど進まなかった K... Source link

この記事は、Vim駅伝2025年10月15日の記事です。 前回の記事は、482FさんのLua Neovim で斜体を無効化する です。 Vimでのカーソル移動は、hjklやw/b/eといったモーションキーを使うのが基本です。 が。画面に表示されているN行目のM文字目に移動したいとき、何度もキーを繰り返し押す必要があります。当たり前の話です。しかし面倒であることには違いありません。 本来、位置Aに移動したいだけであって、キー入力は仕方なく行う行為です。なので対策したかったので対策しました。 対策：hit-a-hint系プラグイン 移動にキーをたくさん入力せねばならない問題に対して、いく... Source link

がっつり本を書くほどではないけど、はじめての3Dを形にするまでの「最短ルート」を自分用にメモしておきます。 断定しません。 こうやったらすぐ動いた、くらいの温度感。 キーワードは「3Dゲームの作り方」。 初心者向けに寄せますが、わたし自身も毎回忘れるので、手順と失敗点を淡々と並べます。 まずはゴールを小さく：動く・拾う・終わる 最初から広いマップや派手なエフェクトを盛ると進まないので、ゴールを「動ける→アイテムを1個拾える→ゴールに触れたら終了」の3点に固定しました。 これだけでも“3Dゲームを作った”感は出ます。 難しいAIやスキルはあとで。 3Dゲームの作り方を調べると、大作っぽ... Source link

壮大なタイトルではありますが、先に結論を書くと、 require 'aws-sdk' この部分を require 'aws-sdk-sqs' のように、 使用するモジュール(今回で言うとSQS)に絞る ことで起動が速くなりました。 そして、もう一つは Rubyを3.2→3.4に上げること です。これも高速化に寄与しました。 ポイントとしてはこの2点なのですが、この結論に至るまでに試したことや、他にもこんなアプローチがあったな、など思うことがあったので記事にしてみました。 起こっていた問題 弊社内で利用しているSlack Appにて呼び出している「Amazon API Gateway ... Source link

導入 こんにちは、株式会社ナレッジセンスの須藤英寿です。 今回は、ドキュメントの更新に強いRAGの手法「VersionRAG」を紹介します。 https://arxiv.org/pdf/2510.08109 サマリー RAGは便利な手法ですが、文書のバージョンの変化が苦手です。例えば、仕様書のように更新されていく文書の新旧の認識が苦手です。Google検索で出てきた情報が古い情報で、今では利用できない。というのは誰しもが経験してきたのではないでしょうか。RAGでも、同様の問題が発生します。 今回紹介する「VersionRAG」は、内容が時間経過でどんどん更新されていくドキュメン... Source link

大阪万博が昨日閉幕したので、大阪万博の予約サイトの API について自分が調べたことを公開しようと思います。 数日前にタイムスリップした気持ちでお読みください。 また、脆弱だと思ったポイントもあるので、閉幕したのでそれも解説しちゃいます。 想定読者 万博のアプリの裏側をちょっと覗いてみたい人 大阪万博の脆弱っぽい部分をちょっと知りたい人 閉幕してしまったけれど自分がどこに行ったかを思い出したい人 次日本で万博が開催されたときにアプリを開発する人、および発注する人 tl;dr 成果物: https://github.com/pnsk-lab/myakumyakujs 認証の... Source link

こんにちは! 株式会社Sally エンジニアの haruten です♪ 私たち株式会社Sallyでは、マーダーミステリーをスマホやPCで遊べるアプリ「ウズ」や、マーダーミステリーを制作してウズ上で公開・プレイできるエディターツール「ウズスタジオ」などを開発・運営しています。 https://sally-inc.jp/ 今回はReactのカスタムフックの設計について学び直す機会があったので、その備忘録です！ はじめに カスタムフックは、Reactにおけるロジックの再利用を可能にする強力な機能です。 しかし最近、とりあえずスパゲッティコードを切り出して分割するだけに利用していることに気づ... Source link

はじめに データベース（RDB）の設計で深く考えずにテーブルにカラムを追加してしまうことはありませんか？テーブルの追加よりもアプリケーション側での変更が少ないので、心理的ハードルが低いこともあるでしょう。しかし、そうしてカラム追加していくうちに取り返しのつかないことになるかもしれません。 この記事では大きく以下の3つに分けて、なぜ気軽にテーブルにカラムを足してはいけないのかを説明します。 そもそもデータベース設計がちゃんとできていないことの兆候である 変更のコストが大きい インデックスの設計が難しくなる そもそもデータベース設計がちゃんとできていないことの兆候である 気軽にカ... Source link

はじめに 最近開発しているTUIのエディターがあるのですが、 これはマークダウン（の方言）をリッチテキストとしてレンダリングし、同時に編集も可能になるような設計をしています。 どういうことかというと、添付動画のような感じです。 こんな感じで、プレビューモードと編集モードを分けていません。 シャープを入力してスペースを挿入すると即座に見出しになり、シャープは見えなくなります。 アスタリスクで囲めば太字になるし、太字テキストを消すとそれを挟んでいたアスタリスクも一緒に消えます。 ちなみに、実用的なツールを作ってみたのでぜひ使ってください、といえるほどの完成度ではないです。 正直なとこ... Source link

当社は設立してから13年以上経ちます。私たちはもうスタートアップではないと決めていますが（大きな夢を持つ「中小企業」です）、それでもまだインディーズです。私たちはトレンドが去来するのを見てきました。私たちはトレードオフを理解した上でやるべきことをやるだけであり、可能な限り改善し続けるつもりです。 リンク タイムジャンプ 00:05 私たちはまだインディーズスタートアップですか? 04:32 CodePen でのリモート作業 19:20 中小企業における進歩と進歩 22:51 テクノロジー業界でのキャリアのチャンス 25:39 無料で始めるスタートアップ 29:17 未来への2.0 ...

はじめに JavaScript の this、混乱したことありませんか？ 「呼び出し方で変わる」「イベントで指すものが違う」──誰もが一度はハマるポイントです。 でも、Arrow Function（アロー関数）を使うと this の挙動が一気にわかりやすくなります。 この記事では、「なぜ Arrow Function では this が変わらないのか？」を ES5 の関数型の書き方で解説します。 ※ class 構文は使いません。全部関数とオブジェクトリテラルでいきます！ Arrow Function はただの省略記法じゃない const greet = (name) =&... Source link

はじめに 私の2025年6月ごろからの取り組みとして、Claude CodeによるVibe CodingでRulesyncというOSSツールを公開しました。 そこでかなり自由にClaude Codeでいろんな手法を試すことができましたので、AIコーディング全般のTipsをお伝えできればと思います。 一方で（人間の介入が少なすぎる）Vibe Codingの弊害としてコードベースやドキュメントが崩壊し、途中で開発がストップした場面もありました。ここのプロセスの反省と、どのように開発可能に復帰させたかという点も紹介します。 最後に人間の役割、AIの役割、ソフトウェア開発の未来といったトピックに触れたいと思います。 Rulesync: 主要なAIコーディングツールの設定ファイルを一括管理 まず、私が開発・公開したツール Rulesync について簡単に紹介します。 こちらのXポストをご覧ください。 https://x.com/suin/status/1943203866117574699 cursor/rules, CLAUDE.md, github/custom-instructions.md などなど、思うところがあるのではと。 次々と新しいAIコーディングツールが発表され、トレンドも頻繁に変わる中で、我々ユーザーとしてはそれらのさまざまなファイル形式の対応に迫られるというペインが生じています。それでさっきのようなミーム的なポストにつながったりするわけですね。 最近は AGENTS.md という標準化の流れで、RulesやMemoriesと呼ばれるファイルについては統一・ペイン解消の流れがあります。 ただ、まだ、AGENTS.mdもすべてのツールにおける統一採用には至っていませんし、Custom Slash Command, Subagent, MCP連携ファイル, Ignoreファイルなどがツールごとに分かれている状況は引き続き残っています。さらに別のカテゴリーのファイルが生まれる可能性もあるでしょう。 そこでRulesyncを開発することでこの問題の解決を試みました。 https://github.com/dyoshikawa/rulesync Rulesyncを使うと、rules, ignore, MCP, commands,...