JavaScriptのジェネレータ関数とイテレータの仕組みをGIFアニメで解説
💡🎁 JavaScript Visualized: Generators and Iterators by Lydia Hallie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ES6ではジェネレータ関数と呼ばれるクールなものが導入されました🎉 ジェネレータ関数について尋ねると多くの人は、「知っているけど、混乱して二度と見ていない」「ブログで読んでみたけど、よく分からない」「分かるけど、みんななんで使ってるの」🤔 私も昔は同じように思っていました。しかし！実はかなりクールです！！ ジェネレータ関数とは何でしょうか？ まずは、通常の昔ながらの関数を見てましょう👵🏼 昔ながらの関数 これについては何も特別なことはありません。ごく普通の関数で、値を4回ログに記録するだけの関数です。 では、実行してみましょう！ 「通常の
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が原因かもしれません！ 何年も
Webデザインのレスポンシブ対応グリッド、基本の使い方徹底ガイド
この記事では、Webレスポンシブデザインにおけるグリッドの使用方法をまとめた基本ガイドです。デスクトップ、タブレット、モバイル向けのグリッドの使い方をそれぞれご紹介します。 レスポンシブグリッドの重要な部分に入る前に、基本的な用語を正しく理解しましょう。 レスポンシブ・グリッドの基本用語まとめ フィールド要素（Field Elements） むらさき色の部分がフィールド要素 フィールド要素は、文字テキスト、イメージ画像、またはその両方を組み合わせたデザインのブロック要素を指します。背景色は、文字テキスト/イメージ画像の背景でない限り、実際にはフィールド要素としては扱いません。 その他にもユニット、要素、親コンテナ（Parent Containers）など別の呼び方もありますが、どれも一緒と考えて構いません。 カラム（Columns） カラム・列は、デザインコンテンツの幅を構成する濃いピンク
JavaScriptエンジンの仕組みをGIFアニメで分かりやすく解説
Node.jsおよびChromiumベースのブラウザで使用されるJavaScriptエンジンの仕組みについてGIFアニメーションで分かりやすく解説された記事を紹介します。 🚀⚙️ JavaScript Visualized: the JavaScript Engine by Lydia Hallie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 JavaScriptを視覚的に解説: JavaScriptエンジン JavaScriptはクールです（私はそう思います）が、あなたが書いたコードをマシンが実際に理解するにはどうすればいいのでしょうか。JavaScriptデベロッパーは通常、コンパイラを自分で扱う必要はありません。しかし、JavaScriptエンジンの仕組みを理解し、人に優しいJavaScriptコードをどのように処理
もう配列のメソッド（とか）全部説明する。（配列とかおれおれAdvent Calendar2018 – 24日目） | Ginpen.com
配列とかおれおれAdvent Calendar2018 – 24日目 全部やる。 一覧 Array | MDN スタティックメソッド インスタンスメソッド 配列を作成 [] new Array(), Array() Array.from() Array.of() 新規配列を返却 Array.prototype.concat() Array.prototype.filter() Array.prototype.map() Array.prototype.reduce() Array.prototype.reduceRight() Array.prototype.slice() 検索 Array.prototype.every() Array.prototype.find() Array.prototype.findIndex() Array.prototype.includes() Arra
スプレッド演算子……じゃなくて、スプレッド構文の使える場所とか使い方とかそういう。（配列とかおれおれAdvent Calendar2018 – 20日目） | Ginpen.com
const arr1 = [11, 22, 33]; const arr2 = [44, 55]; const arr3 = [...arr1, ...arr2]; console.log(arr3); // => [ 11, 22, 33, 44, 55 ] const arr4 = [0, ...arr1, 0, ...arr2, 0]; console.log(arr4); // => [ 0, 11, 22, 33, 0, 44, 55, 0 ] 次の個所で利用可能です。 配列初期化子 [] オブジェクト初期化子 {} 関数呼び出し時の引数 () 分割代入 = 、関数の仮引数 () 配列初期化子 [] ... に続けて反復可能 (iterable) なオブジェクトを置きます。まあ普通は配列ですね。 ECMAScript® 2018 Language Specification 12
反復処理の中身、IterableとIteratorについて仕様書を調べてみた。（配列とかおれおれAdvent Calendar2018 – 19日目） | Ginpen.com
配列とかおれおれAdvent Calendar2018 – 19日目 ここまで何度か出てきた反復可能 (iterable) と反復子 (iterator) のお話です。やっと。 先にまとめ Iterableオブジェクトは Iteratorを返すメソッド [Symbol.iterator] を持つ for-of で使える Iteratorオブジェクトは IteratorResultを返すメソッド next() を持つ IteratorResultオブジェクトは プロパティ done, value を持つ 配列は Iterableである Iteratorではない arr.values() は Iterableである Iteratorである Generatorオブジェクトは Iterableであり、かつIteratorである Generator関数は function*(){} のやつ Gene
だいたいの繰り返しは配列のforEach()でいける。（配列とかおれおれAdvent Calendar2018 – 17日目） | Ginpen.com
配列とかおれおれAdvent Calendar2018 – 16日目 繰り返しにもいろいろあるよ。 for, while → for文を仕様からじっくり見てみる。あとwhileとか。（配列とかおれおれAdvent Calendar2018 – 13日目） for-in → for-inの仕様も見てみたよ。使う機会なさそうだけど。（配列とかおれおれAdvent Calendar2018 – 14日目） for-of → for-ofで配列も普通のオブジェクトも反復しよう。（配列とかおれおれAdvent Calendar2018 – 15日目） for-await-of → 非同期に繰り返すならfor-await-of構文が使える、けど使わない方が良いかも。（配列とかおれおれAdvent Calendar2018 – 16日目） forEach() ← イマココ お待たせ！ 現代的JavaSc
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
空じゃないけど空の配列の話。（配列とかおれおれAdvent Calendar2018 – 22日目） | Ginpen.com
任意の要素数の配列を作る方法7通り。（配列とかおれおれAdvent Calendar2018 – 10日目） | Ginpen.com
Array(3)の代わりにArray.of(3)を使おう。（配列とかおれおれAdvent Calendar2018 – 03日目） | Ginpen.com