この記事はAdvent of Spin 2023というオンラインチャレンジに参加した結果してSpinに入門した結果のまとめとなっています。学んだことのまとめですが、Spin入門としても利用いただけるかなとも思っています。 TL;DR マクロサービスフレームワークのSpinをつかって、Rustでマイクロサービスを作ります。 JSONのやり取りや、key-valueストアの利用、ルーティングがカバーされています。 Hurlというツールを使ってテストファースト開発します。 Spinとは？ Spinとはマイクロサービスを作成するためのフレームワークで次の特徴があります。 イベント駆動型のフレームワーク HTTP(S)とRedisにデフォルトで対応 いくつかのストレージに標準で対応 イベントハンドラーはWasmコンポーネントとして実装される WASI preview 2に対応 開発元が配布しているコ

この記事は、Magic Moment Advent Calendar 2023 19日目の記事です。 こんにちは、 Magic Moment の一人だけ QAE の yano です。 一人だけの QAE が GUI を用いた E2E 自動テスト(以降、自動テストと表記)を書いて運用していくことは、自動テストの新規作成やメンテナンスを行うには限界がありますし、他の QA 活動が進まなくなるという問題が出てきてしまいます。 そこで今回は QAE ではなく開発メンバが主体となって自動テストの運用をできるように仕組みを整える必要がありました。 本記事では自動テストを開発メンバに布教していく際に感じた5つの壁と、壁に対して打ち込んできた楔について書かせていただこうと思います。 1の壁 : 何のための自動テストか分からない ユニットテストはあるけど自動テストはないという現場ですと、漠然と自動テストもあ

私は今までのキャリアの中で、CTOのいない会社に3回入社してきました。うち2社はEMとして入社してVPoEになりました。そこでの反省はもちろんありますが、成果を出すことができました。そして1社は、なんと3週間で退職しました…。 OPENLOGI Advent Calendar 2023で今年は何を書くか考える中で、私のようにCTOがいない会社に何度も入社した経験があるEMはそうそういないのではないかと思いました。将来CTOのいない会社に入社するCTO・VPoE・EMといったマネジメント層の方に、私の経験から学んだことを参考にしていただければと思います。 ※OPENLOGIには現在CTOは在籍しております。 CTOのいない会社とは CTOのいない会社とは、エンジニア組織のトップであるCTO・VPoE・開発部長といった立場の人がいない、もしくは、トップはいるけれど何らかの理由（トップがエンジニ

この記事はWebAssembly Advent Calendar 2023 2日目の記事です． ガベージコレクタ(WasmGC)[1]が10月頃にChromeとFirefoxでデフォルトで有効になり，標準化目前ということで大いに盛り上がったのは記憶に新しいかと思います． これはChromeが対応したというよりはChromeが採用しているJavaScriptのランタイムであるV8がデフォルトでWasmGCが有効になったというのが正確な表現で，DenoでもDartからビルドしたWasmを実行する際にGCを有効にするフラグを立てる必要がなくなり，実行しやすくなったなぁと皆さんも感じているかと思います． -$ deno run --allow-read --v8-flags=--experimental-wasm-gc run.js +$ deno run --allow-read run.js

この記事は未踏ジュニアAdvent Calendar : 10日目です. カーネル, 書きたくないですか? こんにちは, horizon (@horizon2k38)です. 私は2023年の未踏ジュニアでA9Nというマイクロカーネルを作成していました. 人類なら誰しもがカーネルを書きたいと思ったことがあるはずです. そんな方のために, 未踏期間で得られた "0からカーネルを如何にして学び, 実装したか" という知見をより一般化して解説しようと思います. この記事の内容をすべて達成することで, あなたもきっとカーネルを書くことができるでしょう. やれば出来る きっと 絶対 私No.1 注: この記事はどちらかといえば初心者向けなので, 自信がある方は最下部の"参考文献"と, 私が書いた低レイヤー学習のロードマップのみ読むことをおすすめします. カーネル/OSとは そもそもカーネルとは, 所謂

