オブジェクトの値をコピーするObject.assign() - 30歳からのプログラミング
JavaScriptでは、オブジェクトが格納されている変数を他の変数にコピーすると、そのオブジェクトへの参照がコピーされる。 そのため、元となるオブジェクトの値を変更すると、コピー先のオブジェクトにも変更が反映されてしまう。逆も然り。 let obj1 = {value:'hoge'}; let obj2 = obj1; obj1.value = 'fuga'; console.log(obj2); // { value: 'fuga' } だがES2015で追加されたObject.assign()を使うと、参照ではなく値をコピーできる。 値が同じだけの全く別のオブジェクトなので、一方で行った変更の影響は、もう一方には及ばない。 let obj1 = {value: 'hoge'} let obj2 = Object.assign({}, obj1); console.log(obj2);
JavaScriptでオブジェクトのコピー・合体ができるObject.assign()が便利
JavaScriptでオブジェクトのコピー・合体ができるObject.assign()が便利 2018/6/7 2018/6/21 JavaScript, プログラミング 真新しい内容でもないのですが、最近JavaScriptに触れている中でよくObject.assign()について触れる機会があったので、ブログに記録しておこうかなと思います。 オブジェクトのコピー・合体ができるObject.assign()は本当に便利だなーと思いますよ！ ちなみにこの記事は、JavaScriptのオブジェクトについて、書き方をご存知の方を対象としていますので、その点ご注意くださいね！ JavaScriptにおける参照渡しを理解する Object.assign()を理解する上で必要なのが、JavaScriptにおける「参照渡し」の仕組みを理解することです。 これを理解しないと、Object.assing(
Flow Type Cheat Sheet - SaltyCrane
Flow is a static type checker for JavaScript. This is a list of Flow types generated from the source code in https://github.com/facebook/flow/tree/v0.111.3/ The script to generate this list is on github. Fixes welcome. See also my TypeScript cheat sheet, TypeScript React cheat sheet, and Docker cheat sheet. There are separate sections for "private" or "magic" types with a $ in the name. See the no
スクロール位置取得方法をいい加減忘れないようにメモ - Qiita
const target = document.querySelector('el').getBoundingClientRect().top; 上記の場合、要素の上端がブラウザの表示領域の上端にきたときに値が０となる。 window.innerHeight window.innerHeightは現在のブラウザの高さを取得する getBoundingClientRectはブラウザの上端の位置を境界とするため、ブラウザの下端で判断したい場合にこれを利用する window.pageYOffset ブラウザの上端を基準とした縦方向のページのスクロール量を取得する。 getBoundingClientRectで取得した値にこの値を足した値がターゲット要素の絶対位置になる。 example //現在のブラウザ表示領域の上端からの相対距離(要素の上部がブラウザの一番上にきたときに0になる) const
.matchMedia()でJSでもメディアクエリを使って条件分岐する | SPYWEB
if (matchMedia('(max-width: 798px)').matches) { // ウィンドウサイズが798px以下のとき } else { // それ以外 } .matchMedia() を使うことでCSSのメディアクエリのように条件分岐することができます。しかし、この記述だと ページが読み込まれた時 にしか実行されません。CSSのメディアクエリはウィンドウサイズを変更したらスタイルが適用されますよね。 var mediaQuery = matchMedia('(max-width: 798px)'); // ページが読み込まれた時に実行 handle(mediaQuery); // ウィンドウサイズが変更されても実行されるように mediaQuery.addListener(handle); function handle(mq) { if (mq.matches)
JavaScript のスニペット集 | knooto
注意 コードのライセンスは CC0 (クレジット表示不要、改変可、商用可) です。 下記のページにも JavaScript 関係のスニペットがあります。 JavaScript DOM のスニペット集 Node.js のスニペット集 できるだけ素の IE11 以上で使用できるように調整しています。(他の想定ブラウザは Edge, Chrome, Firefox) スニペット オブジェクトのソート 昇順ソート (id) const data = [ { id: 1, name: '山田太郎' }, { id: 3, name: '斎藤花子' }, { id: 2, name: '鈴木次郎' }, ]; data.sort(function(aObj, bObj){ const a = aObj.id, b = bObj.id; return ((a < b) ? -1 : ((a > b) ?
交差オブザーバー API による要素の表示時間設定 - Web API | MDN
この記事では、ページのコンテンツ間に多数の広告が散在している模擬ブログを作成し、その後交差オブザーバー API を使用して、各広告がユーザーに表示される時間を追跡します。表示時間の 1 分を超えた広告は、新しい広告と置き換えられます。 この例の多くの側面は実際の使用状況とは一致しませんが（特に記事はすべて同じテキストであり、データベースからは読み込まれません。また、ほんの一握りの単なるテキストのみの広告が配列から選択されます）、これは自分のサイトに交差オブザーバー API を適用する方法をすばやく学ぶために十分な API を理解できるようにするためです。 この例で、広告の表示状況を追跡するという概念が使用されているのには、それなりの理由があります。ウェブ上の広告で Flash やその他のスクリプトを最もよく使用するのは、課金や収益の支払いのために、それぞれの広告が表示されている時間を記録す
Scroll to the future—Martian Chronicles, Evil Martians’ team blog
If you’re interested in translating or adapting this post, please contact us first. Everything you always wanted to know about implementing scrolling but were afraid to ask. We have scrolled to the bottom of modern web specifications to take you on a whirlwind tour of latest CSS and JavaScript features that make navigating around a single page smooth, beautiful and less resource-hungry. Most of th
Window.requestAnimationFrame() - 60fpsの間隔で繰り返し処理を実行する | DOMリファレンス
2017/10/14 requestAnimationFrame()は、Windowのメソッドです。アラートを表示します。60fpsの間隔で繰り返し処理を実行します。繰り返し処理という点ではWindowOrWorkerGlobalScope.setInterval()と目的が同じですが、こちらはアニメーションを想定しているため、ブラウザがアクティブでない時は処理を一時停止するなどCPUメモリを節約してくれます。繰り返し処理はcancelAnimationFrame()で中止できます。 概要名前requestAnimationFrame所属WindowIDLunsigned long requestAnimationFrame(FrameRequestCallback callback); callback FrameRequestCallback = void (DOMHighResTim
ESDocという(多分)モダンなドキュメンテーションツールの紹介 - maru source
こんにちは丸山@h13i32maruです。 僕は2015年からESDoc*1というJavaScript向けのドキュメンテーションツールを開発しています。 https://esdoc.org https://github.com/esdoc/esdoc Star 最初のリリースから2年、昨日ようやくv1.0をリリースできました🎉 いやー、ここまで長かったです。今ではRxJSやSketchAPIなど、様々なツールで使用されています。 この2年間、ESDocは2つのゴールを目指して開発してきました。 ドキュメントの作成・メンテナンスを快適にする（ドキュメントを書くの楽しい！という状態） ソフトウェアの使い方を簡単に理解できるドキュメントを作成する（ソースコード読まなくても大丈夫！という状態） この2つを満たすためにESDocは色々な機能を提供しています。 今日はそれらの機能の中でも(多分)モダ
MozillaのスクレイピングフレームワークFathomを試してみる - たけぞう瀕死ブログ
こちらのOSDNの記事で知ったのですが、MozillaでFathomというJavaScript用のスクレイピングフレームワークを開発しているようです。仕事でクローラーを作ったりしていたこともあり、面白そうだと思ったので軽く調べてみました。 mag.osdn.jp 以下のGitHubリポジトリで開発されています。GitHub Pagesに詳しいドキュメントもあります。 github.com OSDNの記事で触れられている開発者のErik Rose氏のブログエントリはこちら。 hacks.mozilla.org ドキュメントやErikさんのブログエントリなどをざっと眺めてみたところ、それほど複雑なものではなく、ある程度曖昧なルールとスコアリングを定義しておき、最もスコアの高い要素の選択するというのが基本的なコンセプトのようです。 なにはともあれ試してみます。まずは適当なディレクトリを掘り、np
この素晴らしい Vue.js に祝福を！
Vue.js Tokyo v-meetup="#3" での発表資料です。
Intersection Observer を用いた要素出現検出の最適化 | blog.jxck.io
Intro スクロールによる DOM 要素の出現などを効率よく検知するため、新しく Intersection Observer という API が追加された。 この API の使い方と、本サイトへの適用について記す。 要素交差(intersection)の検出 ページをスクロールしていく過程で、特定の DOM が画面に出現したことをフックしたいケースがある。 代表例は 画像の遅延読み込み であり、初期ロードでは画像の取得を行わずスクロールしていく過程で順次取得する手法である。 特に画像の多いページでは表示に必要なリソース取得のみに最適化でき、初期画面表示などでは効果が大きいとされる。 これを実装するのに必要なのは、「 <img> 要素が出現しているかどうか」であるが、本質的には「画面外にあった <img> が viewport と交差したか」を取得することになる。 つまり、 要素出現の取得
大量の要素を高速に表示するためのバーチャルレンダリング入門 / Virtual Rendering Introduction
第68回HTML5とか勉強会の資料です。
Lottie
In the past, building complex animations for Android, iOS, and React Native apps was a difficult and lengthy process. You either had to add bulky image files for each screen size or write a thousand lines of brittle, hard-to-maintain code. Because of this, most apps weren’t using animation — despite it being a powerful tool for communicating ideas and creating compelling user experiences. One year
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
#9 window.matchMedia
Build succeeding with webpack fails with webpack-dev-server (Unexpected token) · Issue #1101 · webpack/webpack-dev-server
Workbox Broadcast Cache Update | Workbox | Google Developers
GitHub - avajs/ava: Node.js test runner that lets you develop with confidence 🚀
複雑なJavaScriptアプリケーションに立ち向かうためのアーキテクチャ
