JavaScriptで日付が新しい順・古い順, あいうえお順のSort処理を実装してみた！
こんにちは、AIQ株式会社のフロントエンドエンジニアのまさぴょんです！ 今回は、JavaScriptで日付が新しい順・古い順, あいうえお順のSort処理を実装する機会があったので、その知見と学びについて共有します。 前提: 基本のSort処理Logicを振り返る 本題の日付が新しい順(降順)・古い順(昇順), あいうえお順のSort処理の実装についての解説に入る前に、基本のSort処理Logicを振り返りましょう。 昇順と降順に関しては、以前にこちらの記事で説明しています。 JavaScriptで配列の要素を昇順や降順での並び替え・Sort処理するには、次のどちらかのメソッドを使用すればOKです。 Array.prototype.sort() 指定配列をSortします(破壊的変更) Array.prototype.toSorted() 指定配列のコピーをSortして実行結果として、返却し
文字列の日付を降順にソートする方法 - Qiita
[ { "id": "1", "title": "【参加メモ】 『SCRUM BOOT CAMP THE BOOK 増補改訂版』読書会 第1回目", "date": "2021/10/25", "url": "https://note.com/maiamea/n/n5cd7a8c0cbf7" }, { "id": "2", "title": "【参加メモ】 『SCRUM BOOT CAMP THE BOOK 増補改訂版』読書会 第2回目", "date": "2021/10/27", "url": "https://note.com/maiamea/n/n792779910e0b" }, { "id": "3", "title": "【参加メモ】 『SCRUM BOOT CAMP THE BOOK 増補改訂版』読書会 第3回目", "date": "2021/10/29", "url":
javascript オブジェクトの配列内の日付をソートする
const arr = [ {id: 2, date: new Date(2020, 1, 2)}, {id: 1, date: new Date(2020, 1, 1)}, {id: 3, date: new Date(2020, 2, 28)}, {id: 5, date: new Date(2025, 1, 1)}, {id: 4, date: new Date(2020, 2, 29)}, ]; console.log( arr.sort( (x, y) => (x.date.getTime()) - (y.date.getTime()), ) ) console.log(arr); const arr = [ {id: 2, date: new Date(2020, 1, 2)}, {id: 1, date: new Date(2020, 1, 1)}, {id: 3, date
【保存版】心地よいWeb遷移アニメーションの基本ルール6個まとめ
※この記事は、Mediumで公開された「Transition animations: a practical guide」の著者Dongkyu Leeから許諾を得て、日本語翻訳しています。 Webサイトやスマホアプリにおいて、アニメーションと動きの重要さは年々高まっており、今では必須と言われるまでになっています。 ユーザー エクスペリエンスの権威ニールセン・ノーマン・グループは、「アニメーションは注目を集めるだけでなく、ユーザーの楽しみを高め、製品を新鮮でモダンなものに感じさせてくれる」と述べています。 アニメーションが十分に洗練されていれば、ユーザーにはっきりとしたフィードバックを与えることができ、インターフェイスをより直感的にすることができます。 特に遷移アニメーション（Transition Aniatiions）は、ユーザーをある段階から次の段階へとスムーズに誘導するため、重要な役割
フィルタ不要で並び替えができる夢のようなSORT関数【Googleスプレッドシート/Excel】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
SORT関数 使い方 関数の説明はこちらです。 ※記事内の画像はGoogleスプレッドシートで作成し、数式の表記もスプレッドシートをメインとしています。Excelでも部分的に同じように利用することができます。 関数 Googleスプレッドシート =SORT(範囲, 並べ替える列, 昇順(TRUE)or降順(FALSE) [ , 並べ替える列2 , 昇順or降順2 , …] ) ※[ ]は条件を2つ以上指定する場合です。カッコは入力しません。 Excel（Excel for Microsoft 365以降で対応） =SORT(範囲, 並べ替える列, 昇順(1)or降順(-1) ) ※Excelの場合、指定できる条件は1つです。 SORT関数は、指定した範囲のデータを、指定した列で昇順もしくは降順で並べ替えて、別の場所に表示することができる関数です。スプレッドシートでは複数の条件を指定すること
【Googleスプレッドシート】「色」でフィルターをかけたいし並び替えもしたい→できた！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。経営企画室のゆりえです。会社全体のさまざまな数字を管理しています。 これまでのLIGブログでは、エクセルやGoogleスプレッドシートの活用法に関する記事を書きました。 📝ゆりえが書いた記事一覧 Googleスプレッドシート：色で並び替え＆フィルター 少し前なのでご存じの方もいると思いますが、2020年3月から実装されました。前々からあったらいいなと思っていた機能です。簡単な機能のご紹介と、使ってみて思ったことを書かせていただきます。 G Suite アップデートブログ ココから機能を使う セルにフィルタを適用し、フィルタメニューを開くと、「色で並べ替え」と「色でフィルタ」の2つが追加されています！ やったー！ ここから、機能を使うことができます。 ▼まずはフィルタを適用 ▼フィルタメニューを開く 「色で並べ替え」は表示する順番を指定した色によって並び替える機能、「色でフィル
シンプルで扱いやすいHTMLテーブルライブラリ・「Grid.js」
Grid.jsはシンプルで扱いやすいHTMLテーブルライブラリです。ReactやAngular、Vueなどは勿論、バニラでも問題なく動作します 9kbと非常に軽量で使い方もすごく簡単です。データを元に自動で指定した要素にtableを作成します。 ソート機能や検索、ページネーション機能なども付いてます。試しに使ってみました example データが少ないのでページングは飾りになってしまっています。あと、現段階で、ソートは数値をうまくソートできないみたいです。 Grid.jsの使い方はとても簡単です。 <link href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css" rel="stylesheet" /> <script src="https://unpkg.com/gridjs"></script>CSSとJSを読み込みます。C
AnyGrids - 高機能なテーブル表示ライブラリ
業務システムで最もよく使うのが一覧でのデータ表示ではないでしょうか。多くはテーブルタグを使って構築しますが、ソートや表示するデータの多様さによって、より多機能を求められます。 今回紹介するAnyGridsはビジネスデータの表示に特化したライブラリとなっています。業務システムでのデータ表示に一役買ってくれそうです。 AnyGridsの使い方 デモです。アイコンやグラフを表示しています。 一つの行を複数段で表示できます。 ページネーション、ソートが備わっています。 グラフはマウスオーバーに対応しています。 AnyGridsの主な機能はページネーション、ソート、子供の行サポート、集計行、グラフ連携となっています。データ自体はJSONの配列で設定します。細かな表示部分を作り込まない分、実装が手軽になりそうです。 AnyGridsはJavaScript製のソフトウェア（ライセンスは独自）です。 An
ソートや検索、ページネーション等、基本的な機能を備えた非依存のデータテーブルライブラリ・「Vanilla-DataTables」
Vanilla-DataTablesはバニラなデータテーブルJavaScriptライブラリです。他ライブラリに依存せず単体で動作します 機能もデータテーブル系でよくある基本的な機能を備えています。データのソート、任意のキーワードで検索、データが増えた時でも省スペースで収まるページネーション、インポート/エクスポート機能などなど また拡張性もあり、プラグインに対応していますので足りない機能を自分で作って加える事も出来るようになっています。ライセンスはMIT Vanilla-DataTables
Filterizr - CSS3を使ったデータのフィルタリング、ソートライブラリ MOONGIFT
Web上で情報を並べて表示する機会はとても多いです。そんな時、常に発生するのが並び替えや絞り込みのニーズです。データを消したり、並び替えて表示したりするのは意外と大変です。 そこで使ってみたいのがFilterizrです。データのソート、フィルタリングに特化したライブラリです。 Filterizrの使い方 利用例です。カテゴリごとにデータが絞り込まれて表示されています。 カテゴリを変更するとデータが変わったり、並び順を変更できます。 ツリーデータにも使えます。 Filterizrはアニメーション部分にCSS3を用いているのでスムーズにアニメーションされます。jQueryとの連携もできるので、手軽に使えそうです。情報の絞り込み表示などで役立つことでしょう。 FilterizrはTypeScript製のオープンソース・ソフトウェア（MIT License）です。 Filterizr | Crea
タッチデバイスにも対応可能な、リストのアイテムを並べ替えたりスワイプで削除できるようにするライブラリ・「Slip.js」
Slip.jsはリストのアイテムの並べ替えやスワイプによる消去を可能とする非依存のシンプルなライブラリです。タッチデバイスにも対応可能となっています。機能もいたってシンプルで、並べ替え、並べ替えの禁止、スワイプの禁止などをオプションで設定可能です。導入も楽で良いですね。ライセンスファイルはありませんでしたが、スクリプトファイル内を見る限りはBSDっぽいです。 Slip.js
ラジオボタンとCSSを使ってソート機能を実装する - NxWorld
ラジオボタンとCSSを使って、特定の規則に従ってデータを並び替えるソート機能を実装するサンプルです。 ソート機能を実装しようと思ったらとりあえずJSを利用するのを考える人も多いと思いますが、本当に簡易的なものであればCSSでもそれっぽい動きが実装できます。 デモのようにページ上部にある「Reset」「Red」「Blue」「Yellow」をそれぞれ選択することによって、その下に並んでいる赤や青の要素が並び替えられる動きを実装していきます。 以前にもラジオボタンとCSSを組み合わせてちょっとした動きを実装するものとして「ラジオボタンとCSSを使ってレイアウトを切り替える」を紹介したのですが、今回も同様でラジオボタンの:checkedと間接セレクタ（~）を利用します。 まず、HTMLでソートの切り替えやリセットに利用するラジオボタン（<input type="radio">）とソートの対象となる
CSSだけで簡易的なリストのソート
Result 選択したグループに該当するアイテムだけが上位にソートされる、という簡易的なもの Flexboxで並べて、radioボタンで作られたボタンにチェックが入るとorder:-1;が有効化され、上位に表示されます css.products__sort { display: flex; flex-flow: wrap; } .products__wrap { display: flex; flex-flow: wrap; margin: 25px 0 0; } .products .sort-radio { display: none; } .products .sort-radio[id="app"]:checked ~ .products__wrap .product[data-product-type="app"] { order: -1; background-color: #
個人でWebアプリを開発する時に便利な高機能JavaScriptライブラリ6選！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、Webアプリやサービス作りなどで便利に使える高機能なJavaScriptライブラリを厳選してご紹介してみようと思います。 ライブラリ単体でそのままWebアプリとしてリリースできそうなレベルのものから、ちょっとした機能を追加できるものまでピックアップしてみたのでご興味がある方はぜひ参考にしてみてください！ なお、JavaScriptはpaizaラーニングの「JavaScript入門編」で学ぶことができます。そちらも合わせてチェックしてみてください。 オーディオファイルを柔軟に制御できるライブラリ！ 【 howler.js 】 MP3 / WAV / AAC / OGG…など多彩なコーデックに対応しているうえ、オーディオスプライトによる制御も可能なライブラリが「howler.js」です。 音楽プレイヤーはもちろん、オーディオ制作アプリやゲー
【2018年WordPress魔改造TOP3】第2位：カスタム投稿アーカイブページのメインクエリに分岐点を作り、前後で順序のルールを変える | 東京上野のWeb制作会社LIG
TOP3を別記事として出してしまうあたりに、今後のキーワードヒットを狙いたい思惑が丸見えですね。 ……どうも。バックエンドエンジニアのリョウタです。年末の予定といえばライブとスタジオくらいのものなので、GutenbergをやっつけるべくReactの独習に励もうと思っています。 さて、本題に入りましょう。前回からスタートした「2018年のWordPress魔改造TOP3」ランキング。 第2位：カスタム投稿アーカイブページのメインクエリに分岐点を作り、前後で順序のルールを変える 何のことやら要約では伝わりにくですが、「メインクエリに分岐点を作り、前後でorderbyのルールと、orderの順序を変えたい。」ということになります。 仕様・要件 対象はカスタムフィールドにdateとtimeを持つ、イベント系投稿タイプのアーカイブページ（運用中の追加機能実装でしたので、dateとtimeを統合するの
phpで多次元配列をソートする - 空飛ぶピアニスト
例えば、 ある学年の１組、２組、３組の生徒がテストをしたとして、 生徒に対して一意のidと、生徒の組、点数 を多次元配列で表した時に、 ①学年の組ごとに昇順に並べ ②かつ点数順に並べたい みたいな時にどーするのっていう話。 // 多次元配列 // idは一意、groupはクラス、scoreが点数 $tajigen_data = array( '田中' => array( 'id' => '001', 'group' => '2', 'score' => '60', ), '山田' => array( 'id' => '002', 'group' => '2', 'score' => '85', ), '鈴木' => array( 'id' => '003', 'group' => '2', 'score' => '55', ), '佐藤' => array( 'id' => '004',
TableDragger - 行/カラムに対応したテーブルドラッグ&ドロップツール MOONGIFT
テーブル表示は業務システムでもよく使われますが、使っている内に様々な要望が上がってきます。編集できるようにしたい、並び替えが欲しい、一括更新、絞り込み…などなど色々です。それらをすべて叶えるのは困難でしょう。 しかしライブラリを使えば実現できることもたくさんあります。今回はテーブルのドラッグ&ドロップをサポートするTableDraggerを紹介します。 TableDraggerの使い方 デモです。カラムのドラッグ&ドロップです。 さらに縦方向。ヘッダーも対象にしていますが、外すこともできます。 さらに縦と横を一緒にサポートもできます。 TableDraggerを使えばカラムをユーザの希望に応じて差し替えるといったことがユーザの手で実現できます。クライアントサイドだけで実現できるのも大きな利点でしょう。行の変更もワークフローによっては使うことがあるはずです。 TableDraggerはJav
Masonry系の最強スクリプト、レスポンシブ対応のレイアウトが簡単に実装できる -Muuri
カードやパネルをレンガ状に配置し、ドラッグして配置をアニメーションで変更、ソートやフィルタリング機能も可能なグリッドレイアウトが簡単に実装できるスクリプトを紹介します。 マウスで操作しても、タッチデバイスで操作しても、非常に快適です。 Muuri Muuri -GitHub Muuriのデモ Muuriの使い方 Muuriのデモ デモはモダンブラウザ、IE9+でご覧ください。スマホやタブレットでも動作します。 ※スマホだと各パネルが大きいので、操作しにくいかも。
Tabulator - Interactive JavaScript Tables
The easy to use, fully featured, interactive table jQuery plugin Download 3.2 Interactive Tables Made Simple A lightweight, fully featured, interactive table jQuery plugin. Version 3.2 Out Now! Column Calculations, Multi-level Grouping, Touch Events, Nested Data Field Definitions, Header Filter Functions, Scroll Keybindings and much more! Checkout the news article to find out more! Tabulator allow
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
順番の乱れたobjectをkeyでsortする.js