JavaScriptベースのフレームワークは、TypeScriptで開発することが一般的になってきています。一方、PythonやRubyのフレームワークは、それぞれの言語が持つ型システムを活用します。 2.3 TypeScriptを使うメリット 型安全性によるバグの削減 コンパイル時に型エラーを検出できるため、実行前に多くのバグを防げます。 // TypeScriptの例 interface User { id: number; name: string; email: string; } function getUserName(user: User): string { return user.name; } // 型が合わないとコンパイルエラーになる getUserName({ id: 1, name: "太郎" }); // エラー: emailプロパティが必要 開発体験の向上 I

はじめに：ブラウザストレージの選択に迷っていませんか？ 「ユーザー設定を保存したいけど、localStorageでいいのかな？」 「認証トークンはCookieに入れるべき？それともlocalStorage？」 「大きなデータを保存したいけど、どれが適切？」 ブラウザでデータを保存する方法は複数あり、それぞれに特徴があります。しかし、「結局どれを使えばいいの？」という疑問を持つ方は多いのではないでしょうか。 本記事では、単なる機能比較にとどまらず、実際のユースケース別に最適な選択肢を提示します。初心者の方にも分かりやすいように、セキュリティの概念も含めて丁寧に解説していきます。 ブラウザストレージの全体像 まず、主要な4つのストレージ技術を整理しましょう。 それぞれの技術は異なる目的で設計されています。以下の4つの軸で比較すると、特徴が明確になります。 4つの比較軸で理解する 1. データの

ChatKit is a batteries-included framework for building high-quality, AI-powered chat experiences. It’s designed for developers who want to add advanced conversational intelligence to their apps fast—with minimal setup and no reinventing the wheel. ChatKit delivers a complete, production-ready chat interface out of the box. Key features include: Deep UI customization so that ChatKit feels like a fi

In React 19.2, Activity supports two modes: visible and hidden. hidden: hides the children, unmounts effects, and defers all updates until React has nothing left to work on. visible: shows the children, mounts effects, and allows updates to be processed normally. This means you can pre-render and keep rendering hidden parts of the app without impacting the performance of anything visible on screen

10月1日にアップデートされたChrome 141に追加された、CSSとUIに関する新しい機能を紹介します。 前回のアップデートでは10個のCSSの新機能が追加されました（紹介記事）が、今回は小規模なアップデートとなっています。しかし、details要素やネストされたSVG要素の幅と高さなど、Web制作者は要チェックです！ New in Chrome 141 Chrome 141 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに ARIA通知API details要素の祖先表示アルゴリズムをアップデート ネストされたsvg要素の幅と高さ はじめに 10/1にリリースされたChrome 141で3つのCSSとUIに関する新しい機能が追加されました。対象となるChrome 1

2025/09/30 Next.js vs Nuxt それぞれの良さを知る Frontend Night https://offers-jp.connpass.com/event/367375/ の登壇資料です！

合計で毎週20億以上ダウンロード、「debug」「Chalk」など18の人気npmパッケージにマルウェア混入：メンテナーを狙ったフィッシングメールがサプライチェーン攻撃の引き金に Node.jsのパッケージマネジャー「npm」を通じて、18種類の人気npmパッケージに悪意のあるコードが埋め込まれ公開されたという。これらのパッケージは合計で、毎週20億回以上ダウンロードされている。 セキュリティSaaSを手掛けるAikido Securityは2025年9月8日（日本時間、以下同）、Node.jsのパッケージマネジャー「npm」を通じて、18種類の人気npmパッケージに悪意のあるコードが埋め込まれ公開されたと警告する記事を公開した。これらのパッケージは合計で、毎週20億回以上ダウンロードされているという。 影響を受けたnpmパッケージと、悪意のあるコードが含まれていたバージョンは、次の通り。

