HTMLを拡張し、JSなしで動的UIを作る「htmx」 | gihyo.jp
htmxは、HTMLの属性を追加するだけで、インクリメンタル検索やインライン編集をはじめとするさまざまな動的なUI（User Interface）を実現できるJavaScriptライブラリです。SPA（Single Page Application）フレームワークのような大がかりなビルド環境を用意することなく、すでにあるサーバーサイドアプリケーションに段階的に導入できる点も大きな魅力です。 本記事では、htmxの基本的なしくみや使用方法を紹介したのち、架空のタスク管理アプリケーションを題材に、htmxで実現できるさまざまなインタラクションを紹介します。 htmxの概要 HTMLを拡張するアプローチ htmxの基本的なアイデアは、HTMLの属性を使ってサーバーとの通信およびDOM更新を宣言的に記述するというものです。 たとえば、ボタンがクリックされたらサーバーからデータを取得し、画面の一部を
次世代JS標準時刻API Temporal を3年先行利用して得た知見を共有します！ - Mirrativ Tech Blog
ミラティブでソフトウェアエンジニアをしている @8beeeaaat です。 去る2025/9/6に札幌で開催されたフロントエンドカンファレンス北海道2025 にて発表した内容を再構成して公開します！ Dateに代わる新たな日時表現・操作APIとしてECMAScript標準化を目指し、2017年にプロポーザルが投稿された Temporal。ついに仕様策定も大詰めとなり、Firefox 139での正式実装リリースを始め、各ブラウザ・JSエンジンへの実装も進められています。 ミラティブでは2022年よりPolyfillを導入して社内業務管理機能を中心に導入を進めてきました。本記事では3年間の業務利用の中で培った業務で利用できるノウハウを共有します！ 採用決定の現場 Date型の課題 次世代時刻標準 Temporal 主な特徴 Polyfillによる利用 今日から始めるTemporal移行 Dat
[69-3] Canvasに曲線を描こう（線のスタイルも）
[69-3] Canvasに曲線を描こう（線のスタイルも） 最終更新日：2019年02月06日 （初回投稿日：2014年04月15日） 前回は、<canvas>に四角形、多角形、円弧を描いてみました。 → [69-2] Canvasに基本的な図形を描こう 多角形は直線で描きましたね。 今回はいろいろな曲線を描いてみます。 Illustrator などで描く「コントロールポイント」がある曲線です。 その応用で、直線と組み合わせて「角丸四角形」も作ってみました。 Canvas でも Illustrator と同じように「線の太さ」や「先端の形状」なども指定できます。 今回のサンプルはこちら。 クリックで別ウィンドウで開きます。 本日のINDEX 二次ベジェ曲線の基本 二次ベジェ曲線は quadraticCurveTo(cpx, cpy, x, y); 角丸四角形を作ろう（二次ベジェ曲線の応用）
![[69-3] Canvasに曲線を描こう（線のスタイルも）](https://cdn-ak-scissors.b.st-hatena.com/image/square/6c9db2738220119fb7db5e64c5a056ca080d12c6/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fblog-imgs-62.fc2.com%2Fh%2Fo%2Fn%2Fhonttoni%2F131121-4.jpg)
Vue, Nuxt, React, Next.js の特徴・役割・使いどころを整理する - Qiita
2025年7月時点の npm trends は以下の通りです。 Vue ― 小さく始めて大きく育てられる「プログレッシブフレームワーク」 Vue は 「プログレッシブフレームワーク」 として紹介されています。 「プログレッシブ」とは、小さな機能から段階的に導入でき、必要に応じてフル機能のフレームワークへと拡張できる柔軟性を指します。 例えば、既存のWebサイトにあるお問い合わせフォームや商品の絞り込み検索ウィジェットなど、特定の「動く部分」だけをVueで開発し、既存のHTMLに <script> タグを数行追加するだけで組み込めます。 <body> <h1>私の素敵なWebサイト</h1> <div id="app"> <button @click="count++">カウント: {{ count }}</button> </div> <script src="https://unpkg.
WebAssemblyはJVMやeBPFのリバイバルではない WasmがWeb以外でもアツい理由 | ログミーBusiness
Kernel/VM探検隊はカーネルや仮想マシンなどを代表とした、低レイヤーな話題でワイワイ盛り上がるマニアックな勉強会です。佐伯氏は、WebAssemblyのWebの外の応用について発表しました。全2回。前半は、Wasmがアツい理由とデザインゴールについて。 今回のテーマは「Kernel/VM的WebAssembly入門」佐伯学哉氏（以下、佐伯）：佐伯が『WebAssemblyのWeb以外のこと全部話す』というタイトルで発表します。 まず、WebAssemblyとは何ぞや？ という一般的な話なのですが、「Wikipedia」からの引用によれば、「Webブラウザーのクライアントサイドスクリプトとして動作する低水準言語である。ブラウザー上でバイナリフォーマットのかたちで実行可能であることを特徴とする」とあります。 実際の応用例としては、WebでGoogle Meetの背景ぼかしに使われていたり
BunはNodeより速いのか？ Misskeyで検証 | gihyo.jp
本連載では分散型マイクロブログ用ソフトウェアMisskeyの開発に関する紹介と、関連するWeb技術について解説を行っています。 今回はNode.js互換のJavaScriptランタイム、Bunのパフォーマンスについて、Misskeyのコードベースを用いて検証を行います。 Bunとは Bunは、Node.js（以下Node）互換である後発のJavaScriptランタイムです。 JavaScriptエンジンにNodeで採用されているV8ではなくJavaScriptCoreを採用しているほか、TypeScriptを事前コンパイルなしに実行することもできます。 肉まんのようなマスコットキャラクターが特徴です。 モチベーション そんなBunの公式サイトではNodeよりも大幅に性能上のアドバンテージがあるように紹介されていますが、こうした競合ソフトウェアとの一方的な比較は得てして限られた条件での有利な
超簡単にChromeの拡張機能を作ってみる【誰でもできるよ】 - Qiita
{ "manifest_version": 3, "name": "Create markdown link", "version": "1.0.0", "icons": { "16": "logo/16.png", "48": "logo/48.png", "128": "logo/128.png" }, "description": "Create markdown link from selected text", "content_scripts": [{ "matches": ["<all_urls>"], "js": [ "content.js" ] }] } manifest_version 拡張機能が使用するマニフェストファイル形式のバージョンを指定します。現在のバージョンは3です。 早ければバージョン2は2024年6月以降に廃止され、無効になりインストール/使用できなくな
Reactは悪い意味でも現在のjQueryだし、それを受け止めないと前に進めないということ
HTMXのCEOに就任したので[1]、記念に記事を書きたいと思います。 HTMXサイトのエッセイ[2]はどれも珠玉の出来で評判ですが、それらを読んでもわかるとおり、HTMXは「Webはこうあるべき」という主義主張のあるライブラリです。その主義主張のかなり初歩的な前提を書きたいと思います。 Reactはなぜだめか、という話です。 21日追記 ちょっと誤解が生じているために書き足しますが、Reactのパフォーマンス(及びそれ以外のこと)への批判というのはHTMX固有のものではありません。SvelteやSolidJSといった新興JSフレームワークやRails等の非JS WEBフレームワーク、SSG開発者たち、それからReact開発者たち自身といった多様なWEB開発者たちに共有されている見方です。この記事の最後の方でReact批判記事のリンク集を引用していますが、そういった多様なバックボーンの人た
AWS、高速起動にこだわった軽量なJavaScriptランタイム「LLRT」（Low Latency Runtime）をオープンソースで公開。AWS Lambdaでの利用にフォーカス
AWS、高速起動にこだわった軽量なJavaScriptランタイム「LLRT」（Low Latency Runtime）をオープンソースで公開。AWS Lambdaでの利用にフォーカス Amazon Web Services（AWS）は、実験的な実装としてサーバレス環境のAWS Lambdaで使うことにフォーカスした軽量なJavaScriptランタイム「LLRT」（Low Latency Runtime）をオープンソースで公開しました。 LLRTはRustで開発され、JavaScriptエンジンにはQuickJSを採用しています。 LLRTの最大の特徴は、現在のJavaScriptランタイムにおいて性能向上のために搭載されているJITコンパイラをあえて搭載せず、よりシンプルで軽量なランタイムとして実装することで高速に起動することにこだわっている点です。 これにより（Node.jsやDenoや
【永久保存版】0からReactを勉強するならこのロードマップに従え！ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 最新版を更新しました はじめに こんにちは！！@Sicut_studyです！ 最近フロントエンドを学ぶ機会が多く、色々試してみて今後 React が選ばれる場面が増えるのかなと思いました。 そこで初学者の方がJavaScriptの次に学ぶ言語の選択肢になりやすいのではないかと考え今回の記事を作成しました。 私自身、2022年9月に独学で React を学び始めました。 最初JavaScriptもままならない状態から始めたのですが、Reactを学ぶことでピースがうまくはまってJavaScriptをより理解できましたし、Reactができるよ
ブラウザの <canvas> 要素にクリップボードの画像データをペーストする : まだプログラマーですが何か？
タイトルそのままです。なんらかの画像をコピーしてクリップボードに格納された状態から、ブラウザ画面内の <canvas> 要素内に画像データをペーストして表示する、という処理が実現できないか試してみました。 結論としてはなんとなく実現できていると思います。サンプルを公開しているのでまずは挙動を試してみてください。 PC でもスマホでも、まず対象の画像をコピーします。今回は「いらすとや」さまのこの画像を使って試してみることにします： https://www.irasutoya.com/2021/04/blog-post_12.html まずは画像をコピーします。PC の場合は右クリックから「コピー」、スマホの場合は対象画像を長押しするとコピーできると思います： その後、こちらのページを開きます： https://dotnsf.github.io/web_image_paste/ 表示された画面
私がthrowを使わない理由
この記事について JavaScriptではthrow文という文を使うことで例外を投げることができます。 このthrow文ですが、私はレビューなどで例外を投げないでくださいというコメントをするのですがその理由とどのようにコードを変更すればよいのか、ということを書いておこうと思いました。 前提条件 この記事の内容は下記の条件を前提として書き進めていきます。 TypeScriptを採用していること フロントエンド開発の場合 Node.jsを利用したサーバーサイドのコードやCLIツールの開発、各種ライブラリの開発については本記事の対象に含まれないことをご了承下さい。 結論 先に結論から書いておくとTypeScriptを利用している場合例外はカスタムエラーを返却するか、Result型を利用するのがよいと思っています。 次の章からサンプルコードを用いながらthrow文を使った実例と、代替え案について記
小さなゲームを作るとして、ターゲットデバイスと開発環境、何向けに何で作るのがいいんだろう - ABAの日誌
じゃあ小さなゲームを作ってみようか、と思ったときに、まず考えないといけないことの一つに、PC、スマホ、ゲーム機などなど、どのデバイスで動くゲームを作るかということがある。 特にこだわりがないのであれば、PCのWebブラウザ向けのゲームを作るのがおススメだ。今のブラウザは様々な開発環境で開発されたゲームを動作させるためのプラットフォームとして成熟しているし、他の人にプレイしてもらうにも、ネット上のURL告知からシームレスに遊んでもらえてお手軽だ。 ゲーム作りを楽しむ、という面では、どの開発環境・プログラミング言語・ゲームエンジンでゲームを作りたいか、から考える手もある。これについては小さなゲームだからどうこう、ということは特になくて、自分の好みで決めて良いと思う。ただ、重厚な3Dゲームを主なターゲットとしているUnreal Engineなどは小さなゲームを作るにはリッチすぎる、などは考慮して
Ajaxから始まった一つの時代の終わり
最近の流れを見ていての感想文なので、ideaとして投稿します。筆者のバックグラウンドとしては、Remixの商業記事を書いたり、App Routerの商業記事を書いたりしている人です。 さて、筆者は2022年の秋から、社内システムではありますがRemixをプロダクション運用しています。また、Next.jsのApp Routerについても、パラダイムとしてはRemixにインスパイアされた部分が多い[1]おかげで、順調にキャッチアップできています。 RemixとApp Routerは、ルーティングとデータフェッチを高度に統合しており、Progressively Enhanced SPA（PESPA）と呼ばれることもあるそうです。PESPAについては、次の記事が話題になりましたね。 このPESPAであるRemixを実運用する中で、フレームワークの手触りが近年触ってきたものと大きく違っている点があっ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「JScript」に代わり「JScript9Legacy」が既定のスクリプトエンジンに ～Windows 11 24H2以降で／Web標準への準拠、パフォーマンス、セキュリティを改善
「JavaScriptで要素をドラッグして移動する簡単な方法」という記事が初耳だらけだった件 - Qiita
JavaScriptで要素をドラッグして移動する簡単な方法 - Qiita
今からでも遅くないconsoleを使いこなそう - Qiita
JavaScript の Segments の使い所を考える - Qiita
JavaScript (59) Snap.svgライブラリを使用
