はてなブログ内のリンクを新しいタブ（別窓）で開く方法 - maroom
はてなブログはリンクの開き方が選べない はてなブログでリンクを貼ろうとすると、自分でタグに「target="_blank"」を追加しないと全部同一タブ（同窓）で開いちゃうんですね。 新しいタブ（別窓）で開くか同一タブ（同窓）で開くか、設定で選べなくて。 「見てる人に選ばせなさいよ」ってことでしょうし、リンクを新規タブ（別窓）で開くように管理者側が設定してしまうのは賛否両論あるのも知っていますが、個人的にリンクが同一タブ（同窓）で開くのが嫌いなので、当ブログでは 外部リンク→新規タブ（別窓）でリンクを開く ブログ内リンク→同一タブ（同窓）でリンクを開く ように設定していました（タグ手打ちで）。 対処法を発見 しかし記事更新のたび、リンクの1個1個に手打ちしてくのはめっっっちゃめんどいので、ちょっとggって調べてみたところ、はてなブログでも自動で新規タブ（別窓）でリンクを開くように出来る方法を
JavaScriptを事前コンパイルする。不可能と言われた挑戦に挑む開発者。｜直也テック
今回はポッドキャスト「devtools.fm」に出演したOliver Medhurst氏の回をご紹介します。彼はPorffor（ポーファー）というプロジェクトの作者です。Porfforは「JavaScriptをWebAssemblyへと事前にコンパイルする（Ahead of Time Compiler、AOTコンパイラ）」という、多くの人が「不可能だ」と考えてきた仕組みに挑む研究プロジェクトです。 この記事では動画の流れに沿って、Porfforとは何か、なぜ事前コンパイルが難しいとされてきたのか、そしてその技術的な仕組みや将来像までを順を追って整理していきます。 Oliver Medhurst氏とは何者かOliver Medhurst氏冒頭、ホストのAndrew氏とJustin氏は、Porfforという「JavaScriptの事前コンパイラ」の存在に驚いたと語り、まずはOliver氏の経歴
60分で学ぶ最新Webフロントエンド
2026/04/16 に「技育CAMPアカデミア」で話したスライドです。2025 年のはてなインターンの講義資料 (https://speakerdeck.com/hatena/internship-2025-frontend) に手を加えたものになってます。 https://talent.sup…
エラーのスタックトレースをAIにコピペする時代、終わらせたい
エラーが出る。ターミナルからスタックトレースをコピー。Claude に貼り付ける。返ってきた修正を手でコードに反映する。 正直、この作業にもう飽きた。 エラーが出た瞬間に、Claude が勝手にソースを読んで直してくれたらよくないですか？ 作りました。 DevSonar とは ランタイムエラーを自動キャプチャし、Claude Code に渡してコード修正まで行う開発ツールです。 コードの変更は一切なし。 devsonar run -- の後ろにいつものコマンドを書くだけ。エラーが起きた瞬間に Claude がソースコードを読み、原因を分析し、修正コードを生成します。 Node.js / Python / Go / Ruby / Java / Rust に対応しています。 Turborepo で真価を発揮する DevSonar が本当に効くのは、フロントエンドとバックエンドが同居する mon
jQuery 4.0正式版が公開。10年振りのメジャーバージョンアップ。IE10以前がサポート外、XSS防止など
jQuery 4.0正式版が公開。10年振りのメジャーバージョンアップ。IE10以前がサポート外、XSS防止など ちなみに2026年1月は、最初のバージョンのjQueryが2006年1月にはじめて公開されてからちょうど20周年に当たります。 It's here! jQuery 4.0.0 FINAL is released! 3 days after jQuery's 20th birthday. https://t.co/Tw4CdtYRg2 #jquery #happybirthday #jqueryreunion — jquery (@jquery) January 18, 2026 IE 10以前やEdgeレガシー版などがサポート外に jQuery 4.0ではInternete Explorer 10もしくはそれ以前のバージョンのサポートが終了します。Internet Explor
JSONにケツカンマを求めるのは間違っているだろうか - An Epicurean
間違っています。JSONは仕様が簡潔で融通が利かないところがメリットであり、ケツカンマやコメントを許容しないこともそれに一役買っています。ケツカンマやコメントが欲しければYAMLを使いましょう。YAMLはJSONのスーパーセットなので、JSONにケツカンマやコメントをつければYAMLとして読むことは出来ます。 JSONとYAMLにはそれぞれに良さがあり、それぞれの良さを他方に求めると、その価値を毀損します。言ってしまえば、JSONはシンプルでありYAMLはイージーなのです。 参考: Simple Made Easy JSONはシンプル ご存知の通り、JSONはルールや覚えることが少ない反面、表現力に乏しいです。結果として人間にも機械にも比較的優しいシリアライゼーションフォーマットとして優れています。「ひとつのことをうまくやる」です。必ず1行に圧縮できる強みもあり、ログフォーマットとしても使
input[type="file"] 同じファイルを選んでもchangeイベントが発火しない問題をちょっとだけ深掘りするよ🎶 - カミナシ エンジニアブログ
「よし、これで完璧！」と思って実装したファイルアップロード機能。テストで同じファイルを2回選んだら...あれ？2回目は何も起きない。 // さっきまで動いてたはずなのに... <input type="file" onChange={(e) => { console.log('ファイル選択した！', e.target.files[0]); uploadFile(e.target.files[0]); }} /> 「え、なんでonChange動かんの...？」 Chromeのコンソールとにらめっこすること数分。これ、実は私の実装ミスじゃなくて、ブラウザの仕様に起因する面白い問題だったんです。今日は、この挙動を掘り下げて、Web標準とブラウザによる挙動の違いについて話してみたいと思います。 そもそもchangeイベントってさぁ 教科書的な説明を確認してみる MDNのchangeイベントのドキュ
![input[type="file"] 同じファイルを選んでもchangeイベントが発火しない問題をちょっとだけ深掘りするよ🎶 - カミナシ エンジニアブログ](https://cdn-ak-scissors.b.st-hatena.com/image/square/52fca391c648644607dcb0c6dc9553b785e1ad70/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2Fa4c3cafc63f5a2e2ff57fa86a97d43b969b42b92%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fk%252Fkaminashi-developer%252F20251111%252F20251111100718.png)
ブラウザストレージ比較：localStorage、Cookie、IndexedDBの選び方
はじめに：ブラウザストレージの選択に迷っていませんか？ 「ユーザー設定を保存したいけど、localStorageでいいのかな？」 「認証トークンはCookieに入れるべき？それともlocalStorage？」 「大きなデータを保存したいけど、どれが適切？」 ブラウザでデータを保存する方法は複数あり、それぞれに特徴があります。しかし、「結局どれを使えばいいの？」という疑問を持つ方は多いのではないでしょうか。 本記事では、単なる機能比較にとどまらず、実際のユースケース別に最適な選択肢を提示します。初心者の方にも分かりやすいように、セキュリティの概念も含めて丁寧に解説していきます。 ブラウザストレージの全体像 まず、主要な4つのストレージ技術を整理しましょう。 それぞれの技術は異なる目的で設計されています。以下の4つの軸で比較すると、特徴が明確になります。 4つの比較軸で理解する 1. データの
Hono CLI 爆誕
これまでHonoは数々の新しいことを提供してきました。正規表現を活かしたルーター、サーバーサイドの軽量JSX、TypeScriptの型によるRPC、Web Standardを使ったマルチランタイム対応などなど。アイデアと実装力で世界と戦って来たわけです。 本日私達が紹介するのは「Hono CLI」です。 Hono CLIは全く新しいコンセプトのコマンドラインインターフェースです。 create-* ではありません ただの開発用（dev&build&deploy）のコマンドではありません Viteのラッパーではありません 人間とAIのためのCLIです。インストールすると のようにhonoコマンドを使うことができます。5つのサブコマンドがあります。 hono docs hono search hono request hono serve hono optimize では一つ一つを見ていきまし
fetch() では Host ヘッダーを設定できないし話はそこまで単純じゃない - Object.create(null)
JavaScript (TypeScript) のコードから HTTP リクエストを送る手段として, 最近では Web 標準の一つである Fetch Standard で定義された fetch() が使われることが多いですね. await fetch("https://example.com"); リクエストヘッダーには Host を設定できない Fetch Standard では Host をはじめとして Content-Length, Cookie, Origin など, いくつかのリクエストヘッダーを設定 (JavaScript から上書き) することが禁止されています. https://fetch.spec.whatwg.org/#forbidden-request-header いずれのヘッダーも HTTP やセキュリティ上の取り決めに従うために, ページの JavaSript
マウスや指先でもそれっぽくなめらかに手描きできるJavsScriptライブラリ「Lazy Brush」
ペイントソフトでマウスを使って絵を描いたときや、スマートフォン・タブレットに指で文字を書いたとき、直線や曲線がうまく引けずに線がガタガタしたりゆがんだりしがちです。「lazy-brush」はマウスや指による描画をなめらかにするためのJavsScriptライブラリで、その仕組みがGitHubで公開されています。 Lazy Brush - Smooth Canvas Drawing https://lazybrush.dulnan.net/ GitHub - dulnan/lazy-brush: Smooth drawing with mouse, finger or other pointing device https://github.com/dulnan/lazy-brush 以下は、Windowsのペイントソフトを使って文字を書いてみたところ。上はマウスで書いた文字で、マウスを動かす
フロントエンドからファイルをダウンロードさせるやり方について
いまどきのWebアプリにおいては、ファイルのダウンロード機能が必要な場面が多々あります。例えば、バックエンドが生成したCSVデータをファイルとしてダウンロードさせる「CSVダウンロード」機能などです。 今回はAPI[1]から得られたデータをファイルとしてダウンロードさせたい場合のフロントエンドの実装方法について考察します。 要件 今回考える要件は、前述のとおり、APIから得られたデータをファイルとしてダウンロードさせることです。具体的には、以下のような要件を考えます。 APIをGETリクエストで呼び出し、そのレスポンスをそのままファイルとしてダウンロードする フロントエンドでの何らかのアクション（ボタンクリックなど）によってダウンロードがトリガーされる 追加の要件次第でやり方は変わりますが、とりあえず以上の前提で考えます。 ベストな方法 とりあえず、筆者が考える一番ベストな方法を紹介します
N 文字以上なら省略表示 - Object.create(null)
「N 文字以上 / 以内」みたいなことを言われたときに考えること. 「文字」とは? 単に「文字」と言っても, それが指しているものが何かは自明ではない. 符号単位 (code unit) JavaScript の場合, 文字列は UTF-16 としてエンコードされている*1ので, そのエンコードの単位である 16 bit ごとに分割するというのがこの方法. .length で取得できるのはこの符号単位の数で, .slice() に与えるのも符号単位で数えたインデックスとなっている. > "あいうえおABCDE".length 10 > "あいうえおABCDE".slice(0, 5) "あいうえお" ところで Unicode には 16 bit で表せる数以上の「文字」 (U+0000 〜 U+10FFFF) が含まれるので, UTF-16 では 1 つの符号単位で表せない「文字」は 2
Web技術を駆使してユーザーの画面を「録画」する
Coding at the Speed of Thought: The New Era of Symfony Docker
スターの多い順にブコメを並び替える
FANZAの検索結果から熟女を除外するブックマークレット がうまく動いたので、気を良くしてはてなブックマークのコメント欄をスター数順にソートするブックマークレットを作りました。 作った動機は、「注目コメントに入りきれなかったちょっといいコメント」をサクサク探したいから。結果として建設的コメント順位付けモデルを無効化していますが、あのアルゴリズムには特に不満は特にありません。 ブックマークレット javascript: (async () => { const wait = ms => new Promise(resolve => setTimeout(resolve, ms)); document.querySelector('.js-bookmarks-sort-tab[data-sort="recent"]').click(); window.scrollTo(0, document.
トロイの木馬化された「jQuery」がnpmやGitHubで拡散|セキュリティニュースのセキュリティ対策Lab
海外のセキュリティ企業「Phylum」はトロイの木馬化された「jQuery」がnpmやGitHub、jsDelivr のCDNホストで拡散している事を指摘しました。 jQueryを悪用したサプライチェーン攻撃の概要 Phylumは 2024 年 5 月 26 日以来、トロイの木馬化された jQuery のバージョンを悪用する執拗なサプライ チェーン攻撃者を監視しており、最初に npm でこのjQuery を悪用する亜種を発見しました。 そこでは、1 か月にわたって数十のパッケージで侵害されたバージョンが公開されていました。 調査の結果、GitHubや、jsDelivr の CDN ホスト リソースでも、トロイの木馬化された jQuery のインスタンスを発見しました。 なお、今回解説されている内容は正規のjQueryへ、トロイの木馬が紛れ込んでいるのではなく、 悪意のあるユーザーがnpmや
JavaScriptライブラリ「Polyfill.io」にマルウェアが混入され10万以上のサイトに影響
ウェブブラウザのバージョン間の違いを無効化するJavaScriptライブラリ「Polyfill.io」が、2024年2月のプロジェクトオーナー変更後、マルウェアが混入されてサプライチェーン攻撃に利用され、10万以上のサイトに影響が出ています。 Polyfill supply chain attack hits 100K+ sites https://sansec.io/research/polyfill-supply-chain-attack 「Polyfill.io(polyfill.js)」はアンドリュー・ベッツ氏が開発したJavaScriptライブラリです。ウェブブラウザのバージョン間で機能の違いがあると開発時に苦労しますが、Polyfill.ioを利用すれば、新しいバージョンにしかない機能を古いバージョンで利用できるようになるため、バージョンの違いを気にすることなく開発を進めること
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「React」「Next.js」に重大なリモートコード実行の脆弱性、CVSSの基本値は「10.0」【12月8日追記】／脆弱性を悪用した攻撃を試みる通信も存在。一刻も早い対応を
JavaScriptのthisもこれで完璧！呼び出し方で変わる5つのパターン - Qiita
「ESLint」がJSONとMarkdownの文法チェックに対応 ～より汎用的なlinterへと進化／JavaScriptのソースコードを静的解析して文法の誤りを検出
