【React】オブジェクトリストをループしてコンポーネント化する - Qiita
はじめに プログラミング歴2ヶ月の素人が書いています。（間違っていたらご指摘ください） WesBos.com のオンラインビデオコースでReactを学習しています。 動画は以下から。 https://reactforbeginners.com/ 「Reactでオブジェクトリストをループしてコンポーネントを動的に複数生成する」ための学習メモです。 今回の目的 以下のような商品リストがオブジェクトリストとして存在するとします。 const fishes = { fish1: { name: "Pacific Halibut", image: "/images/hali.jpg", price: 1724, }, fish2: { name: "Lobster", image: "/images/lobster.jpg", price: 3200, }, fish3: { name: "Sea
【JS】Objectをループ処理はObject.entries()が便利
Object.entries()を使用すると簡潔に書けますObject.entries()を使用してObjectのループを書けます。 実際に書いてみましょう！ const testObj = { "key01": "AAA", "key02": "BBB" } for ([key, value] in Object.entries(testObj)) { console.log(`${key}: ${value}`); } # or Object.entries(testObj).forEach(([key, value], index) => { console.log(`${key}: ${value}`); })こんな感じで書けます！ key&valueをそのままforループ内で使用できるので、便利ですね。 ※Internet Explorerでは動作しないので、注意が必要！ 他の方
CSSは確実に進化している！ 変数、条件分岐、ループ、論理演算など、ロジックに記述するCSSの実装テクニック
一昔前のCSSと比較すると、ここ数年でCSSはかなり進化しました。calc()で数式が扱えるようになり、変数、条件分岐、ループ、論理演算なども使用できます。CSSでロジックをどう記述するのか、ブログラミング言語的な実装を紹介します。 Writing Logic in CSS by Daniel Schulz TwitterでCSSがプログラミング言語なのかと話題になっていました。その前から本記事の翻訳に取り組んでいたのですが、非常に興味深い記事でした。CSSは宣言型プログラミング言語ですが、JavaScriptのような命令型の要素も増えてきて、一昔前からかなり進化しています。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSの制御構造 CSSの実装テクニック 終わりに はじめに CSSは、スタイルのシステムに特化
【PHP】foreachで配列の最初と最後の処理を制御する - Qiita
目的 「php foreach 最初と最後」「php foreach 最後」「php foreach last」などで検索すると、少し微妙な例ばかり出てきたので書いてみました。 なるべくベストパターンを載せるように努めていますが、何かあれば編集リクエストもしくはコメントを送っていただけると助かります。 PHP 7.3以上の場合 実装 $array = ['a', 'b', 'c', 'a']; // 0始まりでない配列や連想配列でもOK foreach ($array as $index => $value) { if ($index === array_key_first($array)) { // 最初(始端処理) echo 'おはよう!', '<br>'; } echo $value, '<br>'; if ($index === array_key_last($array)) {
「Tween24.js」の新機能！ループやテキストアニメーションなど、ウェブサイトの演出に役立つ機能を追加 - ICS MEDIA
「Tween24.js」の新機能！ループやテキストアニメーションなど、ウェブサイトの演出に役立つ機能を追加 「Tween24.js」はメソッドチェーンで記述するのが特徴で、たった1行でアニメーションが実装可能なJavaScriptライブラリです。このライブラリを筆者が開発しているのですが、今年4月に公開したところ大変好評いただきました。 たくさんの要望もいただき、新しい機能を追加したのでアップデート内容を紹介します。今回はアニメーション制作において必要度の高い機能追加をメインに、各機能のブラッシュアップを行っています。 基本的な使い方や導入方法は、前回の記事「新感覚！メソッドチェーンでアニメーションがスラスラ書ける「Tween24.js」を作りました」をご覧ください。 今回のアップデート内容 新機能：トゥイーンを繰り返すloop() 新機能：トゥイーンを連続で遅延させるlag() 遅延させ
JavaScript イベントループの仕組みをGIFアニメで分かりやすく解説
JavaScript イベントループの仕組みについてGIFアニメーションで分かりやすく解説された記事を紹介します。 ✨♻️ JavaScript Visualized: Event Loop by Lydia Hallie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 JavaScriptを視覚的に解説: イベントループ イベントループは、JavaScriptデベロッパーが避けては通れない関門の1つですが、最初は理解しにくいかもしれません。私は視覚学習者なので、GIFアニメで視覚的に説明することで、あなたの手助けをしようと思います。 説明の前に、まずイベントループとは何でしょうか？ なぜ気にする必要があるのでしょうか？ JavaScriptはシングルスレッドで、一度に実行できるタスクは1つだけです。通常は問題ありませんが、30
reduce()はArrayにて最強……おぼえておけ。（配列とかおれおれAdvent Calendar2018 – 23日目） | Ginpen.com
配列とかおれおれAdvent Calendar2018 – 23日目 配列界最強のメソッドです。（？） 万能選手ですがどうか使わないでください。 使い方はちょっとわかりづらいんだけど、こんな↓感じです。 const arr = [11, 22, 33]; const obj = arr.reduce((acc, value, index) => { acc[`number${index}`] = value; return acc; }, {}); console.log(obj); // { number0: 11, number1: 22, number2: 33 } 与えたコールバック関数の次に第2引数がある点に注目。 インターフェイスと使い方 Array.prototype.reduce() | MDN result = arr.reduce(callback[, initialV
反復処理の中身、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
for-ofで配列も普通のオブジェクトも反復しよう。（配列とかおれおれAdvent Calendar2018 – 15日目） | Ginpen.com
配列とかおれおれAdvent Calendar2018 – 15日目 繰り返しにもいろいろあるよ。 for, while → for文を仕様からじっくり見てみる。あとwhileとか。（配列とかおれおれAdvent Calendar2018 – 13日目） for-in → for-inの仕様も見てみたよ。使う機会なさそうだけど。（配列とかおれおれAdvent Calendar2018 – 14日目） for-of for-await-of → 別稿 forEach() → 別稿 for-in じゃない方です。 こっち使おう。 for-of 文 for-in と違って値の方を持ってきてくれます。 const arr = [11, 22, 33]; for (const value of arr) { console.log(value); } // 11 // 22 // 33
for文を仕様からじっくり見てみる。あとwhileとか。（配列とかおれおれAdvent Calendar2018 – 13日目） | Ginpen.com
配列とかおれおれAdvent Calendar2018 – 13日目 繰り返しにもいろいろあるよ。 for, while for-in → 別稿 for-of → 別稿 for-await-of → 別稿 forEach() → 別稿 for 文 古より伝わる技法。JavaScriptに限らずだいたいの言語で利用できます。 const arr = [11, 22, 33]; for (let i = 0; i < arr.length; i++) { const item = arr[i]; console.log(item); } なお普通に先頭から末尾まで繰り返す場合は forEach() を使う方が現代では多いかと。 さて for 文、実行順序としては、 初期化 let i = 0 検証 i < arr.length false なら終了 繰り返し処理 console.log(ite
querySelectorAll()の結果はNodeListだけどforEach()が使える仕様です。（配列とかおれおれAdvent Calendar2018 – 11日目） | Ginpen.com
PHP で Invalid argument supplied for foreach() in が表示された時の対処方法 - by Takumi Hirashima
PHP で foreach を使用中に Invalid argument supplied for foreach() in が表示された時の対処方法を紹介します。 例えば、WordPress で foreach を使っている時に便利な方法です。 Invalid argument supplied for foreach() in が表示された時の対処方法 Invalid argument supplied for foreach() in が表示された時の対処方法 例えば以下のようなコードでエラーが表示されたとします。 <?php foreach( $posts as $post ) { } ?> 配列の方が配列として認識されない場合にエラーが表示されるため、 配列の前に (array) を追加して、強制的に配列の型にします。 <?php foreach( (array)$posts a
初心者のためのSCSS。条件分岐のif文、反復処理for文などを使ってみよう。
SCSSを導入しようかと検討する際に、このブログの記事を参考にしてくれた奇特な方が居たそうな。どうもありがとう。 で、声をいただくと書かない訳にはいかないので、条件分岐のIf文と反復処理の構文に絞った内容で書いてみようかと思う次第です。 SCSSとはCSSの拡張言語です。長くなったり、複雑になって管理できなくなったりするCSSを効率的に書けるようにします。効率的にする機能として、以前に紹介した変数やパーシャル、これから紹介する条件分岐のif文と繰り返し処理のfor文などがあります。他にも継承させる@extendや関数化できる@mixinなどがありますが、これは別の機会で。 条件分岐の使い方デザイナーならjavascriptとかで触れたことがある条件分岐、if文の使い方です。 公式サイトを見ると、基本的な記述例と以下内容が記載されています。 Note: Control directives
もっとSassろう！慣れてきたら使いたいワンランク上のコーディング方法4選
同じレイアウトのスタイルで、一部の色やアイコンだけを変えたい、というときに便利です( ˇωˇ ) 使用方法 html <section id="nav"> <ul> <li class="nav_home"><a href="#">HOME</a></li> <li class="nav_about"><a href="#">ABOUT</a></li> <li class="nav_company"><a href="#">COMPANY</a></li> <li class="nav_contact"><a href="#">CONTACT</a></li> </ul> </section> <!-- / #nav --> 以前、$colorsに直接色コードを配置しておりましたが、あらかじめ変数を定義しておくと、のちの管理がしやすくなります�( ˇωˇ ) /* ===========
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
反復処理の制御｜イベントループとプロミスチェーンで学ぶJavaScriptの非同期処理
v-forを使ってリストの中身とリンク先を個々に出力したい
JavaScript Array.forEachとjQuery.eachの違い - Qiita
scssの配列ループ＋変数でカテゴリ色分けなどを簡単にするよ！ - Qiita
Sassメモ - Qiita
