Reactのパフォーマンスチューニングの歴史をまとめてみた
最近 React のパフォーマンスチューニング、特に再レンダリング抑制について調べたのでそのまとめです。 特に昔からおまじないとして書いていたことを、「なんであの書き方していたんだっけ」というのを調べてまとめました。 古いものを調べたのは、今あるチューニング方法とその当時の解決方法を比較したかったからです。 再レンダリングとはなにか 公式に説明があったのでそのまま引用します。（https://ja.reactjs.org/docs/optimizing-performance.html#avoid-reconciliation） React では、コンポーネントの props や state が変更された場合、React は新しく返された要素と以前にレンダーされたものとを比較することで、実際の DOM の更新が必要かを判断します。それらが等しくない場合、React は DOM を更新します
リモートでアジャイル開発ってどうしてる？〜メルカリ、LINE、クオカードでの取り組みを公開します〜【後編】 - Findy Engineer Lab
2020年8月26日（水）、Findyが主催するエンジニア向けイベント「アジャイル開発最前線〜メルカリ、LINE、クオカードのエンジニア組織を徹底解剖！〜」がオンライン上にて開催されました。 新型コロナウイルスの影響により、私たちの働き方は大きく変化しました。こうした状況の中で、より良い製品を作り出すためには、単に働き方を変えるだけでなく、多様な働き方に適した組織体制やコミュニケーション、さらにはツール選定など、エンジニア組織や開発手法自体も、時代に合わせて考える必要があります。 今回は、長きに渡ってアジャイル開発を進めてきたゲストの方々をお呼びし、アジャイル開発のこれまでと直近の変化、今後のあり方について語っていただきました。その内容を、前編のパネルディスカッションパートと、後編のQ＆Aパートに分けてお届けします。 前編はこちらから ■登壇者プロフィール 鎌田 正浩／LINE株式会社 [
リモートでアジャイル開発ってどうしてる？〜メルカリ、LINE、クオカードでの取り組みを公開します〜【前編】 - Findy Engineer Lab
2020年8月26日（水）、Findyが主催するエンジニア向けイベント「アジャイル開発最前線〜メルカリ、LINE、クオカードのエンジニア組織を徹底解剖！〜」がオンライン上にて開催されました。 新型コロナウイルスの影響により、私たちの働き方は大きく変化しました。こうした状況の中で、より良い製品を作り出すためには、単に働き方を変えるだけでなく、多様な働き方に適した組織体制やコミュニケーション、さらにはツール選定など、エンジニア組織や開発手法自体も、時代に合わせて考える必要があります。 今回は、長きに渡ってアジャイル開発を進めてきたゲストの方々をお呼びし、アジャイル開発のこれまでと直近の変化、今後のあり方について語っていただきました。その内容を、前編のパネルディスカッションパートと、後編のQ＆Aパートに分けてお届けします。 ■登壇者プロフィール 鎌田 正浩／LINE株式会社 [@iratamak
次世代のフォント技術 バリアブルフォントの世界 - ICS MEDIA
補完するのは登録された軸のみになります。たとえばitalの値が1種類しか登録されていないフォントはitalの値によらず一定の傾きをもちます。 オプティカルサイズとは、サイズに連動した文字のスタイルです。フォントサイズが小さなときは簡略化された表記、大きなときは細かく装飾されたフォント、というように設計されることがあります。 標準ではフォントサイズに依存しているため手動での変更はできませんが、一部のフォントでは変更が可能です。先ほどのデモにおいても、オプティカルサイズに応じて文字バランスが微妙に変更されることが確認できますね。 Roboto-Flexフォントを例に バリアブルフォントはまだそれほど普及していないこともあり、入手元がそれほど多くありません。今回は、オープンフォントライセンスで配布されているRoboto-Flexフォントを使用します。 GitHub - Roboto-Flex 記
grep の「バイナリファイル (標準入力) に一致しました」が出る条件を調べていたらそれは長い旅路の始まりだった。
はじめに 昨今では1行につき、1つの JSON を出力する様なログファイル形式も珍しくはありません。 grep しやすい データベース化しやすい これらの理由で各所で多く使われています。僕も仕事で普通に使っているのですが、ある日突然そのログファイルを集計するスクリプトで以下の様なエラーが出始めました。
Rails 6.1 で導入される予定の delegated_type をつかってみてる話 - ESM アジャイル事業部 開発者ブログ
こんにちわ。はじめまして。@kajisha です。 推しの Vtuber は、因幡はねる組長 かわいいおそろしいあくまでびでび・でびる様です。 最近は、風見くくさんのものまねが好きすぎてよく観てます。 初 3D 配信はほんとにクオリティが高いのでぜひ観てみてください。 www.youtube.com このエントリでは、現プロジェクトでつかっている delegated_type について少し書いてみたいと思います。 delegated_type とは何か 以下の Pull Request で Active Record に導入されたものです。 github.com Active Record にはクラス継承のしくみとして STI が提供されていますが、 単一のテーブルにサブクラスに必要な属性ももたせることになるので それぞれのサブクラスに必要な(そしてそれらはほとんどが nullable な
isucandarとISUCON9予選ベンチマーカーについて
前提 このエントリーは isucon/isucon9-qualify: ISUCON9予選 のベンチマーカー実装者としての観点から isucon/isucandar の解説をします。isucandar自体の解説についてはリポジトリのREADMEにある程度書かれているので、そこを参照してください。 このエントリーはISUCON9予選ベンチマーカーを実装していた時に私自身が何を考えていたのかという思い出話も入ります。ベンチマーカーを実装したことがある人以外にはほとんど益がないエントリーになると思いますが、そういうエントリーなので興味がなければこの先は読まずに閉じることをおすすめします。 また去年私が書いた以下のエントリーを読んでいることが前提になるので、このエントリーを読んでいない人はまずこちらを読んでから読んでください。 ISUCON9予選の出題と外部サービス・ベンチマーカーについて ISU
iOSやmacOSのソースコード、脆弱性により外部からのアクセスが可能になっていた - iPhone Mania
iOSやmacOSのソースコード、脆弱性により外部からのアクセスが可能になっていた 2020 10/10 システムの脆弱性により、iOSやmacOSのソースコードが外部に対して「オープン」な状態となっていたことが、セキュリティ研究チームの調査で明らかになりました。 iCloudのSSRF脆弱性を発見 セキュリティ研究者のサム・カリー氏ら5人で構成されるチームはAppleのバグ懸賞プログラムにエントリーし、3カ月間でセキュリティに関連した55種類の脆弱性を発見しました。このうち11種類は深刻なものであったと報告されています。 この11種類のなかでも、カリー氏が「非常に見つけにくかった」バグであるとし、アプリ開発者のスティーブ・トラウトン＝スミス氏（@stroughtonsmith）が「衝撃的だ」と評しているのが、「iCloudのサーバーサイドリクエストフォージェリ（SSRF）脆弱性」です。
結婚して妻の姓になり7年がたった
7年経ったし諸々所見を書いておきます。 昔から珍しい名字が好きでした。SMAPではもちろん草彅くんが一番（名字が）好きだし、プレステ発表時には「すげえ！この人、名字が久夛良木（クタラギ）だってよ！」と興奮したものです。 そんな僕も結婚することになり、妻の姓を選ぶか、妻に自分の姓を選ばせるか、決めることになりました。 夫男ばかりの兄弟の長男。漢字は簡単なのに読み方が大変珍しい。でも地元にはたくさんいる。ここでは仮に「生天目（ナバタメ）」としよう。妻女ばかりの姉妹の長女。読み方は簡単なのに漢字が大変珍しい。これも（妻の）地元にはたくさんいる。これは仮に「靏岡（ツルオカ）」としよう。名字マニアとしては甲乙つけがたいです。自分の名字にも愛着はありましたが、ここでは個人的に大きなメリットとなる点から、妻の名字を選ぶことにしました。 メリット手続きがたくさんできる！多分多くの人は「は？」ってなるんでし
テックブログは続かない - 何サイトか潰した後にブログが有名な企業に転職しての気づきと反省｜久松剛
これまでエンジニア採用を中心に社内の協力が必要不可欠であることについてお話させて頂きました。この協力の最たるものがテックブログです。採用担当1人ではできず、協力を仰いだ数名でも続かない。全社的に巻き込まないと達成されないのがこれらのブログです。 私自身、これまで企業ブログ・テックブログが危篤状態になったり、看取ったりしたこともあります。「見栄えが悪いので更新するか閉じるかしてください」とよく言われたものです。しかし一人ではどうにもなりません。 その後、LIGという有名ブログを抱えた企業に入りましたが、その裏側ではかなりな努力と全社での理解が感じられました。今回はどのようにしたら採用まで効果が期待できるほどのブログに成長できるのかお話していければと思います。 採用としてのテックブログの意義 何故企業ブログやテックブログをするのでしょう。インバウンド営業を狙ったものも当然ありますし、社内報的に
次世代画像形式のWebP、そしてAVIFへ。変わり続ける技術に対応するweb制作の黄金解 - ICS MEDIA
WebP（ウェッピー）という画像形式をご存知でしょうか？ 長い間、webの静止画は大部分がJPEG/GIF/PNGのいずれかでした。WebPはこのすべてを置き換えることができる次世代のフォーマットです。2020年9月リリースのiOS 14がWebPをサポートしたことで、主要なモダンブラウザーの足並みがようやく揃いました。 この記事では、新しい技術の恩恵を最大限に受けつつ、変わり続ける画像形式に対応していくための最適解を探ります。 ※ この記事の初版は2020年10月の公開ですが、各ブラウザーの対応状況等は2025年2月に最新の内容に更新しています。 SafariがWebPをサポート。フォーマット戦争ついに終結か？ 2020年現在、webで主流の画像形式はJPEG/GIF/PNGの3つでしょう。 2006年リリースのIE7で透過PNGがサポートされたことで、静止画に関しては「写真のJPEG、
ISUCON10 オンライン予選で発生したトラブルについて : ISUCON公式Blog
ISUCONとはLINEヤフー株式会社が運営窓口となって開催している、お題となるWebサービスを決められたレギュレーションの中で限界まで高速化を図るチューニングバトルです ISUCON10 予選において発生していた、競技開始の遅延をはじめ、ベンチマーカーの不具合、ポータルの 50x エラー等、度重なるトラブルについて詳細を説明させていただきます。 運営チーム一同として、様々な要因から複合的なトラブルに発展させてしまったという認識です。これらの反省点を踏まえ、同種のトラブルを起こさぬよう、次の運営チームへ反省点やデータを引き継いでいきたいと考えています。その観点において、以下に ISUCON10 予選で発生していた各種トラブルの背景・原因について振り返ります。 競技時間の延期についてまずは ISUCON10 予選の競技時間が、当初予定の 10:00 開始から 12:00 、さらに延期して 1
ID生成方法についてあれこれ
ID生成について聞かれることが多いので、独自の観点でまとめてみます。タイトルは適当です…。 DBはMySQL(InnoDB)を想定しています。あしからず。 ID生成を知りたいなら ID生成に関しては以下の記事がよくまとまっているので参考にしてみてください。値形式など詳しく書かれています。 ID生成大全 Facebook, Twitter, Instagram等がどうやってIDを生成しているのか まとめ ID生成方法 以下のID生成方法は、お手軽に採用しやすいもの順で列挙します。 DB採番/連番型 AUTO_INCREMENT DBのAUTO_INCREMENTで採番する方法。 Pros 数値型で扱える 普通は64ビットの整数型を採用することが多い 単調増加する連番ですので、ソート可能でかつインデックスの空間効率がよい 単調増加するので、キャパシティを予測しやすい 64ビットあればあまり気に
稼働中アプリケーション・サーバーの設定を最適化する | 外道父の匠
リクエストを受け付けてレスポンスを返すようなシステムには、アプリケーション・サーバーというミドルウェアが必要になります。どんなシステムも完全放置して良いものはありませんが、こいつも放置されると機嫌を損ないやすいので、ちょいちょい面倒を見てあげるとよいです。 どんなポイントをどのように調べて、どのように調整してあげると喜ぶか、というのを初級編的にまとめていきたいと思います。 アプリケーション・サーバーの要所 昔は Apache + module という形で、WEBサーバーと同居する形で動かすことがありましたが、今は Nginx の80番ポートが受けて、後ろに控えているアプリケーション・サーバーに socket なり HTTP なりで流す。というのが主流だと思います。 この20年で流行り廃りはありましたが、基本的な設定項目──というか注視すべきポイントというのはそう変わっていません。その要所に
エリート DevOps チームであることを Four Keys プロジェクトで確認する | Google Cloud 公式ブログ
※この投稿は米国時間 2020 年 9 月 23 日に、Google Cloud blog に投稿されたものの抄訳です。 DevOps Research and Assessment（DORA）チームが実施した 6 年間の研究から、ソフトウェア開発チームのパフォーマンスを示す 4 つの指標が確立されました。 デプロイの頻度 - 組織による正常な本番環境へのリリースの頻度 変更のリードタイム - commit から本番環境稼働までの所要時間 変更障害率 - デプロイが原因で本番環境で障害が発生する割合（%） サービス復元時間 - 組織が本番環境での障害から回復するのにかかる時間 概要レベルでは、デプロイの頻度と変更のリード時間は速度の指標であり、変更障害率とサービス復元時間は安定性の指標です。チームはこれらの値を測定し、継続的に改善を繰り返すことで、ビジネス成果を大幅に向上させることができま
普段やってる情報収集や学習について(フロントエンド寄り)
どうも。 普段フロントエンド周りの開発をやっている者です🐶 今回は普段自分がやっている情報収集と学習で使ってるサイトや手法を紹介します。 過去にも何度かこの類の話をしているのですが、2020年版という感じです。 誰かの参考になればいいなと思います。 情報収集 まずは情報収集についてです。 自分の場合は、毎日見るものと週に1度見るものがあります。 daily.dev 普段はこのdaily.devのブラウザ拡張機能を入れて、Chromeのトップ画面で情報を見ています。 新しいタブを開くたびに表示されるので、いつも目に入るのがいいところです。 2021/05/26 追記 Chrome拡張だけではなく、Web アプリケーションもリリースされました🎉 PWAにも対応しているので、デスクトップやモバイルでインストールも可能です！ daily.devは簡単に説明するとさまざまなサイトのRSSリーダー
「努力せず、自動的に仕事に集中できる環境」をつくるためにやっている８つのこと。
パフォーマンスは努力や意志力ではなく「環境」が決める 年収は、働き手の資質ではなく、住むところで決まるという事実がある。 職務経験、教育レベル、ＩＱ（知能指数）の違いを考慮に入れて比較をおこなっても、年収の格差は同じように存在する。 要するに、働き手の資質自体にはあまり大きな違いがない。違うのは、その人が働いている地域の経済のあり方、とくにその地域の高技能の働き手の数なのだ。 一見、直観に反する事実だが、 「地域の住民が受け取る収入は、その地域の産業の生産性の高さで決まる」 と言われれば、ごく当たり前の話かもしれない。 極めて生産性の高い（≒収益性の高い）産業は、周囲にお金をばらまくので、高技能な人材から、純粋な肉体労働者まで、住民が就くことのできる仕事の種類を増やす。 その結果、労働者全体の手にする収入も向上する。高学歴の働き手だけでなく、学歴の低い人の給料も高くなるのだ。 実際、全米で
Kaigi on Rails に登壇してきました & 後日談 - makicamelの日記
2020 年 10 月 3 日に開催された Kaigi on Rails に登壇してきました。 サイトデザインとてもかわいくて好きです😊 レールが Ruby のまわりをくるくる回ってるのとか、STAY HOME Edition ということで列車が駅舎に入っているのもとてもかわいい…。 各所にレール・電車のモチーフが散りばめられているのがとてもいいなあと思っています。 CFP について 「初学者から上級者までが楽しめるWeb系の技術カンファレンス」をコアコンセプトとしていて、当初 CFP の推奨内容が「明日からのお仕事に役立つ内容」とあったので悩みました。 5 月に転職して以降セキュリティのチームになっていたのでその話も考えたのですが、「調べた内容をまとめる」系になってテンションがあがらない。。。 結果〆切ぎりぎりになって今回の登壇内容を思いつき、ガッと仕上げて提出したのでした。 TL で
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
俺たちはマルチステークホルダー間のセキュリティインシデントから何を学ぶのか
HTTP クライアントを作ろうとして学ぶ、使いやすいインタフェース / #GoCon_Sendai 2020
不毛な会議を防ぐには - yuiseki
builders.flash - 変化を求めるデベロッパーを応援する AWS のウェブマガジン
builders.flash - 変化を求めるデベロッパーを応援する AWS のウェブマガジン
Rubyで書かれた ソースコードを読む技術 in kaigi on rails/technic-of-reading-source-code-written-in-ruby-for-kaigi-on-rails-2020