JavaScriptのジェネレータ関数とイテレータの仕組みをGIFアニメで解説
💡🎁 JavaScript Visualized: Generators and Iterators by Lydia Hallie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ES6ではジェネレータ関数と呼ばれるクールなものが導入されました🎉 ジェネレータ関数について尋ねると多くの人は、「知っているけど、混乱して二度と見ていない」「ブログで読んでみたけど、よく分からない」「分かるけど、みんななんで使ってるの」🤔 私も昔は同じように思っていました。しかし！実はかなりクールです！！ ジェネレータ関数とは何でしょうか？ まずは、通常の昔ながらの関数を見てましょう👵🏼 昔ながらの関数 これについては何も特別なことはありません。ごく普通の関数で、値を4回ログに記録するだけの関数です。 では、実行してみましょう！ 「通常の
JavaScriptエンジンの仕組みをGIFアニメで分かりやすく解説
Node.jsおよびChromiumベースのブラウザで使用されるJavaScriptエンジンの仕組みについてGIFアニメーションで分かりやすく解説された記事を紹介します。 🚀⚙️ JavaScript Visualized: the JavaScript Engine by Lydia Hallie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 JavaScriptを視覚的に解説: JavaScriptエンジン JavaScriptはクールです（私はそう思います）が、あなたが書いたコードをマシンが実際に理解するにはどうすればいいのでしょうか。JavaScriptデベロッパーは通常、コンパイラを自分で扱う必要はありません。しかし、JavaScriptエンジンの仕組みを理解し、人に優しいJavaScriptコードをどのように処理
パララックスやさまざまなスクロールのエフェクトを簡単に実装できるJavaScriptライブラリ -Locomotive Scroll
Webページやスマホアプリで要素がビューポート内に入った時に、パララックスやさまざまなスクロールのエフェクトを実装できるJavaScriptライブラリを紹介します。 要素をスクロールに追従して表示させたり、視差効果を使ったパララックスやカーテン効果なども簡単に実装できます。 Locomotive Scroll Locomotive Scroll -GitHub Locomotive Scrollの特徴 Locomotive Scrollのデモ Locomotive Scrollの使い方 Locomotive Scrollの特徴 Locomotive ScrollはWebページやスマホアプリでビューポート内の要素検出と視差効果によるスムーズなスクロールを簡単に実装できるJavaScriptライブラリです。virtual-scrollにレイヤーとして構築され、要素がビューポート内に入った時にc
[JS]面白いスクリプトが登場！スマホのDeviceMotionイベントをサポートし、傾きを感知できる -Shiny
[JS]面白いスクリプトが登場！スマホのDeviceMotionイベントをサポートし、傾きを感知できる -Shiny
![[JS]面白いスクリプトが登場！スマホのDeviceMotionイベントをサポートし、傾きを感知できる -Shiny](https://cdn-ak-scissors.b.st-hatena.com/image/square/95e28eebf0596a7ba67bec80b26b3d4e01b6cc91/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201901%2F2019011910.png)
vivus.js - svg animation
vivus, bringing your SVGs to life Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearance of being drawn. There are a variety of different animations available, as well as the option to create a custom script to draw your SVG in whatever way you like. View on GitHub Delayed Every path element is drawn at the same time with a small
ScrollHint
ScrollHint A JavaScript library to suggest that the elements are scrollable horizontally, with the pointer icon. Download GitHub Quick start Using CDN You can easily start by using CDN. Add the following description in the <head> tag of the web page you want to use ScrollHint. <link rel="stylesheet" href="https://unpkg.com/scroll-hint@latest/css/scroll-hint.css"> <script src="https://unpkg.com/scr
Made by Evan
Figma (2012-2021) I'm one of the cofounders of Figma, a collaborative browser-based interface design tool. My main contributions were to the rendering engine, the multiplayer collboration service, the vector and text editors, and the plugin system. Read more... esbuild (2020-present) My biggest open source project is esbuild, a very fast JavaScript and CSS bundler. It's main purpose is to bring ab
スクロールに応じて画像を遅延読込させるLazy Loadプラグイン
本連載では、JavaScriptライブラリとして利用頻度の高いjQueryとそのプラグインに着目して、その利用例を紹介します。今回はWebページのスクロールに応じて画像を遅延読込させるLazy Loadプラグインを用いて、多数の画像を含むWebページで効率よく画像を読み込む方法を紹介します。 はじめに 一般に画像を含むWebページをWebブラウザで表示する場合、画像が表示されるかどうかに関わらず、すべての画像がWebサーバーからダウンロードされます。そのため、縦に長いWebページに多数の画像が配置されている場合、スクロールしなければ表示されない多くの画像を読み込むために多くのロード時間を費やすことになります。この事象は特に、端末の処理能力が相対的に低く、ネットワーク状況も不安定になりがちなスマートフォンにおいて、より深刻な問題です。 そこで本記事では、Lazy Loadプラグインを用いて画
知っておくと効率的！コーポレートサイト制作が捗るjQuery プラグインや使い方まとめ
作成：2014/04/7 更新：2014/11/01 Web制作 > あの企業サイトで使われている効果やテクニックをまた探さないといけない、そもそもどういったキーワードで探したらいいのか分からない。そんなこんなで、今回は奇抜なものではなく、「企業サイトで見たことある！」というような、コーポレートサイトに使えそうな定番のプラグインや作り方をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ スライドショー １．カルーセル（横） ２．フェードアウト ３．画像と文字をスライド ４．文字が遅れて移動する効果 ５．異なるタイミングを設定できる ナビゲーション・メニュー ６．多階層 ドロップダウンメニュー ７．多階層 効果つき ８．スマホではドロップダウン ９．スマホではセレクトメニューに １０．Amazon風 メガドロップダウンメニュー １１．横スライド １
JADE LANGUAGE Node Template Engine
!!! 5 html(lang="en") head title= pageTitle(car insurance montana) :javascript | if (foo) { | bar() | } body h1 Jade - node template engine #container - if (youAreUsingJade) You are amazing - else Get on it! Get on it! Get on it! Get on it! <!DOCTYPE html> <html lang="en"> <head> <title>Jade</title> <script type="text/javascript"> //<![CDATA[ if (foo) { bar() } //]]> </script> </head> <body> <h1>J
MixItUp,suffle.js｜ソート、フィルタリングを行うjQueryプラグイン | wald-grun
画面内の要素を画面遷移無しでソートやフィルタリングするjQueryプラグインを試してみましたので、忘れないうちに自分用メモです。 MixItUp まずはMixItUpというプラグインから。 MixItUp 上記URLに飛ぶとわりとこってりしたデモがありまして、リアルタイムで様々なエフェクトを試すことができます。 とりあえず簡易な機能のみで実装してみました。 簡易にしたデモ 記述は以下のとおりです。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="jquery.mixitup.min.js"></script> <script> $(function(){ $('#Grid').mixitup(); }); </script> <!-- FILT
Sortable. No jQuery.
// Simple list var list = document.getElementById("my-ui-list"); Sortable.create(list); // That's all. // Grouping var foo = document.getElementById("foo"); Sortable.create(foo, { group: "omega" }); var bar = document.getElementById("bar"); Sortable.create(bar, { group: "omega" }); // Or var container = document.getElementById("multi"); var sort = Sortable.create(container, { animation: 150, // ms
js STUDIO | JavaScript、jQuery日本語リファレンス
AngularJS 1.2 ngモジュール ディレクティブ フィルター サービス 型 グローバルAPI ngMockモジュール サービス グローバルAPI AUTOモジュール サービス ngAnimateモジュール サービス ngCookiesモジュール サービス ngMockE2Eモジュール サービス ngResourceモジュール サービス ngRouteモジュール サービス ディレクティブ ngSanitizeモジュール フィルター サービス ngTouchモジュール ディレクティブ サービス このサイトについて リファレンスの翻訳を中心に、JavaScriptに関する情報を取り扱うサイトです。 現在、公開しているJavaScript関連の情報です。 JavaScript Mozilla Developer Networkの内容を翻訳して公開しています。 jQuery jQuery
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
io.js - JavaScript I/O
Run JavaScript EverywhereNode.js® is a free, open-source, cross-platform JavaScript runtime environment that lets developers create servers, web apps, command line tools and scripts.
Grunt: The JavaScript Task Runner
Why use a task runner?In one word: automation. The less work you have to do when performing repetitive tasks like minification, compilation, unit testing, linting, etc, the easier your job becomes. After you've configured it through a Gruntfile, a task runner can do most of that mundane work for you—and your team—with basically zero effort. Why use Grunt?The Grunt ecosystem is huge and it's growin
Gmail風にドラッグ&ドロップでファイルアップロードが出来るjQueryプラグイン「jQuery HTML5 Uploader」 | Web活メモ帳
Gmail風にドラッグ&ドロップでファイルアップロードが出来るjQueryプラグイン「jQuery HTML5 Uploader」が良さそうだったのでご紹介。 HTML5対応ブラウザであれば、ローカルにあるファイルをドラッグするだけでアップロード出来るようになります。 ドラッグ時には複数ファイルを指定できるので、よく添付ファイルを送信するフォームにはおすすめの機能です。 ↑デモの様子。破れた穴の画像にドラッグするとアップされます。 ファイルアップロード中には個々のファイルごとにプログレスバーによる進捗表示も可能です。 使い方 使用するにはライブラリを読み込んで、ファイル送信先のURLを指定すれば良いようです。 ■ JSの読み込み <script type="text/javascript" src="jquery.min.js"></script> <script type="text/j
ドラッグ＆ドロップしよう！(1/5):JavaScriptによるHTML5プログラミング入門 - libro
HTML5では、ドラッグ＆ドロップが簡単に実装できるようになりました。これを使ってみましょう。 まずは、ドラッグからです。ドラッグ可能かどうかを示すために、HTMLのタグには新たに「draggable」という属性が追加となりました。これは真偽値で設定されるもので、これを「true」にするだけで、その要素はドラッグ可能となります。 下に簡単なサンプルをあげておきます。ここでは、２つの<div>タグを用意してあります。実際にマウスで動かしてみてください。上の赤い<div>はドラッグできますが、下の緑の<div>はドラッグできないことが分かります。まったく何のスクリプトも書くことなく、ドラッグが実現できることがわかるでしょう。 ただし、やってみればわかりますが、ドラッグしてもこれを動かしたりすることはできません。ただ、半透明なゴーストをドラッグするだけです。ドラッグしてリアルタイムに要素の位置を
JavaScript ランダム関数 Math.random() まとめ + css3
おみくじ 前回同様、おみくじを作ります。 0〜3の場合、「凶」、4、5の場合「中吉」、6〜9の場合「大吉」にします。 HTML <div class="randomArea"> <h5>乱数表示</h5> <p class="txt" id="randomTxt004"></p> <h6>今日の運勢</h5> <p class="unseiTxt" id="uranaiTxt"></p> <p class="startBtn" id="startBtn004"><a href="#">start</a></p> </div> HTMLを少し付け加えます。あとはActionScriptとほぼ同じです。 function random004(){ ransu = Math.floor(Math.random()*10); $('randomTxt004').innerHTML = ransu;
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
three.js - JavaScript 3D library
