【JavaScript】ウィンドウのリサイズ完了後に処理を実行する
こんにちは、Ryohei（@ityryohei）です！ 本記事では、JavaScriptでウィンドウのリサイズ完了後に処理を実行する方法をご紹介しています。 上記の疑問にお答えします。 本記事でやりたいこと タイトルにもあるように、ウィンドウのリサイズ完了後に処理を実行する、です。 JavaScriptでリサイズイベントをイベントリスナーに登録すると、ウィンドウサイズが変更された際にイベントが発火し、処理が走ります。そのためリサイズしている間に何度も処理が実行されることになります。処理内容によってはかなりの負荷をブラウザにかけることになってしまいます。基本的なリサイズ処理はリサイズが完了した後に処理を実行できればいいので、リサイズ完了後に処理が実行されるようにスクリプトを組んでみたいと思います。 早速やってみましょう！ リサイズイベントをイベントリスナーに登録する まずは最初の一歩というこ
Vanilla List • The Vanilla JavaScript Repository
The Vanilla JavaScript Repository Because lighter plugins mean lighter sites Search plugins Search
yare.io – JavaScript で艦隊を動かし戦わせるゲーム
yare.io は、Javascriptプログラムを書いて宇宙戦を戦わせるwebサービスです。 ゲームは一対一の戦い、スピリット(spirit)というユニットを操作して、自分の基地を守りつつ敵の基地を破壊することが勝利条件です。 操作して、と言いましたがマウスなどで直接操作するわけではなく、JavaScript でスピリットがどのように振舞うかをプログラミングし、フィールドに投入して戦わせます。 チュートリアルがあるので、通しでやってみました。 基地の最寄りの恒星でエネルギーを補給させ、それを基地へと持ち帰らせます。 エネルギーをある程度運びこむと、基地から新しいユニット(スピリット)が誕生するので、自分のすべてのユニットを配列で回し、使えるユニットを増やしていきます。 自給ができるようになったら、一定範囲を索敵し、攻めてきた敵のスピリッツからエネルギーを奪うことで撃破します。チュートリア
URLのパラメーターを取得する | iPentec
はじめに JavaScriptでURLのパラメータを取得して利用したい場合があります。 JavaScriptでは、URLのパラメーターを"document.location.search"で取得できます。 ただし、URLのパスの後ろのパラメーターの文字列をまとめて取得することしかできないため、各パラメータの値の取得は取得した文字列を解析する必要があります。 URLSearchParamsを利用する方法 新しいWebブラウザ (Chrome バージョン49以降、Firefox バージョン29以降、Safari バージョン10.1以降など)では、URLのパラメーターを処理する URLSearchParamsオブジェクトを利用できます。 書式 URLSearchParamsオブジェクトの作成は以下の書式を利用します。 プログラム : 指定したパラメーター名の値を取得する コード 下記のHTMLフ
高速かつシンプルで使いやすいJavaScriptアニメーションライブラリ・「luge」 - かちびと.net
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リクエストなどの代わりとします。 今回は２秒間処理をブロックする
プログラミングの幅を広げよう！一段上のPromise活用テクニック - ICS MEDIA
ES2015で登場したPromiseとES2017で追加されたasync/awaitによってJavaScriptのコーディングスタイルは大きく変わりました。Promiseの基本的な使い方を理解していることは「脱初心者」のひとつの指標にもなっているようで、網羅的で優れた解説も数多く存在します。 では、基本をおさえた後の活用方法はどうでしょうか？ 実際のところ実務ではライブラリやフレームワークから返却されたPromiseをそのままawaitするだけ…という使い方がほとんどかもしれません。しかし、これらのライブラリやフレームワークの中で利用されているような高度なPromiseの活用法をマスターすれば、もっと自由なプログラミングができるようになります。 この記事ではPromiseを活用した実践的な例を3つ紹介します。いずれもライブラリやフレームワークに類似の機能を持つものはありますが、仕組みを理解
Splide - アクセシビリティに配慮した軽量・高機能スライダー
アクセシビリティに配慮した軽量・高機能スライダー。 ほかのライブラリに依存せず、Lighthouseのエラーもありません。
How do I get the referrer's domain/host name using JavaScript?
I know I can get the host name of the current page, by simply doing: var myhostname = location.hostname; But how do I get the host name of the referrer? I can get the referrer by var referrer = document.referrer; but unfortunately there's no document.referrer.hostname available in JavaScript. How can I get this value? An example of where this is useful is if somebody clicks a link on google.com. I
JavaScript: split()を使って、テキストを改行で分割する
JavaScriptでtextarea等に入力されたテキストを、 改行で分割して配列に格納したい場合があります。 その場合は split() 関数を使うことで簡単に改行単位で分割できます。 テキストを改行で分割するには次のようなコードになります。 let str = '改行で分割する\nテキスト内容'; // 配列に分割 let arr = str.split(/\r\n|\n/); for (let i = 0; i < arr.length; i++){ console.log(arr[i]); } split() の引数の部分「/\r\n|\n/」は正規表現で、 この場合は「\r\n、\n」のいずれかという意味です。 このように記述することで複数の改行コードのパターン（\r\n、\n）に対応することができます。 テキストエリアの内容を、改行区切りで配列に格納する テキストエリア要素の
クリエイティブコーディングの教科書
ゲームエンジンや3Dソフトウェアを利用して高度な表現ができるこの時代でも、プリミティブな描画や動き、アルゴリズムから学べることは多い。それらをJavaScriptで書くクリエイティブコーディングという形で学べる手引書が本書となる。
【Canvas2Dとは】初心者がまず見るべきサイト・書籍まとめ | 仙台のウェブ制作会社AndHA
【Canvas2Dとは】初心者がまず見るべきサイト・書籍まとめ 公開日 : 2021.10.29 最終更新日 : 2022.10.06 コーディング 「WebGL」が多くのサイトで使われるようになって来ていますが、それに合わせて「Canvas2D」という言葉も多く聞こえて来るようになってきています。 Canvas2Dとは何のことか分からない人から学び初めの人に向けて、見るべき有料サイトや書籍をまとめました！ ぜひ確認してみて下さい！ 【Canvas2Dとは】 canvasタグにおける「getContext(‘2d’)」って何？を説明します Canvas2Dのことを優しく例題を使いながら説明してくれています。 まずはこちらのサイトから概要を掴むのが良いかと思います。 https://blog.framinal.life/entry/2020/03/29/084651 canvasのgetCo
HTML5 video background color not matching background color of website -- in some browsers, sometimes
グリッチ効果を付けれるjQueryプラグイン「mgGlitch」 – bl6.jp
mgGlitchは、CSS3の変換を利用して指定した要素にアニメーショングリッチ効果を付ける非常に軽量なjQueryプラグインです。グリッチ効果とは、「グリッチ・アート」とも呼ばれ、デジタルまたはアナログで発生する意図されたエラーのことを言います。エラーと言っても本来のエラーの意味とは異なり、意図的に発生させた「みせかけのエラー」という意味です。つまり、本来のイメージが知られていれば、よりその効果をユーザーに感じてもらえます。 しかし、写真やテキストなど明らかに本来のものと異なることが分かるものについては、瞬時にその効果を感じてもらえるでしょう。それでは、mgGlitchについて、詳しく見ていきましょう。 mgGlitchの実際のデモは以下から確認できます。 デモ グリッチ効果は、具体的にはどんな場面で見ることができるでしょうか。 メジャーなもので、セキュリティを強化するために使用されてい
JavaScriptの非同期処理をじっくり理解する (3) async/await
対象読者と目的 非同期処理の実装方法は知っているが、仕組みを詳しく知らないのでベストプラクティスがわからないときがある 実行順序の保証がよくわからないので自信をもってデプロイできない変更がある より詳しい仕組みを理解することでより計画的な実装をできるようになりたい という動機で書かれた記事です。同様の課題を抱える人を対象読者として想定しています。 目次 実行モデルとタスクキュー Promise async/await AbortSignal, Event, Async Context WHATWG Streams / Node.js Streams (執筆中) 未定 用語に関する注意 前々回定義した以下の用語を今回も使います。 1 tick ... タスクキューが1周すること。 1 microtick ... マイクロタスクキューが1周すること。 これらの単位は非同期処理の間の相対的な優先
VueもReactもやったことないのでVanilla JSでやってみたSPA - Qiita
Vanilla JSのメリット フレームワークのサイズが大したことないなら、バニラでやるメリットはあるのか？という話になりますが、実際作ってみてバニラの方が優位だった点が１つありました。 それは動作が速いことです。 今回作ったSPAの中に1つ、画面内の要素が多すぎて描画に数秒時間がかかるページがありました。 どれくらい多いかというと、テキストボックス・チェックボックス・プルダウンなどの入力要素が１画面に１万個以上あります。 この画面を高速化したいと思い、試しにVue.jsで同じようなページを作ってみたのですが、比較するとVanilla JSの方が速かったです。 仮想DOMは速いみたいな記事を目にすることがあり、VueやReactはなんとなく速いイメージを持っていたのですが、よく考えてみるとVueやReactだって最終的には画面描画のためにリアルDOMを操作するわけで、それなら必要最小限のリ
話題の爆速CLIツール「Vite」をVue.jsの定番ツール「Vue CLI」と徹底比較！
はじめに 本連載では、JavaScriptを利用して動的なWebページを構築できるフレームワークVue.jsを、データの型指定ができるように拡張されたAltJS（コンパイルしてJavaScriptにする言語）であるTypeScriptで活用する方法を説明しています。前回記事では、Vue.jsのプロジェクト作成や実行などができるCLI（コマンドライン）ツール「Vue CLI」の利用法を説明しました。 一方、Vue.jsのプロジェクト作成や実行ができるツールとして最近話題になっているのが「Vite」です。Vue.jsの作者であるEvan You氏とオープンソースコミュニティで開発されているこのツールは、「ヴィート」（フランス語で「高速」の意味）という名の通り、プロジェクト作成や実行をより高速に行うことを主眼に作られています。Vue.jsだけでなく、Reactなどさまざまな形式のプロジェクトに対
YouTubeの動画をサイトの背景として使用する方法｜東京のホームページ制作会社｜ブラボーウェブ
YouTube動画を背景に使う方法の概要と仕組み Webサイトの背景にYouTubeの動画を使うことで、動きのある印象的な演出を取り入れることができます。このコラムでは、YouTubeの動画をWebページの背景として表示させる実装方法を、初心者の方でもわかるように解説していきます。 本記事で解説する内容 この記事では、以下のような実装方法を扱います。 HTMLとCSSを使った動画表示の基礎 YouTube動画の自動再生・ミュート・ループ設定 YouTube IFrame Player APIを使ったコントロールの無効化 CSSによる全画面表示と背景用の調整方法 スマホなど一部の環境での非対応と代替案 順を追って実装していくことで、YouTubeの動画を背景として自然に表示させる方法が理解できるようになります。 YouTubeを背景動画として使う仕組み YouTube動画をWebサイトの背景
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【公式】ぷよぷよeスポーツ×プログラミング
Enterprise AI, Built Your Way | You.com