import List from "./List"; type ListProps = React.ComponentProps<typeof List>; type TableProps = { color: string; } & ListProps; const Table: React.VFC<TableProps> = ({ color, data }) => { return ( <div> ... <List data={data} />; </div> ); };
![React + TypeScriptでpropsと型を便利に扱うTips集](https://cdn-ak-scissors.b.st-hatena.com/image/square/6992a3d6922f6b7d15a58d2afa7a69800dad3e45/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--oZkl-YeB--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3AReact%252520%25252B%252520TypeScript%2525E3%252581%2525A7props%2525E3%252581%2525A8%2525E5%25259E%25258B%2525E3%252582%252592%2525E4%2525BE%2525BF%2525E5%252588%2525A9%2525E3%252581%2525AB%2525E6%252589%2525B1%2525E3%252581%252586Tips%2525E9%25259B%252586%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Asoso%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzFmODE2ZDZkNWQuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
React では、useMemoやReact.memoなどが最適化の手段として知られています。 これらは最適化であるため、必要が無いのにuseMemoを使うことは無駄な最適化であるとして避けられる傾向にあります。 筆者が簡単なベンチマークを取ってみたところ、あるコンポーネントが一つ余計なuseMemoを持っているよりも、一つ余計な<div>をレンダリングする方が、パフォーマンス(レンダリングにかかる時間)をより悪化させることが分かりました。 したがって、useMemoなどを減らすことに執心する場合は、それと同等以上の熱量で余計な要素を減らすことに執心する必要があります。 ベンチマークはこちらです。 結果には当然ばらつきがありますが、筆者の環境では次のような結果が典型的なものとして現れました(Mac 上の Google Chrome・Firefox・Safari で同じような傾向)。 bas
みずほ銀行システム障害の調査報告書が公開されたのがニュースになって、Twitterなどで色々な人がコメントをしているのを見た。140文字しか書けない空間で他人の失敗談の揚げ足取りをするのは簡単だが、そこからは一時の爽快感以外に何も得るものがないので、僕はそういうのはカッコ悪いと思っている。 そこで、ちゃんと読んでみたら全く他人事でない部分も沢山あるし、非常に面白く勉強になったので、ブログにまとめてみる。 技術的な話 銀行のシステムがどのようになっているのか、全然イメージが湧いていなかったので、それがまず勉強になった(p.29)。 トラフィックのソースに応じて用意された色々なシステムから基幹システム「MINORI」の取引メインバスにトラフィックが流れ、そこから各種システムへとリクエストが送られていく。この辺はService Oriented Architectureらしい。開発当時としては(
Recent posts: 24 Mar 2024 » Linux Crisis Tools 17 Mar 2024 » The Return of the Frame Pointers 10 Mar 2024 » eBPF Documentary 28 Apr 2023 » eBPF Observability Tools Are Not Security Tools 01 Mar 2023 » USENIX SREcon APAC 2022: Computing Performance: What's on the Horizon 17 Feb 2023 » USENIX SREcon APAC 2023: CFP 02 May 2022 » Brendan@Intel.com 15 Apr 2022 » Netflix End of Series 1 09 Apr 2022 » Te
NTT Tech Conferenceは、NTTグループのエンジニアたちが一堂に会し、NTTグループ内外のエンジニアたちと技術交流を行うためのカンファレンスです。ここで「macOSの仮想化技術について~ virtualization-rs Rust bindings for Virtualization」をテーマに鈴ヶ嶺氏が登壇。まずはmacOSの仮想化技術の変遷と、ツールについて紹介します。 発表の内容とアジェンダ紹介 鈴ヶ嶺聡哲氏(以下、鈴ヶ嶺):よろしくお願いします。鈴ヶ嶺です。まず概要を説明します。macOSの「11 Big Sur」から、新しくLinux VM作成の高レベルAPIのVirtualization.frameworkが登場しました。本発表ではこれがメインになります。 Objective-CやSwiftのAPIが提供されていますが、「あれ? Rust APIがないなぁ」
株式会社ラクーンホールディングスのエンジニア/デザイナーから技術情報をはじめ、世の中のためになることや社内のことなどを発信してます。 パフォーマンスOracleデータベースDB設計インデックス こんにちは羽山です。 今回はOracleデータベースの標準機能だけでテーブルのパーティション化とそれに伴うパフォーマンス改善を実現する方法を紹介します。 本来Oracleでテーブルのパーティション化をするためには対応するエディションと追加オプションが必要なので活用できる環境にいる方は多くはなさそうですが、パーティション化自体のメリットは大規模DBだけでなく、中・小規模のDBでもパフォーマンスチューニングの手段として有用です。 今回のテクニックはそのパーティションテーブルのおいしい部分を再現できるので、今までパーティションテーブルに関心を持ったことがない方にこそ、是非参考にしていただけたらと思っていま
今回はTrusted Typesに対する個人の見解を書いてみます。 Trusted Typesはブラウザが文字列を文字列以外の型として扱うSinkに対して、開発者に型の変換を強制するセキュリティ機能です。Trusted TypesによりDOM-based XSSを原理的に減らし、DOM-based XSSに対するセキュリティレビューを簡潔にすることが出来ます。 安全でないデフォルト近頃のWeb開発ではTypeScriptがよく使われるようになりました。これは型を明示することにより、エラーを事前に防げるからです。 セキュリティでも同じことが言えます。そもそもelement.innerHTMLにStringを代入出来ること自体が間違っているのです。innerHTMLはHTMLを代入する為のものであり、Stringを代入してもHTMLとして型の変換がされてしまうからです(i.e. re-pars
StringBeginnersは文字列データ構造とアルゴリズムを学ぶワークショップです。古典から最新 まで有用な技術を習得することで文字列情報学と関連分野の理論的な発展、実用的な応用を目指します。参加者は様々なトピックを持ち寄り、スライドやホワイトボードを用いて他の参加者へ講義を行います。 StringBeginnersは未解決問題について議論を行うワークショップStringMastersにインスパイアされて設立されました。 StringBeginners is a workshop to study string data structures and algorithms. Our aim is to learn traditional and latest useful topics for contributing to research and industrial commun
先日、The Plan for React 18という記事が React チームから発表されました。これは React の次期メジャーバージョンである React 18 で予定されている変更や新機能を紹介するとともに、React 18 の alpha 版の公開を知らせるものです。この記事自体に技術的なトピックは載っておらず、それらはReact 18 Working Groupという新設されたリポジトリに Discussion としてまとめられています。 本記事では、今回あった発表のポイントを厳選してお伝えします。ポイントを絞ってお伝えするため載せる情報は取捨選択しています。隅々まで理解したいという方は原文か他の記事を参照しましょう。 アップグレードの簡単さ React 17 の際もそうでしたが、最近の React は「簡単にアップデートできる」ことをたいへん重要視しており、React 18
The Plan for React 18 のブログで React v18 の計画が発表され、アルファもリリースされました。当初の計画からは色々と変わりましたが、順調に進めば今年中に v18 がリリースされそうです。 このアルファリリースは、React 関連のライブラリ作者に試してもらってフィードバックもらうことを目的にしているため、現時点でプロダクトのコードに導入することは推奨していません。 アルファリリースなのでまだまだ破壊的な API も予想されます。 reactwg/react-18 フィードバックをもらう場所として、reactwg/react-18 という GitHub Discussions のためのリポジトリが作成されています。この Discussions は誰でも見ることはできますが書き込めるのは Collaborators になっている人のみです。そのため比較的議論の内容
今回はパッケージの日々のアップデートと、Ubuntuまるごとのアップグレードを制御する方法を紹介します。 アップデートとアップグレード Ubuntuは最新版のリリース時から(場合によってはリリース前から)パッケージのアップデートを提供しています。アップデートの理由は不具合修正や脆弱性の修正が主ではありますが、Firefoxなどアップストリームによるリリースがあったのでこれに追随するからというものもあります。 理由はさておき、パッケージのアップデートがリリースされた場合、デフォルトの設定では定期的にリポジトリ情報を更新し(換言するとapt updateを自動実行し)、セキュリティアップデートの場合は即座に適用します。そうではない場合、1週間毎にアップデートがあることを告知します。 最新バージョンのUbuntuがリリースされた場合、通常リリース(中間リリース)の場合はアップグレードが促され
クリーンアーキテクチャで web アプリケーションを作る際に、バリデーションはどのレイヤの責務なのか?と悩むことが多いため、それについての考察を行ってみる。 あと、バリデーションについて書いてたはずがドメインロジックとアプリケーションロジックの違いについても結構言及せざるを得ない感じになったので、そのへんの話もしてみる。 結論から言うと バリデーションはどのレイヤの責務なのか?という問い自体が間違いであり、レイヤごとにそのレイヤの責務となるバリデーションを行うべき、というのが今のところの結論。 バリデーションという単語は意味があまりに広い。「意図していないもの/ことを防ぐ」ことはすべてバリデーションと呼ばれている節がある。そのことにより、バリデーションというのはあたかも唯一つの責務であるかのように錯覚しがちだが、そうではない。クリーンアーキテクチャではレイヤによって責務を分担しているが、同
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く