JavaScriptの小技集 - Qiita
はじめに 初投稿です。 知ってたら便利になる小技が無かったのでまとめました。 「小技が知りたい...だけど検索しても出てこない...！」 そういう時に役立ちます。 比較的古いバージョンのJSでは一部の小技が使えないかもしれません。 随時追加予定です。他に小技をご存じの方はコメント欄にGO。 おことわり この記事は、あくまで"こんなやり方もあるよ"と紹介しているだけなので、何でもかんでもこれらの小技を使うと、かえってコードの可読性を下げる可能性があります。コードサイズと可読性を天秤にかけてどちらが良いかを都度確認しましょう。 記事内の間違った部分の指摘等はこの記事のコメントや編集リクエストでして下さい。 当方コードゴルファーなので、バイト数短縮小技も入れていることをご了承ください（一応該当する節には＊をつけています）。 配列 配列の重複した値を削除1 const meta = ["foo",
JavaScriptでTABLEにソート機能を実装する（jQuery不要）
※仕様説明 灰色のタイトル部分をクリックするとソートされる 同じ項目をもう一度クリックすると逆順にソートされる 数字しか入っていない列は数字として扱われる（小数点付きも数字として扱われる） 1行でも文字列が含まれている列は文字列としてソートされる 何も考えずに文字列ソートで実装してしまうと、列名「No.」などは「1、10、2、3、4...」という並び順になりますが、そこは仕様説明のとおり、数値しか入っていない列は数値比較によってソートしています。 列名「数値項目」にあるとおり、1.234などの小数点付きの値もきちんと数値として扱っています。 ただし、列名「カンマ」にあるような3桁区切りされた数値は文字列として扱われるため、文字コード順になります。 HTMLソース <table id="sort_table"> <tr> <th>No</th> <th>全角項目</th> <th>数値項目<
JavaScript で CPU が Intel かどうかを判定する（ついでに JIT を検知する）
先日、次のような Tweet を見かけました TIL I discovered that TensorFlow.js uses an interesting trick to sniff your CPU architecture in WebAssembly. pic.twitter.com/LVyywIM48I — Robert Knight (@robknight_) January 4, 2023 面白かったので、なぜこうなるのかの解説と、ついでにこのテクニックを使った JIT 検知方法などについて紹介します。 JavaScript における低レイヤーの扱い JavaScript においては、挙動が比較的しっかりと仕様に定められているために、環境による振る舞いの違いはあまり発生しません。しかし、低レイヤーに降りるほど振る舞いは実装依存になり、環境差が発生する余地が出てきます。 一番
Barcode Detection APIでブラウザ上からQRコードを読み取る
我々の生活にQRコードが浸透してから何年経ったでしょうか。QRコードの読み取り機能はOS標準で可能になり、もはや「QRコードアプリ」すら不要な時代になりました。 一方でブラウザにおけるQRコードの取り扱いは、全くサポートされていませんでした。今まではゼロから実装した有志のライブラリを使ってQRコードの読み取りを実装していました。 しかしBarcode Detection APIの実装で、そういったライブラリも不要になるかもしれません。 Shape Detection API 近年になって、ブラウザにShape Detection APIというAPIの策定・実装が始まっています。 Shape Detection APIは現在以下の2つのAPIから構成されています。 Barcode Detection API Face Detection API また、「親戚」として、OCRを実現するText
株式会社デーコム
404 NOT FOUND 申し訳ございません。お探しのページが見つかりませんでした。 お探しのページは見つかりませんでした
danfo.js - データを素早く手軽にビジュアル化 MOONGIFT
データのビジュアライズはとても大きな問題です。ツールによって使い勝手がばらばらで、簡単に使えるものもあれば、とても複雑なものもあります。データ量によって選択肢が変わり、最適な表示方法も異なります。 今回紹介するdanfo.jsは、とても簡単に使えるデータビジュアライズソフトウェアです。 danfo.jsの使い方 danfo.jsの実行例です。データをとってきて、それを3つのパターンでビジュアライズしています。 const df = await dfd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv") df['AAPL.Open'].plot("div1").box() //makes a box plot df.plot("div2").table()
HTML5のLocal Storageを使ってはいけない（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Randall Degges - Please Stop Using Local Storage 原文公開日: 2018/01/26 著者: Randall Degges 日本語タイトルは内容に即したものにしました。 画像は元記事からの引用です。 初版公開: 2019/10/19 追記更新: 2024/04/05 -- リンク情報を記事末尾に移動しました 本気で申し上げます。local storageを使わないでください。 local storageにセッション情報を保存する開発者がこれほど多い理由について、私にはさっぱり見当がつきません。しかしどんな理由であれ、その手法は地上から消えてなくなってもらう必要がありますが、明らかに手に負えなくなりつつあります。 私は毎日のように、重要なユーザー情報をlocal storageに保存す
行列固定テーブルをCSSとjavascriptで作成する - プログラミング未経験者の備忘録
HTML <div id="fixedTableArea"> <div id="topLeftArea"> <table id="topLeftTable" class="fixedTable"> <tbody> <tr> <td>column0</td> <td>column1</td> </tr> </tbody> </table> </div> <div id="topRightArea"> <table id="topRightTable" class="fixedTable"> <tbody><tr><td>column2</td><td>column3</td><td>column4</td><td>column5</td><td>column6</td><td class="dummyColumn"></td></tr></tbody> </table> </div> <di
JavaScriptのモダンな書き方 - ES2017〜ES2018のawait・async, includes(), padStart()等を解説 - ICS MEDIA
JavaScriptのモダンな書き方 - ES2017〜ES2018のawait・async, includes(), padStart()等を解説 ECMAScript 2015がリリースされて以降、JavaScriptの機能は大きく強化されました。const/let、アロー関数、クラス構文、Promiseなどが有名なところですが、ES2016、ES2017、ES2018、･･･ES2022、そしてさらにその先へJavaScriptの仕様は日々進化しています。JavaScript・TypeScriptの開発では、これまで当たり前だと思っていた手法を新しい新機能で置き換えることが何度もありました。 本記事では、JavaScriptのモダンな書き方について説明します。おもに2017年から2018年頃に搭載されたES2017・ES2018の機能について焦点を当てて解説します。 非同期のProm
私が async/await、promise をちゃんと理解するまでのステップ１，２，３ - Qiita
これは何？ javascript の async/await を使いこなすために必要な事柄について、私なりに説明したものです。 書いてあること ステップ１）await 使えば待ってくれる 必要最小限の async/await、及び、エラーの catch の話 ステップ２）promise というもの promise の中には「正常データ = resolve」と「エラー = reject」のいずれかを保管できるという話 どうすれば、promise から、正常データ(resolve)を取り出せるか？ どうすれば、promise から、エラー(reject)を取り出せるか？ Promise.all の話 ステップ３）promiseを作る方法 callbackスタイルの関数を、promiseスタイルとして使う方法 setTimeout() を promiseスタイルにする async で promi
個人でWebアプリを開発する時に便利な高機能JavaScriptライブラリ6選！ -
どうも、まさとらん（@0310lan）です！ 今回は、Webアプリやサービス作りなどで便利に使える高機能なJavaScriptライブラリを厳選してご紹介してみようと思います。 ライブラリ単体でそのままWebアプリとしてリリースできそうなレベルのものから、ちょっとした機能を追加できるものまでピックアップしてみたのでご興味がある方はぜひ参考にしてみてください！ なお、JavaScriptはpaizaラーニングの「JavaScript入門編」で学ぶことができます。そちらも合わせてチェックしてみてください。 オーディオファイルを柔軟に制御できるライブラリ！ 【 howler.js 】 MP3 / WAV / AAC / OGG…など多彩なコーデックに対応しているうえ、オーディオスプライトによる制御も可能なライブラリが「howler.js」です。 音楽プレイヤーはもちろん、オーディオ制作アプリやゲー
JavaScriptの概念たち (後編) - Qiita
この記事について この記事は「JavaScriptの概念たち (前編)」の続きです。本来は1つの記事なのですが、あまりにも長くなりすぎたので分割しました。 17. Prototype Chain JavaScriptには2つの特徴があります。1つは「全てがオブジェクト」でもう1つは「prototypeベースの言語だということ」です。 const hoge = { a: "hogehoge" }; console.log(hoge instanceof Object); // -> true const fuga = [1, 2, 3]; console.log(fuga instanceof Object); // -> true const piyo = new Map([[1, 'one'], [2, 'two']]); console.log(piyo instanceof Obje
サービスワーカーの使用 - Web API | MDN
この記事はサービスワーカーを使い始めるための情報を提供するページです。基本的な構造、サービスワーカーの登録、新しいサービスワーカーのインストールと有効化のプロセス、サービスワーカーの更新、キャッシュやレスポンスの操作を含めた、オフラインで動作するシンプルなアプリケーションの機能についてです。 サービスワーカーの前提条件 ウェブユーザーが長年苦しめられてきた主要な問題の一つは、接続を失うことです。世界中の最高のウェブアプリは、ダウンロードできないときの使い勝手が最悪でした。これまでにも、この問題を解決するための技術を生み出す試みはさまざまに行われ、いくつかの問題は解決されてきました。しかし、一番の問題は、資産のキャッシュとカスタムネットワークリクエストのための優れた全体的な制御メカニズムが存在しなかったことです。 このような課題を修正したのがサービスワーカーです。サービスワーカーを使用すると
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Hello! | party.js
Explore DOM Events
[JavaScript]クリップボードを使ったコピーとペースト - Qiita![[JavaScript]クリップボードを使ったコピーとペースト - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/c68f1a8907b3d0215ea14ce08705bdc8f1bc96a1/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGNzMzNzYlMkZwcm9maWxlLWltYWdlcyUyRjE1NTA4MTQzNDU_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmJnPUZGRkZGRiZmbT1wbmczMiZzPTA5ZTJjY2FjMDE4ZGQyYTUxYjYzMmJhZWE0M2UwZmQw%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D6de43ec1aba526ee5c6fdc2b40678107%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCSmF2YVNjcmlwdCU1RCVFMyU4MiVBRiVFMyU4MyVBQSVFMyU4MyU4MyVFMyU4MyU5NyVFMyU4MyU5QyVFMyU4MyVCQyVFMyU4MyU4OSVFMyU4MiU5MiVFNCVCRCVCRiVFMyU4MSVBMyVFMyU4MSU5RiVFMyU4MiVCMyVFMyU4MyU5NCVFMyU4MyVCQyVFMyU4MSVBOCVFMyU4MyU5QSVFMyU4MyVCQyVFMyU4MiVCOSVFMyU4MyU4OCZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1wYWQ9MCZzPWY3YWJjMDU2N2Y3Y2ExN2Y1NDY2NDlhZDM0NmQyZTQ2%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBidXRha29tYSZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1wYWQ9MCZzPTk5NTg2M2FjYmIyOGMxMjRhNmU4MjNmNjcwOTRlODRl%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D440a5994d87d0824a858c91cb5230201)
HTML Standard 日本語訳
[JavaScript]初心者が初見で必ずthinking顔になるもの特集 - Qiita![[JavaScript]初心者が初見で必ずthinking顔になるもの特集 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/f046051243bd431d5c96df6c09b4edb6d87df59b/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnMzLWFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkZxaWl0YS1pbWFnZS1zdG9yZSUyRjAlMkY1Mjg1MjYlMkZkZTFjOTBmNmE3MjJhODY1ZDI3ZmFkODk4N2RhNTU0ZDhhODY1ZGJmJTJGbGFyZ2UucG5nJTNGMTU4MjI2MzEwMj9peGxpYj1yYi00LjAuMCZhcj0xJTNBMSZmaXQ9Y3JvcCZtYXNrPWVsbGlwc2UmYmc9RkZGRkZGJmZtPXBuZzMyJnM9Y2Y1Nzc0MWM3NWU5ZTE5OGU4YzhmNDlkYmE3ODAwNGM%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D5ea0723ab227ef82ed24889c21459541%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCSmF2YVNjcmlwdCU1RCVFNSU4OCU5RCVFNSVCRiU4MyVFOCU4MCU4NSVFMyU4MSU4QyVFNSU4OCU5RCVFOCVBNiU4QiVFMyU4MSVBNyVFNSVCRiU4NSVFMyU4MSU5QXRoaW5raW5nJUU5JUExJTk0JUUzJTgxJUFCJUUzJTgxJUFBJUUzJTgyJThCJUUzJTgyJTgyJUUzJTgxJUFFJUU3JTg5JUI5JUU5JTlCJTg2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9MjYyNDg4MTg3OWIwZmRkYzgzYjZmYTZiNzUxYTExOTc%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBrb3p6enomdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz01MjlhYjk2ZGU2MDY4ZTQwZTI4YjM3ZTExNWI2MWQ1NQ%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3Db07106cf5051916b4ed59bb4ff91709d)
Scene.js is a JavaScript Animation Library
Carlo、vue-cli、pkgを使ってvueを使ったデスクトップアプリケーションを作る - Qiita
