メインカテゴリーを選択しなおす
今回はsortメソッドの使い方を説明します！sortメソッドとは、配列の中身を並び替えるための機能で、JavaScriptでは sort（）でデータを「小さい順（昇順）」や「大きい順（降順）」に簡単に並べ替えることができます。※サンプルの表を作っているので、まずは動きを確認してみてください
はじめに n 番煎じ感が否めない記事だけど、ワイの知らない間に scroll-snap-type とかいう知らないプロパティくんがシゴデキらしいと聞いたのでまとめておく コード <div class="container"> <div class="items"> <div class="item">item 1</div> <div class="item">item 2</div> <div class="item">item 3</div> </div> </div> :root { --width: 300px; } /* カルーセルのcontainerの領域を指定 */ .conta…
input type="range"でつまみのない丸っこいスライダーを作る
作りたいもの つまみを非表示もどきにして丸っこくしたい 動作確認環境 Google Chrome コード まずは HTML と CSS でできるところまで作るゾ1 <input type="range" value="0" min="0" step="1" max="5" /> input[type="range"] { -webkit-appearance: none; /* デフォルトのCSSをリセット */ --range-height: 20px; --range-width: 250px; width: var(--range-width); height: var(--range-…
家計に優しいmineo 格安SIM乗り換えならmineo（マイネオ）#mineo 契約事務手数料無料お申し込みhttps://t.co/RcguduUfhs pic.twitter.com/KxKdt0EhNt — mineo（マイネオ）契約事務手数料無料エントリー (@m...
先日（26日、日曜日）、住んでいる団地の管理組合役員対象の研修セミナーがあるというので、会場に向かった。 これが、研修会の式次第。 たまプラーザ団地（管理組合…
100pcs magazine style girl1_ 2023.11.03
雑誌の表紙風のイラスト。どんな内容の雑誌はあなたの想像次第です。 Illustration in the style of a magazine cover. The content of the m
72pcs Halloween Inn Shibuya_ 2023.10.31
本日はハロウィン。仮装した少女たちが登場です。 Today is Halloween. Girls in costumes appear. ハロウィンをテーマに作成しました。AIにはハロウィンと言えば
72pcs girl on the bed 3_ 2023.10.26
ベッドの上の少女の第3弾。少女のお部屋にお邪魔したシチュエーションです。 Part 3 of Girl on the Bed. This is a situation where you visit
JSやJCに人気の洋服ブランド2023年最新版：オシャレで可愛いブランド5選
JS（女子小学生）やJC（女子中学生）はオシャレに敏感な年頃です。毎年変わるトレンドに親はついていけないのではないでしょうか？これを読めば女の子が好きな洋服ブランドが分かります。プレゼントを贈る場合や一緒に買い物に行くのも楽しくなりますよ。
6pcs&30pcs gym clothes girl 2023.5.29
体操服少女 gym clothes girl 体操服の少女のイラストが無料分をあわせて全部で36枚！ A total of 36 illustration
DQの賢者と戦士と僧侶の女の子たち DQ sage, soldier and monk girls. 賢者、戦士、僧侶の衣装の女の子がそれぞれ6枚。
DQの武闘家と勇者と魔法使いの女の子たち DQ fighter, heroes and wizard girls. 武闘家、勇者、魔法使いの衣装の女の子がそれぞれ6枚。
はてブロの記事が投稿から1年以上経過している場合にアラートを表示する
経緯 ありがたいことに投稿日から数年経過しても、検索からアクセスされてる記事がいくつかあるんだけど、情報が古いから○iitaみたいに この記事は公開日からn年以上が経過しています。情報が古い可能性がありますので十分ご注意ください。 っていう注意書きを画面上に表示させたかった 注意 ブログデザインのテーマははてブロ公式のEpicを使用しています。本記事で紹介するコードはあくまで左記テーマに限ったものになります。 カスタマイズで編集するCSSやJSのコードについては利用上の注意をご確認の上、編集ください。 詳しくはヘルプをご確認ください。 カスタマイズ 1. CSSを追加 管理画面からデザイン＞カ…
検証用に触ってみた記録 完成形 <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.10.2/lottie.min.js" type="text/javascript"></script> <div></div> <script> lottie.loadAnimation({ container: document.querySelector('div'), // 表示領域 path: './data.json', // ローカルに用意したLottieのJSONファイル renderer: 'svg', // 表示する…
こんにちは、しきゆらです。今回は、flatMapの処理の中で不要な要素が出てきた場合にそれを排除する方法を知ったのでメモしておきます。 こちらのページの「map()のアイテムの追...
【JS/Webpack】ビルドしたフォルダの不要ファイルを削除する
こんにちは、しきゆらです。今回は、Webpackでビルドしたものが出力されるフォルダにできる不要ファイルを削除する方法を知ったのでメモしておきます。 WebpackでJSのコード...
JavaScriptでは[enum]という単語は予約語だけれど、一般的な[enum]、つまりは列挙型の仕組みは用意されていない。 ja.wikipedia.org [JavaScript enum]でGoogle検索をかけると、連想配列を使って擬似的に実現する方法が出てくるけれども、個人的には[定義時の見難さ]と[定義された値を後から書き換えることができてしまう]のが良くないと感じていた。 なので、この機会にその2点をカバーできるように仕組みを整えた。 コード: ENUM.js class ENUM { structure = this.define(); define () { return…
【JavaScript】指定した文字数のランダムな英数字文字列を生成する
備忘録がてら。 以下のプログラムは200文字のランダムな英数字文字列を生成する。 例: test.js let length = 200; // わかりやすく代入しているが、直指定すればワンライナーで書ける。 let str = Array.from({"length": length}, (v, k) => k) .map(e => Math.random()) .map(e => e.toString(32)) .map(e => e.substring(2)) .map(e => e[0]) .join(''); console.log(str); // 5vs1p7cs56obf6h6…
【JavaScript】[JSON.stringify()]にInfinityを与えるとnullになる
自分の備忘録がてら。 [JSON.stringify()]はObjectからJSON文字列を生成する関数だが、結果で一部正確に反映されないものが存在する。 そのうちの一つがInfinityで∞(無限)という意味だ。 JSON文字列上、∞は表現できないためにnullになってしまう。 (尚、InfinityにはNumber.POSITIVE_INFINITYとNumber.NEGATIVE_INFINITYが存在し、単にInfinityとした場合はNumber.POSITIVE_INFINITYと同義になる) plugout.hateblo.jp 例: コンソールで実行1 > JSON.strin…
【JavaScript】Infinityへの加算及び減算の挙動について
何遍Infinityについて書いているんだと言われたら、何も言えないのだけれど（白目） plugout.hateblo.jp plugout.hateblo.jp ゼロ除算自体が一般的にアンチパターンなので、意外と知らない事も多いなと。 今回はInfinityを使って加算及び減算した場合について備忘録がてら記録しておく。 今更ながらInfinityとは∞(無限)という意味で、JavaScriptではあえて指定しない限りは一般的にゼロ除算を行うと得られる値だ。 正の∞と負の∞が存在しており、それぞれ[Number.POSITIVE_INFINITY]と[Number.NEGATIVE_INFIN…
【JavaScript】HTMLCollectionsでArray.prototype.forEach()などを使用する
備忘録がてら。 ブラウザ上で[document.getElementsByClassName()]等を実行した場合に返却される[HTMLCollections]はArrayのような動きをするが、最低限の機能しか備わっていない。 もし[Array.prototype.forEach()]等を実行したいのであれば、[Array.prototype.forEach.call()]を利用すると実行可能。 ※ Indexed Collectionという規格に沿っていれば利用できるみたい 例:demo1.js Array.prototype.forEach.call(document.getElement…
結構ハマっている人がいるので、整理がてらメモ。 JavaScriptでは変数は型を持たないが、値がデータ型を持つ。 例えば以下のプログラムでは、数値(number)が文字列(string)としてキャストされて文字列結合が行われる。 例1: demo1.js let hoge = 128; // number let fuga = 'abc'; // string let result = hoge + fuga; // string console.log(result); // 文字列として [128abc] が出力される 適当に扱っていてもよしなに扱われることが多いが、理解していないと思わ…
