前回の記事では、JavaScript の実行エンジン V8 の JIT 出力コードを読んでみました。記事は M1 Mac 上で動かした結果でしたので、ARM アーキテクチャのアセンブラを読むことになりました。 さてそんな ARM アーキテクチャですが、最近の ARM には FJCVTZS という JavaScript 専用の機械語命令があるのをご存知でしょうか？CPU に、特定の言語（それもコンパイラを持たない JavaScript）専用の命令があると知ったとき、私は大いに驚きました（過去にも Jazelle みたいなものはありましたが） 今回は、この FJCVTZS 命令について、実際にどれだけ効果があるのか、V8 をビルドしながら調べてみましょう。 FJCVTZS 命令とは？ FJCVTZS 命令は、Arm v8.3 から導入された JSCVT 命令の一つで、JavaScript の言
概要 速さが正義 LINE Botの開発でCloudflareとHonoを使う理由 Cloudflare Workersの応答速度が速いから PoPについて CloudflareはAWSのlambdaに比べてポイントオブプレゼンス（PoP）の数が多く、処理が実行される場所がよりユーザーの近くにある可能性が高い。 そのため、パフォーマンステストではAWS Lambda、AWS Lambda@Edgeよりも応答時間が小さいという結果になった。 コールドスタートがない Cloudflare Workersはコールドスタートがなく、LambdaとLambda@EdgeのようにEventBridgeで1分おきにツンツンしなくていい。 Service bindingsが便利だから Cloudflare WorkersのService bindingsを使用することで、worker間の通信はパブリックに
インストールが完了したらアドレスバーに chrome://flags と入力して設定画面を開きます。以下の 2 つのフラグを設定します。 Enables optimization guide on device: Enabled BypassPerfRequirement Prompt API for Gemini Nano: Enabled また、あらかじめ Gemini Nano のモデルをダウンロードしておく必要があります。アドレスバーに chrome://components/ と入力して Optimization Guide On Device Model の「アップデートを確認」をクリックします。 Gemini Nano を使ってみる それでは、Gemini Nano を使ってみましょう。以下のコードをコンソールに貼り付けて実行します。 const canCreate = aw
フロントエンド開発の効率化！Nx と Playwright でビジュアルリグレッションテストを賢く実施しよう - Techtouch Developers Blog
はじめに なぜ VRT が必要なのか？ VRTとは？ Nx と Playwright で賢く VRT を実施する どう賢く実施したか 結果 まとめ 参考資料 はじめに 「食べログ ラーメン TOKYO 百名店」の全店舗訪問を目指してラーメン巡りを続けているフロントエンドエンジニアの kenshin です。 フロントエンド開発者の皆さん、新機能を追加したり、ライブラリをアップデートした後に UI が予期せず変更されてしまった経験はありませんか？このような問題を素早く検知し、未然に防ぐ方法として、ビジュアルリグレッションテスト（以下、VRT）があります。 この記事では、Nx と Playwright を用いて VRT を効率的に行う方法をご紹介します！ なぜ VRT が必要なのか？ フロントエンド開発では、新機能の追加やライブラリのアップデートにより、予期せぬ UI 変更が発生することがありま
Zodスキーマでプロンプト生成を行い構造化データを自由自在に扱えて、LLMプロダクト開発が圧倒的に効率化した話 - Algomatic Tech Blog
最近はAIエンジニアを名乗ってるerukitiです。フロントエンドもバックエンドも、LLMを触るあれこれもやってるので、「AIエンジニア」くらいを名乗るとちょうどよさそうだなと思ってます。いずれLLM自体の開発なんかもやってるかもしれません。 LLMプロダクトを開発していると、構造化データを作りたいのに、Anthropic ClaudeのAPIにはJSONモードが無いことや、なんならJSONモードやfunction callingを使っても、データが正しい形式に従ってることは保証しがたい、みたいな自体に遭遇することがあります。 JSONが出力できたとしても、構造化データをうまく吐き出させるのは難しいものです。文字列を出力させたいけど、複数あるときは、配列なのか、それともカンマ区切りなのか？項目がオプショナルの場合はどうするか？項目が存在しない、空文字や 0 や undefined や nu
はじめに こんにちは。スペースマーケットでWebエンジニアしてます、新卒のdumbled0reです。 4月に入社してから早2ヶ月経って、入社式が昨日のように感じています。時の流れは早い。 日頃、ブラウザ操作する時はPythonのライブラリであるSeleniumを使用していましたが、vscodeにあるPlaywrightの拡張機能を使用すれば非エンジニアの方でも簡単にブラウザ操作用のコードを書けたので紹介します。 Playwrightとは PlaywrightとはMicrosoftが開発したオープンソースのE2Eテスト自動化フレームワークです。 Chromium、Firefox、WebKitなどの主要なブラウザで対応しており、1つのコードで複数のブラウザ上で動作確認も行えます。 環境 node 20.9.0 playwright 1.44.0 拡張機能のインストール 今回使用するVScode
![[Playwright]VScodeの拡張機能でらくらくブラウザ操作](https://cdn-ak-scissors.b.st-hatena.com/image/square/aeab1ee552bc8ea8fc414d63e3cd992eb142f720/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--V4XD7bFE--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255BPlaywright%25255DVScode%2525E3%252581%2525AE%2525E6%25258B%2525A1%2525E5%2525BC%2525B5%2525E6%2525A9%25259F%2525E8%252583%2525BD%2525E3%252581%2525A7%2525E3%252582%252589%2525E3%252581%25258F%2525E3%252582%252589%2525E3%252581%25258F%2525E3%252583%252596%2525E3%252583%2525A9%2525E3%252582%2525A6%2525E3%252582%2525B6%2525E6%252593%25258D%2525E4%2525BD%25259C%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_34%3Adumbled0re%252Cx_220%252Cy_108%2Fbo_3px_solid_rgb%3Ad6e3ed%252Cg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzc1NTA1NzM5OGYuanBlZw%3D%3D%252Cr_20%252Cw_90%252Cx_92%252Cy_102%2Fco_rgb%3A6e7b85%252Cg_south_west%252Cl_text%3Anotosansjp-medium.otf_30%3A%2525E3%252582%2525B9%2525E3%252583%25259A%2525E3%252583%2525BC%2525E3%252582%2525B9%2525E3%252583%25259E%2525E3%252583%2525BC%2525E3%252582%2525B1%2525E3%252583%252583%2525E3%252583%252588%252520Engineer%252520Blog%252Cx_220%252Cy_160%2Fbo_4px_solid_white%252Cg_south_west%252Ch_50%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzQ1MTY4OGExZGEuanBlZw%3D%3D%252Cr_max%252Cw_50%252Cx_139%252Cy_84%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
今回の記事はasync/awaitについて。 C#に限らず、現在では多くのプログラミング言語が非同期処理を扱う言語機能としてasync/awaitを採用しています。現在の.NETでも至る所にasync/awaitが使われており、避けて通ることはできない重要な機能となっています。 そこで今回は、C#における非同期処理とasync/await、またC#8.0で導入された非同期ストリームとIAsyncEnumerable<T>について、基本的な使い方を解説していきます。 また、記事の後半では実際にasync/awaitがどのように動作しているかをコンパイル結果を通して説明していきます。この辺りはやや高度なトピックになるため読み飛ばしていただいても構いませんが、async/awaitをより深く理解したい方は是非そちらも読んでみてください。 同期処理 / 非同期処理 async/awaitに関する話
こんにちは！Xイノベーション本部プロダクトイノベーションセンターの米久保 剛です。 弊社のテックブログ上では今回が初めての記事執筆となります。アーキテクチャ設計やアプリケーション設計の話を中心に、不定期に情報発信していきたいと考えています。 YAGNI原則 YAGNI原則をご存知でしょうか。 エクストリーム・プログラミング（XP）の重要な原則の一つであるこの原則は、You Ain't Gonna Need Itのアクロニム（頭字語）から命名されています。日本語にすると「どうせ要らないって」というニュアンスでしょうか。推測に基づいて余計な機能を作り込んだところで将来実際に使われる可能性は低く、時間と労力を無駄にするばかりかコードの複雑化などのリスクさえあります。ですから、現時点でわかっている要件をちょうど満たすだけの機能を実装すべきであるとYAGNI原則は主張します。 YAGNI原則は機能（
AddressableによりWebGLゲームのクラッシュ率が改善した話 - Mirrativ Tech Blog
こんにちは、ミラティブ菅谷です。MirrativのWebGL製ライブゲームにて、アセットのロード方法をインスペクタでの直接参照からAddressable Asset System（以下Addressable）に変更したことで、クラッシュ率が大幅に改善し、クラッシュせずにプレイが終了した「正常プレイ率」は98%まで改善しました。本記事では、その具体的な手順と効果について紹介します。 課題背景 MirrativのライブゲームはWebGLで動いていますが、特にモバイルのWebGLではパフォーマンスに気をつける必要があります。今回改善を行ったプロジェクトではもともとAddressableを使用していませんでした。プロジェクトの初期リリース時点では大きな問題もなく運用できていましたが、アセットやリソースを追加していくにつれてクラッシュが多く見られるようになりました。ただし、WebGLではクラッシュし
「奥野さんと社員のリファクタリング部屋」は、リファクタリングに励むトレタの社員と技術顧問の奥野さん ( @okunokentaro ) の間で実際に行われた会話を切り取った開発現場実録コンテンツです。 技術顧問: 奥野さん 三度の飯よりリファクタリングが好き。 今回の質問者: 武市さん トレタ在籍２年。沖縄在住のフロントエンジニア 今回の質問 今回は初期リリースを終えたWebアプリケーション(Next.js)のプロダクトを担当している武市さんから、複数人で開発を進めてきて統率が取れなくなったディレクトリ構造のリファクタリングについての質問です。 APIで外部とやり取りしている部分をリファクタリングして、クリーンアーキテクチャに沿ってリポジトリを作ろうと考えています。 その中で、GraphQL APIレスポンスの結果を変換するアダプター関数(adaptGetIServiceItemsAggr
はじめに 今回書く開発者体験について 具体的な試み eslint pluginによるコーディング規約の明文化 Notionへのリソース集約 デザイントークンと型定義 おわりに はじめに こんにちは。enechainで働いている takurinton です。 enechainではさまざまな開発者体験向上の取り組みが試行されていますが、今回は自分が主に見ているデザインシステムにフォーカスして記事を書こうと思います。 弊社のデザインシステムに関しては、 @Shunya078 の なぜ我々はデザインシステムを創るのか？ を読んでいただくと背景がご理解いただけると思います。 今回書く開発者体験について 開発者体験の定義についてはさまざまな解釈があると思いますが、今回は以下の3つのトピックに絞って紹介します。 eslint pluginによるコーディング規約の明文化 Notionへのリソース集約 デザ
2024 年 5 月現在だと Next.js のドキュメントには明示的な記載がないが、「同時に実行可能な Server Action は常に１つだけ」という件について。 実は自分もこれをちゃんと認識しておらず、先日会社の先輩に教わって初めて知ったので、試したことなどを書き残しておく。 Next.js の場合、App Router (Router Reducer) によって、Server Action の実行が直列化 (キューイング) されるようになっている。 このキューイングの挙動を考慮すると、以下のような呼び出し方は危ういコードとなる。 "use client"; import { useState } from "react"; import { increment } from "./actions"; export default function Page() { const [
Hanabi.REST AIにHonoJSのバックエンドを書かせて遊ぶ、Hanabi.RESTというサービスを一般公開します。それに際して、この記事では、Hanabiの紹介と簡単に技術スタックを解説していきます。 皆さんは、AIがプロンプトからUIを生成する、V0というサービスをご存じですか？僕はあれを見たときに、ある妄想が膨らみました。 「V0のAPI版があれば、プロンプトからWebアプリケーションを作れるやん！！」と。 当初はハッカソン用の小プロジェクトとして始めましたが、想定以上に面白い結果が得られたため、開発を継続することにしました。技術的な制約、様々な黒魔術による不安定な挙動、LLMの劣化など、数多くの壁を乗り越えながら、約半年をかけてようやくリリースに至りました！！ 次のリンクから実際にAIが生成したTwitter風のAPIを試すことが出来ます！ また、会員登録すれば誰でもAP
AirPods Proで頭の角度を検出し、リアルタイムにキャラクターを動かす | フューチャー技術ブログ
はじめにHealthCare Innovation Group(HIG)1の橋本です。 先週末注文していたAirPods Pro第2世代が今日手元に届きました! 約4年間使っていたAirPods Pro第1世代の調子が悪くなってしまったため、買い換えました。 せっかく新しいAirPods Proが届いたので、なにかできることないかな〜と思いながら、AirPods Proの機能一覧を見ていました。 私はその中の一つ、空間オーディオ機能でヘッドトラッキングしていることに目をつけ、頭の角度の取得をしてみました。 環境OS: macOS Sonoma 14.5Xcode: 15.4 (15F31d)Swift: 5.10AirPods Pro(第2世代)※ 空間オーディオ機能搭載端末 AirPods(第３世代)、AirPods Pro(全世代)、AirPods Max (参考URL: AirPod
オブジェクトストレージにおけるファイルアップロードセキュリティ - クラウド時代に"悪意のあるデータの書き込み"を再考する - Flatt Security Blog
はじめに セキュリティエンジニアの齋藤ことazaraです。今回は、オブジェクトストレージに対する書き込みに関連するセキュリティリスクの理解と対策についてお話しします。 本ブログは、2024年3月30日に開催された BSides Tokyo で登壇した際の発表について、まとめたものです。 また、ブログ資料化にあたりオブジェクトストレージを主題とした内容の再編と、登壇時に口頭で補足した内容の追記、必要に応じた補足を行なっています。 なぜ今、この問題を取り上げるのか？ 近年のクラウドリフト、クラウドシフトにより、クラウドを活用する場面が多くなってきていると思います。その中で、多くの場面で利用されるオブジェクトストレージにおいて、データの書き込み時に気にすべきセキュリティリスクが存在するのをご存知でしょうか？ 近年、オブジェクトストレージの不適切な利用に起因する情報漏洩が多く発生しています。そのよ
はじめに この記事は、every Tech Blog Advent Calendar 2024(夏) の1日目の記事です。 DELISH KITCHEN開発部の羽馬(@NaokiHaba)です。 この記事では、DELISH KITCHEN チラシ で使用している Vuex の Pinia への移行について紹介します。 chirashi.delishkitchen.tv 本記事では、これらの知識があることを前提に説明を進めます。 Vue.jsの基本的な知識 Nuxt.jsの基本的な知識 Vuexの基本的な知識 Piniaとは Pinia（ピーニャ）は、Vue.js用の新しい状態管理ライブラリです。Vuexの次のイテレーションとして開発が始まり、Vuex 5に組み込むことを想定していたアイデアを多く取り入れています。 pinia.vuejs.org Piniaは、Vuexと比較して以下のような
Elasticsearch piped query language, ES|QL, now generally available — Elastic Search Labs
Elasticsearch piped query language, ES|QL, now generally available Today, we are pleased to announce the general availability of ES|QL (Elasticsearch Query Language), a dynamic language designed from the ground up to transform, enrich, and simplify data investigations. Powered by a new query engine, ES|QL delivers advanced search using simple and familiar query syntax with concurrent processing, e
坂本龍一が発表した数々の音楽作品を紐解く連載「追悼・坂本龍一：わたしたちが聴いた音楽とその時代」（記事一覧はこちら）。 第13回の書き手は、『commmons: schola vol.18 ピアノへの旅』にも参加した音楽ライターの小室敬幸。若き坂本龍一が強く意識していた作曲家の三善晃の存在を入り口に、『千のナイフ』とYMO以前の「分岐点」とも言うべき「現代音楽のエリート路線」と決別、その先で切り拓かれたキャリアについて。 坂本龍一を「教授」たらしめたクラシック〜現代音楽家としての足跡と楽曲群、そして1982年に高橋悠治に書き下ろされた“Just for Me（ぼく自身のために）”を読み解き、たどる。 批判的なビラを配ったという有名なエピソード等もあって、坂本龍一と現代音楽の関係を語る際に武満徹（1930年–1996年）の名があがりがちだ（*1）。 だが東京藝術大学の作曲科在籍中に書かれた作
Okta Customer Identity Cloud(旧 Auth0)のForms for ActionsがEAになったよ - ドワンゴ教育サービス開発者ブログ
はじめに こんにちは。ドワンゴ教育事業バックエンドエンジニアの金子です。 Okta Customer Identity Cloud(旧 Auth0。以下 Okta CIC)の新機能「Forms for Actions」(以下 Forms)がEarly Accessになりました。本番環境での使用も想定されているステージです。 教育事業での採用も見据えて、どんな機能なのか調べてみたので内容を紹介します。 Forms for Actionsとは Okta CICの認証フローをカスタマイズできる機能です。 ログイン成功時のActions1内でFormを呼び出し、ユーザーへ表示できます。 例えば下記のようなユースケースが想定されています。 プログレッシブプロファイリング 規約への同意の取得 サインアップ・ログインフローの追加ステップ メールアドレス検証の必須化 決済情報の入力 など 何がうれしいのか
ConsoleAppFramework v5 - ゼロオーバーヘッド・Native AOT対応のC#用CLIフレームワーク 2024-06-13 ConsoleAppFrameworkの完全に新しいバージョンをリリースしました。完全に設計しなおして実装も完全に作り直された、何もかもが新しいフレームワークになっています。設計指針として「Zero Dependency, Zero Overhead, Zero Reflection, Zero Allocation, AOT Safe」を掲げ、もちろん、他を圧倒的に引き離すパフォーマンスを実現しています。 これはコールドスタートアップ・ウォームアップなしでのベンチマークとなっていて、CLIアプリケーションでの実際での利用に最も即したものだと考えています。System.CommandLineと比較すれば280倍！メモリアロケーション量もほかのフレ
STORESでフルタイムRubyコミッタをやっている遠藤（@mametter）です。 STORESは今回RubyKaigi 2024で、託児所を運営する「ナーサリースポンサー」として参加していました。この様子は後日詳報しますが、それ以外にも参加者に楽しんでもらえる企画をいろいろな形でしていました（予告記事を参照）。 この記事ではその中でも、ブースでやった「Ruby "enbugging" quiz」について、解答や出題意図などを紹介します。 Day 1 終了時のスコアボードです！ 3点の方もたくさんいらっしゃいました！ Day 2のクイズも楽しんでください😊#rubykaigi https://t.co/RJIBEqsFSf pic.twitter.com/ewp22Cs7jr— STORES Tech (@storesinc_tech) 2024年5月16日 概要 動作しているプログラ
坂本龍一 追悼連載vol.15：音楽と社会運動の狭間で——『out of noise』というラディカルな転換点 | CINRA
坂本龍一の残した音楽作品は膨大で、幅広いジャンルにも及ぶ。没後に人から示唆されて、こんな仕事もしていたのだと知るものも多い。圧倒的な才覚を持つ音楽家だったとあらためて思う。だが、坂本龍一という人は自身が備える音楽的な能力に対して、ある種の畏れを抱えていたのではないだろうか。そんなふうに思えるところもある。 坂本龍一（さかもと りゅういち） / Photo by zakkubalan ©2022 Kab Inc. 1952年東京生まれ。1978年に『千のナイフ』でソロデビュー。同年、Yellow Magic Orchestra（YMO）を結成。散開後も多方面で活躍。2014年7月、中咽頭がんの罹患を発表したが、2015年、山田洋次監督作品『母と暮せば』とアレハンドロ・G・イニャリトゥ監督作品『レヴェナント：蘇えりし者』の音楽制作で復帰を果した。2017年春には8年ぶりとなるソロアルバム『as
One of the biggest sticking points of being a solo dev is maintaining motivation. I’ve been keeping a journal entry about how to hack my motivation, what works and what doesn’t. Here are the things that have worked. Convert external sources to motivationI’ve always known that I’m more extrinsically than intrinsically motivated, so I have a couple systems that help to give me bursts of external mot
はじめに 昨年は英語で書いたんですが、今年は発表できなかったので日本語で書きます。 登壇したかったニャンね いや〜〜〜〜〜〜〜〜〜〜〜〜……はい。 特にしおいさん、いまいずみさんと僕はRubyKaigi Takeout 2021での初登壇以来、RubyKaigi 2023まで連続してacceptされていたので、勝手に同期みたいな仲間意識を感じていたのですが、今年は僕がnot acceptedとなり、ぐぅぅぅ……という感じです1。まあnot acceptedとなることに対しての納得はあるので、精進が必要、といったところですね。 トーク まともに聞けているのがあまりない……以下箇条書きで感想を書いていきます。 The depths of profiling Ruby (osyoyu) 言いつけどおり最前待機した “Software profiling is a never-complete a
はじめに PythonでHTTPリクエストを大量に非同期で投げる方法を探していました。requestモジュールはどうも対応していない様子なので、aiohttpを使うしかないのか…？と諦めていたところ、どうやらHTTPXが良さそうなので、試してみました。 What's HTTPX? HTTPXはDjango REST frameworkや、Starlette、Uvicornと同様に管理しているEncode社が管理しているプロダクトのようです。 HTTPX is a fully featured HTTP client library for Python 3. It includes an integrated command line client, has support for both HTTP/1.1 and HTTP/2, and provides both sync and a
サーバーサイドエンジニアの内藤(@naitoh) です。 RubyKaigi 2024に参加されていた皆さん、お疲れ様でした。 RubyKaigi のセッションの中で印象に残った発表をご紹介します。 RubyKaigi 2024 セッションレポート タイムテーブル タイムテーブルは以下から確認できます。 rubykaigi.org Namespace, What and Why 今回のRubyKaigi で非常に気になっていたセッションの一つです。 アプリケーション、ライブラリをある空間の中でライブラリを読み込み、他の空間から隠す。 空間の中で定義されたメソッドを別空間から呼び出すこと 別空間から呼び出されたメソッドは、元の空間内で動作すること という感じで複数のバージョンのライブラリに依存した場合のコンフリクト発生を解決するのが Namespace とのことで、内容が整理されておりわかり
TypeScriptユーザーに贈るGleam入門
最近v1に到達したGleamという静的型付けな関数型言語があります。 GleamはErlangとJavaScriptをターゲットに実行できるため、今TypeScriptを使っている領域でも使うことができます。 この記事ではTypeScriptユーザー向けにGleamの文法を解説していきます。 記事を通してGleamの良さを感じていただければ幸いです。 Gleamの公式サイトでは以下の言語のユーザー向けのチートシートもあるため、この中に知っている言語があるのならそちらを読んでみるのがオススメです。 Elixir Elm Erlang PHP Python Rust また、個人的にGleamの情報をCosense(Scrapbox)にまとめているので、リファレンスがてら覗いてみてください。 organizationとして管理していきたいと考えているので、編集のリクエスト等も歓迎です。 編集した
The last year has been a great one for WebKit. After unveiling Safari 17 beta at WWDC23, we’ve shipped six releases of Safari 17.x with a total of 200 new web technologies. And we’ve been hard at work on multiple architectural improvement projects that strengthen WebKit for the long-term. Now, we are pleased to announce WebKit for Safari 18 beta. It adds another 48 web platform features, as well a
Next.jsでWEBアプリケーションを開発している時に、middlewareが大量に叩かれるという問題が発生した。 Supabaseを使用しており、middlewareでgetUser()が大量に叩かれてAPIのLimit制限を食らっていた。 諸々調査した結果、解決したので記載しておく。 環境 Vercel Supabase Next.js（１４．x） App Router 解決方法① PreFetchではMiddlewareをパスするように設定 <Link>を使用していると、prefetchが行われるため、リストページなどでは大量にmiddlewareが実行される。 RLSを導入しているので、ログインしていなければ、ログインページにリダイレクトされればOK。 export async function middleware(req: NextRequest) { ... } // En
この記事は何 この記事は python の学習を兼ねて色々書き散らしたので、 fastapi のサーバーを建てるという軸では理解しづらくなった。 上から順になぞるだけで devcontainer 上で fastapi の開発環境が構築できるようにする。 プロジェクトを作成 rye のインストールは略 $ rye init fastapi-example $ cd fastapi-example $ rm -r src # 作る対象がライブラリではないので一旦消す $ rye sync $ rye add fastapi fastapi-cli pydantic $ rye add mypy pytest -d { "deno.enable": true, "[python]": { "editor.defaultFormatter": "charliermarsh.ruff", "edit
はじめに こんにちは、令和トラベルでフロントエンドエンジニアをしているyamatsumです。 ここでは複雑なWebアプリケーションを開発・保守する場合に有効なアーキテクチャパターンとして知られているマイクロフロントエンドをNext.jsを用いて実現した時の設計とその課題について紹介したいと思います。 ※ この記事は令和トラベルのTech LT会で共有した内容を記事にしたものです。社外の方にもご参加いただけるTech LT会は connpass にて告知しています。 マイクロフロントエンドとは マイクロフロントエンドは、複雑なウェブアプリケーションを小さな独立したWebアプリやモジュールに分割するアーキテクチャパターンです。各Webアプリは異なるチームによって開発・保守することができ、一般に技術スタックやフレームワークの選択も自由です。 このWebアプリ群を組み合わせることで、以下のような利
Rust製TypeScript LinterであるBiome, Oxc, deno_lintなどは、TypeScriptの型情報を利用するLintルール（型情報Lintルール）[1]を持っていません。本記事では、その背景から、Rust製TypeScript Linterが型情報Lintルールを実現するための手段についてまとめます。 筆者のTSKaigi 2024で利用した下記登壇資料に情報を追加し、文章化したものです。 要約すると、以下になります。 Rust製TypeScript Linterは、安全性をさらに高めてくれるtypescript-eslintの型情報Lintルールが欲しいが、パフォーマンスを犠牲にしたくない。TypeScript Compilerに頼らずに実現するには、Alternative TypeScript Compilerや型推論が必要。型情報Lintルールの実装を型
Async Ruby on Rails
Async programming can make your apps faster. I’ll share how you can use async in Ruby on Rails to speed up your app. While there are examples in Ruby, the principles apply to any language. I’ll group the examples into two basic principles. Here’s the first one: Don’t do now what you can do later Delay doing stuff as much as possible. Being lazy is not necessarily a bad thing. In practice, that mea
Today we are excited to share the next milestone in the evolution of Angular! Over the past three releases we’ve introduced a lot of new features and improvements. This time we focused on polishing the work we shipped by graduating many of the new APIs to stable, addressing common developer requests, and experimentally releasing one of the most desired roadmap projects: zoneless change detection.
【コンピュータ将棋】Apple Watchでやねうら王を動かす - select766’s diary
Appleが発売しているスマートウォッチApple Watch Series 9にて、将棋AIやねうら王・ふかうら王を動作させることに成功したので報告します。 基本的には、iPhone向けのビルド方法を少し変えれば実現できました。 技術要素 以下の3要素を実現することにより、Apple Watch上で動作するやねうら王をfloodgate上で他の将棋AIと対局させることができます。 やねうら王をApple WatchのCPU向けにビルドし、SPM形式で出力 watchOSアプリを作成し、SPMを依存関係に追加し、Swift言語からやねうら王を呼び出す Macで、通信仲介用サーバを実行 SPMのビルド C++言語で実装されたやねうら王を、Apple WatchのCPU(ARMアーキテクチャ)向けにビルドし、Swift Package Manager (SPM)形式で出力します。この形式のライ
はじめに 🚩 この記事では、Tanstack Query や SWR などのライブラリに頼らずに、React 標準の Hooks をふんだんに活用してチャット機能を実装する方法を紹介します。 RC（Release Candidate）段階ではありますが、React 19 で追加された useActionState と useOptimistic を使うことで、よりインタラクティブで快適な UI/UX を実現する方法を探っていきます。 また筆者の過去の記事ではそれぞれの Hooks に焦点を当てた記事を書いているので、そちらもあわせて参照してください。 実装例 📝 はじめに完成した状態のデモアプリを示します。 楽観的更新によりチャットメッセージが送信されるとデータベースにデータが保存されたかどうかに関わらず即座に表示され、メッセージの送信中かどうかによってアイコンが切り替わっています。
![React Hooksもりもり構成のチャット機能を考える[React 19 / Next.js 15]](https://cdn-ak-scissors.b.st-hatena.com/image/square/34ba9ee6b479b17e37b1baec5e4ce5dcc42922e6/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--QPcmpnBP--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3AReact%252520Hooks%2525E3%252582%252582%2525E3%252582%25258A%2525E3%252582%252582%2525E3%252582%25258A%2525E6%2525A7%25258B%2525E6%252588%252590%2525E3%252581%2525AE%2525E3%252583%252581%2525E3%252583%2525A3%2525E3%252583%252583%2525E3%252583%252588%2525E6%2525A9%25259F%2525E8%252583%2525BD%2525E3%252582%252592%2525E8%252580%252583%2525E3%252581%252588%2525E3%252582%25258B%25255BReact%25252019%252520%25252F%252520Next.js%25252015%25255D%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_34%3ATsuboi%252Cx_220%252Cy_108%2Fbo_3px_solid_rgb%3Ad6e3ed%252Cg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzAzODVjOWFlYzkuanBlZw%3D%3D%252Cr_20%252Cw_90%252Cx_92%252Cy_102%2Fco_rgb%3A6e7b85%252Cg_south_west%252Cl_text%3Anotosansjp-medium.otf_30%3Achot%252520Inc.%252520tech%252520blog%252Cx_220%252Cy_160%2Fbo_4px_solid_white%252Cg_south_west%252Ch_50%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzUzMmU3Zjg2MTIuanBlZw%3D%3D%252Cr_max%252Cw_50%252Cx_139%252Cy_84%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
サイト開発の初期で課題になることの一つに開発途中でダミー画像をどうするかという問題があります。 多くのプロジェクトではAPI連携などが完了して正式な画像で開発できるようになるのは開発終盤になることもあり、それまでつなぎのダミー画像をどう見せるかは悩みどころです。 デザインカンプなどから書き出して静的に配置しても良いのですが、手間がかかる上にダミー画像が削除されず本番データとして残り続けることがよくあります。 https://placehold.jp/ といったプレースホルダー画像用のサービスもありますが、開発途中のサイトで外部サービスを利用することのセキュリティ的な懸念もあります。 Next.js(App Router)にはImageResponseという画像生成が手軽にできる機能がありますのでプレースホルダー画像を自作してしまえば、前述の問題や懸念を取り払うことができるようになります。
Next.js App Router、Server Actions、Conform、Zodで条件分岐があるフォームを作る - asoview! Tech Blog
はじめに アソビューのフロントエンドテックリードの井上です Next.jsのApp Routerがリリースされてから数ヶ月経ち、本番サービスに適用して運用しているような方々も出てきた今日このごろのフロント界隈かと思います。 弊社でもApp Routerの適用したアプリケーションを開発中です。 さて、これまでフォームのバリデーションライブラリとしてreact-hook-formを使うケースが多かったのですが、Next.jsのServer Actionsへの対応がまだ検証段階（2024/5/23現在）、ということもあり、対抗馬としてRemix や Next.js のようなサーバーフレームワークを完全にサポートするという謳い文句のconformを試してみようと思います。 通常の使い方の解説記事はすでに多くの方が書かれていますので、今回は少し複雑なケースに適用した場合について検証してみました。 は
Lambdaタイムアウト時にX-Rayサブセグメントが記録されないことがあるので注意しよう | DevelopersIO
Lambdaがタイムアウトした際にX-Rayの想定していたセグメントが取得できていない時があったので、共有します。 私が気づいたのはLambdaがタイムアウトした時でしたが、実際の条件は 「サブセグメントをクローズせずにLambdaが終了した場合」 です。 条件と注意点について、詳しく説明していきます。 今回のコード全体はこちらに載せています。 クローズを忘れてしまいサブセグメントが記録されないコード例 良い例と悪い例を紹介します。 良い例 export const handler = async (event: { sleepTime: number }) => { const segment = AWSXRay.getSegment(); // 1000msのセグメントを取る const subSegment = segment?.addNewSubsegment("close");
1. はじめに Webページや動画からテキスト情報を抽出することは、情報収集やデータ分析など、様々なタスクにおいて重要です。この記事では、DockerとFastAPIを用いて、URLからテキストを抽出するアプリケーションを構築する方法について解説します。Dockerは、アプリケーションの実行環境をコンテナ化することで、環境依存の問題を解消し、デプロイを容易にする技術です。FastAPIは、Python製のWebフレームワークであり、高速で効率的なAPI開発を可能にします。 この記事を活用するとできること youtubeから字幕(transcript)を取得して、Difyで要約させる WebサイトのURLから、テキストを出力して、Difyのワークフローに流し込む Web上のPDFからテキストを抽出して、DifyでQAチャットボットを構築する 2. 環境構築 2.1 Dockerfile 以下
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ARM に存在する JavaScript 専用命令「FJCVTZS」を追う（ついでに V8 をビルドする）
LINE Botの開発でCloudflareとHonoを使う理由
Chrome の 組み込み AI Gemini Nano を試してみる
[Playwright]VScodeの拡張機能でらくらくブラウザ操作
【C#】非同期処理とasync/await - Annulus Games
YAGNIと拡張性のあいだ - 電通総研 テックブログ
奥野さんと社員のリファクタリング部屋 -リポジトリ層のディレクトリをどう作る？- - トレタ開発者ブログ
デザインシステムの開発者体験向上の試み - enechain Tech Blog
Server Actions の同時実行制御と画面の状態更新
プロンプトからREST APIを作るサービス『Hanabi.REST』の技術構成
Vuex から Pinia への移行を行いました - every Tech Blog
坂本龍一 追悼連載vol.13：YMO以前の分岐点。坂本龍一を「教授」たらしめた現代音楽家としての足跡 | CINRA
neue cc - ConsoleAppFramework v5 - ゼロオーバーヘッド・Native AOT対応のC#用CLIフレームワーク
Ruby "enbugging" quiz の解説 - STORES Product Blog
Managing My Motivation, as a Solo Dev
RubyKaigi 2024 参加記 | うなすけとあれこれ
Pythonで使える！非同期対応のRequestsモジュールとしてのHTTPX
#RubyKaigi 2024 セッションレポート - メドピア開発者ブログ
News from WWDC24: WebKit in Safari 18 beta
Next.jsでMiddlewareが大量に実行される場合の対処法
fastapi + pydantic + devcontainer でサーバーを建てる
小さなデプロイで大きな成果！ Next.jsで実現するマイクロフロントエンド
Rust製TypeScript Linterにおける型情報Lintルールの模索
Angular v18 is now available!
React Hooksもりもり構成のチャット機能を考える[React 19 / Next.js 15]
Next.js(App Router)でプレースホルダー画像を自作する
URLからテキストを抽出する自作APIアプリケーションの構築|youtube, PDF