twadaさん講演「質とスピード」@Accenture Innovation Hub Tokyo
先日、私が所属する品質コンサルティング組織「QE&A」の活動の一環として、初めて全社的なイベント「QualityConf」を開催しました。 今回は、TDD（テスト駆動開発）のエバンジェリストとして国内外で知られるtwadaさん（和田卓人さん）をゲストにお招きし、Accenture Innovation Hub Tokyoにて「質とスピード ～ソフトウェア開発の典型的な誤解を解く～」というテーマで講演をしていただきました。 普段、テスト自動化やQA活動に携わる私にとって、twadaさんとはずっとお会いしてみたいと常日頃から思っていましたので、社内向けイベントで直接お話しいただく機会を設けられたこと、非常に嬉しく思っています。 今回は、twadaさんの当日の講演の内容をダイジェストでお届けします！ なぜ今、「質とスピード」なのか？ ソフトウェア開発に携わる誰もが直面する問題、それが「質とスピー
AIに「分からない」と言わせるための「RAG」の手法
株式会社ナレッジセンスは、生成AIやRAGを使ったプロダクトを、エンタープライズ向けに開発提供しているスタートアップです。本記事では、RAGシステムがより正直に、知らないことには「分からない」と言えるようにするための手法「DTA（Divide-Then-Align）」について、ざっくり理解します。 この記事は何 この記事は、RAGの新手法である「DTA」の論文[1]について、日本語で簡単にまとめたものです。 今回も「そもそもRAGとは？」については、知っている前提で進みます。確認する場合は、こちらの記事もご参考下さい。 本題 ざっくりサマリー DTAは、RAGの精度を上げるための新しい手法です。USTCやCASIAなどの研究者らによって2025年5月に提案されました。 通常のRAGでは、外部ソースから検索して得た情報を直接利用して、最終的な回答を生成します。ただ、これだけだとLLMの元から
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
Cline+Claudeでの開発を試してみた感想
2年くらい前からCopilotやCursorによるコーディングサポートを受けた開発は実際に行なっていたのだけど、先週くらいからコーディングエージェントによる開発にも本腰を入れて調査を始めた。以下はその際に雑に調べた情報まとめ。 そんでこの土日くらいまで毎日、主にCline+Claude(その他versionや派生系クライアントも含む)を使って色々とコード生成させたりして実験したのでその感想を書く。 試してみたこと 最初は簡単なpromptを入力してポン出しで生成させるToDoリストとか管理画面みたいなものを作らせてワイワイしてた。だけど何回かやったら流石に飽きてきたので、もう少し規模の大きなタスクに取り掛からせることにした。 既存プロジェクトへのテスト追加 まず最初に、個人開発してるモンハンnowのTA走者向けのwebサイトが現状テストゼロだったので、これに対してClaude 3.5 so
Webサービスぶっ壊れ地獄、行きやすぜ！
はじめに なあジョージさんよ……あんた、いつもこう言ってたよな？ 「便利さとシンプルさ、それがユーザーも開発者も幸せにする秘訣だ」ってよ。 あたしゃな、その言葉に乗っかっちまった。ユーザーのため？ 開発を効率化するため？ そりゃあ立派なもんだ。でもな、それが「命取り」になることがあるんだぜ。 シンプルに作ったはずのサービスが、悪意ある奴らに好き勝手利用されて、時には「あたしの知らなかった地獄」を見せてくれる。越えたらいけない一線がある。そんな話を、今日はしようじゃねえか。 さあ、これがあたしらの舞台だ。 セキュリティの教科書には載らない、バグバウンティでも指摘されない、ニュースにもならない、「 現場のWebサービスぶっ壊れ地獄 」 ……教えてやりますぜ！！ 1. サインアップし放題からのクレカ決済し放題地獄 この地獄、知ってやがるかい？ 聞いてくれよ。ユーザーを簡単にサインアップさせる……
S3のメタデータを用いた攻撃
例えば、Content-Typeメタデータの値を細工したオブジェクトを取得させることでXSSを発生させたり、Content-Dispositionメタデータを細工してRFD (Reflected File Download) を引き起こしたり、 x-amz-storage-classメタデータを操作して意図せぬストレージクラスを使用させEDoS (Economical Deninal of Sustainability)を発生させたり、といった攻撃が成立する可能性があります。 中でもContent-Typeを悪用したXSSは、S3の仕様や使用方法だけでなく、ブラウザの挙動にも注意を払う必要があり、アプリ開発者は攻撃の原理と対処を理解しておく必要があります。 9/21にAzaraさんとSecurity-JAWSのコラボで、この問題にフォーカスしたCTFイベント「とある海豹とSecurity-
AIと個人開発したくなったらまずCursorで要件定義だ！
はじめに こんにちは！yasunaです！ 私は普段は会社員をしていてエンジニアではないのですが、趣味でプログラミングをしています！ 今回はAIの力をフル活用しながら個人開発アプリの要件定義を作るまでの流れを記録しておきたいと思います。 今回作ろうとしているアプリケーションについて 「TikTok台本作成支援システム」というアプリケーションを作ろうとしています。ユースケース図はこんな感じになりました。 この図を作るときに役に立ったのがAI搭載エディターのCursorです。 CursorはAIがコードを生成してくれるので、コードを書くのが苦手な私のような人でもAIとチャットしながらコードを書くことができます。 こちらの図もCursorでmdファイルを作成して図に変換しました。 これはPlantUML（プラントユーエムエル）という図表作成用のマークアップ言語です。 UML（Unified Mod
Webフロントエンドで脱SSRして料金を6割節約した話
このブログ記事では、ORICALのフロントエンドのインフラ構成を移行し、SSR（サーバーサイドレンダリング）をやめてCSR（クライアントサイドレンダリング）に一本化した際の話について、移行前と移行後の構成の違いに焦点を当ててご紹介します。移行にあたっては様々な苦労がありましたが、それはまた別のブログ記事で詳しくお話ししたいと思います。 ORICALとは まず、ORICALについて簡単にご紹介します。ORICALは、選手や力士、キャラクターやVTuberの電子トレカをコレクションし、それらを使って対戦などができるサービスです。 デジタルなカードであることを活かして、レアリティの高いカードには多彩なエフェクトが適用されていたり、静止画ではなく動画であったりします。 移行前の構成 ORICALは複数のスポーツチームや芸能事務所等（弊社ではパートナーと読んでいます）と提携し、パートナーごとにサービ
書籍『GitHub CI/CD実践ガイド』を読みやすくする技術
拙著『GitHub CI/CD実践ガイド』は内容だけでなく、読書体験にもこだわりました。AmazonやSNSでも読みやすいという声は多く、技術書としては珍しい観点で評価を得ています。 Amazonにおける「GitHub CI/CD実践ガイド」の読者レビュー 本記事では書籍の「読みやすさ」という切り口から、執筆の舞台裏を紹介します。 最高の読書体験を目指す 技術書の使命は、役立つ情報を届けることです。しかし筆者は役立つだけでなく、読んでいて心地よい書籍にしたいと考えました。そこでまず決めたのが「最高の読書体験を目指す」ことです。そして最高の読書体験を実現するため、次のような設計原則を定めて執筆しました。 シンプルにする：短い文章・簡潔なコード・直感的な図表へと磨き上げる ノイズを減らす：難しい表現は避け、読者を迷わせる要素は徹底的に取り除く テンポを重視する：読者の集中力を削がないよう、読ん
開発用適当ツールは Rust で作るのもオススメ
開発用適当ツールは Go で作るのがオススメ！？ 先日、開発用適当ツールはGoで作るのがオススメ という記事を拝見しました。 まだ読んでないよという方はぜひ読んでみてください！ とても良い記事でした😌✨ Go 言語も CLI ツールの実装に向いているということも分かりました。 そして、Go 言語の魅力も伝わってきました...！！ まとめると以下のような点がメリットとして挙げられていると思います。 go run で簡単に実行できる シングルバイナリにクロスコンパイルできる go.mod / go.sum が依存性管理を楽にしてくれる 動作速度も申し分なし たしかに開発用適当ツールの作成というユースケースは Go は魅力的な選択肢だと思います！ 開発用適当ツールは Rust で作るのもオススメ 前置き 最初に大事なことを言っておきます。 タイトルにもあるように、Rust も であって GO
J:COMとの戦い 〜勝手にグローバルIPアドレスになってしまう
自己紹介 ソフトウェアエンジニア 大学非常勤講師(情報工学） 何があったのか？ 7月に引っ越しをし、J:COMのネット回線を契約したところ、 グローバルIPアドレスが割り当てられてしまう という問題が発生しました。 最終的な結論としては、解決していないのですが、その一部始終を公開いたします。 J:COMの回戦を使っている方は、知らぬ間にグローバルIPアドレスを割り当てられている可能性があります そして、この問題に対して、J:COMの対応はとても酷いものでした。 コトの発端 契約して2週間ほどしたある日、家のPC間で通信が出来ないことに気がつきました。 pingを打っても反応せず。「ICMP弾いていたっけかな？」と思って確認したがそんなことはない。 まさかと思い、IPアドレスを確認すると、 WiFiで繋いでいるPC側が58.156.XXX.XXXというアドレスになっていた 有線で繋いでいる側
インデックスとは何？MySQL(InnoDB)とPostgreSQLのインデックスの違いとは？調べてみました
はじめに こんにちは。calloc134 です。 前のハッカソンイベントで、UUID をプライマリキーに利用するかどうかの議論がありました。 結果的にはあまりパフォーマンス要件の高くないアプリケーションであったため、プライマリキーとして UUID を採用することにしたのですが、イベント終了後に気になったため、調査を行いました。 今回は、この調査の結果を元に、MySQL と PostgreSQL におけるインデックスの内部構造の違いと、UUID をプライマリキーにする際の問題についてまとめてみたいと思います。 インデックスの概要 インデックスとは インデックスとは、データベースのテーブルに対して、アクセスを高速に行うための指標となる構造のことです。 インデックスとは日本語で索引ですが、まさに辞書の索引のように、アクセスにおいての手助けをしてくれます。 より具体的に解説すると、データベースにお
ChatGPT (o1-preview) にテストを渡してコードを実装させるとどうなるか試した
はじめに 前にも別のモデルでやってる ただ o1-preview は、やり取りを重ねるよりも一発で終わらせるほうがいいらしいので、最終的なテスト全体を渡すようにした。 情報の提示方法が異なると当然結果も変わるので、 gpt-4o でも同様なことを試した。 材料 プロンプトは以下。 基本的に最初にやったときと同じ。ペアプロではないのでその部分の調整をしている - 私がテストコードを提示するのでそのテストケースをパスする最小限の実装をしてください - Vue.js のバージョン 3 と Typescript で実装を行ってください - コードのみを示してくださいコードの解説などは必要ありません - スタイリングは必要ありません - テストケースに失敗したらその内容をチャットで送信するので最小限のコードの修正をしてください - テストのコードには vitest を利用しています jest と互換
ウェブエンジニアでもWasmを使いたい! アフタートーク
フロントエンドカンファレンス北海道 2024にて「ウェブエンジニアでもWasmを使いたい!」というタイトルで20分のトークを行いました． 当日のトークでは，WebAssemblyの特徴に触れつつ，特殊な用途[1]以外でWebAssemblyをどのように活用できそうか，実際にAssemblyScriptのコードを例に紹介しました． AssemblyScriptはTypeScriptをWebAssemblyにコンパイルできる言語として紹介しましたが，より正確にはTypeScriptと同じ構文を持つ言語をWebAssemblyにコンパイルする言語という方が正しいかもしれません． これはTypeScriptにはない構文などをAssemblyScriptでサポートしているという話ではなく，TypeScriptの型推論などの言語機能を活用してAssemblyScriptのコードを書くことができるように
技術選定の失敗 2年間を振り返る TypeScript,Hono,Nest.js,React,GraphQL
技術選定の失敗 2年間を振り返る TypeScript,Hono,Nest.js,React,GraphQL はじめに 新たに書きました。 MySQLを使っても会社は潰れない 久々に記事を書いたのでどうぞお手柔らかに... 私が過去2年間で行った技術選定の成功と失敗を振り返り、その学びを共有したいと思います。 文才無いので淡々と箇条書きでいきます Twitterエンジニア垢作りました。エンジニアのお友達がいません。 @uncode_jp 注意 意見を押し付けるものではありません。ただ建設的な議論は大事だと思う。 自分の意見は明確に、歯切れのよい表現を意識している。人それぞれだよねみたいな感じに逃げたくない。技術選定に結論はある（過激）。 ただし技術選定にはコンテキストがあり、例えばプロダクトのフェーズや組織の事情によって当然結論は変わる可能性がある。 OSSの開発者さん達は偉大ですごい。あ
熟練が必要なUIについて、それがよくない理由と、UIの慣性について
久しぶりに記事を書く。最近マルス端末のUIについてツイートがあった。 この件に関して、UIについてやUXに対して日々やってきている人間は「ダメなUI」という認識の人が多いように思う。一方で、システムの開発者にとってはこれは、その認識でない人間が多いようだ。なので、この辺を私なりに意見を書いておこうと思う。 まぁ、これはいつもなのだが、書いていることが散らかってる。基本的に音声入力のメモなので、読みにくいかもしれないが読んでくれ参考になれば幸いだ。 熟練が必要なUIは基本的によくない まず、基本的に熟練が必要なUIはそもそも良くないって話をしていく。順番に話していこう、まず、熟練が必要なUIが支持される理由を考え、それに対して、批判していき、なぜ熟練が必要なUIはダメかを語ってみよう。 熟練が必要なUIが支持される理由 その前に、こういった熟練のUIが支持される理由についてかいておこう。それ
令和のHTML / CSS / JavaScriptの書き方50選
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
Pinterest社で運用されているText-to-SQLを理解する
導入 こんにちは、株式会社ナレッジセンスの須藤英寿です。普段はエンジニアとして、LLMを使用したチャットのサービスを提供しており、とりわけRAGシステムの改善は日々の課題になっています。 本記事では、Pinterest社のエンジニアチームが紹介していた、実運用環境におけるText-to-SQLの構築方法に関する記事の紹介をします。 Text-to-SQLを実際の運用レベルで実現するための手法が解説されているので、その内容を解説、そして考察していきたいと思います。 なおこの手法には特に名前などは設定されていなかったので、以降Pinterest社の提案するText-to-SQLをPinterest Text-to-SQLと呼称します。 サマリー Pinterest Text-to-SQLは、RAGのシステムを最適化することで 検索に必要なTableのより正確な抽出 実際に使用されている値に準拠
オンライン自習室アプリを個人で開発した件
はじめに 私は、「アプレンティス」の2期生として、現時点で約6ヶ月間、プログラミングの学習をしています。 そのカリキュラムの中で、「Sabo Learn（サボラーン）」というオンライン自習室を提供するWebアプリをリリースしました。 前置きとして、開発期間は約2ヶ月間です。（平日は仕事をしているため、実稼働はもっと少なく、約500時間が開発に使える時間でした。） また、「誰かの課題を解決する」というテーマで、実際に使ってもらえるプロダクトを目指して開発しておりますが、それと同時に、自身の転職活動のポートフォリオでもあります。 そのため、随所に、「どうしてわざわざそんな技術を使ったの？」「インフラのスペック過剰じゃない？」といったツッコミどころがあるかもしれませんが、そのほとんどは「自分が知らない技術をキャッチアップしたかったから」か、「これくらいのことなら実装できます」というアピールのため
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ITエンジニアのためのプロンプトエンジニアリング
