サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
introduction htmx gives you access to AJAX,CSSTransitions, WebSockets and Server Sent Events directly inHTML, using attributes, so you canbuild modern user interfaces with thesimplicity and power of hypertext htmx is small (~16k min.gz’d), dependency-free, extendable & has reduced code base sizes by 67% when compared withreact motivation Why should only <a> & <form> be able to make HTTP requ
JavaScriptベースのフレームワークは、TypeScriptで開発することが一般的になってきています。一方、PythonやRubyのフレームワークは、それぞれの言語が持つ型システムを活用します。 2.3TypeScriptを使うメリット 型安全性によるバグの削減 コンパイル時に型エラーを検出できるため、実行前に多くのバグを防げます。 //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 forbuilding 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: DeepUI customization so that ChatKit feels like a fi
InReact 19.2, Activity supports two modes: visible and hidden. hidden: hides the children, unmounts effects, and defers all updates untilReact 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 inChrome 141Chrome 141 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに ARIA通知API details要素の祖先表示アルゴリズムをアップデート ネストされたsvg要素の幅と高さ はじめに 10/1にリリースされたChrome 141で3つのCSSとUIに関する新しい機能が追加されました。対象となるChrome 1
合計で毎週20億以上ダウンロード、「debug」「Chalk」など18の人気npmパッケージにマルウェア混入：メンテナーを狙ったフィッシングメールがサプライチェーン攻撃の引き金に Node.jsのパッケージマネジャー「npm」を通じて、18種類の人気npmパッケージに悪意のあるコードが埋め込まれ公開されたという。これらのパッケージは合計で、毎週20億回以上ダウンロードされている。セキュリティSaaSを手掛けるAikidoSecurityは2025年9月8日（日本時間、以下同）、Node.jsのパッケージマネジャー「npm」を通じて、18種類の人気npmパッケージに悪意のあるコードが埋め込まれ公開されたと警告する記事を公開した。これらのパッケージは合計で、毎週20億回以上ダウンロードされているという。 影響を受けたnpmパッケージと、悪意のあるコードが含まれていたバージョンは、次の通り。
Highlights ESLint v9.34.0 introduces multithreadlinting — the ability to process multiple filessimultaneously using multiple threads. This feature can significantly reducelint times for large projects. To enableit, run ESLint with the --concurrency flag: npx eslint --concurrency=auto Copy code toclipboard Read everything in the announcement. Features 0bb777a feat: multithreadlinting (#19794)
Google DocsやFigmaのような複数人が同時編集できるアプリケーションを作るためには「ロックフリー」な共同編集の技術が必要です。誰かが文字を入力するたびにサーバーの更新完了を待つわけにはいきませんが、だからといって各自が好き勝手にデータを書き換えてしまうとテキストが混ざったり他のユーザーのアイテムを消してしまったり、さまざまな問題が発生するためです。 この問題を解決するための代表的なアルゴリズムがCRDTで、CRDTをベースに共同編集機能を提供するメジャーなJSライブラリがYjsです。CRDTとYjsについては以前の記事『共同編集を支える技術とライブラリの活用』でも紹介しており、ICSではYjsを利用した開発も行っています。 このYjsの有力なライバルとして、2024年に正式リリースされたのがLoro（ロロ：スペイン語でオウム）です。後発だけに、これまで実装が難しかった便利な機能
GitHubは、自然言語で指示するだけで生成AIによってTypeScriptとReactを用いたフルスタックのアプリケーションが自動的に生成される「GitHub Spark」のパブリックプレビュー開始を発表しました。 Today we’re releasingGitHub 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, 2025GitHub 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, andusage in major companies like Shopify,Airbnb, and Mercedes-Benz, you should giveit a try. Get started now. Oxlint is aRust-poweredlinter forJavaScript andTypeScript is designed to be fast andsimple to adopt. Sinceits first announcement back in
1import { Browserable } from 'browserable-js'; 2 3// Initialize the SDK 4const browserable = new Browserable({ 5apiKey: 'your-api-key' 6}); 7 8//Create and run a task 9async function runTask() { 10 constcreateResult = 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
はじめに 以下の記事で扱っていた、OpenAI の音声合成の新モデル「gpt-4o-mini-tts」に関する記事です。 ●【Node.js】OpenAI のAPI ＋ 新モデル（gpt-4o-mini-tts）で音声合成 - Qiita https://qiita.com/youtoy/items/a35f7907eaa4259e417e 上記の記事では、音声ファイルを出力する形でしたが、今回はストリーミングを試します。また、上記では指定していなかったパラメータも追加してみます。 そして今回の実装も、前回と同じで Node.js でAPI を扱う形にします。音声合成を手軽に試すなら「OpenAI.fm」 前回の記事にも書いたのですが、「gpt-4o-mini-tts」を使った音声合成を手軽に試すなら、以下の「OpenAI.fm」を使うのが良いです。 ●OpenAI.fm https
Devographicsは2024年12月16日（米国時間）、JavaScriptの利用動向を調査した年次調査「State ofJavaScript 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 RealtimeAPI とは アプリケーション方針 リファレンス読解 アプリケーションの実装 まとめ 先に結論OpenAIのRealtimeAPIのリファレンス実装を見ながら、リアルタイム翻訳機能を実装しました。 リファレンスのUtilityを使えば、簡単に実装することができます。 出来たものは下記のようなアプリケーションです。 youtu.beOpenAI RealtimeAPI とは まず
Watch our video announcement. AnnouncingDeno 2 The web is humanity’s largest software platform —building forit 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 singleline of code, developers must deal with tedious configuration and wading through unnecessary boile
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
