やりたいこと object等の呼び出しで Object[key] のようにするとき、key に動的な変数を入れたい。 問題・エラー 何も考えずに下記のように書くと、 const object = { aaa: 'aaaa', bbb: 'bbb', }; // keyには動的に生成された値 const key: string = receivedStringValue; const value = object[key];
![Object等の呼び出しでkeyに動的な変数を使う [TypeScript] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/50acb36686d9faf58fbbe61dcf1b2319ea7828eb/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9T2JqZWN0JUU3JUFEJTg5JUUzJTgxJUFFJUU1JTkxJUJDJUUzJTgxJUIzJUU1JTg3JUJBJUUzJTgxJTk3JUUzJTgxJUE3a2V5JUUzJTgxJUFCJUU1JThCJTk1JUU3JTlBJTg0JUUzJTgxJUFBJUU1JUE0JTg5JUU2JTk1JUIwJUUzJTgyJTkyJUU0JUJEJUJGJUUzJTgxJTg2JTIwJTVCVHlwZVNjcmlwdCU1RCZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9ZDMxMjUyNDEzZjgxMjQxYWNkMDJkYzY3NDViNDdmOGE%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDB0a3Rjb3Jwb3JhdGlvbiZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NmE0ZTA5OTQxMzg1ZmZkYTRiMDBiZjlhMTgwNzdmOWE%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Db494ce846f7c3e146532e5d92e580738)
Object等の呼び出しでkeyに動的な変数を使う [TypeScript] - Qiita
やりたいこと object等の呼び出しで Object[key] のようにするとき、key に動的な変数を入れたい。 問題・エラー 何も考えずに下記のように書くと、 const object = { aaa: 'aaaa', bbb: 'bbb', }; // keyには動的に生成された値 const key: string = receivedStringValue; const value = object[key];
JavaScriptのnew Array(n)をmapしたいとき fillをはさむ理由 - yucatio@システムエンジニア
経緯 配列をオブジェクトで初期化したい場合、 new Array(3).fill({foo: "ふう", bar:"ばあ"}) というコードだと、全てのインデックスが同じオブジェクトを指してしまうので、 調べたら new Array(3).fill().map(() => ({foo: "ふう", bar: "ばあ"})) という方法が出てきたので試したらうまく行きました。 疑問 このfill()要らなくない？new Array(3).map(() => ({foo: "ふう", bar: "ばあ"})) って書けばよさそうな気がします。 答え fill()は必要。 理由はここに書いてありますが、英語なので日本語で&自分で実行しながら書いていきます。 itnext.io まず、JavaScriptの配列は、実質的には数値をキーとしたオブジェクトです。 例えば、以下のように配列を初期化します
javascriptで配列を分割、そしてsliceの使い方の注意点。 - nekoTheShadow’s diary
今日の作業中(というか勉強中)、配列を任意の数の要素に分割したいとなりました。ことばだとわかりづらいですね。たとえばこんな感じ。 [1,2,3,4,5,6,7,8,9].divide(4) => [[1,2,3,4],[5,6,7,8],[9]] [1,2,3,4,5,6,7,8,9].divide(3) => [[1,2,3],[4,5,6],[7,8,9]] rubyでいえばeach_sliceですね(るりま)。今回はこれをjavascriptで実装しました。といってもそれほど難しいことはなく、さらっとかけそうです。 Array.prototype.divide = function(n){ var ary = this; var idx = 0; var results = []; var length = ary.length; while (idx + n < length){
JavaScript の Array.some と Array.includes の使い分け、値・参照型の動作の違い - Qiita
JavaScript の Array.some と Array.includes は、 どちらも配列に特定の要素が存在するか判定するのに使えます。 Array.someとArray.includesをどのように使い分ければいいのかを考えたいと思います。 古えの JavaScript では... ES2015 でArray.someが追加されるまで、配列にある要素が存在するか判定するには、 （本来の用途と違うため）直感的でないindexOfや、for文で冗長な記述をする必要がありました。 const chars = ["a", "b", "d", "g", "h", "i", "m", "n"]; const target = "d"; // for 文でループして探す let exists = false; for (const char of chars) { if (char ===
Promiseとはなんぞや？！できるだけわかりやすく説明してみた（ついでにasync/awaitも) - Qiita
PromiseやAsync/awaitという言葉をよく耳にするようになってきましたが、どういう仕組みか理解せず苦しんでいる方も多いのではないでしょうか？ 実は自分もこの記事書くまではかなり苦戦していました…！ そこで、できるだけ、本当にできるだけわかりやすく説明するために、いろんなケースを交えて説明していこうと思います！ そもそもどういうときにPromiseって必要になるんや？ まず以下のコードをご覧ください function getData () { return axios.get('http://example.com') .then((res) => { return res; }) } let data = {}; if (data) { data = getData (); } console.log(data); 上記のコードを実行すると、コンソールに帰ってくるのはexamp
スクロール位置取得方法をいい加減忘れないようにメモ - Qiita
const target = document.querySelector('el').getBoundingClientRect().top; 上記の場合、要素の上端がブラウザの表示領域の上端にきたときに値が０となる。 window.innerHeight window.innerHeightは現在のブラウザの高さを取得する getBoundingClientRectはブラウザの上端の位置を境界とするため、ブラウザの下端で判断したい場合にこれを利用する window.pageYOffset ブラウザの上端を基準とした縦方向のページのスクロール量を取得する。 getBoundingClientRectで取得した値にこの値を足した値がターゲット要素の絶対位置になる。 example //現在のブラウザ表示領域の上端からの相対距離(要素の上部がブラウザの一番上にきたときに0になる) const
【JavaScript・CSS】スクロールしたらフワッと要素を表示させるスクリプトの使い勝手を良くしてみる – ノーズブログ
HTML・CSS 基本のHTMLとCSSを用意 まず適当なHTMLとCSSを用意します。 <body> <header> <h1>ヘッダー</h1> </header> <section> <div>要素1</div> <div>要素2</div> <div>要素3</div> <div>要素4</div> <div>要素5</div> <div>要素6</div> <div>要素7</div> <div>要素8</div> </section> <section> <div>要素9</div> <div>要素10</div> <div>要素11</div> <div>要素12</div> <div>要素13</div> <div>要素14</div> <div>要素15</div> <div>要素16</div> </section> </body> body { margin: 0;
ユーザーエージェント判別 => スマフォリダイレクト - Qiita
フロント側で、 ユーザーエージェントを判別してスマフォはリダイレクトさせるというのはよくあるが、 (1). 色々な端末が増えてきてユーザーエージェントの判別で漏れが発生する。 下記みたいなやつだと、色々な端末で抜けが出てしまう。なので、 device.js を使う。 var ua = window.navigator.appVersion.toLowerCase(); if (ua.indexOf('iphone') >= 0 || ua.indexOf('ipod') >= 0 || ua.indexOf('ipad') >= 0 || ua.indexOf('android') >= 0 || ua.indexOf('windows phone') > 0 || ua.indexOf('blackberry') > 0) { location.href = "/us/sp/index.
[*その他*] ChromeにてAjaxでローカルファイルにアクセス - Qiita
はじめに ローカルにあるjsonファイルを$.getJSONで読み込んで、それを使ってあれこれやりたかったが、 Chromeで以下が発生。 ローカルファイルにAjaxリクエストを送ると怒られる。 XMLHttpRequest cannot load file:///Users/test/Documents/json/contents.json.Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource. これが発生すること自体は知っていたが、特に今までChromeじゃないと困るってことは無かったのでエラーが起きないFirefoxを使ってローカルで確認していた。 今回Chromeの方がい
![[*その他*] ChromeにてAjaxでローカルファイルにアクセス - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/8aed5080caff5dbf65fc300a3b0ded29bfbdc5a6/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCJTJBJUUzJTgxJTlEJUUzJTgxJUFFJUU0JUJCJTk2JTJBJTVEJTIwQ2hyb21lJUUzJTgxJUFCJUUzJTgxJUE2QWpheCVFMyU4MSVBNyVFMyU4MyVBRCVFMyU4MyVCQyVFMyU4MiVBQiVFMyU4MyVBQiVFMyU4MyU5NSVFMyU4MiVBMSVFMyU4MiVBNCVFMyU4MyVBQiVFMyU4MSVBQiVFMyU4MiVBMiVFMyU4MiVBRiVFMyU4MiVCQiVFMyU4MiVCOSZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9M2M1OTY0NjdhYmVhMjI3NWFjOThiOTQ4YThiODJkZTQ%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBjaWdhbGVjaWdhbGVzJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1mOGU4ZmRmYWNlYzZjNDE2ZmYwYjhhNGYyZWMyZTAyOQ%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Dab59b7c3444d5685d11211348b1cc170)
雪や花びらが落下するアニメーションの実装方法を調べてみた
雪や花びらなどの要素がふわふわと漂ったり落下したりする動きを見かけることがありますが、どのように実装しているのかをいくつかのサイトで調べてみました。 プラグイン プラグインを使って実装しているサイトです。 snowfall.js snowfall.jquery.jsというプラグインを使って実装しているサイトが多かったです。 三者三葉 あんハピ♪ エンドライド 櫻子さんの足下には死体が埋まっている ノラと皇女と野良猫ハート 戦国恋姫Ｘ 聖騎士Melty☆Lovers 下記2サイトはsnowfall.jsで要素を移動させながら、CSSのkeyframesでrotate(回転)のアニメーションをさせていました。 Caligula-カリギュラ- 冴えない彼女の育てかた particles.js particles.jsはcanvasで幾何学状のアニメーションを実装できるプラグインで、下記サイトの下
雪が舞うようなヒラヒラ落下するSnowfall jquery pluginを複数画像対応に改造
雪が舞うようなヒラヒラ落下するSnowfall jquery pluginを複数画像対応に改造します。 Versionは1.7.4です。（だと思います＾＾；） デモサイト http://loktar00.github.io/JQuery-Snowfall/ 通常の設置$('#section').snowfall({ image :"images/flake.png", minSize:10, maxSize:32 }); snowfall.jquery.js 140行目 flakeMarkup.src = options.image; この部分を flakeMarkup.src = options.image[random(0,options.image.length-1)]; に変更 改造後if(options.image){ fakeMarkup = document.createEl
ストロークアニメーションをラクラク操作！ vivus.jsの使い方 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもですよ、はやちですよ:D 今回はストロークアニメーションを簡単に操作できるvivus.jsをご紹介します！ 導入と基本的な使い方 インストール npmでのインストールはこちらから npm install vivus 実装方法 html いつも使っている、はやちのSVGにidを付与します。 <svg id="target-delayed" class="svg" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 96.9 97.6"> //省略 </svg> 基本はアニメーションの時間、再生の仕方、必要であればコールバックの設定ができます。 new Vivus('target-delayed', { duration: 100 , //アニメーションの時間 start: 'autostart', //アニメー
UI改善にキラリと役立つ！ SVGアニメーションの作り方まとめ - ICS MEDIA
SVGアニメーションを用いると、さまざまなサイズのディスプレイで印象的なマイクロインタラクションを実現できます。マイクロインタラクションの導入によってUI改善に役立てているケースもあるでしょう（参考「SVGで始めるマイクロインタラクション入門」）。SVGでアニメーションを実装するには、CSSを使う方法、JavaScriptを使う方法、動画作成ソフトを使う方法等、さまざまなアプローチがあります。 今回は、コーダー、フロントエンドエンジニア、デザイナーの分野別のSVGアニメーションのアプローチ方法を挙げ、その特徴と具体的な実装方法について紹介します。 CSSでSVGアニメーションを実現する方法（コーダー向け） コーダーにオススメするSVGアニメーション実現方法の1つは、CSSプロパティを使う方法です。 SVGはCSSプロパティによってグラフィックの形状を変更できます。たとえば、次のコードでは、
webmanab.html
単純なアニメーションならCSSの@keyframesやtransitionで実装できますが、複雑なアニメーションやサクッといいものを描くときにはアニメーションライブラリを使うと、くわしい知識や経験がなくても簡単に実装できたり、複雑なアニメーションを構築することができます。また、アニメーションを実装する際の勉強や研究にもなるので、目を通しておきたいライブラリをまとめます。 アニメーションを実装するためのライブラリまとめ (CSS) Tuesday 0.3秒くらいの短時間で終了するように作られた要素の表示／非表示に使える、シンプルなCSSアニメーションライブラリ。用意されたclass属性を付与するだけで簡単にアニメーションが実装できます。ソースはLessで記述されています。 Tuesday Tuesday github <div class="animated tdDropInLeft">an
手軽に実装！Webサイトにアニメーションを加えられるCSS＆JavaScriptライブラリー
2019年2月22日 CSS, JavaScript, jQuery 人間の目は動きを感知すると反射的に目が動き、意識をそちらに向けるそうです。そのため、アニメーションは要素をほんの少し動かすだけで注目を集められるという強い力を持っています。今回はそんなアニメーションを手軽に実装できるCSSやJavaScriptのライブラリーをいくつか紹介します。 ↑私が10年以上利用している会計ソフト！ アニメーションを使う時に気をつけたい事 アニメーションを使えば、前後の画面に繋がりを持たせたり、ユーザーに次の動きを予測させ、安心感を与えることができます。よく使われるものが、ふんわりと画面や要素を移り変えるフェードという効果です。目の前の物が一瞬で消え、パッと新しい物が現れる…なんて、現実世界ではありえませんよね。もちろん、単純に見ていて楽しい、かっこいい、なんていう刺激を与えられます。 しかし、ユー
ES2015で始めるJavaScript入門 - Qiita
はじめに JavaScript勉強会の資料です。 内容は、簡単なコマンドラインツールを作りながら、JavaScript(ES2015を含む)の書き方を学ぶものとなってます。 内容的には初心者向けなので、JavaScriptを勉強したい、JavaScriptは触ったことあるけどES2015を知らないので勉強したい、といった方が対象です。 JavaScriptとは Webブラウザで実行可能なインタプリタ言語 最近ではサーバサイドのものもある(Node.jsなど) 各ブラウザで独自の実装があるが、標準化されたECMAScriptに準拠している ES5, ES2015(ES6), ES2016, … ES2015からは毎年新しい規格が策定される これによりナンバリングは策定した年に変更 ES5(2011年策定)から4年ぶりに策定されたECMAScript 非常に多くの機能が追加された 新しいブラウ
DOMを操作して要素の挿入や移動をするいろいろ
JavaScript $(function() { $('ol#before').before('<p>前に挿入</p>'); $('ol#after').after('<p>後に挿入</p>'); $('ol#prepend').prepend('<li>0番目</li>'); $('ol#append').append('<li>4番目</li>'); }); ‘挿入する要素’の部分は以下のように$(”)の形でも記述できるようです。 この場合、要素の挿入ではなく別個所からの移動になります。 $(function() { $('ol#before').before($('#sample1')); $('ol#after').after($('#sample2')); $('ol#prepend').prepend($('#sample3')); $('ol#append').append
覚えておきたいReactの実装でよく使う基本的な構文（書き方）
Reactを勉強し始めた頃は、その概念はわかったとしても、実際にコードを書いてみようとすると、どう書いていいかわからず手が止まってしまう人もいるかと思います。jQueryをバリバリ書いていた人でも、Reactを書こうとすると最初は戸惑ってしまうっていうのはよく聞く話です。ある意味Reactの書き方は特殊です。まずは書き慣れる必要があるかと思います。今回の記事では、初心者向けとしてReactの実装でよく使う基本的な構文を紹介します。今回紹介する構文を覚えれば、ほぼほぼReactの仕組みも理解できるようになり、その後の学習も楽になるかと思います。ぜひ参考にしてみてください。 ファイルを読み込む時の構文ReactでUI（ユーザーインターフェース）を実装する際は、一般的にnpm経由でreactとreact-domをプロジェクトディレクトリ内にインストールして、ファイルに読み込んで使うようにします。
React+Redux入門 - Qiita
※この記事を書いたのは2016年4月です。Qiitaでは記事をアップデートするとその日付のみが表示されていまうため、新しい記事のように見えるかもしれませんが、現代ではもっと進化していることにご注意ください。素直にReact Hooks を使いましょう。あと Redux は用法用量を守って気をつけて使ってください。なんならReduxは使わない方がいいでしょう。 最近のモダンなウェブフレームワークと言えば、React+Reduxですよね。でも、なんか難しそうとか、ReactってPHPみたいにViewにロジック混ざりそうとか感じて尻込みしていませんか？それはただの誤解かもしれません。React+Reduxはそんなに難易度の高いものではありません。ただ単に、新しい概念で構成されているから、カルチャーショックのようなものがある、というだけのことです。React+Reduxに入門してみましょう。 僕自
Redux入門【ダイジェスト版】10分で理解するReduxの基礎 - Qiita
ReduxのGithubドキュメントを基に入門用記事として書いたものを、簡潔にまとめました。 もと記事はこちらです。 Redux入門 1日目 Reduxとは Redux入門 2日目 Reduxの基本・Actions Redux入門 3日目 Reduxの基本・Reducers Redux入門 4日目 Reduxの基本・Stores Redux入門 5日目 Reduxの基本・Data Flow Redux入門 6日目 ReduxとReactの連携 Reduxとは Reduxは、ReactJSが扱うUIのstate(状態)を管理をするためのフレームワークです。Reactではstateの管理するデータフローにFluxを提案していますが、ReduxはFluxの概念を拡張してより扱いやすく設計されています。 Reduxはstateを管理するためのライブラリーなので、React以外にもAngularJS
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
