モチベーション JSONL を読み込んで解析するツールが欲しかった ログを読み込ませたいので圧縮機能は必須 自社のパッケージ製品が出力する JSONL を読み込んで解析できる仕組み 顧客が問題解析を気軽にできるようにしたい 顧客向けツールとして提供したい つまり顧客環境で動かしたい 1 バイナリ OSS として提供したい Apache-2.0 として公開したい ログファイルは大きくても 100 GB は行かない もともと Go + SQLite + JSONB で検討していた SQL で書きたい SQLite ファイルとして書き出したい SQLite ファイルフォーマットは信頼できる S3 などにファイルを置いておくだけにしたい クラウド版に組み込みたい 顧客毎に duckdb ファイル作ればいいのでは？ duckdb ファイルダウンロードできると便利そう DuckDB https://d

はじめに この記事は、業務でフロントエンドのディレクトリ設計思想を変更した際の作業をまとめた記事です📕 それなりの規模のプロジェクトでの移行作業のため、新規機能実装などに影響が出にくいようにリファクタリングを進めてきました。そこでの進め方や感想も含めてお伝えできればと思います。 前提 6年ほど運用しているReact Nativeのプロジェクトでの移行作業のお話です。 従来のディレクトリ設計思想はAtomic Designを採用していました。しかし、organismsのコンポーネントが300個近くにも及び、プロジェクトの規模が大きくなるにつれて様々な課題が浮き彫りになりました。これを機に設計思想の移行を決めました。 Layer型のAtomic DesignからFeature型のディレクトリ構造に移行していこうと思います😌 参考: ソフトウェアアーキテクチャの基礎 なぜ移行したか なぜ移行

こんにちは、commmuneでデータサイエンティストをしているひぐです。 人間が苦手なマルチタスクをLLMに任せたら、効果的に処理してくれるのではないか?というモチベーションのもと、Pythonの非同期処理を使って並列かつストリーミングでChatGPTの回答を出力するアプリを作りました🤖 例えば下記は、ある課題を入力すると、深さ・広さ・構造・時間軸という異なる観点で解像度を上げてくれるアプリケーションです。 アプリに関する登壇資料↓ このアプリ作成にあたってPythonの非同期処理を勉強したところ、最初は多くの専門用語(コルーチン、イベントループ...)や独自の記法により、全体像をつかむのに苦戦しました。一方で、学んでみると予想以上にシンプルな記法で実装できること、そして応用範囲が広くて便利だと理解しました。 この記事では、そんな少し取っつきにくけど便利なPythonの非同期処理にフォー

laisoさんが書いてたのほぼなんだけど Honoは文字列でもStreamでもなんでも返せるからサーバーサイドもReactで書けるし、tsconfig.jsonで適切に設定すればJSXなんでもいけるし、Viteのdev-serverがあるから、サーバーもクライントも同時に開発、ビルドできて、もちろんAPIを生やすのが得意で、雑React SPA環境（API付き！）作るのに向いてるよ。 作り方解説します。めんどい人はここにプロジェクト作ってるからclone、ダウンロードしてください。 まず、create-honoして、cloudflare-pagesのテンプレートを選ぶ。bunをパッケージマネージャーに使ってる。

Offers を運営している株式会社 overflow の あほむ でございます。 今回はプロジェクトで Web フロントエンド領域のテストを書くにあたって方針を決めた際の ADR をブログ向けに再整理したものをお届けします。 テストコードを書くべきか書かざるべきか 逃げ切りが確約された作り捨ての納品プロジェクトでもなければ、継続的なメンテナンスを前提にテストコードは書くべきが現代のソフトウェアエンジニアにおける共通了解でしょう。 急がば廻れ、ほとんどの場合においてテストコードを書くメリットがデメリットを上回るものと捉えられています。ここでは書かなくても良いケースをあえて論じることをしませんが、個別具体でテストが不要と断定できるときはそうすればよいでしょう。 テストを整える工数をどう捉える TDD (Test Driven Development テスト駆動開発) に代表される、テストコー

はじめに Vimは、そのパワフルなカスタマイズ性と柔軟性で知られており、世界中のプログラマーやテキストエディタ愛好家たちから絶大な支持を受けています。このエディタの真価を引き出す鍵の一つが、autocmd（自動コマンド）機能です。autocmdを用いることで、ファイルの読み込みや保存、さらにはウィンドウのフォーカスが変更されるといった特定のイベントが発生した際に、自動でスクリプトやコマンドを実行することが可能になります。 このガイドでは、autocmdの基本概念から始め、その豊富な応用方法を段階的に解説していきます。初心者でも容易に理解できるように、具体的な使用例を通じて、Vimの作業効率を大幅に向上させる方法をご紹介します。Vimをカスタマイズし、より快適なテキスト編集環境を実現するための第一歩として、このガイドをお役立てください。 autocmdを活用することで、あなたのVim使用経験