Highlights ESLint v9.34.0 introduces multithread linting — the ability to process multiple files simultaneously using multiple threads. This feature can significantly reduce lint times for large projects. To enable it, run ESLint with the --concurrency flag: npx eslint --concurrency=auto Copy code to clipboard Read everything in the announcement. Features 0bb777a feat: multithread linting (#19794)

Google DocsやFigmaのような複数人が同時編集できるアプリケーションを作るためには「ロックフリー」な共同編集の技術が必要です。誰かが文字を入力するたびにサーバーの更新完了を待つわけにはいきませんが、だからといって各自が好き勝手にデータを書き換えてしまうとテキストが混ざったり他のユーザーのアイテムを消してしまったり、さまざまな問題が発生するためです。 この問題を解決するための代表的なアルゴリズムがCRDTで、CRDTをベースに共同編集機能を提供するメジャーなJSライブラリがYjsです。CRDTとYjsについては以前の記事『共同編集を支える技術とライブラリの活用』でも紹介しており、ICSではYjsを利用した開発も行っています。 このYjsの有力なライバルとして、2024年に正式リリースされたのがLoro（ロロ：スペイン語でオウム）です。後発だけに、これまで実装が難しかった便利な機能

GitHubは、自然言語で指示するだけで生成AIによってTypeScriptとReactを用いたフルスタックのアプリケーションが自動的に生成される「GitHub Spark」のパブリックプレビュー開始を発表しました。 Today we’re releasing GitHub Spark — a new tool in Copilot that turns your ideas into full-stack apps, entirely in natural language. pic.twitter.com/YvHO0Dc3GJ — Satya Nadella (@satyanadella) July 23, 2025 GitHub Sparkは昨年（2024年）10月に発表されていました。 参考：［速報］GitHub、自然言語による指示だけでアプリケーションを生成する「GitHub S

(この記事の AI 成分は 5 割ぐらいです) claude-code や gemini-cli を触った人なら、やたらリッチな CLI のインターフェースが一体どうなってるか疑問に思ったはずです。 これは ink というライブラリで実装されています。実体は React のカスタムレンダラーで、React の差分レンダリングで CLI を構築することができます。 中では yoga というレイアウトエンジンが使われており、これは React Native でも使われているもので、 Web で display: flex を使ったときと同じレイアウト計算モデルになります。 つまり、 React や ReactNative の知識で CLI (TUI) の アスキーアートの UI を作ってるわけですね。 実際に作ってみた例 React Ink の可能性を探るべく、ターミナルで動くゲームを実装して

ウェブ技術を用いたクリエイティブコーディング環境にはさまざまなものがありますが、プロトタイピングや2D表現には、Canvas 2DをラップしたJavaScriptライブラリ「p5.js」が非常に便利です。この記事ではp5.jsの強み、便利な関数と作例を紹介し、自分で作成した作品の公開方法について解説します。 p5.jsとは p5.jsは、ウェブ上でグラフィカルな表現ができるJavaScriptライブラリで、基礎的なプログラミングの知識さえあれば手軽に創作を始められるのが魅力です。 またp5js.orgが提供しているウェブエディターを使うと、環境構築なしにブラウザ上でクリエイティブコーディングが始められます。たった数十行のみのコードでもメディアアート作品のような出力が得られる、とても興味深いライブラリです。今回はp5.js Web Editorを使って簡単なアニメーションを制作しましょう。

TL;DR: The first stable version Oxlint has been released! With a 50~100x performance improvement over ESLint, support for over 500 ESLint rules, and usage in major companies like Shopify, Airbnb, and Mercedes-Benz, you should give it a try. Get started now. Oxlint is a Rust-powered linter for JavaScript and TypeScript is designed to be fast and simple to adopt. Since its first announcement back in

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

1import { Browserable } from 'browserable-js'; 2 3// Initialize the SDK 4const browserable = new Browserable({ 5 apiKey: 'your-api-key' 6}); 7 8// Create and run a task 9async function runTask() { 10 const createResult = await browserable.createTask({ 11 task: 'Visit example.com and extract all links', 12 agent: 'BROWSER_AGENT' 13 }); 14 15 // Wait for task completion 16 const result = await brows

Devographicsは2024年12月16日（米国時間）、JavaScriptの利用動向を調査した年次調査「State of JavaScript 2024」の結果を発表した。 同調査は、2024年11月13日～12月10日にオンラインで実施され、JavaScriptを開発に利用する1万4015人から回答を得た。回答が多かった上位5カ国は、米国（15％）、ドイツ（8％）、フランス（7％）、イギリス（4％）、ポーランド（3％）。日本からは150人が回答した。 同調査の目的はWeb開発エコシステムにおけるトレンドを把握し、開発者の技術選択を支援することだ。レポートでは、2024年のJavaScriptエコシステムの全体像をさまざまな角度から示している。調査結果は、回答者の属性、言語機能、ライブラリ、他のツール、使用用途、リソースといったカテゴリー別に報告されている。 調査結果のハイライトは

はじめに こんにちは。 ABEJAのシステム開発部でエンジニアをしている中島です。 こちらはABEJAアドベントカレンダー2024 8日目の記事です。 本記事では、英語のスピーチが苦手な中島がAIの力で英語を話すことに挑戦 そして挫折 する話をします。 今回の記事の対象者はソースコードをある程度読むことができる方を想定しています。 大枠として下記の構成で進行します。 先に結論 OpenAI Realtime API とは アプリケーション方針 リファレンス読解 アプリケーションの実装 まとめ 先に結論 OpenAIのRealtime APIのリファレンス実装を見ながら、リアルタイム翻訳機能を実装しました。 リファレンスのUtilityを使えば、簡単に実装することができます。 出来たものは下記のようなアプリケーションです。 youtu.be OpenAI Realtime API とは まず

Watch our video announcement. Announcing Deno 2 The web is humanity’s largest software platform — building for it means potentially reaching over 5 billion people. But as web development has accelerated in recent years, it has also become increasingly and unmanageably complex. Before writing a single line of code, developers must deal with tedious configuration and wading through unnecessary boile