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
サーバサイドJavaScriptの標準策定を目指す「WinterTC」がECMA International傘下で始動、W3CのWinterCGから移行
サーバサイドJavaScriptの標準策定を目指す「WinterTC」がECMA International傘下で始動、W3CのWinterCGから移行 W3CでサーバサイドJavaScriptを中心とした非Webブラウザ環境におけるJavaScriptの互換性について議論してきた「Web Interoperable Runtimes Community Group 」（WinterCG） とECMA Internationalは、サーバサイドJavaScriptランタイムにおけるAPIの互換性を実現するための新グループをECMA International傘下の「TC55 – Web-interoperable server runtimes」（WinterTC）として設立すると発表しました。 WinterTCには、Node.js、Deno、Verel、Fastly、Netlify、Sh
ReactでJavaScriptを使ってWordをHTMLに変換 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Word文書をHTML形式に変換することで、コンテンツクリエイターは、ウェブ展示に適したコンテンツを作成するために、親しみやすいWord文書編集環境を活用できます。また、Word文書の内容をウェブページに埋め込むことで、コンテンツのメンテナンス性と更新効率を向上させることができます。JavaScriptとReactを使用することで、開発者はクライアントブラウザ内で直接Word文書をHTMLに変換する機能を実現でき、開発ワークフローが簡素化され、ロード時間やサーバーコストが削減されます。この記事では、ReactアプリケーションでJavaS
Sharp.js: 最強のNode.js画像処理フレームワーク - Qiita
Node.js環境におけるSharpモジュールを用いた画像の効率的な処理方法 この記事では、Node.js環境においてSharpモジュールを用いて画像を効率的に処理する方法を紹介します。実際のコード例を通じて、大きな画像ファイルをネットワーク送信に適したJPEG、PNG、WebP、AVIF形式に変換する方法を示します。同時に、libvipsライブラリの強力な機能を利用して、画像処理の効率を高める方法も紹介します。 1. Sharpモジュールのはじめに 1.1 Sharpモジュールの紹介 視覚情報爆発の今日の時代において、画像処理技術は極めて重要になっています。Node.js環境に基づく高性能画像処理モジュールとして、Sharpはその優れた性能と使いやすさから、開発者コミュニティで広く評判を得ています。それは一般的なJPEGやPNG形式の画像の処理をサポートするだけでなく、技術のトレンドにも
JavaScript/TypeScript Tech Feed (2025/1/3号) - Qiita
TL;DR honojs/hono Release v4.6.15 web-infra-dev/rspack Release v1.2.0-alpha.0 vitejs/vite v6.0.7 withastro/astro Release astro@5.1.2 Node.js 23 からデフォルトでTypeScriptをサポートするようになるかも？ Ghostty のリリース AI エージェントがウェブブラウザを操作できるようにするためのライブラリ、browser-useが注目されています リリース情報 honojs/hono Release v4.6.15 c.json()、c.text()、またはc.html()がコンテンツを返すときに、204のような無内容なステータスコードを指定すると、typecheckでエラーになるようになりました。 実際にソースを見てみると、 export
【JavaScript】ES2025の新機能全部解説する - Qiita
ES2025 / ES2024 / ES2023 / ES2022 JavaScriptの仕様は、TC39というところで決められています。 ブラウザベンダや関係者が定期的に会合を行い、様々な新機能について話し合って今後のJavaScriptの方向性を決めていきます。 ここでは2024年にFinishedになった、すなわち仕様が確定して複数のブラウザで実装がなされたproposalについて紹介してみます。 主要ブラウザでは既にほとんどの機能を使用可能です。 ちなみに、2024年2月から2025年1月までにStage4になったproposalがES2025と呼ばれます。 ややこしいですね。 Finished Proposals Promise.try 同期かもしれないし非同期かもしれない、Promiseを返すかもしれないしそうでないかもしれない、そんな関数があります。 その関数を使う際に、いち
「State of JavaScript 2024」公開。フロントエンドライブラリ利用率1位はReact、メタフレームワークはNext.jsなど、1万4000人のエンジニアが回答
「State of JavaScript 2024」公開。フロントエンドライブラリ利用率1位はReact、メタフレームワークはNext.jsなど、1万4000人のエンジニアが回答 JavaScriptに興味を持つ世界中のIT技術者1万4015人が回答したアンケートの結果をまとめた「State of JavaScript 2024」が公開されました。 State of JavaScript 2023の発表が昨年（2024年）6月でしたので、前回から約半年での公開となります。 回答者の国別分布を見ると米国が15％、ドイツが8％、フランスが7％、スペインが4％、イギリス（UK）も4％、ポーランドが3％、カナダが3％などで、日本は1％（回答者150人）でした。 発表された内容から、多くの読者が興味を持つであろう、JavaScriptライブラリの人気など、結果の一部を紹介してみます。 フロントエンド
2024-12-28のJS: pnpm 10.0 RC.1、State of JavaScript 2024、Design Token-Based UI Architecture
JSer.info #720 - pnpm 10.0 RC 1がリリースされました。 Release pnpm 10.0 RC 1 · pnpm/pnpm インストールするパッケージのlifecycle scriptをデフォルトで実行しないように変更が含まれています。 パッケージのpostinstallなどのlifecycle scriptの実行を許可するにはpnpm.onlyBuiltDependenciesの設定にパッケージ名を追加する必要があります。 feat!: use an allow list of built dependencies by default by zkochan · Pull Request #8897 · pnpm/pnpm これは、rspack v1.1.7でパッケージがハイジャックされマルウェアを実行するlifecycle scriptが含まれていた問題
TypeScript/JavaScript Array完全攻略2024 | フューチャー技術ブログ
TypeScriptアドベントカレンダーの12/5のエントリーです。昨日は@nanasi-1さんの【TypeScript】ジェネレーターによる遅延評価でフィボナッチ数列を生成するでした。 イマドキのJavaScriptの書き方2018というのを以前書いたのだけど、配列周りはかなり変わっているな、というのを思ったので、そこの部分だけアップデートするつもりで書いてみました。 実環境で使えるECMAScriptバージョン今時のブラウザは常に最新に更新されるはずなのでECMAScript 2024の機能もフルに使えるはずですが、おそらくNode.jsのLTSが一番古いJavaScriptエンジンということになるのかな、と思います。本記事執筆時点でサポート中のバージョンは以下の4つです。軽くメソッドを調べたりした感じ、こんな感じかと。202x年の11月ぐらいになると、ES202xがLTSバージョンで
進化した正規表現：JavaScriptの正規表現の歴史と未来 | POSTD
クイックサマリー：以前は、JavaScriptの正規表現は他の言語の正規表現に比べてパフォーマンスが劣っていたものの、近年改良が重ねられ、他の言語に見劣りしなくなっています。この記事では、Steven Levithan氏がJavaScriptの正規表現の歴史と現状を評価し、より読みやすく、保守性とレジリエンスに優れた正規表現の書き方をアドバイスします。 モダンJavaScriptの正規表現は、皆さんがよく知っている従来の正規表現と比べると随分進化しました。正規表現はテキストを検索して置き換えるツールとして非常に優れている一方で、書くのも理解するのも難しいという根強い評判があります（しかし今から説明するように、この認識は時代遅れかもしれません）。 正規表現に関するこの認識は、JavaScriptに特に当てはまります。PCREやPerl、.NET、Java、Ruby、C++、Pythonといっ
JavaScript で GraphQL サーバーの技術選定をする際の登場人物 - mizdra's blog
これは はてなエンジニア - Qiita Advent Calendar 2024 - Qiita 15日目の記事です。昨日は id:utgwkk さんの「ISUCONの感想戦を支えるEC2の自動開始・停止、そしてAWS Step Functions」でした。 はてなでフロントエンドエキスパートをしている id:mizdra です。この記事では、JavaScript で GraphQL サーバーの技術選定をする際に、どのようなツールやライブラリがあるのかを紹介します。 というのも、JavaScript で GraphQL サーバーを作ろうと思って検索してみると、「Next.js + Apollo Server + graphql-codegen で GraphQL サーバーを作ろう！」だとか、そういう記事が多数出てきます。ただ、複数のライブラリやツールを組み合わせると作れることは分かるので
2024-12-11のJS: React v19、Astro v5、The 2024 Web Almanac
JSer.info #718 - React v19がリリースされました。 React v19 – React Release 19.0.0 (December 5, 2024) · facebook/react 2年半ぶりのメジャーリリースとなります。 非同期遷移を扱うアクションの概念の追加とuseActionState/useFormStatus/useOptimistic/use APIの追加が行わなわれています。 また、react-domにprerender APIの追加、Server ComponentとServer Actionの追加が行われています。 そのほかの改善として、refをpropsとして渡す際にforwardRefは不要に、Hydration Errorの改善、ref callbackがcleanup関数を返せるようになりました。 <title>/<meta>/<l
【海外記事紹介】2025年に別れを告げるべき5つのJavaScriptライブラリ
12月8日、The New Stackが「2025年に別れを告げるべき5つのJavaScriptライブラリ」と題した記事を公開した。この記事では、2025年に不要となる可能性が高い5つのJavaScriptライブラリと、その理由について詳しく紹介されている。 なぜJavaScriptライブラリを置き換える必要があるのか？ JavaScriptの進化は目覚ましく、新機能の追加やパフォーマンスの改善が続いている。その中で、一部のライブラリは、最新の機能や開発パラダイム、開発者コミュニティの期待に応えられなくなっている。結果として、これらのライブラリは古くなり、より効率的な代替手段が生まれている。 2025年に別れを告げるべき5つのJavaScriptライブラリ 1. jQuery なぜ不要になるのか？ ネイティブAPIの進化：querySelector、addEventListener、fet
オラクルが所有する「JavaScript」商標登録の取り消し、Denoが米国特許商標庁に申請したと発表
JavaScriptランタイム「Deno」の開発元であるDeno Landは、米国特許商標庁にオラクルが所有する「JavaScript」の商標登録の取り消しを申請したことを明らかにしました。 JavaScriptはNetscapeがWebブラウザ用に開発したプログラミング言語であることはよく知られていますが、その名称はサン・マイクロシステムズが登録商標として所有し、同社がオラクルに買収されたことで現在はオラクルが所有しています。 Node.jsの作者であり、現在はDenoの作者であるライアン・ダール氏は、これまでに2回、2022年9月と2024年9月にオラクルに対してJavaScriptの商標を手放してほしいと公開書簡で呼びかけていました。 2回目の呼びかけの時には、次のアクションとして米国特許商標庁に取消を申請することを表明しており、今回それが実行されたことになります。 今回Denoが申
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptのreplaceに気をつけろ！ - Qiita
［作って学ぶ］ブラウザのしくみ──HTTP、HTML、CSS、JavaScriptの裏側 - yamaScrapbox