まとめ sqlc-gen-typescript かなり良い 自分が TypeScript でウェブアプリを利用するなら間違いなく sqlc を選択する SQL は共通言語という点で本当に偉大 sqlc とは sqlc とは Go で書かれた SQL を元にコードを生成するツール。 なぜ sqlc ? 結局、それぞれの ORM 固有の技術を覚えるくらいなら SQL を覚えた方が早い 拡張に ORM が対応していようがいまいが関係ない SQL パーサーが pg_query_go を利用しているので信頼できる sqlc は PostgreSQL だけなの？ sqlc は MySQL や SQLite にも対応している。 sqlc は Go だけなの？ sqlc は Wasm でプラグインが書けるようになってきており、つい最近 TypeScript 版がリリースされた。 現時点では、 Postgr

iOSのブラウザ（Safari、Chromeなどなど）で体験の良いWYSIWYGエディタを作るのは無理ゲーである。色々と理由はあるが、いちばん辛いのはバーチャルキーボード（オンスクリーンキーボード）を表示したときの挙動だと思っている。 キーボードが表示されているときにposition: fixedが効かない WYSIWYGエディタではテキストの装飾や画像挿入などのボタンを画面のどこかに固定したくなることが多い。 しかし、iOS Safariではキーボードが表示されているときにposition: fixedなどのCSSだけで画面上に何かを固定させることが難しい。 position: fixedとbottom: 0 やtop: 0を使っても要素が画面に固定されない仕様となっている（これはposition: stickyにしても同じ）。 ワークアラウンドも上手く動かない noteやscrapbo

2023年はエッジコンピューティングとデータベース接続の分野において、Cloudflare Workers(以下CFWorkers)が中心となり多くの進歩が見られました。本記事では、この1年間の重要なトピックと、それがどのように開発体験を変えたかを振り返ります。特に、CFWorkersのエコシステムの成長、機能拡張、およびDB接続の課題と解決策に焦点を当てています。 エコシステムの進化とCFWorkers上からのDB接続需要の増加 2021年頃から2022年にかけて、いくつかのWebアプリケーションのフレームワークやエコシステムが、CFWorkers上での動作やデプロイをサポートしたことがきっかけとなり、エッジランタイム・コンピューティングの注目を集めるようになりました。 Remix Remixは、フロントエンドのフレームワークであり、エッジランタイムへのデプロイをサポートしています。 2

こんにちは！アルダグラムでエンジニアをしている@sohichiroです。 本記事は株式会社アルダグラム Advent calendar 2023 13日目の記事です。 前日は、@kageyama さんによる、SQLインジェクションの話でした。 セキュリティはいつも万全にしておく必要があるので、大変ためになる記事でした。 さて、隠れ関西民として関東地方に生息している私にとっては、翔んで埼玉〜琵琶湖より愛をこめて〜は、いろいろ込み上げてくるものがありました。確かに兵庫県は神戸と芦屋だけが飛び抜けて都会指数が高いですよ😂（私、兵庫県の田舎の方出身）。関西弁を勉強したいなら、格好の教材だと思いました。 else ifが複数回出てくることのつらみ さて、else ifです。 else if。プログラマーであれば、一度は書いたことあると思います。 言語によっては、elsif（Ruby）、elif（P

この記事は MICIN Advent Calendar 2023 の24日目の記事です。 前回はSaneさんの「データ基盤チームで社内インターンをやってみて」でした。 はじめに abekohです。MICINでMiROHAの開発をしております。 本記事では、書籍等から得た設計・実装パターンの知識や、実際にプロダクト開発で試して得られた経験などから編み出した、開発効率向上のためのWeb API開発のプラクティスを紹介します。 筆者が関わっているMiROHAは治験の業務支援を取り扱うプロダクトです。MiROHAの開発における特性として、以下のようなものが挙げられます。 治験業務に関するドメインが特有で複雑 前例が少なく、MVPを追求中。プロダクトのアプローチが頻繁に変わる 外部品質は高い水準が求められる これらの特性を意識して開発を促進させるために日々試行錯誤しております。 複雑なドメインに対す

