ブックマーク / zenn.dev (3,069)

  • そのテスト、最後まで実行されていますか? jestとnpm-run-allの恐るべき罠

    皆さんこんにちは。この記事では、筆者が最近業務中に経験した恐るべき罠についてシェアしたいと思います。 CIでユニットテストを実行することは、とても多くのプロジェクトで行われています。ユニットテストは特に、既存のコードの変更を自信を持って行うために必要なものです。弊社でも、CI (GitHub Actions) でユニットテストを実行しています。 あるとき、CIの挙動が不安定になったことをきっかけに、CI上でのユニットテストの実行について調べてみました。その結果、とんでもないことが判明したのです。 不安定になったCI 時折、CIにすごく時間がかかり、30分経ったあたりでタイムアウトしてしまうことがありました。そのときのログを見てみると、jestによるユニットテストが実行されている最中に、何のログも出力せずに突然止まっているようでした。そのようなときはリトライするとそこそこの確率で成功します。

    そのテスト、最後まで実行されていますか? jestとnpm-run-allの恐るべき罠
  • <button>とかのスタイルを消して書き直すときに考えることの備忘録

    all: unset; などを使ってUAスタイルシートを消してまっさらな場所からスタイルを当てるのは気持ちがいいですが、アクセシビリティ等の観点から重要な分岐が見落とされる可能性があります。 ここではChromeのUAスタイルシートを参考に、検討しておいたほうがいい状態をいくつかリストします。 (もちろん、既存のUIコンポーネントライブラリの使用が可能であれば、それが最も堅牢な選択肢でしょう。) 参考 各ブラウザのスタイルシート HTMLのスタイルシート UAスタイルの中には、CSSのカスケードルールの範疇で実装されているものもあれば、レンダリングエンジンの特別処理として書かれていて作者スタイルシートでの上書きが不可能なものもあります。これはブラウザ実装により異なります。 スコープ UIコンポーネントを作るような場面を想定しています。したがって、要素名自体は固定として、その中で見落としがち

    <button>とかのスタイルを消して書き直すときに考えることの備忘録
  • 言語モデルはどのようにして知識を蓄えているのか? 関連文献の紹介

    この記事は Ubie Engineering Advent Calendar 2023 15日目の記事です。私は現在、 新しいプロダクトのプロダクトオーナー (PO) として働きつつ、機械学習エンジニアとして大規模言語モデル(LLM)を活用する業務にも携わっています。Ubie は LLM にかなり力を入れており、社員の生産性向上 やプロダクトへの機能追加 など、色々なところで LLM が活用されています。 また、私が所属するチームでは、既存の大規模言語モデル(LLM)の活用に加えて、LLM 自体に関する理解を深め、知見を蓄積する取り組みも行っています。その中で特に「言語モデルはどのようにして知識を蓄えているのだろうか?」という問いは、非常に興味深いと感じました。そこで、この記事では、言語モデルと知識獲得に関する文献をいくつか紹介したいと思います。 知識ベースとしての言語モデル そもそも「言

    言語モデルはどのようにして知識を蓄えているのか? 関連文献の紹介
  • 日本発のReact UIコンポーネントライブラリ 『Yamada UI』

    初めまして、プログラマーを始めて3年目の山田です。今回、日発のReact UIコンポーネントライブラリYamada UIをリリースしたので、その素晴らしい機能の数々を紹介していこうと思います。 ちなみに、Yamada UIのYamadaは山田が名付けたわけではありません。気になる方は、山田に聞いてください。 Yamada UIとは 一言で言うならば、『すべてのUIコンポーネントライブラリを超えた(つもり)』のUIコンポーネントライブラリです。 現在のUIコンポーネントライブラリで代表的なものと言えば、Material UIやChakra UIであり、フロントエンドエンジニアであれば、誰でも知っている知名度だと思います。 しかし、現在主流となっているUIコンポーネントライブラリは数年前に開発されたものであり、色々な面(カラーモード・アニメーション・CSSプロパティ・型安全など)において首が

    日本発のReact UIコンポーネントライブラリ 『Yamada UI』
  • お正月だからCSSで門松作った

    皆様、あけましておめでとうございます。(ちょっと気が早い) お正月なのでCSSで門松を作りました。 個人的にも良くできたと思うので、こだわりポイントとかを書いていきます。 完成形 ↓実際の門松 ↓コード(github) こだわりポイント なんか丸いやつ background-image: radial-gradient(#d42c32 30%, #ffffff00 30%), radial-gradient(#d42c32 30%, #ffffff00 30%); background-size: 34px 34px; background-position: 8px 9px, 27px 26px; background-imageの中にradial-gradientを用いて水玉を作り、はみ出す部分をoverflow: hidden;で非表示にしました。 radial-gradientは元

    お正月だからCSSで門松作った
  • テーブル駆動テストを使った QA エンジニアとソフトウェアエンジニアの連携

    test.each([ {a: 1, b: 1, expected: 2}, {a: 30, b: 5, expected: 25}, ])('.sum($a, $b)', ({ a, b, expected }) => { expect(sub(a, b).toBe(expected); }); テーブル駆動テストは Go 言語を使った開発で良く使われるスタイルです。Go 言語の GitHub リポジトリの Wiki にはテーブル駆動テストに関するページがあるので、興味がある人はそちらを読んでみてください。 テーブル駆動テストを使った QA エンジニアとソフトウェアエンジニアの連携 テストがなくリファクタリングが困難なフロントエンド 症状検索エンジン ユビー には、ユビーのビジネスにとって重要な、とあるページがあります。そのページではフロントエンドからロギングサービスに対してたくさんのロ

    テーブル駆動テストを使った QA エンジニアとソフトウェアエンジニアの連携
  • 大学の C++ 講義で使っているオンラインコンパイラ

    C++ Advent Calendar 2023, 9 日目の記事です。 学校で C++ を教える場合、受講者に最初から Visual Studio Code や、Visual Studio, Xcode などの統合開発環境をインストールしてもらうのは難しいことがあります。 とくにプログラミングが初めての学生、パソコンに不慣れな学生が多い場合は、なるべく環境構築に時間をかけず、スムーズに C++ プログラミングの学習に入れるよう、講義の序盤ではオンラインコンパイラの使用が選択肢として有効です。 記事では、筆者が実際に大学の C++ 講義で使った 3 つのオンラインコンパイラを、講義での活用の観点から紹介します。 Simple C++ Editor Simple C++ Editor は、Wandbox をバックエンドとしたオンライン C++ コンパイラです。初心者がよく起こすエラーや警告

    大学の C++ 講義で使っているオンラインコンパイラ
  • フロントエンドの認可ついて(その1)

    概要 どうもukmashiです。今年は年末なのに、年末感がなくて逆にびっくりしますね。 年末で時間を持て余してるので、燻製を作りながら、年末に仕事で練っていたフロントエンドにおける認可について、整理しようと思います。 なお、RBACやPBACなどの認可の種類に対する考え方については基的に触れません。 記事は2部作です。 記事は3部作になりました。 フロントエンドの認可ついて(1)← 記事 ReactVueを始めとして、SPA、Next.js、Nuxt.jsに関する認可についてまとめます。 フロントエンドの認可ついて(2) 後半では、FEとBEで認可の処理が二元化してしまうのをどうクリアするかの提案です。 フロントエンドの認可ついて(3) 2での提案を具体的にReactのコードとして落とし込みました 記事での用語 話を始める前に、用語整理しておきます。 Page ブラウザで描画さ

    フロントエンドの認可ついて(その1)
  • Ruby公式「Pythonとの違い」から学ぶ、Pythonの「Rubyとの違い」

    はじめに 隔週で開催される社内勉強会で、Python の基的な言語仕様を紹介するために Ruby 公式の「PythonからRubyへ」というドキュメントを用いた回が意外に盛り上がったので記事にします。 Ruby コミュニティのメンバーによって運営されている Ruby 公式サイトに掲載されているドキュメントで、Python 使いが RubyPython の言語仕様の違いを理解するのにぴったりな内容となっています。 今回、こちらのドキュメントの「Python との違い」の章を一部「Ruby との違い」に読み替えて、Ruby 使いに向けた Python との言語仕様の比較を行いたいと思います。 Rubyと違って、Pythonは… Pythonと違って、Rubyは… 引用: PythonからRubyへ 文字列は不変です。 文字列は可変です。 引用: PythonからRubyPython

    Ruby公式「Pythonとの違い」から学ぶ、Pythonの「Rubyとの違い」
  • AtCoder ガチ言語 Haskell 🔥

    Haskell で AtCoder に入門しましょう

    AtCoder ガチ言語 Haskell 🔥
  • GoエンジニアがReactにチャレンジして驚いた5つのこと

    はじめに こんにちは。Magic Momentでエンジニアをしている伊藤です。 いつもはMagic MomentのプロダクトであるMagic Moment Playbookの開発に携わっています。 元々はGo言語エンジニアとしてMagic Moment Playbookのバックエンド開発に参加し始めました。 ですが、今回フロントエンドエンジニアとしてフロント側の開発に参加することとなりました。 Go言語を使っていたエンジニアReactを使い始めて驚いたこと、理解しづらかった部分などを書いていこうと思います。 これからフロントをやってみたいと思うバックエンドエンジニアの方の参考になれば幸いです。 そもそもReact.jsとは Magic Moment PlaybookのフロントエンドReact.jsを使って構築されていますが、そもそもReactとはなんなのでしょうか。 ReactはFac

    GoエンジニアがReactにチャレンジして驚いた5つのこと
  • SRE を立ち上げた4ヶ月後の世界

    この記事は、Magic Moment Advent Calendar 2023 4 日目の記事です。 こんにちは! Magic Moment で Senior Engineering Manager 兼 SRE Engineering Manager をやっている 木村 (@ryurock) です。 Magic Moment アドベントカレンダー 4 日目では、2023年9月に SRE チーム を立ち上げた 4 ヶ月後の世界。 というテーマでアドカレやっていきたいと思っています。( ー`дー´)キリッ SRE チームの立ち上げの経緯 遡る事、2023年7月頃に弊社が提供しているサービス Magic Moment Playbook のコアデータが立て続けに更新できない障害が相次ぎました。 Sales Operation を行う上で、大切なデータが頻繁に反映されないこの由々しき事態はユーザー様

    SRE を立ち上げた4ヶ月後の世界
  • シフトレフトがなぜ効果的なのか「抽象度」から考える

    この記事は 株式会社ログラス Productチーム Advent Calendar 2023 18日目の記事です。 はじめに ログラスの龍島(@hryushm)です。 ソフトウェア開発において、「シフトレフト」すなわち開発の早い段階でテスト計画を立て、実施していくことが全体的なコスト削減や価値提供の早期化につながるとよく言われています。 この記事では、シフトレフトによってもたらされる効果をログラスでの実例を用いて紹介した上で、なぜ効果が出るのか?を「抽象度」というキーワードから紐解いてみようと思います。 記事ではスクラム開発においてPBIを完了させる中でシフトレフトしていくことを念頭に書いていきますが、ソフトウェア開発の任意のタイミングにおいて適用できる概念だと考えています。 テスト設計を実装前にやることの有用性 まずシフトレフトによって何が起こるのか?を考えます。PBIに書かれた受け入

    シフトレフトがなぜ効果的なのか「抽象度」から考える
  • 医療のマスターDBを爆速で検索するWebサービスを爆速で作った

    ヘンリーの Lead Architect の kohii です。 先日、医療系の個人開発サービス MediXplorer を作ったので、簡単なサービス紹介と技術的に工夫したこととかについて書きます。 作ったもの MediXplorer は厚労省(もしくは社会保険診療報酬支払基金)から提供される 医科診療行為マスター を検索・閲覧するためのWebアプリケーションです。 医科診療行為マスターって? 日には診療報酬制度というものがあり、病院等が医療サービスを提供した際の医療費の計算ルールが定められています。このシステムのもと、医療機関は提供した医療行為ごとに決められた点数に基づき医療費を計算し、患者や保険組合に請求します。(初診料 = 288点 みたいなやつ。1点10円で、通常そのうちの3割を会計時に支払う。) 「医科診療行為マスター」は、これらの医療行為のデータベースの一つで、列数150、行

    医療のマスターDBを爆速で検索するWebサービスを爆速で作った
  • マイクロサービスアーキテクチャへのIntegration Test導入のすゝめ

    こんにちは、バックエンドを中心に開発をしています、野島といいます。 ソフトウェアテスト自動化カンファレンス2023に「マイクロサービスアーキテクチャへのIntegration Test導入のすゝめ」というお題で登壇しました。 そちらで発表した内容を記事にしつつ、当日話しきれなかった内容についても書きます。 発表は下記の内容を話しました。 Integration Testの導入を決意した背景にあった課題 Integration Testの導入/運用での工夫 Integration Testを導入して得られたメリット まとめ 記事では、Integration Testを以下の定義で扱います。 マイクロサービスが依存する外部コンポーネントをモック化せずに行うAPIテスト。 外部コンポーネントとは、具体的にはデータストア、外部サービス、テスト対象が依存するマイクロサービス、などを指します。 テス

    マイクロサービスアーキテクチャへのIntegration Test導入のすゝめ
  • Web版しかなかったサービスがGoogle Playのアプリ大賞を受賞するまで

    先日、症状検索エンジン「ユビー」のAndroidアプリが、Google Play ベスト オブ 2023 優れたAI部門で大賞を受賞しました。 リリースから約2年半、みんなで育ててここまで来ることができましたが、実は最初はWeb版のおまけで、1週間で突貫リリースしたアプリでした。そこからの成長を振り返り、技術的におもしろそうなトピックをいくつか紹介します。 Web版をWebViewで動かすだけ モバイルアプリ(以下アプリ)のリリース当時、Web版はすでに数百万MAUまでグロースしているプロダクトでした。そのため、ある程度PMFした体験がベースとしてあった上で、アプリを入れてもらえるのか、アプリ特有の体験(通知等)が刺さって継続的に使ってもらえるのか、といった点が主な不確実性でした。 そこを最速で検証するために Capacitor を採用しました。Capacitor は Ionic Fram

    Web版しかなかったサービスがGoogle Playのアプリ大賞を受賞するまで
  • Astro ゆく年くる年

    8 月 30 日に v3.0 がリリースされ、それから約 3 ヶ月後の 12 月 5 日には v4.0 がリリースされており、メジャーアップデートのペースがやや早かったように感じますね。Astro の co-creator である Matthew Phillips によると、v4.0 における大きな変更の一つに Vite 5 へのアップデートがあり、これはもともと v3.0 に含まれる予定だったのが、Vite 5 のリリースが遅れてしまい、一方で v3.0 の目玉機能である View Transitions を早くリリースしたかったため、まず先に v3.0 をリリースし、その後に v4.0 で Vite 5 を含めるという流れとなり、結果的に v3.0 と v4.0 のリリースが短期間で連続してしまった、という事情があったようです。 GitHub スター数の推移 https://star-

    Astro ゆく年くる年
  • Lispとオブジェクトシステム

    Lispとオブジェクト、オブジェクト指向システムを概観します。

    Lispとオブジェクトシステム
  • Vim で SQL を素で編集してるの?

    タイトルは釣りです。 この記事は Vim Advent Calendar 2023 16 日目の記事です。 はじめに みなさんは SQL はどんな環境で編集しているでしょうか? Visual Studio Code?それとも Vim?まさか Vim/Neovim の素の状態で編集していたりしませんよね? 僕はしていました。 sqls (SQL Language Server) 以前、lighttiger2505 さんが開発した sqls に少しコントリビュートしていた頃がありました。 既に public archive になってしまっていますが、機能として実用的なままです。コントリビュートしていた頃は、あくまで OSS としての興味の方が大きく、如何に機能的にしていくかだけ着目していたため、常用はしていませんでした。 あらためて常用してみる sqls の導入 Vim から sqls を使う

    Vim で SQL を素で編集してるの?
  • HTBの新作配信でCloudflareのキャッシュの挙動を壮絶に調査した件

    この記事は、「HTB Development Team with Friends Advent Calendar 2023」の12月7日分の記事です。 副題は「副題:三浦さんとCloudflareとCache Eviction(と大栗さん)」です。 今年三浦さんとの付き合いといえば、Cloudflare Meet-upを1月に立ち上げてもらったことと、お仕事でも付き合いがあったことです。 肝煎りコンテンツの新作動画配信でCloudflareを採用してもらいました。 完全なる従量課金ではなく、1年間毎月新作公開をしても予算を超過しないという思い切った提案となりました。クラウドの従量課金は素晴らしい考え方であることは事実ですが、企業全体がまだデジタルに造詣が浅い場合、様々な試行錯誤とコストが連動するため、確定効果が見込めないものは承認がされないケースなどが考えられます。せっかくならデジタル領域

    HTBの新作配信でCloudflareのキャッシュの挙動を壮絶に調査した件