(この記事の AI 成分は 5 割ぐらいです) claude-code や gemini-cli を触った人なら、やたらリッチな CLI のインターフェースが一体どうなってるか疑問に思ったはずです。 これは ink というライブラリで実装されています。実体は React のカスタムレンダラーで、React の差分レンダリングで CLI を構築することができます。 中では yoga というレイアウトエンジンが使われており、これは React Native でも使われているもので、 Web で display: flex を使ったときと同じレイアウト計算モデルになります。 つまり、 React や ReactNative の知識で CLI (TUI) の アスキーアートの UI を作ってるわけですね。 実際に作ってみた例 React Ink の可能性を探るべく、ターミナルで動くゲームを実装して
こんにちは！ サイボウズフロントエンドエキスパートチームの左治木です。 今回のテーマは「進化するPromiseオブジェクト」です。 Promiseは、非同期処理を管理するためのオブジェクトで、ECMAScript 2015 (ES6)で導入されました。ECMAScript 2017ではasync／await構文が追加され、非同期処理がより直感的に記述できるようになりました。現在では、async／await構文が非同期処理の主流となっています。 一方で、Promiseの機能はasync／await構文の登場後も進化を続けています。これにより、非同期処理がさらに扱いやすくなり、従来のPromiseでは難しかった細かい処理も可能になっています。今回は、ES2020以降で追加されたPromiseの新機能をユースケースを交えて解説します。 Promiseの基本を簡単におさらい Promiseは、非同
はじめに Zennのようなブログ記事やAstroなどの静的サイトジェネレーターが、どのようにMarkdownを受け取り、ドキュメントを生成しているのか。 その仕組みに強い関心を抱いた私はAstroの Content Collections のソースコードを読み始めました。とりわけ印象的だったのは、フロントマターを抽出する gray-matter でメタデータを取り出しつつ、本文をunifiedパイプラインへ流し込む一連の設計です。 この記事では、そうした実装を眺めた好奇心から始まり、多重パース時代の課題、ASTリレーがもたらした転換点やMDX 3・WASM・Edgeが広げる近未来までを、コードと図を交えながら俯瞰します。 第一世代：多重パース時代 Markdown変換ライブラリの草創期を支えた markdown-it や marked は、Markdown → HTML文字列 を1回だけ高
AI「できました！」人間「（…本当に大丈夫か？）」 Devinと探る、AIコードセキュリティ虎の巻 - GMO Flatt Security Blog
万華鏡のように変化するテクノロジーの世界。かつて専門家が丹精込めて紡ぎ出していた『創造物』――精巧な絵画や心揺さぶる音楽、そして複雑なプログラムコードでさえも――が、今やAIによって驚くほど自然に、そして巧妙に生み出されています。その筆致やロジックのきらめきが、人間の手によるものか、それとも精緻なアルゴリズムの産物か。見分けることの難しさは日増しに高まり、私たちに新たな問いを投げかけているようです。 と、ここまでがGemini 2.5 Proに書いてもらった導入文です！記事全文を読んでもらったうえで、「人間が書いたのと見分けがつかないような面白い導入文を載せて、AIが生成するものが高度化していることを興味深く紹介したい」と言ったら書いてくれました。まあまあいい感じですね。全然いい感じじゃないと思った人はAIに文句を言ってください。 個人的に冒頭の文章はわりかしいい線をいっていると思いますが
MCPにおけるセキュリティ考慮事項と実装における観点（後編） - GMO Flatt Security Blog
MCP logo ©︎ 2024–2025 Anthropic, PBC and contributors | MIT license はじめに こんにちは、GMO Flatt Security株式会社 セキュリティエンジニアのAzaraです。普段は、クラウドセキュリティや Web アプリケーションのセキュリティを専門領域にしています。 本稿は MCP のセキュリティを前後編で解説するものの後編です。前編では MCP のセキュリティを、利用者の視点から考察しました。 後編となる本稿では、攻撃者視点から脅威や攻撃手法を整理します。そのうえで、日々増えていく MCP Server の提供者が、これらの脅威やセキュリティ課題をどのように考慮し対策を講じるべきかを解説します。 また、GMO Flatt Securityは日本初のセキュリティ診断AIエージェント「Takumi」や、LLMを活用したア
import { VoltAgent, Agent, createTool, createHooks } from "@voltagent/core"; import { VercelAIProvider } from "@voltagent/vercel-ai"; import { openai } from "@ai-sdk/openai"; import { fetchRepoContributorsTool } from "./tools"; import { fetchRepoStarsTool } from "./tools"; // Create the stars fetcher agent const starsFetcherAgent = new Agent({ name: "Stars Fetcher", description: "Fetches the numbe
UUIDを短くするライブラリを作った
のように、22文字の短くてスッキリしたIDに変換できます。 これを簡単に行うためのライブラリ「uuid58」を作成しました。 本記事ではuuid58を作った背景や使い方、特徴を紹介します。 動機 データベースの主キーにUUIDを使うことは多いですが、UUIDは36文字（ハイフン込み）と長く、URLに埋め込むと見た目も悪くなりがちです。 「短くしたい！」と思ってBase64エンコードを考える人も多いですが、Base64は/や+、=などURLで使いにくい文字が含まれてしまいます。 そこで、Bitcoinでも使われているBase58（視認性の悪い文字を除外したアルファベット）でエンコードすれば、 22文字に短縮できる URLセーフ 見た目もスッキリ 0とO、Iとlのような区別しづらい文字が除外されている ダブルクリックで選択可能 という理想的なIDが作れます。 既存のUUID→Base58変換ラ
AI エージェントを仕組みから理解する
はじめに こんにちは、ダイニーの ogino です。 この記事では、AI エージェントや MCP に入門しようとしている人向けに、エージェントの内部実装について概説します。これを理解することで、現状の AI にできることが明確になり、今後の技術動向を追う上でも役に立つはずです。 本記事の要旨 MCP の表層的なプロトコルには大した意味も革新性も無いので、AI エージェントを理解するにはまずコンテキストを把握しましょう。 素の LLM の能力と、エージェントの実装を切り分ける AI エージェントは、自律的に判断してファイル操作や Web ブラウザなどのツールを使い分けることが可能です。しかし、その基盤となっている LLM にできるのは、テキストを入力してテキストを出力することだけに限られます[1]。 以降では「LLM にできないこと」を掘り下げ、それを補うために AI エージェントがどのよう
Storybook Play functionでAHA testingのすゝめ - LayerX エンジニアブログ
バクラク事業部でソフトウェアエンジニアをしている @ta1m1kam です。 フロントエンド開発において「どのテストをどれだけ書くべきか？」という問いは、誰もが一度は悩むテーマです。ユニットテスト？E2Eテスト？ビジュアルリグレッション？それぞれに役割があり、バランスが求められます。 Testing Trophy そんな悩みに対する一つの指針として、Kent C. Dodds氏が提唱した 「Testing Trophy（テスティング・トロフィー）」 という考え方あります。（提唱自体は2021年ごろなので、今では割と一般的になっているかなと感じています。） kentcdodds.com ポイントは「ピラミッド」ではなく「トロフィー」 この考えでは「最も費用対効果が高いのは統合テスト」だと指摘しています。 実際、アプリケーションでのユースケースを1つのコンポーネント単位でシナリオベースに検証で
「型システムの仕組み - TypeScriptで実装しながら学ぶ型とプログラミング言語」という本を書きました。 「型システムの仕組み - TypeScriptで実装しながら学ぶ型とプログラミング言語」 どんな本？ 簡単な型チェッカを自作してみることで、型システムの仕組みを概観する本です。 型チェックする対象の言語はTypeScript（のサブセット言語）、型チェッカを実装するための言語もTypeScriptです。 たとえば、次のようなプログラムが型チェックできるようになります。 const add = (x: number, y: number) => { return x + y; } const a = add(1, 2); const b = a + true; 型チェッカは、それぞれの変数がどういう型を持つか管理しつつ、プログラムの各パートがどういう型になるかを判定していきます。
Reactで大量描画しても60fps出すためのパフォーマンスチューニング術 - SmartHR Tech Blog
こんにちは、SmartHRでプロダクトエンジニアをやっている @Tokky0425 です。 みなさんは普段組織で働いていますか？僕は組織で働いています。 組織で働くにあたって便利なもの、ありますよね。そう、組織図です。 SmartHR にも組織図の機能があるのですが、部署数や従業員数が多いとブラウザ上での操作が重くなってしまうという問題がありました。 最近「数万人規模の組織図での 60fps」を目指してこの組織図機能の描画パフォーマンス改善を行ったので、その中で実践したフロントエンド開発における大量描画処理の Tips を共有します。(React を前提としています) そもそも問題はどこにあるのか 最近まで、SmartHRの組織図機能は数万人規模の企業で十分に使えるような作りになっていませんでした。というのも、対象従業員数が数万人を超えてくると、いろんな操作が著しく重くなり、実用に耐える操
配列（Array）との比較 JavaScriptにはTypedArrayとは別に配列（Array）の違いを説明します。 ArrayはTypedArrayと比べると柔軟で汎用性が高いです。しかし、Arrayは内部で動的なメモリー管理を行うため、データ処理や転送を高い頻度で行う場合にはオーバーヘッドが発生する可能性があります。 TypedArrayは長さが固定であり、バイト単位のデータ格納が可能なため、メモリーアクセスが効率的に行われます。数値計算においてもバイナリデータを直接操作できるので、高いパフォーマンスが期待できます。また、メモリー領域が連続しているので高速なデータの転送が可能です。 大量のデータを処理する数値計算の場合にはTypedArrayで管理するとデータのまとめた取り回しが楽になります。逆にデータの規模が小さい時は汎用的なArrayが良いでしょう。 TypedArrayは決まっ
フロントエンド、というよりUI一般では、ユーザーの操作に対してまったく無反応なのは良くありません。ユーザーが意味のある操作をしたならば、何らかのフィードバックを返すべきです。 例えば、何かをユーザーのクリップボードにコピーするボタンというのはありがちですが、クリップボードに何かを書き込んでもそれだけだと目に見える変化がないので、追加で「コピーしました」のような通知を出すというのはよくあるパターンです。 ここでは、そのような通知が、ちょっとフェードインしながら表示され、一定時間後にフェードアウトしながら消えていくという要件を想定することにしましょう。 transitionを使う基本的な実装 まずはReactの部分をざっくりお見せします。 import { useState } from "react"; import "./styles.css"; export default functi
はじめに こんにちは、@Sicut_studyです。 Reactを勉強するとまず最初に勉強するのがuseStateなどのHooksだったと思います。 useStateやuseEffectなどは利用する場面が多く慣れている方も多いと思いますが、その他のHooksはどうでしょうか？そもそも名前すら知らないというHooksがたくさんあるかと思います。 その中には利用することでパフォーマンスを向上させたり、ステートを簡単に扱えるようになるものなど便利なものがたくさん用意されています。 React19の登場でuseActionStateやuseOptimisticなど絶対に覚えて活用していきたい重要なHooksも登場しております。 この記事ではそんなReactで用意されている全てのHooksを12分で読める内容にして紹介していきます。 最後まで読めばどのタイミングでどのHooksを選択すればよいかわ
こんにちは、エムスリーエンジニアリンググループ、コンシューマチームの園田です。本記事では、外部サービスとAIエージェントの連携を可能にするMCPプロトコルについて、技術検証の実装例を交えてお話しします。 1. MCPとは（ざっくり） MCP（Model Context Protocol）とは、Anthropic社によって策定されたAIエージェントが外部サービスから情報を参照したり連携することを目的としたプロトコルです。 「MCPサーバー」は、GitHubやPostgreSQLといったリソースをMCPで喋れるように変換してあげるプロキシのようなサーバーです。 Claude DesktopやCursorなどはMCPクライアントの機能があり、GitHubなどのMCPサーバーを利用してナレッジとして利用したり、プルリクエストの作成なども行えます。 Introduction - Model Cont
TypeScript 製の AI エージェントフレームワーク Mastra Mastra は TypeScript 製の AI エージェントフレームワークであり Gatsby の開発チームによって開発されています。Mastra サーバーを実行することで REST API サーバーを介してエージェントとやり取りすることができます。Mastra はAI エージェントを構築するために必要なプリミティブな機能を提供するために設計されています。 Mastra は TypeScript 製の AI エージェントフレームワークであり Gatsby の開発チームによって開発されています。Mastra サーバーを実行することで REST API サーバーを介してエージェントとやり取りできます。Mastra は AI エージェントを構築するために必要なプリミティブな機能を提供するために設計されています。 Ma
はじめに 本当に悔しいし許せないし、エンジニアとして不甲斐ないです。2025年2月26日深夜にハッキングにあいました。どのように相手と繋がり、どのような手口でハッカーに資産を抜かれたか、コードベースで全てお伝えします。今後同じ被害に遭う方が少しでも減ることがあればこんな嬉しいことはないです。 コード解説、さらに対策案も書いていきます。もし他に良い対策案などあればコメントでご教示ください。 ハッカーとのやりとりの流れ ハッカーとは Linkedin でブロックチェーンを使ったプロジェクトを手伝ってくれないかという連絡がりそこからやりとりが始まりました。そして移行の大まかな流れは下記のような感じです。 Linkedinでプロジェクトを手伝ってほしいと言う内容でDMがくる Githubリポを見て実装できそうか確認してほしいと言われる 自分のGithubアカウントを共有してプライベートリポジトリに
Sakana AI の間違いを徹底的に査読してみた (Colabコード付き)｜しらいはかせ(AI研究/Hacker作家)
なんかみんなSakana AIがやらかした間違いについてワイワイ言っているんで、徹底的に検証してみたら結構面白かったし、勉強にもなったよ！という7万字ぐらいあるブログです。 最後の方にGoogle Colabで動く検証コードを置いておきます。 ＜お気持ち背景＞ 昨年の11月に「AIバブル崩壊」の足音と「AI副業」のデメリット、という話を書きました。 いくつかのAIバブルの崩壊シナリオに警鐘を鳴らさせていただいたんだけど、長くてゴメン。 個々にすごいけど、「Kaggler節」であり、その文法で銀行がお金を出ような話になっているんだろうか？どこかの山でチャンピオンになるかもしれないけど、みんなが期待するような課題解決や課題発見、課題設定になっているんだっけ？という感想があります。 例えば画像生成AI「Stable Diffusion」に例えますが、画像生成モデルみたいに無償で公開していくんだけ
Three.jsで3DCGを作ろう！〜テキストを3D空間に配置する〜 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
新卒ブログとは？ 2024年4月に新卒入社したLIGメンバーが、日々の学びや気づきを綴るブログです。彼らがふだんどんなことを学んでいるのか、気軽にのぞいてみてください。 こんにちは、新米エンジニアのにっしーです。 Webサイトでの表現の幅を広げたいと思い、Webブラウザ上で3DCGを制作することができるJavaScriptのライブラリ「Three.js」を勉強しています。 今回の連載では、Three.jsを使った制作物を紹介していきたいと思います（サボり癖があるので、サボらないようにという自戒の意味合いも込めて……）。 同じようにThree.jsの勉強をされている、みなさんの参考になれば幸いです！ ※導入方法などは端折らせていただきますので、あらかじめご了承ください。 完成系 さっそくですが、今回作成したものがこちらです！ 実装方法 1. シーン、カメラ等もろもろを準備 これは、Three
こんにちは。駅メモエンジニアの id:dorapon2000 です。 約半年前の 6 月 1 日にステーションメモリーズ！（駅メモ！）10 周年を記念してタイムラインと地図の切替機能をリリースしました。大変好評を頂いておりとても嬉しいです。 今回は、その機能の中で毎秒最寄り駅を計算するロジックをどのように実現しているのかについてお話します。様々なスペックの端末で遊ばれているため、可能な限りリソースを節約するような工夫をしました。堅い言い方をすれば、過去の計算情報を使った最近傍探索アルゴリズムを実装しました。 記事中のサンプルコードは TypeScript で記述しています。 2024/11/22 追記： はてなブックマークでのご指摘ありがとうございます。 ご指摘をいただいた「事前計算の時間計算量」と「基準点と現在地の距離が近すぎるとき」の説明部分を修正しております。 誤：事前計算を O(N
TypeScript 5.8で条件付き戻り値型に対するナローイングができるようになりそう（特定の制約を満たす場合） - Mitsuyuki.Shiiba
数日前にTypeScript 5.7 RCがアナウンスされてリリースが楽しみだなー！ってところなんだけど、そのさらに数日前に、ウォッチしていたこのPR↓がマージされてTypeScript 5.8.0のマイルストーンに入った。わー！ これが今日のお話。TypeScript 5.8.0でConditional return type narrowingが入りそう。楽しみ！ Conditional return type narrowing? 直訳すると「条件付き戻り値型の絞り込み」かな。引数の型によって戻り値の型が変わる関数を定義したいときに、例えばこんな風に書きたくなる。 declare const record: Record<string, string[]>; declare const array: string[]; function getObject<T extends str
実践: await using でリソース開放
実践 いつ使うんだこれと思ってたら使う日が来たシリーズ。 今回、Deno で使ったんですが、 Node.js やブラウザでも Polyfill を入れれば動きます。 try finally で puppeteer を終了したい Deno で puppeteer を扱うために、こういうコードを書いてました。 // original import puppeteer from "npm:puppeteer@23.6.1"; import chromeFinder from "npm:chrome-finder@1.0.7"; let browser: puppeteer.Browser | null = null; try { browser = await puppeteer.launch({ headless: false, executablePath: chromeFinder(),
ブラウザ内テキスト探索の高速化というテーマで改善を行いました。公開許可は頂いていますが、先方の希望で社名は伏せさせていただきます。 技術的には「再現性がある木構造のノード探索の条件の生成、その実行の高速化」という少しR&Dっぽいタスクでした。Playwright のコードを参考にしつつ、個別により速いパーツで置き換えていく、というもので非常に興味深いものでした。こういう仕事は楽しいので、いくらでも歓迎です。 今回は最初はドメイン理解に時間をあてて、その後十分にドメイン理解が進んだら計測しつつ改善する、という流れです。 以下、敬称略。 相談内容 ブラウザを自動操作する技術を開発している。技術的には一種のE2Eテストの応用技術で、サーバーに要素の探索条件と、その操作を登録する。 今回の相談では、その要素探索が重くなってしまうケースがあり、これを改善してほしい、という依頼。とくにテキストを条件に
先日、Kamal 2でNext.jsを安価なVPSにデプロイする勉強をしながら、Next.js App Router/Server ActionでCRUDのデモアプリを作成しました（コードはGitHub）。そのときにセキュリティについて気になって点がいくつかあり、勉強しながら対策をしましたので紹介したいと思います。 私自身は業務でNext.jsを書いた経験が限定的です。的外れな議論をしているかもしれません。あくまでもRuby on Railsアプリを書くときと同じ気持ちでNext.jsのアプリを書いたとき、セキュリティ上で気になった点を挙げているだけです。私が見落としている点や誤っている点等ありましたら、コメントやX等で教えていただけると大変ありがたいです。 その１：データ漏洩の危険性 この問題についてはムーザルちゃんねるが紹介しています。またNext.jsの公式ブログでも対策が紹介されて
しかしCompressionStreamはその名の通りWeb Stream APIなのでどう頑張っても出力は非同期です。なので関数名と引数は同じですが戻り値はPromise<string>になります。 また、アルゴリズムが違うので互換はありません。今までlz-stringで圧縮・解凍していた箇所をいきなりCompressionStream版に置き換えても機能しませんのでご注意ください。 ちなみに、lz-stringの圧縮アルゴリズムはドキュメントでLZ-basedと書かれており、おそらく作者独自のアルゴリズムです。 CompressionStreamで選択できるアルゴリズム（語弊あり）は gzip, deflate, deflate-rawです。gzipはgzipですが、deflateはzlibでdeflate-rawが純粋なdeflateです。命名については歴史的経緯があるようです。 前
<div id="counter">0</div> <button type="button" id="incrementBtn">+</button> const counter = document.getElementById('counter'); const incrementBtn = document.getElementById('incrementBtn'); incrementBtn.addEventListener('click', () => { counter.textContent = Number(counter.textContent) + 1; }); これは、多くのブラウザやWebアプリケーションは、キーボードアクセシビリティを重視しているためです。 ガイドライン 2.1 キーボード操作可能: すべての機能をキーボードから利用できるようにすること。 すべ
はじめに 前にも別のモデルでやってる ただ o1-preview は、やり取りを重ねるよりも一発で終わらせるほうがいいらしいので、最終的なテスト全体を渡すようにした。 情報の提示方法が異なると当然結果も変わるので、 gpt-4o でも同様なことを試した。 材料 プロンプトは以下。 基本的に最初にやったときと同じ。ペアプロではないのでその部分の調整をしている - 私がテストコードを提示するのでそのテストケースをパスする最小限の実装をしてください - Vue.js のバージョン 3 と Typescript で実装を行ってください - コードのみを示してくださいコードの解説などは必要ありません - スタイリングは必要ありません - テストケースに失敗したらその内容をチャットで送信するので最小限のコードの修正をしてください - テストのコードには vitest を利用しています jest と互換
TypeScriptの不要なexportを自動で削除するOSS「ts-remove-unused」を開発しました
こんにちは。メディアカンパニーに所属する鴻巣和司 (@kazushikonosu) です。普段はLINEスキマニのフロントエンドの開発をしています。業務をきっかけに、TypeScriptの不要なデッドコードを自動で削除するツール ts-remove-unused を開発し、GitHub上でOSSとして公開しました。本稿では、ts-remove-unusedが解決しようとしている問題や直近で行った大規模な変更について紹介します。 exportしていることで気づきにくい不要なコード TypeScriptを使っている場合、tsconfig.json の compilerOptions.noUnusedLocals を有効にすることで、ファイル内で参照がない不要な変数などの定義をTypeScriptコンパイラの実行時に検知することが可能です。また、ESLintなどの静的解析ツールを使い適切にルール
9月5日、Vercelの公式ブログで「What’s new in React 19 – Vercel」と題した記事が公開された。この記事では、React 19における重要な新機能や改善点について、詳細かつ実践的な内容が取り上げられている。これまでのReactのバージョンで導入されてきた実験的機能が、React 19で正式に安定化され、多くの開発者にとってさらなるパフォーマンスの向上と開発体験の向上が期待されている。 ここでは、同記事からポイントを絞って内容をご紹介する。 サーバーコンポーネント (Server Components) サーバーコンポーネントは、Reactの10年の歴史の中でも最も大きな変化の1つであり、React 19の新機能の基盤となるものである。この機能により、以下の点が大幅に改善される。 初期ページロード時間の短縮 サーバーコンポーネントを使用すると、クライアントに送
デザイナーにもお勧め！ CSSもThree.jsもタイムライン編集を可能にするTheatre.jsが凄い ウェブサイトの演出を作る上でアニメーションの実装は欠かせません。一般的には、CSSアニメーションやJavaScriptのライブラリ（GSAPジーサップなど）を用いてコードベースで動きをつけることが多いと思います。ですが、完全にコードだけでアニメーションを調整するのは大変だと思ったことはないでしょうか？ 一度実装したことがある方は共感いただけるかもしれませんが、少し直そうにもコードに戻って調整し、反映されたブラウザ画面を確認して、もう一度コードを直して…と往復していると結構大変です。また、アニメーションさせるプロパティや要素が複数ある場合には、コードを解読する難易度も上がります。 本記事ではそんな悩みを解決できる、GUIからアニメーションを調整できるライブラリ「Theatre.jsシアタ
この記事は、静的解析とビルドサイズ面で興味深いテーマでした。記事として自分の考えを書きます。 注意。あくまでビルドパフォーマンス視点での最適化です。強い意図があって、自分のドメインモデリングの方法論ではこれが最適なんだ、というなら元コードの方法論を止めるつもりはありません。 元記事のコードを minify するとどうなるか 元コードを参考に、それにアクセスするサンプルコードを書いてみます。 const sortingOptions = { priceDesc: { id: "priceDesc", sort: "price", order: "desc", label: "価格が高い順", }, priceAsc: { id: "priceAsc", sort: "price", order: "asc", label: "価格が安い順", }, ratingDesc: { id: "ra
王道か邪道か？ タイムスタンプによるステート管理
Reactによるステート管理では、ある状態が変化したら付随して他の状態も変化してほしい場合があります。例えば、次のような場合を考えます。 チェックボックスが1つある。 チェックボックスの初期状態は、HTTP APIから取得したデータによって決まる。 ユーザーはチェックボックスを操作できる。 APIからデータを再取得する場合があり、その場合はチェックボックスの状態が再取得されたデータに従ってリセットされる。 皆さんは、このような要件をどのように実装するでしょうか。 やりがちな実装 まず、やりがちな実装を見てみましょう。 const apiData = useApiData(); const [isChecked, setIsChecked] = useState(false); useEffect(() => { setIsChecked(apiData.isChecked); }, [ap
こんにちは、株式会社FP16で結構コードを書いている二宮です。 最近Webスクレイピングのコードを色々な方法で書いているので、そこで得た知見をここに残しておこうと思います。 ほぼ毎日なにかのWebスクレイピングコードを書いています。 Webスクレイピング手段 Webスクレイピングには色々な方法があります。 私が最近主に使っているのはこの5つの手段です。 cheerioでHTMLを解析 Playwrightなどで要素指定でデータを取得する APIを見つけて叩く（バックエンドとの通信を再現してデータを取得） LLMでサイト構造を解析してデータを取得する Next.jsからのレスポンスに含まれているデータを解析して取得する これが令和のWebスクレイピングのベストプラクティスだと思っています。 これらの方法を、目標に合わせて使い分けています。 使い分け方 CheerioでHTML解析 JavaS
TS 5.6のiterator helpersサポート――BuiltinIteratorsのwhat & whyを知る - Qiita
先日、TypeScript 5.6 Betaが公開され、あわせてリリースノートも出ました。 この記事では、TS 5.6の新機能の中でもIterator helpersに注目します。特に、Iterator helpersのサポートに合わせて型定義に追加されたBuiltinIteratorsやBuiltinAsyncIteratorsについて解説します。 Iterator helpersとは Iterator helpersは、ECMAScriptのプロポーザルのひとつであり、この記事の公開時点ではStage 3という完成目前の状態にあります。TypeScriptではStage 3に到達したプロポーザルが実装されるので今回これが実装されることになりました。 ランタイムの実装としては、この記事公開時点ではGoogle Chrome 122, Node.js 22.0.0, Deno 1.42など
真にチラつかないダークモードをついに実現したぞ。実現方法と気付きを書く2024/07/14 14:36 nextjsreact このサイトはダークモードに対応しています。なぜならダークモードは基本的人権だからです(要出典)。 しばらく、サイトに訪問した直後ライトモードとダークモードが切り替わってチラつく現象が発生していました。これを改善したので、実装方法と気付いたことを残しておきます。 ダークモードの実装方法一般に、ダークモードの実装方法は3タイプあります。 OSによるモード設定を反映する メディアクエリー@media (prefers-color-scheme: dark)を使うと、OS側でダークモードを指定している時だけ有効になるスタイルを書くことが出来ます。 JavaScriptでも判定が必要な場合はmatchMedia("(prefers-color-scheme: dark)")
module: add --experimental-strip-types by marco-ippolito · Pull Request #53725 · nodejs/node It is possible to execute TypeScript files by setting the experimental flag --experimental-strip-typ... 💁♀️ まだマージされてない点に注意してください --experimental-strip-typesというフラグを実行時に付けることにより、Node.jsでTypeScriptのコードを実行できるようになるPRが出てきました。 背景 TC39でも型注釈の話題(議事録を読むとブラウザとの兼ね合いもあり道のりは長そう)が存在するほどJSのコードにおいて、型は当たり前となっています。 Node.jsと同
こんにちは。アクセシビリティ本部のアクセシビリティエンジニアの五十嵐です。SmartHRでは主にアクセシビリティテスターが見つけた課題を技術的な観点から改善したり、根本的な問題を解決するための仕組みづくりを担当しています。 さて、Meta が開発する UI ライブラリとして長い間人気を博している React ですが、2024年4月に最新版であるバージョン 19 のRC版が公開されており、注目を集めています。 バージョン 19 では "use client" や "use server" でも知られる Server Components を含む様々な機能が含まれる予定ですが、この記事では、そんな React バージョン 19 をアクセシビリティの観点からキャッチアップし、特に便利になりそうな点や、注意が必要になりそうな点などを見ていきます。 forwardRef が不要になった 仮想 DOM
前回の記事では、JavaScript の実行エンジン V8 の JIT 出力コードを読んでみました。記事は M1 Mac 上で動かした結果でしたので、ARM アーキテクチャのアセンブラを読むことになりました。 さてそんな ARM アーキテクチャですが、最近の ARM には FJCVTZS という JavaScript 専用の機械語命令があるのをご存知でしょうか？CPU に、特定の言語（それもコンパイラを持たない JavaScript）専用の命令があると知ったとき、私は大いに驚きました（過去にも Jazelle みたいなものはありましたが） 今回は、この FJCVTZS 命令について、実際にどれだけ効果があるのか、V8 をビルドしながら調べてみましょう。 FJCVTZS 命令とは？ FJCVTZS 命令は、Arm v8.3 から導入された JSCVT 命令の一つで、JavaScript の言
JavaScript において、特に苦手とする人が多い印象のある Promise ですが、await と async の文法が導入されたことで、Promise の仕様を深く理解しなくても非同期処理を自然に書けるようになってきたのではないかと思います。 極論ですが、JavaScript の非同期処理は async await new Promise のみで、（ほぼ）全て表現可能です。特別な理由がない限り then を使わないようにしましょう、ということを周知するのがこの記事の目的です。 なお本記事では Promise の rejected の状態についてほとんど解説しておりません。基本を理解したら、別記事でぜひ学んでみてください。 Promise とは？ Promise は、少し乱暴に説明すると「実行が終わっていないかもしれない何らかの関数」を包んだオブジェクトです。 普通の関数とは違って、
React Aria Components は Adobe によって提供されている Headless UI コンポーネントライブラリです。振る舞いや国際化に, アクセシビリティに関する機能を備えており、Button や Input, TextField, Label などのシンプルな要素から、DatePicker や ComboBox などの様々なコンポーネントが提供されています。 今回は React Aria Components の設計について紹介します。 React Aria Components のコンポーネントの設計 React Aria Components の API はコンポジションを中心に設計されています。これにより、パターン間で共通のコンポーネントを共有することも、個別に使用することも可能です。なお、コンポジションについては React Component Compos
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React Ink によるリッチ CLI (ClaudeCodeの裏側のアレ)
進化するPromiseオブジェクト ［JS Modern Features no.2］ | gihyo.jp
Markdown→HTMLはこう進化したーパイプライン最前線
VoltAgent - Open Source TypeScript AI Agent Framework
「型システムのしくみ」発売のお知らせ - まめめも
あらためて理解するArrayBuffer - JavaScriptでバイナリデータを扱う方法 - ICS MEDIA
ReactとCSSで一定時間表示される通知をやるときの色々な方法 - Qiita
【図解解説】これ1本12分でReact Hooks 全20種を理解できる教科書 - Qiita
MCPサーバーが切り拓く！自社サービス運用の新次元 - エムスリーテックブログ
TypeScript 製の AI エージェントフレームワーク Mastra
Web3開発者をねらったハッキング手口の全て（わたしは全て抜かれました...）
毎秒現在地を使った最近傍探索をしたい - Mobile Factory Tech Blog
Playwrightを参考にブラウザ内テキスト検索を高速化する (事例紹介:サードパーティスクリプト提供会社)
Next.jsで簡単なCRUDアプリを作りながら気になったセキュリティ: Railsの視点から
続・URLシェアを支える技術 CompressionStream
Webアプリでの長押し機能の実装は意外と難しい - Qiita
ChatGPT (o1-preview) にテストを渡してコードを実装させるとどうなるか試した
React 19の新機能まとめ — サーバーコンポーネントは全フロントエンドエンジニア必見
デザイナーにもお勧め！ CSSもThree.jsもタイムライン編集を可能にするTheatre.jsが凄い - ICS MEDIA
ネストオブジェクトの罠 RE: TypeScriptで「選択肢」の定義をEnum的な定数にまとめる
【令和最新版】令和のWebスクレイピング(クロール)【ベストプラクティス】
真にチラつかないダークモードをついに実現したぞ。実現方法と気付きを書く | stin's Blog
Node.jsでTypeScriptのコードを実行できるようになるかも - hiroppy's site
React 19 で変わるアクセシビリティ周りの技術 - SmartHR Tech Blog
ARM に存在する JavaScript 専用命令「FJCVTZS」を追う（ついでに V8 をビルドする）
JavaScript で then を使うのは避けよう（await / async の初級者まとめ）
拡張性に優れた React Aria のコンポーネント設計