Read Article
JavaScript：sort()を用いた並び替え方法のサンプル
JavaScriptで配列内の要素を並び替えたい（ソートしたい）場合に使用する`sort()`メソッドは、デフォルトでは各要素の文字列比較に基づいて辞書順にソートするため、多くの場合は利用する際に何らかのルールを指定すると思います。いずれも簡易的にはなりますが、その何らかのルールを用いた`sort()`の記述サンプルを紹介します。
Tag : JavaScript
- 57 Articles -
Read Article
JavaScript：配列内の要素を指定した要素数毎に分割する方法
JavaScriptで配列内にある要素を指定した数毎に複数の配列へ分割する方法です。動きとしてはPHPの`array_chunk()`のイメージで、実行後は指定した要素数が格納された配列をまとめた配列（二次元配列）が作られます。
Read Article
JavaScript：filter()を使って配列内の重複要素を削除・取得したり、2つの配列から共通要素を取得する方法
JavaScriptで配列内の重複要素を削除・取得、配列内の重複していない要素を取得、2つの配列から共通要素・共通していない要素を取得する方法です。中には別の方法を用いることでもっと短いコードで実装できるのもありますが、ここではいずれも`filter()`メソッドを使った場合になります。
Read Article
JavaScript：配列内の要素をシャッフル（ランダムソート）する方法
JavaScriptで配列内の要素をシャッフル（ランダムソート）する方法で、理論上は偏りなくシャッフルできるアルゴリズムとして有名な「Fisher–Yates shuffle」を用いたものになります。
Read Article
JavaScript：作成・取得・追加・削除・各要素への処理など、配列に関する基本操作のまとめ
JavaScriptで複数のデータを取り扱いたいときに使う配列には多くのメソッドが用意されており、それらを単独または複数組み合わせて使用することで配列に様々な処理・操作を行うことができます。ただ、JavaScriptを勉強し始めたとかこれから配列について勉強するという場合に、とりあえず漠然とメソッドを覚えてと言われても抵抗がある人もいると思うので、どんな処理ができるかやどんなメソッドがあるのかが少…
Read Article
console.log()だけじゃない、覚えておくとデバッグ効率の向上に繋がるConsole API
JavaScriptのデバッグ時などに`console.log()`を利用する人は多いと思いますが、Console APIには他にも呼び出された回数をカウントしたり経過時間を確認したりといった便利なものが複数用意されています。覚えておくとデータの中身を把握しやすくなったりデバッグ効率の向上に繋がると思うので、普段からJavaScriptを触ってはいるけど使ったことがないという人は試してみてください…
Read Article
Vue.jsを用いたサンプルが数多くまとめられている「Vue.js Examples」
「Vue.js Examples」は、Vue.jsを用いて実装された様々なサンプルがまとめられているサイトです。タグでの分類もされているので、目的のタイプやジャンルで探すことも容易だと思います。
Read Article
Vue.js関連の各種リソースがまとめられた「VueToolbox」
「VueToolbox」は、Vue.jsに関係するフレームワーク・コンポーネント・ジェネレータ・ユーティリティなどの各種リソースがまとめられているサイトです。
Read Article
slickのカレントクラスを利用した実装サンプル
手軽にカルーセルを実装できるjQueryプラグイン「slick」には、現在表示されているスライド（表示の仕方やオプションの指定によって付与の対象となる位置は変わります）に対して`.slick-current`というclassが付与される作りになっており、これを利用することでCSSを少し追記するだけでもいろいろな見せ方が可能です。そこで今回は手軽にできて且つ個人的にも利用することが多い実装サンプルを…
Read Article
slickのページングにjQueryを使ってイメージを設定する方法
引き続きjQueryプラグイン「slick」に関するTipsで、ページングにイメージを設定したいときにjQueryを使ってメインスライドのイメージをそのまま使い回したり、ページング部分のHTMLを記述する手間を省いて少しでも楽して設定する方法です。
Read Article
slickでスライド総数と現在何枚目が表示されているかをカウント表示する方法
使い方次第で簡単に様々なタイプのカルーセルが実装でき、オプションやイベントも豊富に用意されているのが特徴のjQueryプラグイン「slick」で、スライド総数と現在何枚目が表示されているかをそれぞれカウント表示させるカスタマイズを紹介します。
Read Article
ボタンにユニークなホバー・クリックエフェクトを付けたいときに参考になるエフェクトサンプル 10
近年多くのサイトで採用されているパッと見がシンプルなボタンデザインでも、ホバーやクリックぐらいは少しユニークな感じにしたいと思ったときに参考になりそうなエフェクトをCodePenにアップされているデモから紹介します。そのまま参考にさせてもらうだけでなく、さらに自分なりにアレンジを加えてみたり、あとは紹介しているものを組み合わせてみても面白いエフェクトができそうです。