【最新】Swiperの使い方・カスタマイズを解説！サンプルやオプション15個付き ー基礎から応用までー | 東京のホームページ制作 / WEB制作会社 BRISK
TOPブログ【最新】Swiperの使い方・カスタマイズを解説！サンプルやオプション15個付き ー基礎から応用までー Webサイトのコーディングをするなら必修とも言えるスライダー。 スライダー実装用のJSプラグインはいろいろありますが、本記事ではその中でもSwiperを使用した実用的なカスタマイズ例をご紹介します。 デモページを見る まずはこちらのデモページをご覧ください。 片方だけはみ出しているスライダー、サムネイルと連動するスライダー、SPだけスライダーにする方法などなど、実際によく必要になる機能を網羅できるようなデモを厳選してご用意しました。 初心者さん向けのかなり初歩的な内容から、いろいろカスタマイズを加えた応用編まで解説していきます。 メインビジュアルの作例5つ（#11 ～ #15）については、Swiperのカスタマイズ方法だけでなく、アニメーションやデザインの参考になればと思い様
JavaScriptにおける this を完全に理解する - Qiita
JavaやKotlin、Swiftなど、多くのオブジェクト指向言語では、this はクラス内メソッドなどで利用され、そのインスタンス自身を指します。 JavaScriptでは挙動が異なります。 本記事では、JavaScriptにおける this の仕様をまとめます。 りあクト！ TypeScriptで始めるつらくないReact開発 第3.1版【Ⅰ. 言語・環境編】を参考にしています。 めちゃくちゃ良書で、JavaScript・TypeScript、Reactについて深堀りされているのでおすすめの本です！ this に関するおすすめルール りあクト！ TypeScriptで始めるつらくないReact開発 第3.1版【Ⅰ. 言語・環境編】では、下の２つを守ることが推奨されています。 this はClass構文内でしか使わない Class構文内では、メソッドを含めたあらゆる関数の定義をアロー関数
body-scroll-lock.js「すべてのブラウザでスクロールのロックしたるで」←こいつ超有能 - Qiita
この記事に書いてあること JavaScriptプラグインのbody-scroll-lock.jsの使い方について サイトリンク GitHubリポジトリ npmサイト body-scroll-lock.jsとは？ ターゲット要素（モーダル/ライトボックス/フライアウト/ナビメニューなど）のスクロールを中断せずに、ボディスクロールを禁止にするプラグインです 対象ブラウザ iOS Mobileおよびタブレット、Android、デスクトップSafari/Chrome/Firefox どんな時に使うか？ 例えばモーダルを表示した時に、背景を固定したいといった場合に使うことができます。 モーダルの中だけスクロールを有効にして、背景固定を実現するなんてことも簡単に実装可能です。 なぜ使うの？ スクロールのロックは簡単そうに思えて、実は結構面倒くさい処理内容です。 例えば、 overflow:hidden
イベントループとプロミスチェーンで学ぶJavaScriptの非同期処理
JavaScript の非同期処理は非常に難しく、その難しさの原因は「制御の流れ」が掴みづらいことにあります。 この本では非同期処理を理解するために必要な概念であり、仕組みでもあるイベントループでプロミスチェーンの処理がどのように行われるかをクイズ形式で学ぶことによって、非同期処理の「制御の流れ」を掴めるように訓練します。 知識面については中枢となるイベントループの機構から、実行環境と API、async/await や Promise.all などの一通りの範囲を学習し、最終的には並列化や順序づけて反復処理を行うための制御方法と TypeScript での型注釈までを網羅します。
ホバーの分岐にはメディアクエリのwidthではなくhoverを使おう
メディアクエリにはhoverプロパティがあり、ユーザーがホバーに対応しているデバイスかどうかの判定が行えます。 これを使用することによって、画面幅での分岐が必要なくなるためタブレットのlandscape含めた対応も容易になります。 また、メディアクエリはJavaScriptからもmatchMediaという関数を使う事で使用することが可能なのでCSSとJavaScriptでの利用例を載せていきたいと思います。 CSS CSSでの利用は簡単ですね .link { background: rgba(0, 0, 0, 1); } @media (hover: hover) { .link:hover { background: rgba(0, 0, 0, 0.7); } }
JavaScript オブジェクト配列をsqlのgroup byのように集計する
JavaScriptのオブジェクト配列（jsonも同様）をSQLのGROUP BYのように集計します。 具体的には以下のようなことができるようになります。 var arr = [ { name: 'バナナ', category: 'フルーツ', price: 100 }, { name: 'りんご', category: 'フルーツ', price: 120 }, { name: 'みかん', category: 'フルーツ', price: 30 }, { name: 'トマト', category: '野菜', price: 200 }, { name: 'キャベツ', category: '野菜', price: 150 } ]; // 集計後 // カテゴリーごとの個数（要素数）と金額を集計 [ { category: 'フルーツ', count: 3, price: 150 },
今度こそ理解できる！ JavaScriptの参照が完全に分かる記事 - Qiita
const arr1 = [1, 2, 3]; // (中略) const arr2 = arr1; arr2.push(4); // （中略） console.log(arr1); // [1, 2, 3, 4] ワイ「何や、配列を書き換えたら別の変数に入れた配列も一緒に変化したで！ JavaScriptのバグやな！」 上司「バグってんのはお前の頭やろ！ もう一回勉強し直さんかい！」 ※この記事は全編やめ太郎さんリスペクトでお送りする2次創作的な記事です。 参照について調べるワイ ワイ「なんや調べたら参照がどうのとか言ってる記事が出てきよるで……。よく分からんから周りの人に聞いてみよか」 同僚「参照ってのはオブジェクトのことやで（大嘘）」 上司「JavaScriptの関数引数は値渡しと参照渡しがあるんや（大嘘）」 ハスケル子「参照っていうのは書き換え可能なレコードのことですよ」1 ワイ「
JavaScriptの参照レコードとthisバインディング
JavaScriptの仕様には「参照レコード」という概念があります。参照を意識することで、JavaScriptにおけるメソッド呼び出しの理解と左辺式の評価順序の理解を同時に深めることができます。本稿ではこの「参照レコード」の動機と詳細の説明を試みます。 ※ 本記事ではECMAScriptの規格で「参照レコード」と呼ばれている概念を説明します。JavaScriptのオブジェクトは参照渡しのような使い方ができますが、これは本稿で説明する「参照」とは少しだけ異なります。 参照レコードの目的 JavaScriptにおける参照レコードは以下の2つの目的で存在しています。 左辺式の中間評価結果を表現するため。 メソッドのレシーバーを決定するため。 左辺式の中間評価結果とは たとえば a[f()] += 2; というコードを考えます。 function f() { console.log("f()");
モダンフロント開発に必須の知識(ES2015~ES2023まとめ + 高階関数) - Qiita
はじめに モダンフロント開発に必須の知識であるES2015〜以降の記法と、実務でよく使用される高階関数について、自分の中で改めて復習、整理しておきたいと思います。 それぞれの項目に★~★★★の重要度も記述しています。 ★★★ => 必ず覚えておくべき ★★ => 覚えておくべきだが、使う場面が限られる ★ => 知識としては知っておいた方が良い 現在フロントエンドエンジニアの方やフロントエンジニアになりたての方、フロントエンドエンジニアを目指して勉強中の方に読んでいただけたら幸いです。 ES(ECMAScript)とは？ JavaScriptの標準仕様。 現在ブラウザで使われているJavaScriptは、ECMAScriptの仕様に則って開発されています。 JavaScriptは他の言語のようにversionなどが存在せず、「ECMAScriptのversion~~に対応しているJavaS
removeEventListenerの削除関数を保存しておこう 関数オブジェクトの落とし穴 - Qiita
<button id="alert_button">アラートボタン</button> <button id="remove_button">削除ボタン</button> function alert_fun(e) { alert('test'); } document.addEventListener('DOMContentLoaded', function () { alert_button.addEventListener('click', e => alert_fun(e)); remove_button.addEventListener('click', function () { alert_button.removeEventListener('click', e => alert_fun(e)); }); }); 削除ボタンを押したら、removeEventListenerを
【JavaScript】ウィンドウのリサイズ完了後に処理を実行する
こんにちは、Ryohei（@ityryohei）です！ 本記事では、JavaScriptでウィンドウのリサイズ完了後に処理を実行する方法をご紹介しています。 上記の疑問にお答えします。 本記事でやりたいこと タイトルにもあるように、ウィンドウのリサイズ完了後に処理を実行する、です。 JavaScriptでリサイズイベントをイベントリスナーに登録すると、ウィンドウサイズが変更された際にイベントが発火し、処理が走ります。そのためリサイズしている間に何度も処理が実行されることになります。処理内容によってはかなりの負荷をブラウザにかけることになってしまいます。基本的なリサイズ処理はリサイズが完了した後に処理を実行できればいいので、リサイズ完了後に処理が実行されるようにスクリプトを組んでみたいと思います。 早速やってみましょう！ リサイズイベントをイベントリスナーに登録する まずは最初の一歩というこ
yare.io – JavaScript で艦隊を動かし戦わせるゲーム
yare.io は、Javascriptプログラムを書いて宇宙戦を戦わせるwebサービスです。 ゲームは一対一の戦い、スピリット(spirit)というユニットを操作して、自分の基地を守りつつ敵の基地を破壊することが勝利条件です。 操作して、と言いましたがマウスなどで直接操作するわけではなく、JavaScript でスピリットがどのように振舞うかをプログラミングし、フィールドに投入して戦わせます。 チュートリアルがあるので、通しでやってみました。 基地の最寄りの恒星でエネルギーを補給させ、それを基地へと持ち帰らせます。 エネルギーをある程度運びこむと、基地から新しいユニット(スピリット)が誕生するので、自分のすべてのユニットを配列で回し、使えるユニットを増やしていきます。 自給ができるようになったら、一定範囲を索敵し、攻めてきた敵のスピリッツからエネルギーを奪うことで撃破します。チュートリア
URLのパラメーターを取得する (JavaScript プログラミング)
目次1 概要2 URLSearchParamsを利用する方法2.1 書式2.2 プログラム : 指定したパラメーター名の値を取得する2.2.1 コード2.2.2 解説2.2.3 実行結果2.3 プログラム : パラメーター名、値を列挙して取得する2.3.1 コード2.3.2 解説2.3.3 解説2.3.4 実行結果3 document.location.search の値を文字列処理してパラメーターを取得する方法3.1 プログラム例3.1.1 コード3.1.2 解説3.1.3 表示結果 JavaScriptでURLのパラメーターを取得するコードを紹介します。 概要 JavaScriptでURLのパラメータを取得して利用したい場合があります。 JavaScriptでは、URLのパラメーターを"document.location.search"で取得できます。 ただし、URLのパスの後ろのパ
高速かつシンプルで使いやすいJavaScriptアニメーションライブラリ・「luge」
lugeは高速かつシンプルで使いやすいJavaScriptアニメーションライブラリです。プラグインを追加して拡張する事も可能です。 読み込むだけでhtmlタグに自動でデバイスやブラウザのclassも付与されるので異なる環境での挙動の微調整等もしやすくなっています。 <link rel="stylesheet" href="luge.css"> <script src="luge.js"></script>使い方も簡単です。上記のようにファイルを読み込んで指定されたカスタムデータ属性を付与する、といった流れで実装出来ます。ただし、CSSは組み込みのアニメーションが不要なら読み込む必要はないそうです。 サイトプリローダー、スクロールに応じたアニメーション表示、ページ遷移のエフェクトなど、よく見かけるアニメーションのあれこれを管理できるのでアニメーションに時間を取られたくない開発者の方にお勧めで
Javascriptで同時に非同期処理を行う | DevelopersIO
Promise.allを使用して複数の非同期処理をうまく扱う方法について整理しました。 こうすることで多数のHTTPリクエストなどを同時に送り、処理することが可能になります。 はじめに JSでは非同期処理を使用することでHTTPリクエストを送った際にレスポンスが帰ってくるまでの間に別のリクエストを送ることができます。 なのでタイトルには同時と書いてありますが、厳密には同時ではありません。 ただ、こうすることで複数のリクエストをすばやく処理することが可能です。 しかし、サーバーに負荷をかけたくないなどの理由から同時にリクエストを送る数を制限する必要があると思います。 今回はそんな場合にリクエストをバッチ化して処理する方法についても整理してみます。 準備 今回はwait関数を作成し、一定時間待機させるような処理を利用して、HTTPリクエストなどの代わりとします。 今回は２秒間処理をブロックする
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[Qiita] gulp & browserify で 汎用的に 複数のエントリーポイントを管理する - ラノララク
How to group an array of objects through a key using Array reduce in javascript
JavaScript Promiseの本
Vanilla List • The Vanilla JavaScript Repository
【公式】ぷよぷよeスポーツ×プログラミング
