ReactとHono.jsでAIチャットアプリを作る - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 0. はじめに この記事では、AIチャットアプリを作成していきます！ 最後まで読むと↓のようなアプリを作れるようになります 👏 工夫したポイント ストリーム形式でレスポンスを受け取る ユーザ体験の向上 ✨ 1. 技術スタック 1.1. Hono.js バックエンド（API）を作成します。 最近耳にする機会が増えたのでこれを機に触ってみたかったので採用しました。 ※フロント側で直接OpenAI APIを呼べばいいので、正直このチャットアプリにAPIは不要ですがHono.js使いたかったんです・・ ChatGPT曰く、以下のような特徴があ
ESLintがセグフォする件を調査していたら、Node.jsにコントリビュートしていた話 - CARTA TECH BLOG
はじめに こんにちは、サポーターズでエンジニアをしている@y_chu5です。 本記事では、当初ESLintのバグと思われていた問題が、実はNode.jsのバグであることが判明し、その修正に至るまでの過程をご紹介します。この体験を通じて得られた知見は、小中規模なプロジェクトのデバッグ手法として参考になるかもしれません。 まず、この問題の発見と初期調査において、VOICEVOXコミュニティのコミュニティサーバーの方々の多大なる貢献があったことを深く感謝申し上げます。彼ら彼女らの綿密な調査と報告がなければ、今回の問題解決には至らなかったと考えています。 問題との出会い 私の所属している VOICEVOX（テキスト読み上げ・歌声合成ソフトウェア）のコミュニティである 「VOICEVOX Communty by Discord」の開発雑談チャンネルで、とても気になるIssueについての話題が挙がって
JavaScriptの日付と時刻の管理を大きく簡素化する「Temporal」の実装作業が進行中
JavaScriptには「Date」という時刻を表すためのオブジェクトがありますが、タイムゾーンの扱いが難しかったり、APIが直感的ではなかったりするなどの問題がありました。こうした問題を解決した新たな時刻表示用オブジェクト「Temporal」が登場し、ブラウザへの実装作業が進められています。 JavaScript Temporal is coming | MDN Blog https://developer.mozilla.org/en-US/blog/javascript-temporal-is-coming/ JavaScriptのDateオブジェクトは、JavaScriptが1995年に作成された際にJavaの「java.util.Date」の実装をコピーして作成され、30年間同じAPIが使われ続けてきました。Dateはユーザーのローカル時刻とUTC(世界協定時)をサポートするもの
eslint-plugin-no-barrel-filesを導入してBarrel filesをやめた話 | PR TIMES 開発者ブログ
こんにちは、フロントエンドエンジニアのやなぎ（@apple_yagi）です。 PR TIMESではフロントエンドのReactリプレイス当初より Barrel file を作成するルールがありました。しかし、先日そのルールを廃止することに決めたため、その経緯についてご紹介します。 Barrel filesとは Barrel filesとは複数のモジュールを1つのファイル（Barrel file）にまとめてexportすることを指します。以下の例ではutils/test.ts 、utils/fuga.ts 、utils/hoge.ts で export されている定数を utils/index.ts で再exportしています。 // utils/test.ts export const test = 1; // utils/fuga.ts export const fuga = 2; //
CSSのattr()関数がパワーアップ！ また一つJavaScriptでしかできなかったことがCSSだけでできるになります
CSSのattr()関数は、HTMLの属性に記述した値をCSSで使用できる便利な機能です。たとえば、hrefに記述した値をリンクとして表示したり、titleに記述した値を画像のキャプションとして表示したり、data-でさまざまな値を表示することができます。 このattr()関数がよりパワーアップします。 これまではcontentプロパティだけでしたが、任意のプロパティで使用できるようになり、<string>以外のデータ型も使用できるようになります。 HTMLに記述したカラー値やidの値をCSSで使用することもできます。これでまた一つ、JavaScriptでしかできなかったことができるようになります。 CSS attr() gets an upgrade by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめ
【海外記事紹介】JavaScriptのDateは時代遅れになる — 新たな標準API、Temporalの紹介
1月25日、Mozillaが「JavaScript Temporal is coming」と題した記事を公開した。この記事では、JavaScriptの新たな日時処理APIであるTemporalについて詳しく紹介されている。 1月25日、Mozillaが「JavaScript Temporal is coming」と題した記事を公開した。この記事では、JavaScriptの新たな日時処理APIであるTemporalについて詳しく紹介されている。 以下に、その内容を紹介する。 Temporalとは何か？ 従来のJavaScriptにおいては、日時を扱うための標準手段としてDateオブジェクトが用意されてきた。しかし、Dateは以下のような問題点を抱えていたため、柔軟かつ正確な日時操作を実現することが難しかった。 コンストラクタの引数や各種メソッドでタイムゾーンが混在しやすく、扱いが直感的でない
Bun 1.2リリース！新機能をまとめてチェックしよう — 凄まじい進化速度に圧倒される
1月22日、Node.js互換の高速JavaScriptランタイムBun、新バージョンである1.2をリリースした。（公式のリリースノート） 監修者からのコメント: 本記事は、以下のエキスパートに監修していただきました: yosuke_furukawa: Bunはリリースが早く、しかも膨大な数の機能を毎回リリースしています。 Bun 1.1は Bun 1.1.45 までバージョンも出てますが、セマンティックバージョニングではなく、全てパッチバージョンで機能を追加しています。ある程度機能がまとまったらマイナーバージョンを上げていく方針なんじゃないかと感じています。 昨今 Deno も 2024年における進化を記述しています。 Deno in 2024 , Techfeed 紹介 どちらも Node の互換性を上げるという方針で、まずはNode.jsのユーザベースを引っ張っていき、自分たちの体験
JavaScript イベントの実行順序を早める方法 - Qiita
<form onclick="alert('form')"> <div onclick="alert('div')"> <p onclick="alert('p')"></p> </div> </form> バブリングフェーズとは、例えば、上記のようにform > div > p の順番で要素が入れ子になっていた場合、p要素を押下すると、アラートは p div form の順番で実行されます。 泡のようにイベントが内部の要素から親に向かって実行されていくので、バブリングフェーズと呼ばれています。 何もしないとイベントは基本的にバブリングフェーズに登録されます。 キャプチャリングフェーズはその逆で、親要素から内部に向かって実行されるフェーズのことを言います。 バブリングフェーズに登録されたイベントより、キャプチャリングフェーズに登録されたイベントの方が早く実行される 上記の特性を利用して、イ
RustベースのJavaScriptバンドラー「Rolldown」のβ版が公開、Rollup互換で10〜30倍の速度向上を達成
RolldownはViteを手掛けるvoid(0)社が開発したもので、Rollup互換のAPIとプラグインインターフェースを提供しながら、機能範囲としてはesbuildに近いとされている。 Viteは、Vue.jsの開発者Evan You氏を中心に開発されたフロントエンド向けビルドツールで、ESモジュールを活用した高速な開発サーバーとして知られている。内部実装にはRollupなどを活用しており、開発時にホットリロードや依存関係の一括管理を高速に行える点が特徴だ。さらに、ビルドフェーズではesbuildなどを活用してトランスパイルやバンドリングを行ってきたが、今回のRolldownにより、それらを統合したより高速なビルドパイプラインの構築が期待されている。 Rollupはプラグインによる拡張性に優れたJavaScriptバンドラーとして広く使われており、ツリーシェイキングなどを通じて効率的な
🚀 アニメーションとビジュアル化に特化したJavaScriptライブラリ完全ガイド 🎨 - Qiita
Web開発において、アニメーションやビジュアル化はユーザー体験を向上させる重要な要素です。この記事では、インタラクティブで魅力的なWeb体験を実現するためのJavaScriptライブラリを紹介します。各ライブラリの特徴や用途を解説し、プロジェクトに最適な選択肢を見つける手助けをします！ 🎬 アニメーションライブラリ 1. GSAP (GreenSock Animation Platform) 🌟 特徴: 高速でスムーズなアニメーションを実現。 CSS、SVG、Canvas、React、Vue、Three.jsなど幅広い環境に対応。 モジュール式で拡張性が高く、複雑なアニメーションシーケンスも簡単に作成可能。 プラグイン（ScrollTrigger、MorphSVGなど）を使用して高度なエフェクトも実現可能。 用途: ページスクロールアニメーションや複雑なUIエフェクトの実装。
「State of JavaScript 2024」公開 最も勢いのあるフレームワークやツールは？
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エコシステムの全体像をさまざまな角度から示している。調査結果は、回答者の属性、言語機能、ライブラリ、他のツール、使用用途、リソースといったカテゴリー別に報告されている。 調査結果のハイライトは
jsの単項演算子（Unary Operators）とは？ - Qiita
let arr = [1, 2, 3]; for (let i = 0; i < arr.length; i++) { arr[i] = arr[i++]; // ESLint : Disallow the unary operators ++ and -- } そうすると、ESLintから使うなと警告される。 えーダメなのかと思ってi += 1に直す作業をするだけでなんで使っちゃダメなのかについて深く考えたことがなかった。 ESLintの警告について読んでいたらUnary Operators(単項演算子)が原因だったので調べてみた。 単項演算子とは？ 単項演算子は一つの値に対して操作を行う演算子で、二項演算子（例：a + b）と異なり、一つの値に対してのみ作用する。 使い方 インクリメント/デクリメント演算子 ++と--は一般的な使い方のように+1や-1の動きをする。 また、前におくか、
JavaScript の Template Literal を活用してコードを劇的に改善する方法 | iret.media
はじめに JavaScript 大好きな私が、JavaScript の文字列について熱く語るブログです。 正月休み中に執筆したので、趣味全開のブログをお届けします。 JavaScript の文字列というと、"String" や 'String' は広く知られています。 しかし、`String` と表記する Template Literal (テンプレート文字列) はその真価が伝わりきっていないかなと考えます。 Template Literal を使うことで、コードの可読性だけでなく保守性も向上します。 また、Template Literal は、SQL インジェクションなどのセキュリティリスクを軽減するのにも役立ちます。 このブログでは、Template Literal について熱く語りたいと思います。 (メインで使う言語が TypeScript のため、例には一部 TypeScript
position: stickyで貼り付いたときだけ境界線を出す(JavaScriptを使わない) - hogashi.*
貼り付く見出し 貼り付く見出し スクロールしてこの見出しが画面上部に貼り付いたときだけ、見出しの下に境界線を出したい。 技として、境界線用の要素をいっこ用意して、それを見出しの裏に忍ばせておく方法がある。見出しが画面上部に貼り付いたときに、下に境界線が出てくる。 画面上部に貼り付いたときに境界線が下に出る 貼り付く見出し 貼り付く見出し どうなってるかというと、背景色を透明にするとこう。 見出しの要素に margin-top: -1px; をつけることで、境界線の要素を覆い隠して見えなくしておく sticky の top の値を、見出しの縦幅 + 1px 分にして、 1px 下に貼り付くようにする 境界線が躍り出る空間を得るために、外側の包む要素の縦幅は、見出しの縦幅 + 1px 分にしておく むずいけど、これで、見出しが貼り付いたときに、境界線がちょうど背景色のすぐ下に躍り出る。 こうい
コピペするだけで使用できる！ ページ上のアクティブなアニメーションを取得するシンプルなJavaScript
ページ上で動作するアクティブなビュー遷移にリンクされたすべてのアニメーションを取得するJavaScriptのコードを紹介します。 数行のコードをコピペするだけで使用でき、アニメーションを反転させたり、継続時間を変更したり、キーフレームを変更したりなど、さまざまな操作を実行できます。 ビュー遷移（View Transitions）はSafariでもサポートされ、今年は使用する機会が増えそうですね。 お弁当箱みたいなUI、View Transitions APIでCSSアニメーションが進化する まずは、デモをご覧ください。 ブルーのボックスの疑似要素（::view-transition-group(box)）のアニメーションのキーフレームを数行のコードで取得します。 See the Pen Debugging View Transitions: Getting the group’s anim
WebサイトがハングしたユーザのJavaScriptコールスタックを取得する - ASnoKaze blog
Webサイトが応答しなくなった場合、ブラウザ側が強制的に停止したり、タブがクラッシュしたりします。 その際の、JavaScriptコールスタックを取得する仕組みとして『Crash Reporting』という仕組みがあります。この仕組みを使うことで、Webサイトを閲覧しているユーザが実際にどこでハングしているのか、コールスタックを調査できるようになります。 具体例 下記のように閲覧したユーザの ハングしたURLが、JavaScriptコールスタック付きのレポートとして取得する事ができます。 (json内改行は見やすくするために修正) Crash Reporting Reporting APIという仕組みがあり、自身のサイトで起こったCSP違反やネットワークエラー(DNSエラー・TLSハンドシェイクエラーなど)を、任意のエンドポイントにレポートさせる仕組みが標準化されています。 NEL(net
【海外記事紹介】Rustで書かれ、WebAssemblyで動作するフロントエンドフレームワーク「Leptos」が注目を集める — Reactライクな書き心地と圧倒的なパフォーマンスを実現
1月14日、The New Stackが「Want a Web Framework for Rust, Not JavaScript? Try Leptos」と題した記事を公開した。この記事では、Rustフレームワーク「Leptos」やWebAssembly（Wasm）を活用したWeb開発の最新動向について詳しく紹介されている。 以下に、その内容を紹介する。 Leptosとは Leptosは、Rustで書かれたフレームワークをWeb Assembly経由でWebアプリとして高速かつインタラクティブに動作させる仕組みを提供するものである。公式サイトによれば、主要なフロントエンドフレームワーク（Vue、Svelte、Reactなど）と比較して優れたパフォーマンスを持ち、バニラJavaScriptに迫るとされている。以下はLeptos公式サイトで公開されているベンチマークの一例である。 Lept
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【React・JavaScript】Reactで必須！配列操作を練習する問題集-filter編 #1 - Qiita
🔥2025年版！Python・AWS・初心者・JavaScript・Reactの最新トレンドと学び方🎯 - Qiita
【JavaScript】Reactでも役立つ！mapメソッド練習問題集【基礎～上級】 - Qiita
