[JS] アニメーションを行うのに、setTimeoutよりもrequestAnimationFrameを使ってみよう - YoheiM .NET
[JS] アニメーションを行うのに、setTimeoutよりもrequestAnimationFrameを使ってみよう こんにちは、@yoheiMuneです。 JavaScriptを用いてアニメーションを行う際に、setTimeoutやsetIntervalを使ってアニメーションループを実装することが多いと思いますが、 最近使えるようになってきたrequestAnimationFrameを使うと、よりいい感じにアニメーションを行うことが出来ます。 今日は、requestAnimationFrameという機能についてブログを書きたいと思います。 requestAnimationFrameとは requestAnimationFrameとは、setTimeoutと似たような機能で、ブラウザの次の描画の際に実行したい関数を指定することで、 ブラウザが次回描画時に呼び出してくれる機能です。 以下の
![[JS] アニメーションを行うのに、setTimeoutよりもrequestAnimationFrameを使ってみよう - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/d323a2b7291473a06ed756db826bc68649a55ebd/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F249.jpg)
イメージで伝われ！図解JavaScriptの非同期処理 - メモを揉め
ものすごい久しぶりのブログ更新になってしまいましたが、今回はJavaScriptの非同期処理について書いてみたいと思います。 このテーマはうまく説明できない部分が毎回ちょいちょいあるのですが、こうしてまとめることで頭の中が整理されていくということもあるので、最後まで頑張りたいと思います。 前提としてブラウザの実装の詳細や仕様については分からない部分も多いため、間違っている部分もあるかもしれません。 もし、お気づきの点などありましたら、教えていただけると助かります。 目次 目次 同期と非同期の比較その1 同期的実行 非同期的実行 同期的実行 非同期的実行 同期と非同期の比較その2 同期的実行 非同期的実行 並行処理と並列処理 非同期API 非同期APIの特徴 その他の非同期API addEventListenerに渡したコールバックの同期的実行 非同期処理のユースケース コールバック Pro
js/ window.requestAnimationFrame 解説してみた : AzumaのWeblog
対象読者 JavaScriptの基礎を理解している人 [toc] 概要 アニメーションの原理 一般的に、アニメーションはどのような仕組みで実現されているのでしょうか。身近な例をあげれば、パラパラ漫画やTVアニメです。イラスト(静止画)をパラパラめくることによって動くアニメーションになります。パラパラ漫画・TVアニメもJavaScriptも原理は全く同じです。 TVアニメの場合、おおよそ1秒間に30枚の画像が入れ替わります。従って、一枚分の表示時間はというと、1000ms(ミリ秒) ÷ 30枚 ≒ 33ms/枚になります。 1秒 = 1000ミリ秒 // 視認性向上のため、アルファベット表記に変えると… // s(second): 秒, ms(milisecond): ミリ秒 1s = 1000ms // 1枚分の時間は… 1s / 30枚 = 1s / 30frame //「枚」を「fra
JavaScriptのrequestAnimationFrameでアニメーションを自由自在に操る - Qiita
はじめに Webページをアニメーションさせようとしたときに、選択肢として楽なのは CSSアニメーション jQueryアニメーション この辺だろうか。 これらは、以下の情報を指定することで、途中の状態をよしなにやってもらうものです。 始点 終点 時間 動かし方 ただ今回は、よしなにやってもらうのではなく、途中の状態も自分で指定する！という自由自在への道を開こうと思います。 自由自在の道にも更なる選択肢 よし、じゃあJavaScriptで自由自在アニメーションを実装しよう！ってなったときに、どういう風にするかっていうのざっくり言うと、 ループを回す 経過時間や距離によって状態を算出し、要素に反映する っていう感じに進むわけです。 じゃあ早速ループを回そー！・・・ん、ループ？ さあ、ここでループの回し方が複数あって迷うっていうイベントが発生します。 僕らを悩ませるループ さあさあみんなで声を揃え
[JS][CSS3] jQuery を使わずに fadeIn / fadeOut のアニメーションを実装する方法
Modified 2014-09-20 更新情報 setTimeout を使ってフェードイン・アウトするコードを旧IEでも動くコードへ書き直しました。 jQuery を使わずに、CSS3・requestAnimationFrame メソッド・setTimeout 関数で fadeIn / fadeOut のアニメーション表現を行うということをやってみました。jQuery を使えば fadeIn()、fadeOut() だけの記述で済むことですが、いざそれを使わずにとなると大変だなという印象です…。 各サンプルは、マウスオーバー時にフェードアウト・マウスアウト時にフェードインします。 HTML は共通で以下のようになっています。 <div id="box">FadeIn/Out</div> CSS3 でフェードイン・アウトする opacity の変化を transition プロパティでアニ
![[JS][CSS3] jQuery を使わずに fadeIn / fadeOut のアニメーションを実装する方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/86e81ff91fa6b313217fdb231a7e53f682b53caf/height=288;version=1;width=512/https%3A%2F%2Fmemocarilog.info%2Fwp-content%2Fuploads%2F2014%2F03%2Ficon.jpg)
ブラウザレンダリングの仕組み - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 概要 webサービスを公開するにあたって必ず使われることになるのがブラウザです。ブラウザがユーザーにwebページを表示する仕組みを理解することで、フロントエンド開発に役立てたり、ページ表示までのレスポンスの改善などに役立てていきたいと思い、今回ブラウザのレンダリングの仕組みの基本事項についてまとめました。 レンダリングの流れ ユーザーがwebブラウザにURLを入力すると、ブラウザはURLを元に指定のサーバーにTCP/IPプロトコルに基づいてリクエストを送ります。その後サーバはクライアントに対してレスポンスします。以降のレスポンスとして受
JavaScript/TypeScriptの例外ハンドリング戦略を考える - Qiita
PySpa統合思念体です。あと、 @yosuke_furukawa にも協力いただきました。 基本的に、あまりエラーの種別を細かく判定してあげることはJavaScriptでは今までやってこなかったのですが、ちょっとしたメタデータを乗っけてあげるとか（例えばリトライ回数）、何か凝ったことをしたくなったらこういう方針でやればいいのでは、という試行錯誤録です。 エラーと例外の区別が必要か この手の話になると、エラーと例外の違いとか、こっちはハンドリングするもの、こっちはOSにそのまま流すものとかいろんな議論が出てきます。このエントリーではエラーも例外も差をつけずに、全部例外とひっくるめて説明します。 例外というのはすべて、何かしらのリカバリーを考える必要があります。 ちょっとしたネットワークのエラーなので、3回ぐらいはリトライしてみる 原因: ネットワークエラー リカバリー: リトライ サーバー
async/awaitを利用したコードのエラーハンドリング - Qiita
async/awaitを使ったコードのエラーハンドリングのもやもや es6で導入されたasync/await、皆さん使われていますか？ かつてのコールバック地獄から始まり、Promiseを経てこのasync/awaitが使えるようになったことで、非同期処理はとてもシンプルに書けるようになりました。 しかしこのasync/awaitですが、特にexpressなどを使ったサーバーサイドで書いている時にエラーハンドリングどうしたら良いか困ったりした経験はないでしょうか？ 内部的にはPromiseが使われているので、要はPromiseのエラーハンドリングと同じなのですが、僕は当初もやもやしていました。 もやもやその1： catchした後も実行が止まらない… 例えば下記みたいなコードを書いた経験がある方もいるのでは？ 私も最初書きましたｗ const getItem = async(req, res
Promiseでエラーハンドリングのどういうところを解決できるのか？ - mookjp.io
Promiseでエラーハンドリングのどういうところを解決できるのか？ Jul 6, 2016 ( Feb 11, 2022 更新 ) このセクションはメモ書きです。 確実な情報ではなかったり、文章自体が書き途中のためところどころおかしかったりしますが、随時更新が入っていきます。 清書したものは別途、ブログ記事として移動します。 Node.jsのコード中でthrowされた場合、try-catchを入れないとuncaughtExceptionとなる。 また、EventEmitterでon('error')を定義していない場合もemit('error')の内容がthrowされるため、同様にuncaughtExceptionになる。 uncaughtExceptionが発生するとNode.jsはプロセスを終了する。 on('uncaughtException', err => {})で検知はできる
Async/await
“async/await” と呼ばれる、より快適に promise を利用する特別な構文があります。驚くほど簡単に理解し、使用することができます。 Async 関数async キーワードから始めましょう。次のように関数の前に置くことができます:
Promise でのエラーハンドリング
promise チェーンはエラーハンドリングに優れています。promise が reject されると、制御は最も近い reject ハンドラに移ります。この動きは実際に非常に便利です。 例えば、下のコードでは URL が誤っており(存在しないサイト)、.catch がエラーをハンドリングします: fetch('https://no-such-server.blabla') // rejects .then(response => response.json()) .catch(err => alert(err)) // TypeError: failed to fetch (エラーメッセージ内容は異なる場合があります) ご覧の通り、.catch は直後である必要はありません。1つまたは複数の .then の後に現れるかもしれません。 また、サイトはすべて問題ありませんが、レスポンスが有効
指定した範囲の整数配列の作り方 in JavaScript ES6 - 無駄と文化
この記事は原文: Array Number Ranges in JavaScript ES6 を、著作者であるDavid Arvelo氏の許可を受けて翻訳したものです。 注意 この記事の公開後、ECMAScriptの技術委員会によりリスト内包表記はES6の仕様から削除されました。 この記事はサポート予定の他の機能についても言及しているため、未編集のままにされています。 ここ数日間、私はECMAScript 6について深く掘り下げて学ぶ日々を過ごしました。ES6は、ES5と比較してとても素晴らしく、ES6が近い将来に使えるようになる事によるWebの可能性に興奮を覚えました。 実行環境がどうであれ、あなたがJavaScriptプログラマであれば(パッと見は難しく感じても)ES6の新機能を学ぶことには大きな価値があります。なぜなら、イテレータ, ジェネレータ, クラス定義, ブロックスコープ,
Why Is `Export Default Const` invalid?
I see that the following is fine: const Tab = connect( mapState, mapDispatch )( Tabs ); export default Tab; However, this is incorrect: export default const Tab = connect( mapState, mapDispatch )( Tabs ); Yet this is fine: export default Tab = connect( mapState, mapDispatch )( Tabs ); Can this be explained please why const is invalid with export default? Is it an unnecessary addition & anything de
【HTML/CSS】たかがフェードイン/フェードアウトするだけの挙動に全力で取り組んだ結果、最強のCSSができてしまった話【最強】
エウレカのPairsグローバル事業部エンジニアの山内です。 この記事は、eureka Advent Calendar 2017 13日目の記事です。 昨日は新卒エンジニア鈴木康文さんの「Goのフレームワーク“Revel”を触ってみた」でした。 これからGoをはじめてみようという方にはとても入っていきやすい内容です。是非。 # 前置き最近、HTML要素をフェードイン/フェードアウトする実装をしました。 たかがフェードインアウト、と侮るなかれ。 「CSSだけで表現」「JavaScriptは極力関与しない」「とにかく簡潔に」と決めて取り掛かるといくほどか難易度がアップします（しました）。 実装を終え、なるほどなぁと思うところがあったのでそのことを書くことにしました。 よろしければお付き合いください。 # 達成条件以下を満たす、フェードイン/フェードアウトを実装します。 アニメーションをスタートす
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Async/await, a more compelling example - Anthony Ricaud
https://spyweb.media/2018/01/14/jquery-fadeout-pure-javascript/
Fade in / Fade out
https://spyweb.media/2018/01/12/jquery-fadein-pure-javascript/
async関数においてtry/catchではなくawait/catchパターンを活用する - Qiita
awaitできるsetTimeoutを1行で書く方法 - Qiita
