🚀 「Solid.js」入門！高速リアクティブUIの新時代が来た⚡ - Qiita
Solid.jsで実現する高速リアクティブUI開発 ⚡️ こんにちは、現役エンジニアの@YushiYamamotoです。 今回は、最新のリアクティブUIライブラリ Solid.js について、初心者にもわかりやすく、かつ専門的な内容を解説します。Solid.jsは、その優れたパフォーマンスとシンプルなAPIで注目されており、多くのプロジェクトで採用されています。本記事では、Solid.jsの基本概念、導入方法、コード例、そして動作の仕組みについて詳しく解説します。 Solid.jsとは？ 🤔 Solid.jsは、Solid公式サイト で紹介されている通り、「コンパイル時にリアクティブ性を確保する」次世代のWeb UIライブラリです。 主な特徴は以下の通りです： Fine-grained reactivity (細粒度リアクティブ性) → Solid.jsは、仮想DOMを使用せず、直接DO
HTML / CSS / JavaScript 制作 Tips 中級編 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? HTML / CSS / JavaScript 制作 Tips 中級編 user: ChatGPT先生、先日はHTML/CSS/JavaScript を用いたWebページ制作の初級編について教えてくださり、ありがとうございました。今日は中級編として、以下の10個の項目について詳しく教えてください。 レスポンシブデザインに対応するにはCSSのメディアクエリを使うとええよ。 モダンJavaScriptでは、アロー関数がよく使われるわ。覚えときなり。 CSSでflexboxやgridを使うと、レイアウト作成が手軽になるの。 画像やフォントはな
HTML / CSS / JavaScript 制作 Tips 上級編 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? HTML / CSS / JavaScript 制作 Tips 上級編 user: ChatGPT先生、先日はHTML/CSS/JavaScript を用いたWebページ制作の初級編・中級編について教えていただき、ありがとうございました。今日は上級編として、次の１０項目について詳しく教えてください。 パフォーマンス最適化のために、クリティカルCSSの使用や画像の遅延読み込みを検討しとき。 JavaScriptを使ってデバッグ作業を効率化する方法を覚えるのがええし。コンソールAPIとかね。 RESTやGraphQLによるAPIの設計と使用
バグバウンティにおけるJavaScriptファイルの監視ツールの事例 - blog of morioka12
1. 始めに こんにちは、morioka12 です。 本稿では、バグバウンティの脆弱性調査で使われている JavaScript ファイルの監視ツールについて少し紹介します。 1. 始めに 免責事項 2. バグバウンティにおける JavaScript ファイルの監視 3. JavaScript ファイルの監視ツール JSWatch DiffScript URL Tracker JSMon jsmon.sh BLACKBIRD 4. その他 Monitoring JS files to know first about new features feat. Testing JavaScript files for bug bounty hunters Blog「バグバウンティ入門(始め方)」 Blog「バグバウンティにおける JavaScript の静的解析と動的解析まとめ」 5. 終わりに
JavaScriptメタプログラミングの極意 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 反射とメタプログラミングとは？ まずは理論から始めましょう。心配しないでください、それほど退屈ではありません。 反射（Reflection）：プログラムが実行時に自分自身の構造を検査できる機能を指します。例えば、オブジェクトのプロパティや型を調べることができます。JavaScript には Reflect オブジェクトがあり、一連の反射メソッドを提供することで、オブジェクトをよりエレガントに操作できます。 メタプログラミング（Metaprogramming）：より高度なテクニックで、コードを操作するコードを書くことを可能にします。つまり
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エフェクトの実装。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptで「HTMLファイルに直接JavaScriptのコードを記述する」の動作を確認してみた。 - Qiita
Reactでハマッた`&&`の罠 ~JSとJSXを正しく理解しよう~ - Qiita
【React・JavaScript】Reactで必須！配列操作を練習する問題集-filter編 #1 - Qiita
🔥2025年版！Python・AWS・初心者・JavaScript・Reactの最新トレンドと学び方🎯 - Qiita
【JavaScript】Reactでも役立つ！mapメソッド練習問題集【基礎～上級】 - Qiita