概要 本記事は、スクラムを管理するアプリケーションをクリーンアーキテクチャの考え方で実装し、WebからもCLIからも動かせるようにしたという実践を紹介するものです。学習のための個人開発で作成したサンプルアプリケーションの設計と実装を適宜紹介することで、クリーンアーキテクチャに対する理解を深めることが目的です。 モチベーション なぜ現代の開発現場で定着しているクリーンアーキテクチャのアプリを手元で実装してみようと思ったかというと、私自身Webエンジニアとして働く中で、クリーンアーキテクチャの実践例は入出力をWebに限定したものばかりだったからです。 しかし、「詳細に依存せず抽象に依存すること」と唱えるクリーンアーキテクチャにとって、Webはただの詳細です。そこで、入力元、出力先を問わないアプリケーションはどのような書き味になるのか、自分で確かめてみたくなりました。 例えば、「ドメイン層は独立

はじめに Java の enum は大変便利で非常多くのシーンで活用されています。例えば区分を表すようなオブジェクトを表現したい際にもよく使われていますね。 Java 14 で正式機能となった switch式にて網羅性検査が行えるようになり、それまで以前ではどうしても抽象メソッド等を活用する必要があった処理についても、switch式を利用する事で簡潔に表現することができるようになりました。 また、Java 17 で正式機能となった sealed classes/interfaces と Java 21 で正式機能になった Record Patterns によって、これまで必要だった区分値のような enum を必ずしも定義しなくて良い場合も出てきました。 この記事では、今まで enum を使っていたコードがこれらの機能によってどのように変わるのかを紹介し、盲目的に enum を定義するのでは

この記事では、JavaライクなインターフェースとHaskellライクな型クラスを比較します。どちらも、複数の異なる型を統一的に扱うための仕組みです。 インターフェース インターフェースはご存知の方も多いと思いますが、コード例を載せておきます。 // インターフェースの定義 interface Greetable { String greet(); } // 実装の例1 class Hello implements Greetable { String message; Hello(String m) { this.message = m; } public String greet() { return "Hello " + message + "!"; } } // 実装の例2 class Goodbye implements Greetable { public String gree

【Vue.js】今、ゼロから Vue を学び始めるならこうやるといいんじゃないか (2024) 【初学者向け】 🤔 Vue.js って何から勉強すれば良いですか？ この疑問は Vue.js に限らず、多くの初学者の中でホットなトピックです。 すごく端的にこの問いに答えてみると、「好きにすればいい、正解はない！自分で考えなさい！」です。 これは確かにとても正しい意見[1]だと思いますが、そうは言っても初学者にとっては何から手をつけたらいいのかわからない状況が多いです。 と言うことで、上記のような前提は持ちつつ「まぁ、とりあえずこんな感じで良いんじゃないですかね(安牌)」と言う私(筆者)なりのアイデアを書いてみたいと思います。 ご参考までに 😙 それではスタート 💨 Vue.js の公式ドキュメント 「おいおい、急にハードルが高すぎるだろ...」 そう思った方も少なくないかもしれません。

Node.jsのメモリ制限については以下の記事に記述があります。 しかし、現在の挙動はやや異なるようです。 結論から言うと デフォルトでは、システム (cgroup等) から取得した制限があればそれがそのまま設定、そうでなければ32bit環境では700MiB, 64bit環境では1400MiBの制限が設定されます。 V8のメモリ制限 Node.jsはJavaScriptエンジンとしてV8を利用しています。 V8のGCは世代別GCになっています。ほとんどのオブジェクトは生成されてすぐに不要となるため、メモリ使用量にはそれほど貢献しません。メモリ使用量に貢献するような長命なオブジェクトは、数回のGCを生き抜いた後old generation領域に移されます。したがって、V8のメモリ使用量の制限は実質的にこのold generation領域のサイズ制限によって決まると考えてよいでしょう。 このo

皆さん、こんにちは。かろっくです。 現在は情報系の大学に通っています。 さて、大学生といったら、趣味に時間を費やしてなんぼです。 自分は大学の図書館を本当に頻繁に利用しています。 見ての通り図書館のヘビーユーザなのですが、そうなってくるとやはり図書館の操作の自動化をしてしまいたいという欲求が出てきます。 というわけで、今回は大学のシステムを解析して自動化した話をしたいと思います。 ひとまず完成形 先に、実装したコードのリポジトリを掲載します。 動作例として、discord にメッセージを送信している様子を以下に示します。 現在は延長する書籍が存在していないため終了していますが、延長の必要な書籍が存在する場合は、延長を行います。 方針 大学のシステムを自動化するにあたって、単に Selenium 等のブラウザを使うのは少し癪です。出来ることならば、ブラウザ等を利用せず、HTTP リクエストか

Next.js の App Router を中心に解説した書籍を執筆しました。「実践 Next.js —— App Router で進化する Web アプリ開発」という本です（3/16 刊行）。本稿では書籍の概要と、App Router が何を解決するのかについて紹介します。 書籍の概要 書籍で解説しているサンプルコードは、public リポジトリで既に公開しています。前半、第 1 章〜第 4 章では App Router の基礎を抑えるための練習用リポジトリを使用します。後半、第 5 章〜第 10 章では、写真を投稿する SNS「Photo Share」という架空アプリの実践的リポジトリを使用します。 第 1 章：Next.js の基礎 第 2 章：Server Component とレンダリング 第 3 章：App Router の規約 第 4 章：Route Handler 第 5

