Svelte v5 で導入された Runes によるリアクティビティシステム
<script> let count = 0; function handleClick() { count += 1; } $: doubled = count * 2; </script> <button on:click={handleClick}> Clicked {count} {count === 1 ? "time" : "times"} </button> <p>{count} doubled is {doubled}</p> 上記のコード例では通常の JavaScript と同じ方法で変数が宣言されていますが、これは Svelte のコンパイラによりリアクティブな変数に変換されます。count 変数の値が更新されるたびに、UI が自動的に更新されます。$: で始まる式は Svelte のリアクティビティシステムにより自動的に監視され、変更があると再評価されます（構文として
新たなJavaScript日付操作ライブラリ「Tempo」登場 ー ネイティブなDateと直接連携、小さく、速く、使いやすく
先日リリースされた「[Tempo](https://tempo.formkit.com/)」が、全く新しいJavaScriptの日付／時刻ライブラリとして非常に注目を集めている。 先日リリースされた「Tempo」が、全く新しいJavaScriptの日付／時刻ライブラリとして非常に注目を集めている。 JavaScriptの日付ライブラリにはmoment.js、day.js、date-fnsなどがあるが、これらと異なるのは、ネイティブのDateオブジェクトを直接対象としていることである。 従来の日付ライブラリは、独自の日付プリミティブを提供することが一般的であったが、TempoではネイティブのJavaScript Dateオブジェクトと直接連携し、Intl.DateTimeFormatを活用することで、タイムゾーンやロケールのファーストクラスサポートを提供するだけでなく、ライブラリのサイズ削減
JavaScriptの組み込みAPIのIntlが凄いので紹介してみた。
はじめに 明けましておめでとうございます。 (一週間遅れ) この記事はJavaScriptの組み込みAPI Intl の紹介と解説です。 Intl とは？ MDN から引用すると Intl オブジェクトは、 ECMAScript の国際化 API の名前空間で、言語に依存した文字列の比較、数値の書式化と、日付の書式化を提供します。 Intl オブジェクトは、いくつかのコンストラクターに加え、国際化コンストラクターや他の言語に関する関数に共通する機能へのアクセスを提供します 用はi18nの書式版です。 例を出すより見たほうが早いので実際に機能解説します。 (先に言っておきますが、実はこれバックエンド無しで自然言語処理が出来る優れものです。) 用語解説 localesって何？そもそもnewって何？って人がいるかもしれないので locales https://developer.mozilla.
背景にランダムに雪を降らせるjsアニメーション 3パターン
キャンペーンや広告サイトで、背景に工夫を凝らしたものをよく見かけるようになりました。 季節ごとで、そのイメージに合ったものを使うことでより記憶に残りやすくなり、宣伝効果はさらに高まります。 今回は背景にランダムに雪を降らせるjsアニメーションを3パターンご紹介したいと思います。 冬は特にイベントが多いので、雪の背景はだれでも使ったことがあるくらい使います。 サイトに少し派手さが欲しいときや、動きをつけたいときに簡単に実装出来ておすすめです。 雪の量やスピードを自由に変えることもできるので、参考にしてみてください♪ CONTENTS 小さい雪が降る背景示 小さめの雪がランダムに降ってくるような背景のアニメーションです。 粉雪のような粒の大きさなので、あまり主張しすぎずどんなサイトでも使いやすいと思います。 背景の色を薄めの色に変更すると、さらに雪をひっそりと降らせることもできます。 See
ブラウザの「戻る」ボタンをJavascriptで検知するイベント代替案 | Yuta Ihara.com
Javascriptにはブラウザの戻るボタンをクリック、いわゆるブラウザバックで前ページに戻ってきた時に発火するイベントは存在しません。 そのため、今まで様々な方法でイベントの代替案が考案されてきましたが、今の所この方法が一番ベストと考え、実務でも使用しています。 ブラウザで「戻る」検知イベントで何をしたいのかそもそも「戻る」を検知して一体何をしたいのか、具体的な例を上げてみました。 二重送信防止フォームでも戻って再送信できるようにしたいこれが一番多いです。 入力画面などの送信ボタンを複数回クリックして二重送信を防ぐために、送信ボタンを一度クリックすると送信ボタンを非活性（disabled）にしたり、画面全体にローディングをオーバーレイするなどして操作ができない状態にすることがあります。 もちろん送信後は、次のページに遷移しますが、ユーザーによっては、内容を修正しようとブラウザバックする可
超メモ帳（Web式）＠復活
2024-01-16 めんどくさがらずにコミュニケーションは手間暇かけるべきなんだろうなぁ。 ライフハック・知的生産-コミュニケーション ライフハック・知的生産 なんとなく浮きやすい性格ではあるが、多少は生きやすくするためにコミュニケーションコストは先払いする必要があるんだろうなと思う。 #コミュニケーション #考え方 #ネット 2024-01-15 統合失調症からの回復について知ってることを書く。 統合失調症 なんとなく統合失調症の回復について書かねばならぬ気がした。この病気は世間の評判が悪すぎる。 #統合失調症 #メンタル #回復 2024-01-14 神道系のあれこれを調べて小説執筆に活かしてる。 個人的なこと-創作 個人的なこと 今日は厄払いのために神社でお祓いを受けてきた。この辺りの神道の儀式とかは経験しておけば小説執筆に活かせる。 #神道 #小説執筆 #創作 2024-01-1
iPhoneのSafariでキャッシュを無効にする方法。 - 超メモ帳（Web式）＠復活
最近のイケているプログラマってのはGitHubで書いたソースを共有して、Qiitaで技術ブログを書くものらしい。まぁ、僕は全然イケてないのでなんでもごちゃ混ぜの雑記ブログで技術情報まで書く。元々は僕のブログは技術ブログだったのだが、思いつきをなんでも書いているうちに物置小屋の様なカオスになってしまった。だが、元よりプログラマというのは物を書くのが好きな人種である。webの原住民は、僕の様なIT業界従事者である。 今日はお仕事でiPhoneのSafariでキャッシュが消えずに随分と苦労をしたので、情報共有の意味でメモを残しておこう。PCのブラウザならば普通にno-cacheを使えば対応出来るんだけど、iPhoneのSafariはなんか仕様が変。 基本的にはキャッシュ周りの設定はPHPのheader関数を使って設定してやれば良いと言われているが、iPhoneのSafariではそれではできなかっ
ブラウザバックでのページ表示時処理 - Qiita
参考：ブラウザ関連のJavaScript - Qiita ちなみに呼ばれる順番は、①DOMContentLoaded → ②load → ③pageshowです。 各ブラウザでのブラウザバックで動くJS処理 確認方法 A.html ↓ リンク押下 B.html ↓ ブラウザバック A.html ←このタイミングで動くページ表示時処理 キャッシュから表示された場合 Firefox、Safariは、キャッシュから復元されるとDOMContentLoaded, loadが動かない。 リクエストはキャッシュから復元されているので送らない。 キャッシュされないように指定した場合（cache-control: no-cacheをレスポンスに指定） Firefoxは、キャッシュから復元されたかの有無でDOMContentLoaded, loadが動いたり・動かなかったりする。 （2021年06月06日時
XMLHttpRequest とはなんだったのか | blog.jxck.io
Intro Fetch API の実装が広まり、 IE もリタイアを迎えたことで、今後忘れ去られていくことになるだろう XMLHttpRequest について。 どのように始まり、どのように広まり、どのように使われなくなっていくのか。その間に残した多大な功績を残す。 XMLHttpRequest の始まり この名前は非常に長いため、通常 XHR と略される。 この API は、現在の Web API のように W3C/WHATWG による標準化を経て策定された API ではない。 Microsoft によるいわゆる独自実装の API として始まり、後追いで標準化される。 したがって、 Web API の中でもかなり異質な命名である XHR が、 XmlHttpRequest でも XMLHTTPRequest でもなく XMLHttpRequest である理由も、 Microsoft の命
JavaScriptはJavaのScript版(であろうと努力はした) - きしだのHatena
JavaとJavaScriptを混同する人に、名前がかぶってるだけの別モノという指摘がされることもあります。間違いではない。 技術的にも実務的にもコミュニティ的にもそのとおりではあります。 ただ、そう言い続けられた結果、ほんとに単にLiveScriptの名前にJavaをもってきてJavaScriptにしただけという誤解があるようです。 JavaScriptはJavaのScript版、少なくともそうであろうという努力はされていました。 JavaScriptリリース時のCNETの記事には「JavaScript is based on Java」という記述があります。 Netscape and Sun Unveil JavaScript - CNET 実際には、LiveScriptにJavaから文法やライブラリなどを持ち込んでリリースにこぎつけたというのがあります。 JavaScriptのDat
TinyBase
Start with a simple key-value store.Creating a Store requires just a simple call to the createStore function. Once you have one, you can easily set Values in it by unique Id. And of course you can easily get them back out again. Read more about using keyed value data in The Basics guide. const store = createStore() .setValues({employees: 3}) .setValue('open', true); console.log(store.getValues());
[SheetJS] WebアプリでExcelをデータベースとして使う - Qiita
この記事について ExcelファイルをJavaScriptで扱うためのライブラリ[SheetJS] についての個人的まとめです。主にExcelシートからJSONに変換する機能について書いています。 SheetJSについて 公式:https://github.com/SheetJS/js-xlsx JavaScriptでExcelファイルを扱うためのライブラリです。CDNで提供されています。 WebアプリでExcelををデータベースとして使うメリット SheetJSを使うとブラウザで直接Excelファイルを扱えます。 データの編集と管理をクライアント側で行わせてサーバ側にはファイルを送信させるというアプローチは昔からありますが、SheetJSでは解析と出力がブラウザで完結するので、サーバ側とExcelファイルを送受信することなく処理を行うことが可能です。 これにより、以下の効果を得ることがで
![[SheetJS] WebアプリでExcelをデータベースとして使う - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/8388849036f7798a9de8f3b6622b0832db933179/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCU2hlZXRKUyU1RCUyMFdlYiVFMyU4MiVBMiVFMyU4MyU5NyVFMyU4MyVBQSVFMyU4MSVBN0V4Y2VsJUUzJTgyJTkyJUUzJTgzJTg3JUUzJTgzJUJDJUUzJTgyJUJGJUUzJTgzJTk5JUUzJTgzJUJDJUUzJTgyJUI5JUUzJTgxJUE4JUUzJTgxJTk3JUUzJTgxJUE2JUU0JUJEJUJGJUUzJTgxJTg2JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1lNjAxNTQ4MGJmMjlhOWQxYmRkZTgxNDM4YjY2Y2JiNw%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwb2tvcHBlOCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9ODBiOWJjNzc1MTg5MWI0ZWZmZjFmZjU3NDQ5MGQ2NDk%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D560727ee9147c1baf9fde7520356e36a)
【JavaScript】File APIでエクセルデータ（XSLX）を読み込んでJSONに変換する – atomicbox
JavaScriptのフォームで任意のエクセルデータをとりこんで、JSONに変換する。 すごく参考になるサイトがあったのですが、コメント無しでは読むのが難しかったので備忘で残しておきます。 参考サイト 引用：[SheetJS] WebアプリでExcelをデータベースとして使う こちらのサイトのプログラム部分を引用させていただいております。 /* * SAMPLE : FORMからXLSXファイルをリード */ var X = XLSX; // ファイル選択時のメイン処理 function handleFile(e) { // FileListオブジェクトの配列から、一つ目のFileオブジェクトを取り出す var files = e.target.files; var f = files[0]; // ファイルリード（ファイル読み込み後に実行する部分） var reader = new Fi
createDocumentFragment()を使って複数の要素をまとめてDOMに追加する
DOMへの複数の要素追加をcreateDocumentFragment()を使って試してみます。 サンプルコード まずは使わない場合の例です。 <div id="sample"></div> var list = [ '愛園愛美', '相羽ういは', 〜 略 〜 '童田明治' ]; var wrapper = document.getElementById('sample'); for (var i = 0; i < list.length; i++) { var item = document.createElement('div'); item.textContent = list[i]; wrapper.appendChild(item); } createDocumentFragment()を使わない場合のデモページ これで要素の追加は行えていますが、要素を生成する毎にDOMに追加
Javascriptで同時に非同期処理を行う | DevelopersIO
Promise.allを使用して複数の非同期処理をうまく扱う方法について整理しました。 こうすることで多数のHTTPリクエストなどを同時に送り、処理することが可能になります。 はじめに JSでは非同期処理を使用することでHTTPリクエストを送った際にレスポンスが帰ってくるまでの間に別のリクエストを送ることができます。 なのでタイトルには同時と書いてありますが、厳密には同時ではありません。 ただ、こうすることで複数のリクエストをすばやく処理することが可能です。 しかし、サーバーに負荷をかけたくないなどの理由から同時にリクエストを送る数を制限する必要があると思います。 今回はそんな場合にリクエストをバッチ化して処理する方法についても整理してみます。 準備 今回はwait関数を作成し、一定時間待機させるような処理を利用して、HTTPリクエストなどの代わりとします。 今回は２秒間処理をブロックする
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - ericblade/quagga2: An advanced barcode-scanner written in Javascript and TypeScript - Continuation from https://github.com/serratus/quaggajs
GitHub - neocotic/qrious: Pure JavaScript library for QR code generation using canvas
GitHub - webtoon/psd: Fast zero-dependency PSD parser for the web and Node.js
GitHub - SheetJS/sheetjs: 📗 SheetJS Spreadsheet Data Toolkit -- New home https://git.sheetjs.com/SheetJS/sheetjs
GitHub - marko-js/marko: A declarative, HTML-based language that makes building web apps fun
