ネイティブJavaScriptで日時を取り扱う場合、ビルトインされているDateオブジェクトを使うことになるのだが、このDateオブジェクトは取り扱いにクセが多く、直感的に日時を操作できない点でも有名である。そこで、専らサードパーティ製のプラグインmoment.jsやdayjsを使うのが一般的になっている。最新では、オワコン宣言したmoment.jsの後継と云われるLuxonや、次期JavaScriptへの実装が期待されているTemporalモジュールなどが出て来ていて、では結局どれを使うのが良いのか？ という悩みを抱えている人もいるのではないだろうか。私がまさにその問題にぶち当たった次第である。 そこで、それぞれの日時処理用プラグインやモジュール（本稿では統一してライブラリと称することにする）を比較してみることにした。 各種日時ライブラリの比較 まず、ネイティブJSのDateオブジェクト
いまどきのWebアプリにおいては、ファイルのダウンロード機能が必要な場面が多々あります。例えば、バックエンドが生成したCSVデータをファイルとしてダウンロードさせる「CSVダウンロード」機能などです。 今回はAPI[1]から得られたデータをファイルとしてダウンロードさせたい場合のフロントエンドの実装方法について考察します。 要件 今回考える要件は、前述のとおり、APIから得られたデータをファイルとしてダウンロードさせることです。具体的には、以下のような要件を考えます。 APIをGETリクエストで呼び出し、そのレスポンスをそのままファイルとしてダウンロードする フロントエンドでの何らかのアクション（ボタンクリックなど）によってダウンロードがトリガーされる 追加の要件次第でやり方は変わりますが、とりあえず以上の前提で考えます。 ベストな方法 とりあえず、筆者が考える一番ベストな方法を紹介します
はじめに 実務でインクリメンタルサーチ機能（＝リアルタイム検索）のパフォーマンスを改善するために 「debounce 処理」（後述します）を実装する必要がありましたので、工夫した点などについて書いていこうと思います。 興味ある方はぜひ最後までご覧ください。 debounce とは？ まず最初に「debounce」について軽く説明しておきます。 debounce とは 「対象のイベントが発生してから指定した時間が経過するまでは、同じイベントの発生を抑制する仕組み」 です。 もっとシンプルに言うと、対象のイベントにより連続で実行された関数たちの中で 1 番最後の関数だけ実行させる..といったイメージでしょうか？ （下記だと 3 と 6 だけしか実行されない） 言葉だけではイメージをつかめない方は、以下のサンプルコードを実際に動かしてみてください。 これまでのリアルタイム検索処理と課題 さてここ
インクリメンタル検索は、テキストボックスとかで文字を入力すると勝手にテキストボックスの下とかに表示される入力候補みたいなやつ。 これをwebで実装しようと企みました。（すでによくありますが） 環境は クライアント：javascript(jqueryライブラリを使用します) サーバー：php（今回は特に記載しません） 以降はjqueryをベースに書いていきます。 どのようにインクリメンタル検索を実装しているのか色々調べていると、IEとFirefoxのkeyupイベントの実行タイミングが違うからkeypressを使用するとか、focus中にsetIntervalで一定間隔で実行とか、エンターが押されたタイミングで実行するとかあったけど、自分がやりたかったのはこれ。 「キーが離されてからn秒間次のキーの入力が無かった場合に検索実行」 keyupの都度検索実行していたのではサーバーの負荷が心配。
Lodash is dead. Long live Radash. 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 Lodashの何が問題なのか？ 関数の詳細分析 Lodashの_.get関数 Lodashの_.filter関数 Lodashの_.map関数 コード品質 でも、そのコミュニティは... では、どうするか？ try関数 parallel関数 retry関数 counting関数 range関数 list関数 Lodashの何が問題なのか？ JavaScriptの動的な能力が欠点ではなく特徴として捉えられていた時代に、Lodashは異なる入力に対して異なる振る舞いをする関数を提供することで、できる限り役立つように作られました。現在では、私たちはより良い方法を知っています。純粋関数、決定論的な振る舞い、関数合成といった関数型のコ
こんな感じでsleepで指定した秒数待った後に処理ができるようになるという便利な関数で様々な言語で使われています。javascriptにも似たような関数でsetTimeoutがありますが、setTimeoutは非同期関数なので上の処理を実現させるためには
QRCode.js QRCode.js is javascript library for making QRCode. QRCode.js supports Cross-browser with HTML5 Canvas and table tag in DOM. QRCode.js has no dependencies. Basic Usages <div id="qrcode"></div> <script type="text/javascript"> new QRCode(document.getElementById("qrcode"), "http://jindo.dev.naver.com/collie"); </script> or with some options var qrcode = new QRCode("test", { text: "http://jin
この記事はReact公式の内容を翻訳・紹介するものではありません。筆者の解釈や理解を伝えるものであり、Reactの公式見解と一致しているとは限りません。あらかじめご了承ください。 皆さんこんにちは。最近Next.js 13.4がリリースされ、App Routerがstable扱いになりました。App RouterはReact Server Component (RSC) をふんだんに用いて構築されています。 React本体でServer Componentがずっとalpha版なのにNext.jsでbetaとかstableとか言ってるのは何で？ という問題も、React Canaryのアナウンスにより無事に解消されました。 React Canaryってなに？ 先日React公式ブログでアナウンスされた、新しいリリースチャネルです。 筆者の理解による概要をお伝えすると、Canary版のReac
本書『サバイバルTypeScript』は実務でTypeScriptを使う開発者のための入門書です。そして、このページはTypeScriptの特徴を最速で把握できるよう、数百ページからなる本書のコンテンツをつまみ食いした要約です。 » 本書ついて詳しく知る » とにかく今すぐTypeScriptを書いてみたい TypeScriptとはJavaScriptのスーパーセットとなるプログラミング言語。静的型付け言語であり、プログラムの正しさが静的に検査できる。ライブラリやIDEなどの開発環境が充実しており、大きなエコシステムを持っている。Microsoftが2012年に開発し、オープンソースで公開した。» TypeScriptの特徴について詳しく知る » TypeScript誕生の背景について詳しく知る TypeScriptはJavaScriptのスーパーセットスーパーセットとは、元の言語との
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
はいさい！ちゅらデータぬオースティンやいびーん！ 今回の記事は筆者に珍しく、技術紹介ではなく、僕の個人的な意見を書きます。あくまでも、自説です。 React自体は画期的で、プログラミング界に貢献したプロジェクトだと思っていますし、完全に否定したいわけではありません。 Reactに対する違和感＝芽生えては大きく育った種 筆者はReactがとても好きでした。JavaScriptが好きになったきっかけもReactでした。何から何までもReactで書き直して、Custom Hooksを作って、refを子部品に渡したり、バリバリ満喫していました。 Vueも仕事の関係で習得せざるを得なくなったのですが、Vueは最高に大嫌いでした。これならReactで書き直してやるぅ！と思ったりも。 Reactについて社内でも導入を推進したり、React入門の勉強会を開いたりもしています。 しかし、そんな筆者は、最近に
JavaScript で Beep 音 を鳴らしたかったのですが，beep()のような関数はなくて，自作する必要があります． 今回は，JavaScript だけでなんとかできないかなーと思った調べたものをまとめます！ まずは結果から...こんな感じで1行でできますね！ new Audio("data:audio/wav;base64,UklGRnoGAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQoGAACBhYqFbF1fdJivrJBhNjVgodDbq2EcBj+a2/LDciUFLIHO8tiJNwgZaLvt559NEAxQp+PwtmMcBjiR1/LMeSwFJHfH8N2QQAoUXrTp66hVFApGn+DyvmwhBTGH0fPTgjMGHm7A7+OZSA0PVqzn77BdGAg+ltryxnMpBSl+zPLaizsI
この前、JavaScriptの配列のある要素を一つ前（一つ後ろ）の要素と入れ替えたい、という状況になりました。 Arrayオブジェクトのメソッドにはそれらしきものはありませんでしたが、spliceというメソッドを使って実現できそうでした。 spliceメソッドについては、以下を参照してください。 http://www.tohoho-web.com/js/array.htm#splice 以下、実行例です。 var array = new Array("あ", "い", "う", "え", "お"); // 入れ替える文字のindex var index; // "う"を一つ前の"い"と入れ替え index = 2; array.splice(index-1, 2, array[index], array[index-1]); alert(array); // => あ,う,い,え,お //
配列の要素の順番を入れ替えるとき、 let temp = ary[x]; ary[x] = ary[y]; ary[y] = temp; みたいにやってたけど、 なんか1行でできるらしい。 function swap(a,x,y){ a[x]=[a[y],a[y]=a[x]][0]; return a; } 最初見たとき意味わかんなかったんだけど、コメント追加して書き下すとこう。 function swap(array,index1,index2){ // array[y]の値を添え字0に、 // array[y]=array[index1]の「代入の実行結果」を添字1に持った配列を作成 let array2 = [array[index2],array[index2]=array[index1]]; // 上記の配列の添字0をarray[index1]に代入することで、 // 引数の配列
配信動画はこちら https://www.youtube.com/watch?v=x1XdqWtPUdg もし良かったらムーザルちゃんねるのチャンネル登録お願いします！ https://www.youtube.com/channel/UCLPHXwLp90A5R69Eltxo-sg Tw…
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
