こわくないTypeScript〜Mapped TypeもConditional Typeも使いこなせ〜 - uhyo/blog
TypeScriptの型システムは、ユニオン型を始めとする様々な機能を持っているのが特徴的です。 その中でも、mapped typesとconditional typesは高度な機能として知られています。 ところが、その機能の膨大さゆえ、全てを使いこなす必要はない、TypeScriptの複雑な機能を無闇に使うべきではないという言説はたびたび現れます。 そのときに槍玉に上がりやすいのがmapped typesとconditional typesなのです。 筆者は、これらの機能は使えるだけ使い倒すべきであるという考えを持っています。 主張の根幹には、高度な型を使えばより正確にインターフェースを記述することができること、そして正確なインターフェースは使いやすさや正確な型推論結果に貢献することがあります。 正確なインターフェースや型推論結果は、コードの理解速度や開発効率を促進します。 これらは型シ
Designing a JavaScript Plugin System | CSS-Tricks
WordPress has plugins. jQuery has plugins. Gatsby, Eleventy, and Vue do, too. Plugins are a common feature of libraries and frameworks, and for a good reason: they allow developers to add functionality, in a safe, scalable way. This makes the core project more valuable, and it builds a community — all without creating an additional maintenance burden. What a great deal! So how do you go about buil
CORSの仕組みをGIFアニメで分かりやすく解説
クロスオリジンのリクエストを安全にするための同一生成元ポリシーとオリジン間のリソース共有（CORS）の仕組みをGIFアニメで解説した記事を紹介します。 ✋🏼🔥 CS Visualized: CORS by Lydia Hallie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ✋🏼同一生成元ポリシー（Same-Origin Policy）とは 🔥クライアントサイドのCORS 💻サーバーサイドのCORS 🚀プリフライト リクエスト（Preflighted Requests） 🍪認証 はじめに 「Access to fetched to fetched has been blocked by CORS policy error」と赤い文字がコンソールに表示されると、デベロッパーなら誰でもフラストレーションが
Reactのレンダリングに関する完全ガイド - Qiita
この記事はComplete Guide to React Rendering Behaviorの翻訳記事になっています。 ご本人(Markさん)にも許可を頂いて翻訳しております。 こちらの記事がReactのレンダリングを理解する上で今までで一番体系的で一番分かりやすかったので、ぜひ紹介したく翻訳させて頂きました。 翻訳ツールにもたくさん助けてもらいながら行い、意訳が出来ていない部分が多々あるかと思いますので修正依頼を出して頂けると幸いです！ Twitterでも、フロントエンドに関する事や、アメリカでのエンジニア経験に関してツイートしているので、よかったらフォローお願いします。 Twitter: @hellokenta_ja 下記から本文です。 Complete Guide to React Rendering Behavior この記事は、Reactレンダリングがどのように振る舞うか、Co
2020年の11の必見のフロントエンドトレンド - Qiita
こちらの記事は、Jonathan Saring 氏により2019年12月に公開された『 11 Must-Know FrontEnd Trends for 2020 』の和訳です。 本記事は原著者から許可を得た上で記事を公開しています。 ランチ中のフロントエンドトークでスマートに見られる方法！ チームのランチトークでスマートに見られることは、最新のフロントエンドのトレンドを常に把握しておくための大きな理由であることは言うまでもない。 それは、あなたがより良い開発者になり、より良い技術とより良い製品を作るのに役にたつかもしれない。 たぶんね。 だから、いくつかの興味深い方向を示すことで、この名誉あるクエストを君が簡単に達成できるように少し時間をもらいたい。 すべてのコンセプトについて1から10まで説明するのではなく、そのコンセプトとそれがどのように有用であるか紹介しよう。最後にはさらなるリソー
TypeScript の型定義ファイルの探索アルゴリズム - 30歳からのプログラミング
npm パッケージは基本的に、JavaScript ファイルで配布されている。TypeScript で開発しているパッケージであっても、JavaScript にビルドしたものを配布している。 そのため、型定義ファイルによって型付けしないと、インポートした際にモジュール全体がanyになってしまう。 これでは型システムの恩恵を受けることができないし、noImplicitAnyフラグをfalseにしていない場合はコンパイルエラーになってしまう。 npm パッケージをインポートした際、TypeScript は自動的に型定義ファイルを探索し、最初に見つかったものを使用する。 また、プロジェクト内にある JavaScript ファイルをインポートした際も、型定義ファイルの探索が行われる。 この記事では、TypeScript がどのように型定義ファイルを探索するのか、実際に検証して確認していく。 動作確
今から始めるWebRTC / How to learn WebRTC
2020/7/8 ビデオSaaSのエンジニアリング最前線の登壇資料です。 WebRTCを学ぶための指針についてまとめています。
AWSによるクラウド入門
真野 智之 (Tomoyuki Mano) <tomoyukimano@gmail.com> version 1.0, 2020-06-19
現代開発者のためのCSS基礎技術 - Qiita
ウェブアプリケーション開発における、現代的なCSSの基礎技術についてまとめました。 ちまたには「CSSとは何か」を学ぶ教材はたくさんあっても、「CSSをどうやってうまく使うか」についてはあまり詳しく触れられません。 仕様をたくさん記憶したところで、いつになっても開発力はあがらないのです。 本記事は「CSSをうまく使う技術」に焦点をあてて、実際に現代的なウェブアプリケーションに求められるレベルのCSSを書くための知識を紹介します。 特に プログラミング経験はあるもののウェブフロントエンドの経験が浅い方 初級レベルのCSSはある程度理解したものの、次にどうしたらいいかわからない方 にお勧めです。 プロローグ CSSの書き方は一通りではありません。 好きな書き方を自由に選ぶことができます。 これは一見すると良いことですが、裏を返すと最適ではない書き方がたくさんあるということです。 この場において
React Testing Libraryの使い方 - Qiita
Robin Wieruch氏によるHow to use React Testing Library Tutorialを著者の許可を得て意訳しました。 誤りやより良い表現などがあればご指摘頂けると助かります。 原文： https://www.robinwieruch.de/react-testing-library Kent C. Dodds氏によるReact Testing Library (RTL)がAirbnbのEnzymeに取って代わるものとしてリリースされました。EnzymeはReact開発者にReactコンポーネント内部をテストするためのユーティリティを提供しますが、React Testing Libraryは一歩さがって、「Reactコンポーネントを完全に信頼するためにはどうテストすべきか」を問いかけます。コンポーネントの実装の詳細をテストするのではなく、React Testi
NTT フレッツ光における通信速度などの現状について、背景や仕組みから正しく理解する 2020
会社でフルリモート体制が築かれるにつれ、各スタッフの自宅の回線などについての相談を受けることが増えてきました。ということで、筆者 sorah の見解として 2020 年の NTT フレッツ光網について、主に通信速度や輻輳についての問題を理解するための背景と仕組みを説明しようと思います。 理解が間違っていたら教えてください。なるべく総務省や NTT の資料からソースを集めてきた上で説明していますが、出典不明の情報も混ざっているかもしれません。できるだけ具体的な出典を文単位で示していますが、複数の資料に渡る複雑なトピックに関しては文末に纏める形になっています。 技術的な意味での細かい解説よりも複雑な事情や背景の説明が中心です。フレッツ光とか NGN とか IPoE とか IPv6 とか v6 プラス・アルファみたいな言葉を聞いて、なんでそんな難しいんだと思った人も多いんじゃないでしょうか。エン
React の Context の更新による不要な再レンダリングを防ぐ 〜useContext を利用した時に発生する不要な再レンダリングを防ぐ方法に関して〜 - Qiita
React の Context の更新による不要な再レンダリングを防ぐ 〜useContext を利用した時に発生する不要な再レンダリングを防ぐ方法に関して〜 はじめに React（v16.12.0） の Context の更新による不要な再レンダリングを防ぐ方法についての備忘録です。 useContextフックなどで利用する Context のデメリットとして 「Context を更新したら、その Context を利用しているコンポーネントがすべて再レンダリングされてしまう」 ということが記載されている時がありますが、関数コンポーネントであれば再レンダリングを防げます（クラスコンポーネントでもできるかも）。 ということで、この記事は関数コンポーネントを対象としています。 また、デモは CodeSandbox 上に置いてあります。編集して動作を確認してみると理解が深まると思います。 us
君は真に理解しているか？z-indexとスタッキングコンテキストの関係 - ICS MEDIA
CSSで要素の重なりを表現する時はスタッキングコンテキストによって決められています。スタッキングコンテキスト（Stacking Context）はウェブページ上の仮想的な奥・手前方向の概念であり、「重ね合わせコンテキスト」、あるいは「スタック文脈」とも言います。 z-indexによる重なり位置の指定もこのスタッキングコンテキストのうちの一つです。今回はz-indexより広い概念のスタッキングコンテキストの深淵を覗いてみます。 z-index:5がz-index:53万に勝つ方法 重なりといえば、z-indexです。z-indexはWeb初心者キラーなプロパティで、その値が必ずしも重なりの順序になりません。例えば次のようなz-indexが53万と5の要素があったとします。この場合、53万の要素が上にきます。 <div class="wrapper wrapper-freeza"> <div
実際のところ「ブラウザを立ち上げてページが表示されるまで」には何が起きるのか - Qiita
9月15日(土) DNSについて追記しました。バックエンド？今はクラウドがきっと上手くやってくれるので深く考える必要は無いんですよ（知らないので書けません😔） 問題のツイート 面接の質問で「ブラウザを立ち上げてページが表示されるまでの仕組みを全て知ってる限り説明してください」ってのをやると結構Web系の知識どれだけあるか分かると思ってる — 🍛🍺 (@tan_go238) September 10, 2018 解釈 今回は「ChromeのURL欄に入力してからページが表示されるまで」をやります。ブラウザの起動云々はWeb系の話じゃないと信じてます。 1. HTTPリクエストが飛ぶ HTTP2のヘッダ圧縮技術に全て書いてありました。 (追記)下のリクエストヘッダはテキストで書かれていますが、実際にはこれをバイナリにしたものが飛んでいるとのことです。segfoさんありがとうございます！
React TypeScript Cheatsheets | React TypeScript Cheatsheets
React TypeScript CheatsheetsCheatsheets for experienced React developers getting started with TypeScript
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Global React Meetup: The State of Redux 2020
UIデザイン講習会
Web Speed Hackathon Online 出題のねらいと解説
27 Best JavaScript Frameworks For 2024 | LambdaTest
styled components documentation日本語訳①ーBasicsー - Qiita
