JavaScriptの非同期処理Promise、AsyncとAwaitの仕組みをGIFアニメで解説
JavaScriptの非同期処理Promise、AsyncとAwaitの仕組みをGIFアニメで解説した記事を紹介します。 ⭐️🎀 JavaScript Visualized: Promises & Async/Await by Lydia Hallie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに コールバック地獄 Promiseの構文 イベントループ: Microtasksと(Macro)tasks AsyncとAwait はじめに JavaScriptのコードが期待通りに実行されないことに悩まされたことはないですか？ おそらく、関数が不規則に実行されたり、予測できないタイミングで実行されたり、実行が遅れたりしたことがあるかもしれません。そして、ES6で導入された新機能Promiseが原因かもしれません！ 何年も
フロントエンドに必要なとりあえずのjsプラグイン2020 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 2020年3月時点でまだ現役なプラグイン。 非常にお世話になっております。 雑いのでもう少しちゃんと書きたい。 jQuery もそこそこ多めです。 ▼ ユーティリティー系 bowser.js http://lancedikson.github.io/bowser/docs/bowser.js.html ブラウザ判定 [日本語解説] https://co.bsnws.net/article/231 Moment.js https://momentjs.com/ jsは Date がハマるし辛い。ので時間系を扱う時はかなり必須。 [日本語解
モーダルを開いている時にページがスクロールしてしまうのを防ぐCSSとJavaScriptのテクニック
ページ上でモーダルを開き、スクロールして、モーダルを閉じると、通常そのページはモーダルを開いた時とは別の場所にスクロールされた状態で表示されてしまいます。そして、スクロールした状態で、モーダルを開いて閉じると、一番上にスクロールされた状態で表示されてしまいます。 これらを解決するCSSとJavaScriptのテクニックを紹介します。 Prevent Page Scrolling When a Modal is Open 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 簡単なことから始めましょう スマホの場合 この問題を解決するにはJavaScriptが必要 JavaScriptで問題を解決する はじめに モーダルを開いて、スクロールして、モーダルを閉じます。すると、そのページはモーダルを開いた時とは別の場所にスクロール
ブラウザレンダリング入門〜知ることで見える世界〜 - Qiita
はじめに 『レンダリングの仕組みなんて知らなくても、ブラウザが勝手にやってくれるじゃん！』 当時駆け出しのエンジニアだった私はそう思っていました。 実際、当時の私はレンダリングの『レ』の字も知りませんでしたが、特に業務上で問題はありませんでした。 しかし、その時は突然訪れました。 クライアントの要望でアニメーションを多彩に取り入れた案件を実装した際に、テスト段階で一部ブラウザ（S○f○ri、E○ge）でアニメーションがひどい状況になっていることが発覚しました。 (開発中はChromeで確認を行っており、Chromeでは特に問題はなかったので発覚が遅れました。) それからは、狂ったようにパフォーマンスの改善方法をググり、修正する日々が続きました。（最終的には、なんとかマルチブラウザでの動作も担保し、納品まで完了しました。） その案件が落ち着いた後、改めて自分の調べたことを振り返ると、局所的な
JavaScriptの「コールバック関数」とは一体なんなのか
近年のフロントエンドの盛り上がりはすごいですね。プログラミング初心者がJavaScript（最近ではTypeScriptも）から学び始めるなんて昔ではなかなか考えられなかったことです。 そんな世界中で大人気のJavaScriptですが、プログラミングに慣れていても困惑する部分が結構あります。特に初心者にとっては、非同期処理、this、コールバック関数、あたりが難しいのではないかと思います。 非同期処理については前に解説しましたし、thisの解説はネットに大量に転がってるので、今回はコールバック関数について解説します。 コールバック関数ってなんなんだ コールバック関数というとsetTimeoutなんかで使われるアレですね。Node.jsでもたくさん使われます。setTimeoutだと以下のような使い方になります： setTimeout(function() { console.log('He
Promiseとasync/awaitでJavaScriptの非同期処理をシンプルに記述する
JavaScriptにおける非同期処理は一種の悪夢です。非同期処理は容易にコードを複雑化させ、品質の低下を招きます。そこでこの問題を解決するため、非同期処理を簡単に扱うことができる、Promiseやasync/awaitという機能が導入されました。この記事では、Promiseとasync/awaitを用いた非同期コードの単純化について簡単な解説をします。 実行順序がコード通りにはならない非同期処理 非同期処理とは何でしょうか。非同期な処理は、コードの順番通りには実行されません。どういうことか、簡単な例を見てみましょう。 setTimeout(() => console.log('hello'), 500); console.log('world!'); このコードでは500ミリ秒後に「hello」と表示し、その後に「world」を表示しようとしています。ですが、実際には「world」の後に
Sticky Sidebar ⬆⬇
Sticky Sidebar 😎 Sticky Sidebar ⬆⬇ is a pure JavaScript plugin for making smart and high performance sticky sidebar, works with sidebar if it’s taller or shorter than the viewport, integrated with resize sensor to re-calculate the dimensions automatically when the size of sidebar or its container is changed, supports jQuery/Zepto and compatible with Firefox, Chrome, Safari, and IE9+. Source can b
外部JavaScriptを非同期（async / defer）で読み込みレンダリングを高速化する | web helog - HTML、CSS、JavaScriptなどWebに悩む人のネタ帳です。
Googleのサービス「PageSpeed Insights」の解析結果で「修正が必要：スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」という項目があります。 レンダリング中にJavaScriptを読み込むことで、画面表示に遅延が生じているという警告のようです。 （CSSについては別途考えます） そこで、HTML5から追加された属性「async」と「defer」を使って、スクリプトの読み込みを非同期にし、画面表示の高速化を図ってみたいと思います。 概要 HTMLのソースは上から順に解析されます。 ソース上部に大量のJavaScriptを読み込んだ場合、その読み込みに時間がかかる分だけ画面の表示が遅くなります。 少し前までは、JavaScriptはhead部分ではなく、bodyの閉じタグの直前で読み込むことが奨励されていました。 読
あなたが知らないスゴいフロントエンド開発ツール7選
2016年も進化し続けたフロントエンド開発ツール。Web Tools Weeklyのキュレーター・Louisが1年を振り返り、お気に入りのツールを紹介します。 1年が過ぎ、Webプラットホームでは予想どおり革新、いらだち、疲れとともに、開発者を支援する新しいツールやテクノロジーの大量リリースが爆発的に勢いを増しています。 ReactやAngularといったおなじみのツールがアップデートされた一方、Vue.jsなどの新しいツールも登場し、あっという間に大きな関心を集めました。 私はツールに焦点を当てたウィークリーニュースレターのキュレーションをしているので、調査中に途方もない量のツールに出会います。もちろん人気のツールにはある程度注意を向けますが、あまり注目されていないツールで興味深くかつ実用的なものも評価しています。 そこで昨年と同様、この記事でフロントエンド技術者向けツール分野の2016
2016年を振り返って、 HTML, CSS, JavaScript の書き方を変えたところ
2016年のブラウザ事情の進展に伴い、実務で HTML, CSS, JavaScript の書き方が変化した部分を列挙してみます。あくまで代表的なもののみです。 2016年1月に IE 8 のサポートが終了しました。 html5shiv.js の読み込みが不要になった SVGが（PNGによる代替画像を用意することなく）使えるようになった video要素、audio要素が使えるようになった ::before, ::after 擬似要素をダブルコロンで書けるようになった :not 擬似クラスが使えるようになり、例えば一行テキストエリアのセレクターが input:not([type]), input[type="text"] で正確に表せるようになった addEventListener(), getElementsByClassName(), String.prototype.trim, Arr
Masonry系の最強スクリプト、レスポンシブ対応のレイアウトが簡単に実装できる -Muuri
カードやパネルをレンガ状に配置し、ドラッグして配置をアニメーションで変更、ソートやフィルタリング機能も可能なグリッドレイアウトが簡単に実装できるスクリプトを紹介します。 マウスで操作しても、タッチデバイスで操作しても、非常に快適です。 Muuri Muuri -GitHub Muuriのデモ Muuriの使い方 Muuriのデモ デモはモダンブラウザ、IE9+でご覧ください。スマホやタブレットでも動作します。 ※スマホだと各パネルが大きいので、操作しにくいかも。
映像から顔を見つけ出す！ JavaScriptでお手軽フェイストラッキングに挑戦 - ICS MEDIA
今、スマホアプリ「SNOW」で、顔写真に動物のパーツをデコったり複数人の顔を入れ替えて、おもしろい写真へ編集することが若い女性の間で流行っています。 このアプリには、画像から顔を検出できるフェイストラッキングという技術が使われています。この技術を使うと、画像から顔のパーツの位置や大きさを特定できるようになり、静止画やアニメーションを重ねるといった演出を加えられます。 フェイストラッキングの技術は昔からありましたが、高度な画像解析の知識が必要なため導入するにはハードルの高いものでした。今回は、JavaScriptライブラリを使って、HTML5でフェイストラッキングを実現する方法を紹介します。 Webテクノロジーでフェイストラッキングに挑戦しよう Webテクノロジーで簡単にフェイストラキングを実現するには、JSライブラリ「clmtrackr」がオススメです。このライブラリでは、負荷が高いフェイ
JavaScriptのクロージャは内部でどう機能するのか | POSTD
もうだいぶ前からすでに私はクロージャを使っています。使い方を学びましたが、実際にクロージャがどう機能するのか、また、使うと隠れたところで実際に何が起きるのかを明確に理解しているとは言えませんでした。そもそも、クロージャとは一体何なのでしょうか。 ウィキペディア はあまり役に立ちません。クロージャはいつ生成され、いつ削除されるのでしょうか。どのように実装されるべきなのでしょうか。 "use strict"; var myClosure = (function outerFunction() { var hidden = 1; return { inc: function innerFunction() { return hidden++; } }; }()); myClosure.inc(); // returns 1 myClosure.inc(); // returns 2 myClos
1ページで完結、Web制作者が助かるチートシート・資料・PDFまとめ
作成：2015/08/10 更新：2017/04/16 Web制作 > 開発環境 ページを移動せずにテンプレートや仕様書を確認したい。今回はPCの横に貼ったり印刷したり、ワンクリックで見れるように、1ページで完結している資料をまとめました。Web制作をする上で便利なチートシートや資料・仕様書まとめです。 エンジニア速報は Twitter の@commteで配信しています。 もくじ WordPress版 受託用マニュアル １．ヒアリングシート ２．WP版ホームページ制作の流れ ３．WordPress管理マニュアル ４．WP版品質チェックシート ５．Wordpress タグ タスクランナー ６．gulp ７．Bower JavaScript 代替言語／JST ８．TypeScript ９．CoffeeScript １０．Jade コーディング用 １１．Chrome 開発ツール １２．html5
Chrome DevToolsを使ってJavaScriptのメモリリークを検出し、解消する - 人生dat落ち
JavaScriptを書いていたらブラウザがくっそ重くなる症状に出くわした。あぁ、噂のメモリリークですわ。 先人の知恵に頼るマン。それっぽい記事が見つかる。 javascriptのメモリリーク対策(随時更新) - Qiita Shibu’s Diary: JavaScriptのメモリリークを10倍速で発見する Taming The Unicorn: Easing JavaScript Memory Profiling In Chrome DevTools Writing Fast, Memory-Efficient JavaScript - Smashing Magazine angularjs - How to catch memory leaks in an Angular application? - Stack Overflow 上の記事はProfiles + Take Heap
コーダーがおさえておきたいコーディングのツール8選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 昨今ではWebのフロント周りを取り巻く環境が激変しています。 Webサイト・アプリケーションが進化するに連れて構築も難しくなってきましたし、技術やツールもいろんなものが登場しました。 そこで今回は、フロントエンドエンジニアはもちろん、コーディングに携わる人なら誰でもおさえておきたい、今旬な技術やツールを紹介したいと思います。 コーディングに関わる人ならおさえておきたい必須のフロント技術＆ツール8選 1. タスクランナー フロントコーディングに関わるあらゆるタスクを自動化してくれる頼もしいツールです。Grunt,Gulpといったツールがコレにあたります。 JadeやSass,CoffeeScriptのコンパイル、画像圧縮、バリデーションチェック、webfontのアイコン化、スプライト画像生成、スタイル
便利なjavascriptテクニック集 - Thujikun blog
今回はjavascriptで知ってる人にとっては当たり前だけど、そうでない人は全然知らないようなテクニックをまとめていきます。 globalを汚さない無名関数スコープ javascriptの問題のひとつとしてスコープがよくとりあげられますが、ここではグローバルスコープを汚さない手法を紹介していきます。 悪い例 1 2 // これはグローバルスコープ var foo = 'bar'; ちなみにglobalスコープとはwindowオブジェクトにプロパティを追加していくことと同義です。 1 2 3 // 下記の２つは結果として同じことを行っている。 var foo = 'bar'; window.foo = 'bar'; 解決するには下記のように無名関数を用います。 1 2 3 4 5 // 無名関数をつくり即時実行 ;(function() { // スコープが関数内で閉じる。 var foo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
News, Resources and Articles, Templates about Web-Development
Web制作者が備えておきたい最新版チートシートのまとめ | コリス
GitHub - esausilva/jquery.selectlistactions.js: jQuery.SelectListActions plugin allows you to perform several actions with HTML Select lists
