JavaScriptで日付が新しい順・古い順, あいうえお順のSort処理を実装してみた！
こんにちは、AIQ株式会社のフロントエンドエンジニアのまさぴょんです！ 今回は、JavaScriptで日付が新しい順・古い順, あいうえお順のSort処理を実装する機会があったので、その知見と学びについて共有します。 前提: 基本のSort処理Logicを振り返る 本題の日付が新しい順(降順)・古い順(昇順), あいうえお順のSort処理の実装についての解説に入る前に、基本のSort処理Logicを振り返りましょう。 昇順と降順に関しては、以前にこちらの記事で説明しています。 JavaScriptで配列の要素を昇順や降順での並び替え・Sort処理するには、次のどちらかのメソッドを使用すればOKです。 Array.prototype.sort() 指定配列をSortします(破壊的変更) Array.prototype.toSorted() 指定配列のコピーをSortして実行結果として、返却し
WordPress 時間の表示が9時間ずれる場合の対処方法 - by Takumi Hirashima
WordPress で時間の表示が9時間ずれる場合の対処方法を紹介します。 原因によっては対処方法がことなるため、原因になる箇所を順を追って解説します。 タイムゾーンの設定を確認 テーマファイルを確認 テンプレートタグを変えてみる wp-settings.php の値を調整 テンプレートタグ date_i18n を使う タイムゾーンの設定を確認 東京を基準とした場合、まずは「管理画面」＞「設定」にある項目「タイムゾーン」の値が「東京」になっているかを確認します。 例えば、タイムゾーンが「UTC（協定世界時）」の場合は、投稿の表示時間が9時間ずれる場合があります。 テーマファイルを確認 タイムゾーンは東京なのにやっぱり時間がずれる、そんな時はテーマファイル内に date_default_timezone_set() の記述がないかを確認しましょう。 日時の取得の前や function.php
日付・時間のピッカーを単独のWebコンポーネントとして利用できる軽量JavaScript -Aeon Date Picker
デスクトップでもスマホでもタブレットでも動作し、フレームワークの有無に関係なく機能する、日付・時間のピッカーを簡単に実装できるわずか5Kbの軽量JavaScriptを紹介します。 依存関係は一切なく、単独のWebコンポーネントとして利用できるので、非常に便利です。日本語環境のフォーマットにも対応しています。 依存関係はなし スタンドアロンの単体で動作する軽量JavaScriptで実装されたWebコンポーネント。 どこにでも使用できる どんなページにもどんなフレームワークにも設置可能。 プログレッシブエンハンスメント コードの読み込みに失敗した場合は、ネイティブのピッカーまたはテキストボックスにフォールバック。 アクセシブル マウス・タッチ・キーボード・スクリーンリーダーで動作し、ネイティブのフォーム要素として動作します。 多言語対応 デフォルトでブラウザのローカル言語と日付形式を使用します
軽量で非依存な、ダーク/ライトモード切り替えスクリプト・「DarkModeJS」
DarkModeJSは軽量で非依存なダークモード/ライトモードの切り替えスクリプトです 以前ご紹介した本スクリプトど同名のDarkmode.Jsは同じく軽量で非依存でしたがmix-blend-modeを使う、といったものである程度コンテンツを選ぶ類のものでした 今日のDarkModeJSは少し異なり、多少手間にはなりますがボタンのクリックや指定した時間で任意のCSSを読み込む、というものになります メリットとして任意の専用CSSを用意するのでどんなコンテンツでも正確なダークモード/ライトモードを自作出来ますが、デメリットとしては面倒な点でしょうか 手軽さは変わりませんが多少手間でも自作したほうがメンテナンスは楽な気がしますね。ライセンスはMITです DarkModeJS
「Google Chrome 77」安定版リリース、パフォーマンス計測機能の向上やJavaScriptからフォームデータを自由に編集できる機能などが追加
ウェブブラウザ「Google Chrome」の最新安定版であるバージョン77.0.3865.75がリリースされました。ウェブサイトのパフォーマンス計測機能が強化されたほか、送信するフォームデータをJavaScriptから自由に編集できる機能が追加されています。 New in Chrome 77: Native Lazy Loading, Largest Contentful Paint, and New Forms Capabilities - YouTube ◆パフォーマンス計測機能が強化される 以前より、コンテンツの描画が始まった段階を示す「First Paint」「First Contentful Paint」や、意味のある画面が表示された時点を示す「First Meaningful Paint(FMP)」、そしてユーザーが操作可能になる時点を示す「Time to Interacti
CSSだけで作られたストップウォッチ
Result CSSだけで作られたストップウォッチです。実用性を無視した力業のビックリCSSというのではなく、しっかりストップ、リセットも出来るので一応勉強しておこうと思いメモ とはいえ、フォントは使わずCSSで表示も面倒見てくれていますのでそれなりに長いコードとなってしまっています。 ざっくり種明かしですが、トリック等ではなく、デジタル表示に使う要素7本をCSSで用意して時間に合わせて表示させています @keyframes top-10 { 0% {opacity:1;} 9.999% {opacity:1;} 10% {opacity:.1;} 19.999% {opacity:.1;} 20% {opacity:1;} 30% {opacity:1;} 39.999% {opacity:1;} 40% {opacity:.1;} 49.999% {opacity:.1;} 50% {
spacetime - JavaScriptの高機能時間ライブラリ MOONGIFT
JavaScriptで悩ましいのが時間の扱いではないでしょうか。Webブラウザごとによって異なるタイムゾーン、年月日を表示するのにもばらばらのメソッドを実行するなど面倒な操作が多いと感じます。 そこで使ってみたいのがspacetimeです。JavaScriptにおける日時関連の処理を手軽にしてくれるライブラリです。 spacetimeの使い方 タイムゾーンの切り替えを行う場合です。文字で指定できるので分かりやすいです。 var d = spacetime('March 1 2012', 'America/New_York') //set the time d.time('4:20pm') d.goto('America/Los_Angeles') d.time()//'1:20pm'
JavaScriptの時間を0パディングする方法
JavaScriptの時間を0パディングする方法を紹介します。 １．問題点 下記の、今日の年月日を表示する簡単なサンプルを作ってみました。 var date = new Date(); var year = date.getFullYear(); var month = date.getMonth()+1; var day = date.getDate(); alert(year + '/' + month + '/' + day); このスクリプトを実行すると、"2018/5/15"のように表示されます。 できれば、"2018/05/15"のように、月や日が1桁のときに0パディングしたいのですが、方法が分かりません。 ということで、JavaScriptの時間を0パディングする方法を紹介します ２．JavaScriptの時間を0パディングする JavaScriptの時間を0パディングするに
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
