【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
Axiosとは、AxiosでGETリクエストを実装するには？
Axiosとは、AxiosでGETリクエストを実装するには？ Axiosは、JavaScriptのHTTPクライアントライブラリとして、APIとの通信を行う時に非常に通用されるツールになります。それでは、AxiosでGETリクエストを送信するには、どうしたらいいですか？本文では、Axiosを詳しく紹介した上、それを使ってGETリクエストを実装する方法を皆さんに紹介します。 Axiosは、JavaScriptのHTTPクライアントライブラリとして、APIとの通信を行う時に非常に通用されるツールになります。それでは、AxiosでGETリクエストを送信するには、どうしたらいいですか？本文では、Axiosを詳しく紹介した上、それを使ってGETリクエストを実装する方法を皆さんに紹介します。また、Axiosより直感的でAPIリクエストを送信したり、レスポンスを取得したりできる方法も一緒に紹介していきた
[React]useStateでオブジェクト(連想配列)や配列の一部を更新する方法
私はいつも、ReactのuseStateでオブジェクト(連想配列)の更新に手を焼いています。 どうやるんだっけ？ ということで、この記事に更新のやり方を残しておきます。 useStateでオブジェクトを更新する方法 オブジェクトの一部だけ変更 const [state, setState] = useState({ id: 1, name: 'foo' }); const updateState = () => { setState((prevState) => ({ ...prevState, name: 'bar' })); // { id: 1, name: 'bar' } }; 前の状態(ここではprevState)を関数として渡して、オブジェクトの一部を書き換えています。 …prevStateはスプレッド構文といって、オブジェクトの要素を展開します。 name: ‘bar’は上書
![[React]useStateでオブジェクト(連想配列)や配列の一部を更新する方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/5f7b670b37ab90694daf805b6f5c4908576a2722/height=288;version=1;width=512/https%3A%2F%2Famateur-engineer.com%2Fwp-content%2Fuploads%2F2022%2F05%2Fundraw_React_re_g3ui.png)
文字列の日付を降順にソートする方法 - Qiita
[ { "id": "1", "title": "【参加メモ】 『SCRUM BOOT CAMP THE BOOK 増補改訂版』読書会 第1回目", "date": "2021/10/25", "url": "https://note.com/maiamea/n/n5cd7a8c0cbf7" }, { "id": "2", "title": "【参加メモ】 『SCRUM BOOT CAMP THE BOOK 増補改訂版』読書会 第2回目", "date": "2021/10/27", "url": "https://note.com/maiamea/n/n792779910e0b" }, { "id": "3", "title": "【参加メモ】 『SCRUM BOOT CAMP THE BOOK 増補改訂版』読書会 第3回目", "date": "2021/10/29", "url":
あなたが知らないであろう15個の強力なJavaScriptのテクニック🗡🔈🔥
はじめに この記事はこちらの記事の和訳となります。 なお、著者には許可をいただいております。是非原文もご覧ください。 拙訳なので、ご指摘などあればお待ちしております。 Javascriptのバグ修正や答えを求めてGoogleやStackOverflowを探し回るのは楽しくないでしょう🏴☠️。 この記事では、生産性⚡を最大化し、苦痛🩸を最小化する、20個（訳註:正確には15個）の短く、パワフルなJavaScriptのテクニックを紹介します。 それではコードを見ていきましょう🤘 配列の重複を除去 配列から重複した要素を除去します。 const arr = ["a", "b", "c", "d", "d", "c", "e"] const uniqueArray = Array.from(new Set(arr)); console.log(uniqueArray); // ['a',
querySelectorAllしてmapしたいとき[...すると短い - hitode909の日記
表示中のHTMLから情報を雑に抜き出して利用するため，ブラウザのデベロッパツールなどでquerySelectorAllしてmapしたい．しかし，querySelectorAllはNodeListを返すので，mapするにはArrayに変換する必要がある． NodeListをArrayに変換するときに短く書く方法ないですかって同僚に聞いたらいろいろ教えてもらえたのでメモ． Array.prototype.slice.callする オーソドックスな手法．昔からこれを書いていて，長くて困っていた．最近はアロー関数を使えるのでちょっと短くなったけど長い． Array.prototype.slice.call(document.querySelectorAll('a')).map(a => a.href) [].slice.callする Array.prototypeのかわりに[]で書く．ちょっと短い
Adobe XD 待望の新機能！自由自在な動的レイアウトを実現するスタックとスクロールグループの使い方 - ICS MEDIA
Adobe XD 待望の新機能！自由自在な動的レイアウトを実現するスタックとスクロールグループの使い方 Adobe XDの2020年6月の大型アップデートでは、目玉機能として「スクロールグループ」と「スタック」が搭載されました。 「スクロールグループ」はアートボードとは別のスクロール領域を定義できる機能、「スタック」はオブジェクトの並び順と間隔を管理できる機能です。 とくに「スタック」は使いこなせるかどうかで、デザイン制作のスピードがかなり変わってくるのでしっかりと覚えておきましょう！ スクロールグループの使い方 スクロール領域を定義できる「スクロールグループ」が登場しました。「水平方向にスクロール」「垂直方向にスクロール」「水平方向と垂直方向にスクロール」という3種類の方向を設定できます。 「水平方向にスクロール」はカルーセルのような、画面幅以上の要素を横スクロールさせるのに便利です。
【初心者脱却！】デザイナー歴半年の私が現場でつまずいたこと、学んだことまとめ【Illustrator編】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
デザイナーのおまめ (@omame_creator) です。 LIGブログのアイキャッチや、バナー、背景ジャック（LIGブログの記事上部に表示される横長の広告枠の通称）など、さまざまな画像を制作しております。 基本の時短技編 先輩の技を盗むと作業が本当に速くなります！ なかでも格段に速くなった4つの技を、第一回目のアイキャッチを例に紹介します！ 邪魔なものを一時的にアートボードの外に移動する たとえば、パソコンの奥に隠れている腕の位置を調整したいとき。 いままではパソコンを適当な位置にドラッグで動かして、調整が終わったらドラッグで元に戻していました。それだと戻したあとパソコンの位置を再調整する必要があり、効率的ではありません。 V+Enterで数値指定して移動させる という技を先輩から聞き、すべて解決しました……！ 数値にマイナスをつけて移動させれば、マイナスを消すだけでまったく同じ位置に
Adobe Illustrator の「角を丸くする」と「ライブコーナー」の違い｜宮澤聖二 | onthehead
グラフィックソフトで当たり前のように搭載される角を丸くする機能。 角丸だったり、コーナーラウンド、Radius、border-radius、と呼ばれたりもします。 Illustrator 場合、効果メニューの「角を丸くする...」から半径を指定する方法と、コーナーウィジェットを表示し角付近にある丸いマークをドラッグ＆ドロップしたり、変形パネルの角丸の半径やコントロールパネルのコーナーの半径を指定する「ライブコーナー」という２つの方法が存在します。 角を丸くするとライブコーナーの比較 角を丸くする効果はオブジェクト全体の角をまとめて丸くし、ライブコーナーは角それぞれを個別に丸くできる。という意味合いで使い分けてる方も多いと思います。 ですが、この２つの方法は全く違う方法で角を丸くしています。 さらに、ライブコーナーには相対値と絶対値という２つの方法が用意されています。 実際にどのくらい違いが
SES - JavaScriptをセキュアに実行
JavaScriptを使えばWebページを自在にコントロールできます。ユーザにマクロを組ませて、より彼らのニーズに合ったサービスにしたいと思うこともあるでしょう。しかし自由にJavaScriptが実行できるのはセキュリティ上の問題にもなります。 そこで使ってみたいのがSESです。セキュアにECMAScriptを実行できるランタイムです。 SESの使い方 アタックコードの例。Date.nowを使うことで解析するタイプです。何もしない場合はセキュリティを破られます。 SESを有効にした場合。Date.nowが使えなくなってエラーになります。 SESを使うことでグローバルな変数へのアクセスを禁止したり、特定のオブジェクトへのアクセスがエラーになります。これにより、サードパーティーが作ったJavaScriptを誰でも安全に実行できるようになります。 SESはJavaScript製のオープンソース・
イラストレーター 線の束をランダムに回転させる方法 - by Takumi Hirashima
Adobe Illustrator で線の束をランダムに回転させる方法を紹介します。 例えば、ちょっと変わった格子模様などを作りたい時に便利な方法です。 線の束をランダムに回転させる方法 線の束をランダムに回転させる方法 線の束をランダムに回転させるには、対象のオブジェクト（今回は複数の線のオブジェクト）を選択後、 メニューバーの「オブジェクト」＞「変形」＞「個別に変形」を選択します。 「個別に変形」は、選択した複数のオブジェクトを個別に変形することができます。 今回はランダムに回転させたいので、回転させたい上限の角度を入力。 次に「ランダム」のチェックをオンにします。そのほかのチェックは適宜変更を加えてください。 例えば、90度+ランダムと入力すると、現在のオブジェクトの位置を0度として、0〜90度までをランダムに回転させることになります。 まとめ Adobe Illustrator で
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
Adobe Illustrator でテキストオブジェクトを元のオブジェクトに戻す方法 - by Takumi Hirashima
Adobe Illustrator でテキストを流し込んだテキストオブジェクトを、元のオブジェクトに戻す方法を紹介します。 例えば、エリア内文字ツールやパス上文字ツールでテキストを流し込んだオブジェクトを、元のオブジェクトに戻したいときに便利な方法です。 まずはグループ選択ツールを選択 次に取り出したいオブジェクトを選択 パスを選択したらコピー＆ペースト まずはグループ選択ツールを選択 テキストを流し込んだオブジェクトから元のオブジェクト取り出すには、グループ選択ツールを使用します。 まずは「グループ選択ツール」に切り替えます。 このツールはダイレクト選択ツールの裏に隠れています。 次に取り出したいオブジェクトを選択 次に取り出したいオブジェクトを選択します。 グループ選択ツールに切り替えたら、取り出したいオブジェクトのパスをクリックして選択します。 ここで注意したいのは、オブジェクトの中
Illustratorでスクリプトを使って面倒な作業を自動化する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、みやです。 空腹時にコーヒーやお茶を飲むとカフェインの作用で気分が悪くなるそうですね。 今まさにやられてます。 ところでIllustrator使ってますか？ ロゴの制作やレイアウト調整、印刷物の制作などに便利なIllustratorですが、実はスクリプトを使ってオリジナルの機能を実装することができます。 スクリプトを上手に活用すれば、何度も繰り返すような処理や、心が折れるほどの単純作業を一発で終わらせることもできるようになります。今回はスクリプトの設定方法と作り方、無料で使えるオススメのスクリプトをご紹介します！ スクリプトとは Illustratorの標準機能では手間のかかる処理を一発で解決する機能を実装する方法の一つです。JavaScriptで処理を記述したファイルを読み込んで、オリジナルの機能を使えるようにするものです。 基本的に標準機能でも実現可能な処理なのですが、手順
Illustratorのパスファインダーで合体・交差・分割・切り抜きなどがどうなるのか一目で分かるチートシート
Illustratorで複数のオブジェクトを組み合わせて、簡単な形から複雑な形をつくりだすことができるパスファインダーのチートシートを紹介します。
Webサイトのガイドライン作成に欠かせないPhotoshopの機能拡張が嬉しいバージョンアップ！アートボードにも対応 -Ink
Ink CC2015にインストールしたので、その手順を。 ダウンロードした「Ink.1.5.3.zip」を解凍します。 CC2015で利用する時は、「Ink.1.5.3」内の「Photoshop CC 2015」フォルダを開きます。 「Photoshop CC 2015」フォルダ内の「Ink.zip」を解凍します。 ※フォルダの中身は変更しないでください。 解凍したInkフォルダを移動するフォルダを開きます。 OS X: ライブラリ\Application Support\Adobe\CEP\extensions\ Win 64: C:\Program Files (x86)\Common Files\Adobe\CEP\extensions\ Win 32: C:\Program Files\Common Files\Adobe\CEP\extensions\ 「extensions」フ
CSS3Ps - Download Plugin
Downloads: Download for Adobe Photoshop CC 2019 (use ZXPInstaller to install) Download for Adobe Photoshop CC 2015 (see instalation instruction) Download for Adobe Photoshop CC 2014 Download for Adobe Photoshop CS5, CS6 and CC Download for Adobe Photoshop CS3 and CS4 Mac OS X 10.7 Lion requires patch from Adobe before installation Installation process for Photoshop CC 2015 On Windows: Unzip downlo
PowerPointで複数の図形の位置を揃える方法
PowerPointで複数の図形の位置を揃える方法を紹介します。 １．問題点 次のような3つの図形があります。 （クリックで拡大：以下同様） この3つの図形を中央で揃えたいのですが、方法が分かりません。 ２．図形の位置を揃える（その1） まずひとつめの方法です。 3つの図形をすべて選択します。 「ホーム」タブをクリック。 「配置」をクリック。 「オブジェクトの位置」→「配置」→「左右中央揃え」をクリック。 これで中央揃えができました。 ２．図形の位置を揃える（その2） もうひとつの方法はオブジェクトをひとつずつドラッグしながら揃える方法です。 PowerPoint2007以降であれば、図形をドラッグすると他の図形との位置関係を点線で表示してくれるようになりました。 スクリーンショットに表示されている点線は青いオブジェクトの中央を指すので、これに黄色のオブジェクトの中心を合わせます。 同じよ
ウノウラボ Unoh Labs: オブジェクトをマウス操作で移動させる
こんにちは、はじめまして！ goです。 6月からActionScriptのプログラマとして、ウノウに参画することになりました。 エンジニアとして経験がまだまだ浅いので、リファレンスを片手に日々奮闘しております。 Flashを扱うエンジニアとして、ここではインタラクションに関わる小ネタをActionScriptで披露していこうかと考えています。 ということで、今回はマウスを使ったオブジェクトの移動のお話です。 以下の方針に従って、作業を進めていきます。 １、画面全体でMOUSE_DOWNとMOUSE_MOVEのイベント監視 ２、MOUSE_DOWNのイベントが発生したときに、マウスの座標、移動対象のオブジェクトの座標を取得します。 ３、MOUSE_MOVE時に、移動前のマウス位置と、移動後のマウス位置の差（つまり移動量）を取得します。 ４、移動前の円の座標に移動量を加算して、移動後
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
順番の乱れたobjectをkeyでsortする.js