JavaScriptの小技集 - Qiita
はじめに 初投稿です。 知ってたら便利になる小技が無かったのでまとめました。 「小技が知りたい...だけど検索しても出てこない...！」 そういう時に役立ちます。 比較的古いバージョンのJSでは一部の小技が使えないかもしれません。 随時追加予定です。他に小技をご存じの方はコメント欄にGO。 おことわり この記事は、あくまで"こんなやり方もあるよ"と紹介しているだけなので、何でもかんでもこれらの小技を使うと、かえってコードの可読性を下げる可能性があります。コードサイズと可読性を天秤にかけてどちらが良いかを都度確認しましょう。 記事内の間違った部分の指摘等はこの記事のコメントや編集リクエストでして下さい。 当方コードゴルファーなので、バイト数短縮小技も入れていることをご了承ください（一応該当する節には＊をつけています）。 配列 配列の重複した値を削除1 const meta = ["foo",
あなたが知らないであろう15個の強力なJavaScriptのテクニック🗡🔈🔥
はじめに この記事はこちらの記事の和訳となります。 なお、著者には許可をいただいております。是非原文もご覧ください。 拙訳なので、ご指摘などあればお待ちしております。 Javascriptのバグ修正や答えを求めてGoogleやStackOverflowを探し回るのは楽しくないでしょう🏴☠️。 この記事では、生産性⚡を最大化し、苦痛🩸を最小化する、20個（訳註:正確には15個）の短く、パワフルなJavaScriptのテクニックを紹介します。 それではコードを見ていきましょう🤘 配列の重複を除去 配列から重複した要素を除去します。 const arr = ["a", "b", "c", "d", "d", "c", "e"] const uniqueArray = Array.from(new Set(arr)); console.log(uniqueArray); // ['a',
CSS）z-indexのベストプラクティスを考える
CSSのz-indexプロパティについてツイートしたところ、色んな人から参考意見をいただきました。 要素の重ね順の制御をその場しのぎで乗り切っているWebサイト、実はけっこう多いような気がします。今回はz-indexのベストプラクティスを自分なりに探ってみたいと思います。 z-indexに詳しいゼットインデクサーのみなさま、意見やアドバイスがあれば是非コメントを残していってください。 z-indexについて考えるときの前提 まず、ざっくりと考え方をまとめておきます。ウェブページの要素の重ね順を理解するには「スタッキングコンテキスト（重ね合わせコンテキスト）」を知っておく必要があります。 詳しくはz-indexとスタッキングコンテキストの関係 - ics.mediaがとても分かりやすいのですが、ここではざっくりとした説明だけ載せておきます。 z-indexは数字が大きい方が上にいくとは限らな
jQuery Rowspanizer - 動的にHTMLテーブルのrowspanを設定
これは良いアイディア！ HTMLでテーブルはよく使われます。検索結果やレポーティングなど活躍の幅は広いです。そしてデータを表示する際に、重複した項目はセルを連結して表示するでしょう。しかし、colspan/rowspanをシステムで動的に設定するのは非常に面倒です。 そんな時に使ってみたいのがjQuery Rowspanizerです。指定したテーブルを解析し、重複部分を連結してくれます。 jQuery Rowspanizerの使い方 元の表示です。 このようになります。 JavaScriptで処理を行ってくれるならば、システムはすべての行を出力するだけで良くなります。jQuery Rowspanizerが行ってくれるのはrowspanに限定されますが、同様の仕組みでcolspanに適用するのも難しくなさそうです。 jQuery RowspanizerはjQuery/JavaScript製の
配列で重複する項目を取り除くやつ4種。（配列とかおれおれAdvent Calendar2018 – 18日目） | Ginpen.com
配列とかおれおれAdvent Calendar2018 – 18日目 ありそうでないメソッド、それが重複排除です。 Underscore.jsやLodashには uniq() てのがあって、こんな感じ↓で使えます。
シンプルな操作で複数フォルダ間でも重複ファイルを検索・一括削除できる「Duplicate File Eraser」
長いあいだPCを使っていると、いつの間にか同じ内容のファイルがHDDやSSDのあちこちに保存されていて、ドライブの容量を無駄に消費していることもあるもの。しかし、全ての重複ファイルを自力で確認して消去するというのはなかなか大変です。そんな時に便利なのが重複ファイルを探し出すソフト「Duplicate File Eraser」で、指定したフォルダの中にある重複ファイルや、中身は同一だけどファイル名が違うファイルの削除や移動をサクッと行うことができます。 Home | F2KO Software http://www.f2ko.de/en/index.php 「Duplicate File Eraser」はWindows版、Mac OS X版、Linux版が提供されており、今回はWindows版を使ってみます。なお、ソフトのインストールは必要なく、自分で実行ファイルを「C：¥Program F
Code Quality Checker - プログラムコードの品質チェッカー
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました コードの品質はどう判断したら良いでしょうか。幾つかの判断基準はあると思いますが、複雑さやコードの重複などは挙げられるでしょう。そうしたネガティブな要素が積み重なった結果、バグを含みやすくなると言うことはあると言えます。 今回紹介するCode Quality Checkerはコードの品質チェックを行ってくれるソフトウェアです。 Code Quality Checkerの使い方 Code Quality Checkerはファイルのリストを渡すだけで実行できます。とあるJavaScriptプロジェクトの例。 $ cqc src/**/*.js Number of files: 3 Source lines of code: 203 Duplicate rate: 0.00% High c
アプリ紹介：重複画像を見つけて削除「Photos Duplicate Cleaner」
写真アプリのライブラリにも対応してたんですね！ライブラリからフォルダに書き出してしまってから、このアプリを見つけたので、今回はフォルダを指定してみます。 今回のこのフォルダ、かなりの量の写真が入っています。ちゃんと処理できるのだろうか。。 いや、だいーぶ時間はかかりましたが、ちゃんと処理している模様。2万以上の画像を確認中。 そして、結果がずらっと出ました。いやー、数が多い！ 7000件もの重複が見つかりました。お、意外と「ファイル名は違うけど、まったく同じ写真」ってのも見つけてますね。撮影日とファイルサイズが一致しているものは確実に見つけてくれてますね。 そして、この重複グループがリストできたら、これら左右のどちらかをマークしていかなければなりません。こりゃ、ひとつひとつ見てられんぞ。 と思ったら、どうやら、オートマークという機能があるようです。条件に従って、どちらかをマークしてくれると
遂に登場！Macの「写真」アプリの重複 ＆ よく似た画像を簡単に検索できるアプリ「Duplicate Photos Fixer Pro」 | iTea4.0
使い方は簡単です。まず「Duplicate Photos Fixer Pro」を起動し「Add Photos Library」ボタンを押して任意のライブラリを選択します。ライブラリを選択したら「Scan for Duplicates」をクリックしましょう。 「写真」アプリ内にある画像の枚数にもよりますが、1,000枚以上の写真があっても2〜3分くらいでスキャンが終わり、重複した画像もしくはよく似た画像のサムネイルがリストアップされるので「Auto Mark」ボタンをクリックします。 続けて「Continue」を選択します。 すると重複した画像のどちらかをアプリ側が自動的に選択してくれるので、特に削除しても問題がなければ「Trash Marked」ボタンをクリックします。 すると「写真」アプリ内のなかに「Duplicate Marked Photos」という名前のアルバムが作られ、そのアルバ
神アプリ！Macの重複ファイルを検索・削除してくれるアプリ「Gemini 2」 | iTea4.0
以前、当ブログでMac内の重複ファイルを検索・削除してくれるアプリ「Gemini」をご紹介しましたが、ついにバージョン2へ進化を遂げました！ ▼「Gemini 2」は既述の通り、MacのハードディスクやSSDの中に隠れた重複ファイルを検索し、スマートに削除してくれるアプリです。 ▼ユーザーが気付きにくい重複ファイルを簡単に見つけ出すことができ、重複ファイルを整理することで、Macのストレージの空き容量を増やすことができます。 ▼「Gemini 2」は重複ファイルだけではなく、類似したファイルの検索も可能となりました。 ▼また「写真」アプリや「iTunes」のライブラリ内にある写真や音楽の重複ファイルも検索することができます。 ▼さらに「Gemini 2」は学習機能が搭載されており、使えば使うほど賢くなっていくそうです。 「Gemini 2」の使い方 ▼使い方は簡単です。「Gemini 2」
jQuery：重複しているリストを削除した上で、アルファベット順に並び替えるには？ - 以下のようなHTMLがあるとします。<ulid="... - Yahoo!知恵袋
jQuery：重複しているリストを削除した上で、アルファベット順に並び替えるには？ 以下のようなHTMLがあるとします。 <ul id="HotelNameListUp"> <li><a href="linkB">Hotel B</a></li> <li><a href="linkA">Hotel A</a></li> <li><a href="linkD">Hotel D</a></li> <li><a href="linkB">Hotel B</a></li> <li><a href="linkC">Hotel C</a></li> <li><a href="linkD">Hotel D</a></li> </ul> このHTMLから重複しているリストを削除し、さらにアルファベット順に並べなおし、以下のように並び替えたいのです。 <ul id="HotelNameListUp"> <l
[CSS]重なった複数のパネルを扇状にアニメーションで優雅に開くスタイルシートのテクニック
レッド・イエロー・ブルーの三枚のパネルが重なっており、それをホバーするとそのパネルを扇状に開くスタイルシートのデモを紹介します。 アクションの度に、ぷるっと反動するのが細かい！ Calendar and Clock 実装はけっこう複雑ですが、このインタラクションはかっこいいですね。 日付や時刻の取得、不透明度の変更にJavaScriptを使用していますが、ホバーのアニメーションはスタイルシートで実装されています。 HTML 3つのパネルはdiv要素で、1枚目はノーマル時のカレンダーとホバー時の年と分と日、2枚目はホバー時の時と曜日、3枚目はホバー時の秒と月が要素として配置されています。 <div class="signboard outer"> <div class="signboard front inner anim04c"> <li class="year anim04c"> <sp
jQueryでajax()の重複実行を回避する方法
jQueryでajax()の重複実行を回避する方法を紹介します。 １．問題点 次のような、ajax()メソッドを使って「http://user-domain/foo.cgi」にアクセスし、実行結果を取得するコードがあります。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $(function(){ $('#execute').click(function(){ $.ajax({ url: "http://user-domain/foo.cgi", type: "GET", dataType: 'html', }) .done(function( data ) { $('#foo').html(data); }) .fail(function(
[JS]多階層のナビゲーションを今風にサイドを利用して実装するスクリプト -MultiLevel Push Menu
MultiLevel Push Menuの使い方 アイデアの元となっているのは、こちらのデモ。 MULTI-LEVEL PUSH MENU 実装はより簡単に、オプションも豊富に進化しています。 Step 1: 外部ファイル jquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <link rel="stylesheet" href="multilevelpushmenu.css" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="jquery.multilevelpushmenu.min.js></script> IE8をサポートする際は、Modernizrを加えます。 <script src="//oss.max
background-blend-mode プロパティで背景をブレンドしてみよう
CSS Property Advent Calendar 2013、6日目の記事です。「CSS のプロパティに関することだったら何でも OK です」 とのことでしたが、広く使われているプロパティについて今さら書いても仕方ないし、多分他の人とかぶるしってことで、最近になってブラウザが対応したあまり一般的じゃないプロパティを選択してみました。 それが今回取り上げる、background-blend-mode プロパティです。 Compositing and Blending Level 1 W3C Last Call Working Draft 10 October 2013 3.4.3. The 'background-blend-mode' property ： Compositing and Blending Level 1 background-blend-mode プロパティとは？
Googleウェブマスターツールで「タイトルタグの重複」を減らす方法
Googleウェブマスターツールで「タイトルタグの重複」や「重複するメタデータ」の件数を減らす方法を紹介します。 １．問題点 当ブログで、Googleウェブマスターツールの「検索のデザイン」→「HTMLの改善」で「タイトルタグの重複」「重複するメタデータ」がそれぞれ常時200件ほど表示されています（2013年10月）。 「HTMLの改善」の詳細・改善前（クリックで拡大） 「タイトルタグの重複」とは、以下に示すtitle要素の「タイトルの内容」の部分が、複数のページで同じ内容になっていることをさします。 <title>タイトルの内容</title> また、「重複するメタデータ」とは、以下に示すtitle要素のcontent属性に記述する「ページの説明」が複数のページで同じ内容になっていることをさします。 <meta name="description" content="ページの説明" />
重複配列除外方法
既に使ったidを覚えておく場所を用意して、そこにない場合に追加をするとうロジックで良いと思います。 例えばこんな感じ？ function dedupe(&$in) { $used_ids = array(); $out = array(); foreach ($in as $val) { $id = $val['id']; if (!in_array($id, $used_ids)) { array_push($used_ids, $id); array_push($out, $val); } } return $out; } print_r(dedupe($outdata)); PHPの配列は順序付きのマップのような働きをするらしいのでin_arrayで十分効率が良いと予想します。 http://stackoverflow.com/questions/4730745/does- …
重複ファイルを探し出し、条件を付けて一括で削除できるフリーソフト「AllDup」
パソコンの空き容量をちょっとでも増やしたい場合に、条件（名前・サイズ・作成日・属性など）を付けて重複している不必要な各種ファイルを探し出し、さらに条件（更新時間・名前の長さ・サイズ）に合致したファイルを一括で削除できるフリーソフトが「AllDup」です。Windows 2000・XP・Vista・7・Server 2003・Server 2008で起動できます。 操作方法などについては以下から AllDup - Hard Links Finder Software http://www.allsync.biz/en_download_alldup.php 上記サイトにあるポータブル版の「Server 1」をクリック。 ダウンロードしたZIPファイルをExplzhなどで解凍して、「AllDupPortable.exe」を起動。 操作画面が表示されます。 重複しているファイルを検索するドライブ
画像一枚だけで写真を重ねたようにするチュートリアル | コリス
シンプルなHTMLで画像を配置し、:before, :after疑似要素を使って、写真を重ねたようなエフェクトにするチュートリアルを紹介します。 重ねたエフェクトはホバー時にCSS3アニメーションします。 デモページ ※ホバー時のアニメーションはFirefoxのみです。 実装 HTML HTMLは非常にシンプルです。 ラッパーのdiv要素はWebkit系ブラウザ用で、将来無しでも機能するようになるかもしれません。 <div class="stack"> <img src="image1.jpg" /> </div> [ad#ad-2] CSS スタイルシートは4つのデモのキャプチャと共に、紹介します。 まずは、右端の写真が垂直方向に重なっただけのスタイルシートです。重なりは:before, :afterを使用します。 .stack { position: relative; z-index
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]文字の半分で異なるカラーを指定するCSSのテクニック -こういうのを思いついた時って絶対楽しい！ | コリス![[CSS]文字の半分で異なるカラーを指定するCSSのテクニック -こういうのを思いついた時って絶対楽しい！ | コリス](https://cdn-ak-scissors.b.st-hatena.com/image/square/9c7d78a76d41374af7d5df22544559e0a0efe8ac/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201702%2F2017032701.png)