2023/12/13 aria-disabledの付け方を改良 2023/12/11 タイポ修正 2023/12/08 next/linkのhrefにundefinedを渡すとエラーがでるため、disabledにする方法を修正 <Button asChild ref={}>とrefを指定できてしまっていたのを修正 セミコロンをつけないように 2023/12/07 タイポ修正(priamry -> primary) import { cloneElement, forwardRef, isValidElement } from "react" import styles from "./style.module.css" import clsx from "clsx" export type ButtonProps = { variant?: "primary" | "secondary"

どうもお疲れ様です。MESIです。 皆さん技術書は読んでますか？ 私は技術書が好きです。読むのも好きだし買うのも好きです。 先月は技術書を30冊ほど買っていることが判明し今月の支払いに震えております。 今は技術書が大好きで毎日のように読んでいる私ですが、昔は読み方がわからず少し読んで放置するを繰り返しておりました。 本記事では私が犯した技術書の読み方の誤りについて紹介します。 私のような技術書を買っても積読してしまう方にとって参考になれば幸いです。 頭から順番に読み、目次を見ない 一般的な本の読み方が身についていると、本を頭から順番に読んでいこうとしてしまいます。 しかし、技術書でその読み方は合わないと私は考えます。 とにかく最初に見るべきは目次！ まず目次を見て読む場所を決める。 目次を見て大体内容がわかりそうな部分は後回しにして、自分が理解してなさそうな部分から読みます。 技術書は小説

【Next.js】Google Analytics も YouTube iframe 埋め込みも公式ライブラリでいけるようになるぞ ちょっと株式会社 Advent Calendar 2023 12 月 24 日の記事です。 みなさんこんにちは、chot Inc. の Web エンジニアです。 Next.js で Google Analytics を導入するとき、どうしていますか？僕は毎度「nextjs google analytics」でググって「こうやるのか〜」と適当に作っています。本当にちゃんと計測されているのか疑心暗鬼です。 また、YouTube の iframe 埋め込みはどうでしょう。普通に iframe を埋め込むと PageSpeed Insights のスコアをごっそり奪っていきます。恐ろしいですね。 これらのサードパーティリソースを SPA である Next.js に導入

React Hook Form は高速。 Formik は早くない。改善は可能。 React Final Form はある程度早い。 React Hook Form が無難ではあるものの、CPU 6× slowdown で 100ms は通常では許容できると考え Formik を採用するのもあり。 比較したライブラリ 計測の対象にしたライブラリは以下の 3 つです。 React Hook Form Formik React Final Form パフォーマンス以外の特徴にも触れておくと、 React Hook Form TypeScript 製 頻繁に更新されている UI とフォームライブラリが密結合になりやすい Formik TypeScript 製 ある程度更新されている UI とフォームライブラリを疎結合にしやすい React Final Form コードのほとんどが JavaScr

この記事は 株式会社ゆめみの23卒 Advent Calendar 2023 8日目の記事です。 現代のWebフロントエンド開発において、コンポーネントの効率的な管理と可視化が求められる中、Storybookは開発者にとって欠かせないツールとなっています。Storybookは、コンポーネントをアプリケーションから隔離して単体で表示できるツールです。 しかし、このように有用なStorybookが「腐ってしまう」ことがあります。この記事で「腐る」とは、コンポーネントをStorybookに表示するための設定であるStoryが最新の状態に更新されていない、またはプロジェクトにとって負債になっている状態を指します。例えば、以下のような状態が「腐っている」状態にあたります。 npm run storybook するとそもそもエラーがでて表示されない Storyの存在しないコンポーネントやコンポーネント

概要 公式のcore testが全て(UTF8, WAT, SIMD関連のものは除く)通るWASMインタプリタをC言語でフルスクラッチで実装した。自作WASMランタイムで省略されがちなValidation Stageも実装した。この記事はWebAssembly Advent Calendar 2023の三日目の記事である。 目的 このWASMランタイムを実装するにあたり、「できるだけ仕様に従って実装する」ことを心掛けた。WASMの仕様書は以下のissueが立つほど読みにくいものとなっているが、ランタイムをどのように実装すべきかが詳しく書いてあり、一応仕様書を頑張って読めばランタイムが作れるようになっている。 この自作WASMランタイムの目的は、できるだけ仕様に従った実装を与えることで、仕様の理解を助けることである。早さや効率性よりも分かりやすさを優先しているため、実用には向かない。仕様書を

はじめに この記事は GENDA Advent Calendar 2023 13日目の記事です。 株式会社GENDA FE/BEエンジニアの shinnoki です。今年は自分にとって色々と変化のあった年で、年初にはアーリーのスタートアップでCTOを務めておりましたが、ご縁があり8月にGENDAに入社いたしました。 最近社員インタビューも公開されて入社の経緯なども触れていただいたため、興味があればぜひご覧ください。 今年は個人的にあまり最新技術のキャッチアップができていなかったことを差し引いても、フロントエンド界隈では激動の1年だったのではないでしょうか。 最新技術のキャッチアップが大変なのはフロントエンドに限ったことではなくどの領域においても発生する話ですが、フロントエンドは特に大変だよねという話は周囲からもよく聞くため、感覚として間違っていないと思います。 これらとどう付き合っていくか

こんにちは、近藤です。 commmune Advent Calendar 2023 18日目の記事は『TypeScriptにおけるDDDのドメインオブジェクトの課題と対策』です はじめに ドメイン駆動設計（DDD）は、複雑なビジネスロジックを扱うアプリケーション開発において、重要かつ効果的なアプローチとして広く認識されています。 コミューンでは、現場で役立つシステム設計の原則の著者、増田さんのご協力を得て、プロダクト開発を進めています。 幸運なことに私は増田さんとの密なコミュニケーションを取らせて頂いており、DDDの理論と実践方法に関する貴重な知見を深めその有用性を感じております。 しかし、TypeScriptのような構造的型付けを採用する言語でDDDを適用する際には、特有の課題が生じることがあります。本記事では、TypeScriptでの構造的型付けに伴う課題、そしてそれらを克服する方法に

はじめに 数年前は私はメモ化警察でした。 「はーい、メモ化してなーい！」 脳死でメモ化してましたが、本当にメモ化って必要なのか考えるようになり、明確な答えを持たないまま、レビュー時にもメモ化が必要かという問いに「パフォーマンスに問題が出たら」という便利な言葉を使用し、逃げていました。 それはもう尻尾を巻いて。 そしてメモ化警察を退職しました。 煽りタイトルですが、いつメモ化すればいいかメモ化の基準とメモ化するかどうかの判断方法について、個人的に考察した考察記事となります。 今回はアニメーションなどなく、zen.devさんのようなWEBサービスを想定します。 この記事で取り扱わないこと Reactの書き方 メモ化の仕方 仮想DOMによる差分レンダリング Core Web Vitalsに関して メモ化の基準 早速結論ですが、レンダリング時に以下に当てはまる場合メモ化を検討するというのが私の結論

Next.js App Routerのリリース以降、 async function で書けるServer Componentsいいじゃんファイルベースルーティングも使いやすいなと触ってたのですが、まだ安定していないこともあり不可解なエラーメッセージや複雑なキャッシュの仕組み、デプロイ先を選ぶ感じなどこのままNext.jsにベットしてていいのかなと感じていました。 そんな折にHonoでシンプルなフォームを持つWebアプリを書く機会があり、非常に優れた開発者体験に驚きました。5年以上前にMPAを開発した経験もありますがそこから比べてもとても良くなっていて、Honoの良さを感じるとともにMPAというアプローチを見直すきっかけになりました。 そもそも現在Webフロントエンドを構築する際に当たり前のように選択肢に上がるSPAですが、必ずしもSPAが適していない場合でもSPAが選択されることが少なくな