type User = { name: string } type Admin = User & { permissions: string[] } const user: User = { name: "user", } const admin: Admin = { name: "admin", permissions: [], } User は名前だけを持つ型で、Admin は名前と権限を持つ型です。また、それぞれの型の変数も用意しています。 この後のコード例は極力シンプルにするため、やや不自然なコードになっていますがご了承ください[1]。 サブタイプとスーパータイプ Admin 型の変数は name プロパティを持ち、User 型の条件を満たしています。そのため、User 型の変数には Admin 型の変数を代入できます。 その逆は型エラーになります。User 型の変数には perm

前から気になっていた Litestream を Cloud Run で使ってみたので、そのメモです。 Litestream とは？ サンプルコード 手順 動作確認してみる 制限事項 おまけ まとめ 参考 Litestream とは？ Litestream は、 SQLite のデータベースファイルを Amazon S3 や Google Cloud Storage などのオブジェクトストレージにリアルタイムでレプリケートすることができるオープンソースのツールです。 例えば通常 Cloud Run で DB エンジンとして SQLite を使用しようとしても、コンテナが破棄されると同時に毎回 SQLite のデータベースファイルも消えてしまうため、データを永続化することができません。 しかし Litestream を使用すれば、 SQLite のデータベースファイルをオブジェクトストレージに

先日『フロントエンド監視の全体像と実現方法』という記事を投稿しましたが、その中でテレメトリについては触れませんでした（※本記事は上記記事の内容を知らなくても読み進められるようになっています）。 というのは、テレメトリは可観測性を実現するための重要な概念ではあるものの、テレメトリを軸に監視を考えるのは手段の目的化になってしまうと考えているからです。 重要なのはサービスにとって何を観測するべきかを考えることであり、テレメトリはそれを設計や実装に落とし込む際に現れるものです。 一方で監視に対する理解を深める上では、テレメトリを軸に考えることも重要でしょう。 そこで本記事ではフロントエンド監視においてどのようなテレメトリを収集するべきか述べていきます。 監視 SaaS と OpenTelemetry (OTel) Datadog, New Relic, Sentry のいずれかを利用することを考え

WebブラウザでOS動かしてどうすんだよ という根源的な疑問に回答が無いままとりあえずできちゃった。。 ※ コマンドが終了してもプロンプトが出ません。Enterを空打ちする必要があります (バグ) WasmLinuxは、WebAssembly "ネイティブ" なLinux環境です。カーネルもユーザーランドも、WebAssemblyのツールチェインでコンパイルされたWebAssemblyモジュール(をwasm2cでCにしたもの)です。 前回はカーネルしか動いていなかったんですが、今回はブラウザ上で ifconfig lo up して ping 127.0.0.1 したり top したり vi したりできます。BusyBox入ってるので。 ただしまだ実用性は皆無 です。Proof of Conceptって奴ですね。 前回の記事: 今回はMUSL libcを移植してBusyBoxが動くようになっ

本書ではTypeScriptの型と部分型関係がなす代数的構造を解説し、型についての強固かつ柔軟なメンタルモデルを構築します。 順序理論、集合論、束論、環論、そして圏論に至るまで、複数の数学理論を利用して多角的にモデルを構築することで、型の直感的な理解を深め、型の互換性に対する自然な推論を可能となるように解説した新しい試みの本です。

必要性 フロントエンドの監視はバックエンドやインフラのそれらと比べ、優先度が低くなりがちです。 バックエンドやインフラでの障害はサービス継続に直結するため、これは当然と言えば当然なのですが、別の理由もあると考えています。 それは計算リソースをサービス提供側が管理していないことです。 例えばアプリケーションがインフラとして AWS を利用しているなら、AWS のリソースを管理するのはサービス提供側です。 これは AWS 以外のクラウドサービスプロバイダやオンプレであっても同様です。 一方でフロントエンドはエンドユーザのブラウザ上で動作し、これを管理しているのはエンドユーザです。 フロントエンドはその性質上、監視の「盲点」になりがちです。 しかしフロントエンドはエンドユーザが直接触れるものであるため、そこで何が起きているかサービス提供側は正確に把握する必要があります。 マイルストーン フロント

Reactと状態は切っても切れない関係です。なぜなら、Reactは状態に基づいて画面を更新するコンポーネントベースのUIライブラリだからです🤝🏻 そんなReactの状態を管理・操作しやすくしてくれているのが、React 16.8から登場したフックです。それゆえ、フックを正しく利用するにあたってReactの状態の理解は非常に重要であり、Reactの状態の理解があやふやだと、予期せぬ挙動やバグのもとになりかねません。 今回の記事では、Reactの状態を理解しながら適切な箇所で適切なHooksを選択していくプロセスを再確認できた！自信を持ってReactをコントロールできるようになりそう！と言えることをゴールとしています🎉 今回使用した即席匿名メモアプリのコードベースです。 サークルでは、コミットに沿って説明をしていきました。（あくまで即席なので細かいこと気にしながら作ってませんorz） 【