Index as a key is an anti-pattern
So many times I have seen developers use the index of an item as its key when they render a list. { todos.map((todo, index) => <Todo {...todo} key={index} />); } It looks elegant and it does get rid of the warning (which was the ‘real’ issue, right?). What is the danger here? It may break your application and display wrong data! Let me explain, a key is the only thing React uses to identify DOM el
社内でユーザビリティテストを行う際の、プロトタイピングから始まるオススメ6工程 - Tech Do | メディアドゥの技術ブログ
こんにちは、UXリサーチャーの吉永です。 メディアドゥにてUXリサーチをプロジェクトを横断して行なっています。 みなさんの会社では、ユーザビリティテストの際、どのようにしてテスターのリクルーティングを行っていますか？ 弊社では、外のユーザーに触ってもらう前に、社内にいるユーザー候補の方に協力してもらっています。 今回は、社内で行ったプロトタイピング〜ユーザビリティテストの一連の流れをご紹介します。 [1日目]チーム全員で作ったペーパープロトタイプ からいいとこ取り [1週目]プロトタイピングとテスト設計。検証するUIパターンを整理 [2週目前半]パイロットテスト [2週目後半〜3週目]社内ユーザビリティテスト 回帰インタビューと振り返り まとめ [1日目]チーム全員で作ったペーパープロトタイプ からいいとこ取り まずは、前回の記事で紹介したペーパープロトタイピング会のアウトプットをすべて見
課金 UI まとめてみた｜あき - 良いもの作って正しく届ける
売上を伸ばしたい。 課金率を伸ばしたい。 でも、難しい！ コンバージョンするサブスク UI を勉強したかったので、いくつかのアプリをスクショ。あたまの整理にまとめたのでアップ。 Web の LPO はかなりノウハウ系記事がありますが、アプリのサブスク UI は、まだまだ少ない気がします。誰かの参考になれば嬉しいです。 まとめ内のコメントは個人的感想です。まだまだ勉強中なので、お気軽にご意見いただけるとうれしいです。 ※ スクショは少し前に撮影したものなので、一部古くなってるかもしれません。 UI パターン 1. ミニマム型 2. プラン比較型 3. 横スクロール型 4. リスト型 5. ロング LP 型 規約表示パターン 1. 固定表示型 2. 隠しスクロール型 3. フッター型 4. 遷移型 サービスパターン 1. 探索財 2. 経験財 3. 信頼材 UI パターン1. ミニマム型最低限
Practical DDD #1: Specificationパターンの例
あるエンティティに対して、何らかの条件を満たすものをグループとして扱いたいことがよくあります。安直な実装としては、条件を加味してエンティティを抽出するようなメソッドをリポジトリに追加する方法をとってしまうかもしれません。 このようにリポジトリにメソッドを持たせてしまうと、条件が集合操作の中に埋もれてしまい、再利用しづらくなります。そこでDDDではSpecification（仕様）としてこういった条件をくくり出すパターンが紹介されています。『エリック・エヴァンスのドメイン駆動設計』p.229「仕様の適用と実装」では、次のように書かれています。 仕様の価値の多くは、全く異なるように見えるアプリケーションの機能を統一することにある。以下に挙げる3つの目的のうち、1つでも当てはまれば、オブジェクトの状態を（筆者注：仕様として）定義する必要があるだろう。 オブジェクトを検証して、何らかの要求を満たし
Reactの新Context APIとRedux is deadはどう関係するのか？
先日、reduxのメンテナであるMark EriksonさんがBlogged Answers: Redux — Not Dead Yet! という記事を書いていて「はーなんだろうなー」と流し読みしていた。 そんな折、React 16.3 がリリースされ、Context APIが刷新されたのを見て、「あ、これは確かに向き合い方ちょっと変わるかも」というのを思ったのでまとめてみる。 Redux — Not Dead Yet!を要約する元記事をざっくり要約してみるとこんな感じ Reduxはどこにも行かないよ。メンテしていくし、役割もあるよContext APIによってReduxを置き換えられるパターンはありえるよ。ただその場合、最初からReduxいらなかった可能性あるよGraphQLがReduxを置き換えることはあるかも。でもReduxのほうがハマるパターンもあるよ最近Dan Abramovさん
幾億年データを守る！石英ガラスデータ記録｜デジ・ステーション｜J-Net21[中小企業ビジネス支援サイト]
日々進歩するIT技術は、ともすると取り残されてしまいそうな勢いで進化の速度を高めています。そこでキーマンズネット編集部がお届けするのが「5分でわかる最新キーワード解説」。このコーナーを読めば、最新IT事情がスラスラ読み解けるようになることうけあい。忙しいアナタもサラっと読めてタメになる、そんなコーナーを目指します。今回のテーマは「数億年」のデータ保存に耐える石英ガラスへの超長期データ保存技術です。CDやDVDなどに記録されるデジタルデータは保存し直さない限り、現在のところほかのどんな手を使ってもせいぜい100年保存できるかどうか。それを一気に数億年に延長したのがこの技術です。数億年後にこれを読むのは進化した人類？それとも地球外生命体？…空想が広がりますね！ 1.「石英ガラスデータ記録技術」とは 理化学実験などで使うビーカーやフラスコのように、丈夫で熱や傷に強く、透明度の高いガラスが「石英ガ
![幾億年データを守る！石英ガラスデータ記録｜デジ・ステーション｜J-Net21[中小企業ビジネス支援サイト]](https://cdn-ak-scissors.b.st-hatena.com/image/square/110551cbd47125c10974b2d85bc79258eb4ff635/height=288;version=1;width=512/http%3A%2F%2Fj-net21.smrj.go.jp%2Fassets%2Fimages%2Fogp.jpg)
就活生へ、世の中には5パターンの仕事しかない。早めに全部経験しておこう ニュースイッチ by 日刊工業新聞社
社会には数え切れないくらい多くの職業があります。それらは地域や時代に合わせて新しく生まれたり、消滅したり、統合されたり、分割されたりしているわけですが、それらはすべて５つのパターンに分類されます。 「０ー１」 まずはゼロからイチを作る仕事。いわゆる「ゼロイチ」などと言われますが、世の中に新しい価値や概念を創造し提供するものです。起業家や企業の新規事業担当者、商品開発担当者などがこれに当てはまります。 新しいWEBサービスをローンチしたり、新形態の飲食店を作ったり、新しいタイプのイベントを仕掛けたり、という仕事はこれまで市場になかったものを作り出すという意味で、ゼロからイチを作る仕事です。大事なのは新しいアイデアを発想し、それをカタチにする力です。 「１ー９」 次にくるのが１から９まで育てていく仕事です。順調に拡大するベンチャー企業や新しい商品の販路を開拓していく営業のような仕事です。 すで
df-pnアルゴリズムを用いた詰将棋Solverによる最善解・余詰の導出 - すぎゃーんメモ
以前書いた、詰将棋問題生成の続き。 memo.sugyan.com 逆算による詰将棋の問題生成の方法自体は悪くないとして (バグによって有り得ない局面が出来上がったりしてしまったりもしたけど)、正しく詰将棋問題として成立するものが出来上がっているかどうかを検証するためのSolverが必要不可欠であり、これのパフォーマンスが生成のパフォーマンスにも影響してくる、というようなことを書いた。 実際、前回の記事のときに実装したSolverでは 総当たり的に探索するのは3〜5手が限界 詰将棋のルールに則る動きに限定しても、有り得る局面は指数関数的に増加する 合駒が絡む問題に対して正しく解が導けないことがある 先の展開まで読まないと無駄な合駒かどうかの判定ができない といった問題があった。 df-pnアルゴリズムによる探索 2002年の論文「df-pn アルゴリズムの詰将棋を解くプログラムへの応用」が
今となって後悔しているkamiのこと - Qiita
クリスマス期間になると喜ぶ人もいれば悲しむ人もいる。そんな極端な季節の中で、自分が作ったguregu/kamiというWAFについて真面目に考えた。contextの正しい使い方や、kamiのAPIで後悔していることを晒そう。 kamiを作ったきっかけ まずはkamiの歴史について簡単に説明する。GunosyでアプリのAPIサーバーをRailsからGoに少しずつ書き直していたが、モノリシックだったmodelsとhandlersパッケージが大きくなりすぎて分かりにくくなってしまった。大きいパッケージを複数の小さなパッケージに分けようと思った。しかしユーザーのセッション情報などは様々なパッケージにどう共有したらいいでしょう？ 当時使っていたGojiというWAFでは、リクエストごとにEnvというmap[string]interface{}が付いていた。 これを使えば、どんなパッケジーにHTTPハンド
Reactでパターンシーケンサを作った話 - Speee DEVELOPER BLOG
こんにちは、Speeeエンジニアの二社谷(nishaya)です。 先日開催されたSpeeeKaigi(詳細は以下の記事を参照)にて、Reactで使ったパターンシーケンサの発表を行いました。 tech.speee.jp 今回作ったもの DEMO ソースコード ブラウザで動くマルチトラックのステップシーケンサです 音楽の知識がなくても、なんとなく触っているだけでそれっぽい音が出ます サンプラーもついてます 使ったもの React/Redux FlowType Web Audio API/MediaDevices 発表資料 speakerdeck.com モチベーションと課題 前回のSpeeeKaigiではReactでシンセサイザーを作ったのですが、自分は楽器を弾けるわけではないので、ブラウザを使って音楽を楽しむところまでは到達できませんでした。 そこで、下記の3点を押さえたモノを作れば、楽器を
アプリケーションアーキテクチャ設計パターン
2017年10月12日紙版発売 2017年10月12日電子版発売 三菱UFJインフォメーションテクノロジー株式会社 斉藤賢哉 B5変形判／528ページ 定価3,850円（本体3,500円＋税10%） ISBN 978-4-7741-9303-8 Gihyo Direct Amazon 楽天ブックス ヨドバシ.com 電子版 Gihyo Digital Publishing Amazon Kindle ブックライブ 楽天kobo honto 本書のサポートページサンプルファイルのダウンロードや正誤表など この本の概要 本書は，アプリケーションアーキテクチャの基本設計フェーズにおいて「何を作るか」ではなく「どう作るか」を設計する際のガイドです。心臓部となるサーバサイドを中心に，シングルページアプリケーションの台頭で再び重要性を増してきたクライアントサイド，SQLなどの伝統的な処理方式とビッグデ
群馬県中之条町での十数年間にわたる"奇跡の研究" | メッツ健康法.com ウォーキングで病気予防と健康増進を応援
群馬県中之条町の65歳以上の全住民である5000人を対象とした長期研究 群馬県中之条町で身体活動（歩き）と病気予防の関係についての調査が2000年から実施されました。それは日頃の運動頻度や時間、生活の自立度、睡眠時間、食生活などに関する膨大なアンケート調査を行い、この内2000人に対しては、詳細な血液検査や遺伝子解析を行いました。更に、その内の500人に対しては、身体活動計（歩数と速歩き時間を計測）を携帯してもらい、一日24時間、一年365日の身体活動状況をモニターいたしました。さらに、その500人は統計上も5000人の生活習慣パターンの縮図であると考えられています。 10年以上続けて行われた中之条研究で得られた成果とは？ 中之条研究の最大成果は、健康維持や病気予防、更には健康寿命の延伸には、「その人の体力に応じた中強度の活動」が欠かせないということを明確に示したことです。この成果を得るた
「パスワードは定期的に変更してはいけない」--米政府 （ニューズウィーク日本版） - Yahoo!ニュース
＜アメリカの電子認証専門機関が、定期的なパスワード変更の推奨をやめると決めた。エンドユーザーもいずれ、代わりの新しい「パスフレーズ」を要求されるようになるはすだ＞ 米政府機関はもう、パスワードを定期的に変えるのを推奨しない。アメリカの企画標準化団体、米国立標準技術研究所（NIST）が発行する『電子認証に関するガイドライン』の新版からルールを変更する。 ウェブサイトやウェブサービスにも、サイトが乗っ取られたのでもない限り、「パスワードが長期間変更されていません」などの警告を定期的に表示するのを止めるよう勧告するという。銀行や病院のように人に知られてはいけない個人情報を扱う機関も同じだという。 【参考記事】パスワード不要の世界は、もう実現されている？！ 実は近年、情報セキュリティー専門家の間でも、特別の理由がない限り、ユーザーにパスワード変更を求めるべきではないという考え方が増えてきた
React.jsで起こるXSS (advent calendar 12日目の話) - ooooooo_qの日記
[追記]この記事は情報が古めです。Reactで起こるXSSパターンは他にも存在するので、CTFやbug bountyなどの言葉と一緒に検索してみてください。 この記事は脆弱性"&'<<>\ Advent Calendar 2016の13日目の記事です。 前日の記事はnullです。 この記事を見ている皆さんは仮想DOMに魂を震わせられているでしょうか*1、それともjavascriptに疲れてきた頃でしょうか。私はimagemagick関連を調べるのに疲れてきたところです。 React.jsで起こるXSS ここ数年のwebサービスではReact.jsのような仮想DOMを扱うライブラリを使ってhtmlがレンダリングされていることが多いので、典型的なDOM Based XSSなどは少なくなってきたように感じます*2。React.jsを例にすると、JSXがjsに変換されて仮想DOM経由でDOMを組み
Web系企業における小規模OSSの成功パターンを考える - Speee DEVELOPER BLOG
こんにちは、Speee技術顧問のid:gfxです。 最近は社内向けにOSSポリシー*1を策定しようとしており、草案を社内に公開して推敲しているところです。 さて、先日開かれたSpeee Cafe Meetup #02のテーマがOSSだったので、最近OSS活動に関して思っていることをまとめました。 ひとことでまとめると、「プロジェクトを成功させよう、そのためにOSSを活用しよう」という話です。 "OSSにコントリビュート" なんてしてる場合じゃない！ この話の文脈ですが、企業としてプロジェクトを成功させるためにどうOSSを活用するにはどうしたらいいのだろうか、 OSSを開発したり利用するときの成功パターンというのは何かということをもっと議論したい、すべきではないか と考えていて、その結果をまとめたものです。 この資料では「品質向上」というのをひとつのOSS活用の成功パターンとしてとりあげてい
正規表現でのメールアドレスチェックは見直すべき – ReDoS
(Last Updated On: 2018年8月13日)前のエントリでStackExchangeがReDoSで攻撃されサイトがダウンした問題を紹介しました。少しだけ掘り下げて見たところ、正規表現だけでメールアドレスをチェックしている場合、壊滅的なReDoS（十分短い文字列で指数関数的に実行時間が増加する）が可能なことが判りました。 結論を書くと、正規表現でのメールアドレスチェックは見直すべき、です。（特にRubyユーザー） 追記：影響範囲はメールアドレスチェックに限らないので、正規表現チェックは全体的に見直さないと、どこが脆弱なのか判りません。見直してチェックしたとしても、それが完全であったと保証することは困難です。ネット検索して直ぐに見つかった検索パターンは非常に脆弱であったこと、メールアドレスのマッチパターンは脆弱になりやすい繰り返しの繰り返しが含まれること、これらがあったのでタイト
1555夜 『パタン・ランゲージ』 クリストファー・アレグザンダー − 松岡正剛の千夜千冊
パタン・ランゲージ 環境設計の手引 クリストファー・アレグザンダー 鹿島出版会 1984 Christopher Alexander A Pattern Language 1977 [訳]平田翰那 編集：矢島直彦 装幀：海保透 いまさらアレグザンダーの パターン・ランゲージでもないだろうと思う諸君に、 今夜の千夜千冊をこっそり贈りたい。 では、各地の商店街がうまくいっているの？ では、高層ショッピングモールが賑やかに機能しているの？ では、大学競争の設計は勝ち目があるの？ では、文化施設はちゃんと町や観光に役立っているの？ では、都市の高齢者対策はうまくいっているの？ きっと日本の成功率は３割にとどかない。 だったらいったん、「ここ」に戻ってみてはいかがなものか。 たとえば、どこか手近なところに「緑」のスペースをつくりたいとする。植木屋や花屋にかけこむ前に次のことを考えたい。 一方ではその
ドット絵研 - ポルノアニメ
依頼しているグラフィッカーの方、実は年下なのでさすがにスーファミ時代のノウハウは持っておらず（というか私も当時は小学生だ）、じゃあスーファミ時代のドット絵で（64KBのVRAMに詰め込むために）どんなテクニックが使われていたのか簡単に調べてみましょうか、ということになった。 エミュレータでVRAMの中身をダンプして、これをJavascriptのプログラムで処理して画面を再構成するという方法で、画面を構成するタイルを分解して見ることにした。ちなみに、ROMイメージはちゃんと手持ちのカートリッジからRetrodeで吸い出して合法的な手段で得たので悪しからず。 す〜ぱ〜ぷよぷよ通リミックス（コンパイル） 固定画面のパズルゲームということで、わりと余裕のある使い方をしているように見える。このシーンで明らかに使わないパターンもVRAMに残っている。ちなみに設置済みのぷよはBGに描かれているが、操作中
Gitでやらかさないための事前予防策 - Qiita
Gitでやらかした時に使える19個の奥義を書いてやらかしたときになんとかリカバリできるようにした。 今回は、そもそもやらかさないようにしたいよねっていうお話。 コミット編 .gitignoreを細かく指定しておく .gitignoreを指定しておけば余計なファイルをコミットしちゃうことを予防できます 過去に似たようなプロジェクトがあるのならそれを流用しましょう。 ないのであれば.gitignore.ioで生成してそれをカスタムしましょう。 ワイルドカード指定やディレクトリまるごとの指定は副作用ある可能性があるので慎重に。 コミットメッセージのフォーマットを決めておく コミットメッセージのフォーマットを決めておけば書き直したいということも減ります コミットメッセージをやらかして直したいと思うことはよくあります。 そういうのって案外コミットメッセージが自由すぎることが問題だったりします。 ある
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
目からウロコ！Node-REDのデザインパターン10選 - Qiita
