Reactでredux-sagaで非同期通信 〜redux-thunkとの比較も〜 - Qiita
Reactでの非同期通信処理の方法 Reduxのミドルウェアを使って実装します ※ Reactのコンポーネント内で処理する方法もありますが、コンポーネントと通信処理が密結合になってコンポーネントのソースが複雑になり、可読性が下がるなどの理由で採用されるケースはあまりないためこの方法はとりません redux-sagaとredux-thunkの比較 非同期通信処理の代表である redux-sagaとredux-thunkについて比較してみます 上図のように、redux-thunkを導入すると、action creatorの中に非同期通信処理を書いたり、action creatorからさらに別のaction creatorをcallすることができるようになります。 そのため、本来の reduxのアーキテクチャの形から逸脱することになり、記述の自由度が上がり開発者各々が書くことでソースコードの可読
【開発支援ツール】Charlesの使い方更新版【神ツールv4.5.6】 - Qiita
はじめに 本稿はCharlesというプロキシツールのv4.5.6版の解説です。 【開発支援ツール】Charlesの使い方【神ツール】を書いた人ですが、記事が古くCharlesも更新されていたので書き直し記事みたいなやつです。 Charlesとは アプリ開発をしているとAPIのレスポンスを見たかったり、正しいドメインにアクセスしているかを確認したい場合が出てくると思います。 それが簡単にできる便利なツールがCharlesです！(とても便利) エンジニアなら是非Charlesを使いこなしましょう！！(とてもとても便利) 聡明な皆さんならもちろんご存知の神ツールです。 Charlesでできること ・通信のモニタリング -アクセスしたドメインやAPIのリクエスト/レスポンスのヘッダやボディを確認できます。 ・通信速度のシミュレーション -通信速度を変えて通信できるようになります。タイムアウトのテス
JSONをサーバーとフロント側で安全に共有する - Qiita
こんな感じかなと思いつつ、ベスト・プラクティスってありますか？ 追記: @ngyuki さんがコメントしてくださったものの方がよさそうなのでそちらを紹介しておきます 属性値として設定してHTML escapeする
理想的なStorybookのワークフローとは - Qiita
こちらの記事は、Dominic Nguyen 氏により2018年 5月に公開された『 The Delightful Storybook Workflow 』の和訳です。 本記事は原著者から許可を得た上で記事を公開しています。 あなたのチームのアドオン、コンフィギュレーション、APIといった一連のニーズに合わせてカスタマイズできる事は、Storybookの大きな利点です。しかし、Storybookは指先一つで様々なオプションが操れるが故に、全体像ーStorybookのワークフローを見失いがちです。 今回、私は4つのプロフェッショナルチームとStorybookのメンテナー達にインタビューを行い、彼らの「生産性、セットアップ、メンバーの満足度」のバランスを取るためのコアワークフローを要約しました。この記事では、StorybookでUIコンポーネントを生産するための効率的な反復プロセスについて説明
スナック「jQuery」 - Qiita
……あら、いらっしゃい。 若いお客さんなんて珍しいわねえ。昔は、この街一番の人気店でね、若いお客さんもたくさんいたんだけどさ。最近はめっきり減っちゃってね。 何飲む？ ……水割り？ わかったわ。 じゃあさ、ちょっとだけ、あたしの昔話に付き合ってもらってもいいかしら。 What is jQuery? この店――『jQuery』がオープンしたのって、2006年なんだけどさ。その頃の、この街の様子って覚えてる？ ……知らないか。あなた、まだ若いもんね。その頃って、そりゃあヒドイもんだったのよ。 その頃、シェア率トップだったブラウザって、もちろんInternet Explorerだったんだけど。当時はバージョン7が登場したばかりで、あの悪名高きIE6もまだまだ主流だったの。 他のブラウザは、Safariがバージョン3がMacとWindowsに公開されていた頃で、Firefoxはまだバージョン2.0
macOS CatalinaでChromeからオレオレ証明書のHTTPSサイトにアクセスできない場合の対処法 - Qiita
macOS CatalinaのChromeで、オレオレ証明書を利用しているHTTPSの社内サイト等にアクセスすると、以下のように証明書エラーで閲覧できない（閲覧続行のボタンも表示されない）問題があるため、その対処法をメモしておく 環境 macOS Catalina 10.15.2 Chrome 79.0.3945.88 手順 まず、Safariで該当サイトにアクセスし、警告画面で閲覧を続行する すると、「キーチェーン」アプリで該当サイトの証明書が追加されているはずなので、それをダブルクリック 「信頼」情報を展開する 「この証明書を使用するとき」を「常に信頼」に変更する 画面を閉じる際にログインユーザで認証することで、変更が確定する Chromeでアクセスできることを確認する 参考 https://qiita.com/takky/items/2dbc431b278329465093 http
[JavaScript]初心者が初見で必ずthinking顔になるもの特集 - Qiita
初心者が見た瞬間になるもの特集です。 小テクだったり、省略記法だったり、、 実際私も出会ってになりました！ 追記 即時関数のところで説明にある 他には、+や-等でも動きます。 の"等"が気になった方に朗報です。こちらの記事で"等"を知ることができます！！ [JavaScript] "!function() {}()"以外の即時関数を紹介するぜ よろしければ覗いてみてください！ !! is 何 booleanへの型変換。 例 const obj = { hoge: "hoge" } function hasHoge() { return !!obj.hoge // => true } 論理否定（！）を二つ繋げて、boolean への型変換をしています。 !の結果を!で評価しているんですね〜。 JSON.parse(JSON.stringify(obj)) is 何 ディープコピー。 例
![[JavaScript]初心者が初見で必ずthinking顔になるもの特集 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/7f41f8fc8f5c58150b8766676dfe5b1c5bfeb140/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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCSmF2YVNjcmlwdCU1RCVFNSU4OCU5RCVFNSVCRiU4MyVFOCU4MCU4NSVFMyU4MSU4QyVFNSU4OCU5RCVFOCVBNiU4QiVFMyU4MSVBNyVFNSVCRiU4NSVFMyU4MSU5QXRoaW5raW5nJUU5JUExJTk0JUUzJTgxJUFCJUUzJTgxJUFBJUUzJTgyJThCJUUzJTgyJTgyJUUzJTgxJUFFJUU3JTg5JUI5JUU5JTlCJTg2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz0zYmU5ODdjNjUyZjg2NDdkODA2NDVmN2QwNDI4NDhiNA%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBrb3p6enomdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWFhMTA4ZTQ0M2JiMmI1NTI2NDc2ZmQzNzI5YzQ0NDI3%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Da816bfb051a3a0d8f1e62c8fc6a915b0)
TypeScript で任意の文字列を受け入れつつ、文字列リテラルをサジェストしてくれる型を作る - Qiita
TypeScript でライブラリを作成していると、『基本的にはどんな文字列でも受け入れるけど、特定の文字列だと挙動が変わる』 ような引数がある関数を作成したい時があります。 この場合、引数の値をユーザーが入力しようとした時に、受け入れる特定の値を IDE がサジェストしてくれると嬉しいでしょう。 例えば、 React で <a> タグの target 属性を指定できるような関数コンポーネントを作成する場合、target 属性が取りうる特殊な値 _blank _parent _self _top がサジェストされれば、コンポーネントを使っている側は嬉しいはずです。 もしこれを素直に書いてみると、以下のようになります。 type LinkProps = { href: string; target?: "_blank" | "_parent" | "_self" | "_top" | str
TypeScript: 「電話番号型」という意味を持たせた特殊なstring型の作り方 - Qiita
この投稿では、値としては「文字列」なんだけど、単なる文字列ではなく「電話番号型」という意味を持たせた文字列型を定義し、それ使用する方法を紹介します。 TypeScriptで「電話番号型」みたいな、正規表現でバリデーションされるような型は作れるんかな？ ElmだとOpaque Typeなんてやり方があったけど。。。 用は型をexportしないで、その型の値を作る方法だけをexportすればええんかな。 — 無職やめ太郎（本名） (@Yametaro1983) April 23, 2020 ↑上のような疑問に対する答えです。 実現方針 方針としては、以下のテクニックの組み合わせです。 公称型で、「電話番号型」を定義する ユーザ定義タイプガードで、文字列型を電話番号型としてコンパイラに認識してもらう 公称型とその実装方法についての基本は下記投稿をご覧ください。 TypeScript: 異なる2つ
なんとなくで書かないで！HTML5を書く時に気にしてみたいタグごとのお約束 - Qiita
はじめに この記事は クラウドワークスアドベントカレンダー2019 16日目の記事です。 こんにちは！本日25回目の誕生日を迎えたアクセシビリティ向上隊長 みーたです。 昨日は同じチームの@yamanokuさんによる「みんなに知ってもらいたいデザインシステムのこと」でした。 文中で紹介されていた「悲劇的なデザイン」は私もオススメします:) 私は今回、普段みなさんがHTMLを書く時に、よく使うタグごとでちょっと気をつけてみてもらいたい！と思う点をまとめてみました。 初学者ではありますが、正しくHTMLを理解してもらいたいって気持ちがあるので、マサカリは怖くない程度に投げていただいて、みんなで知識を共有していきたいです。 👻 真冬の怪談 突然ですがちょっと怖い話を... 先日、とある画面を改修しようと思って、今どんな感じにスタイル当たってるんだろうと本番環境を見てみたんですよ。 カードタイプ
AMPコンポーネントでLTS版指定orビルドバージョンを固定する方法(LTS or lock versions AMP components) - Qiita
AMPコンポーネントでLTS版指定orビルドバージョンを固定する方法(LTS or lock versions AMP components)AMP AMPのLTS指定とバージョン固定する方法 AMPのマイナーバージョンにおけるアップデートはcdnファイル上書きで行われるため、AMPコンポーネントで予期しない不具合が発生した場合に、LTS指定する方法と過去のビルドバージョンに固定する方法をまとめました。(English versin: here) AMPコンポーネントでLTS版を指定する方法 最新のバージョンではなく、LTS（Long-Term Stable)版を指定する場合は以下のように、https://cdn.ampproject.org/lts/下のv0.jsとamp-carousel-0.1.jsなどのコンポーネントのjsを指定することができます。 - <script async
useReducerの本質：良いパフォーマンスのためのロジックとコンポーネント設計 - Qiita
React Hooksの正式リリース（2019年2月）からそろそろ一年が経とうとしています。Hooksの登場によってReactのコンポーネントは関数コンポーネントが一気に主流になり、クラスコンポーネントが新規に作られる機会は激減しました。 また、React 17.x系ではConcurrent Modeの導入とともにさらに2種類の新フックが追加される見込みであり、いよいよ関数コンポーネントの能力がクラスコンポーネントを真に上回る時代が来ることになります。 この記事では、フックの一種であるuseReducerに焦点を当てて、どのようなときにuseReducerが適しているのかを説明します。究極的には、useReducerによって達成できるパフォーマンス改善があり、ときにはそれがコンポーネント設計にまで影響を与えることを指摘します。 useStateの影に隠れたり、なぜかReduxと比較されたり
依存性注入(DI)の解説とやり方 - Qiita
依存性注入 (Dependency Injection) は、クラスを単体テスト可能にするために使われるテクニックです。 これが意識されていないが故に単体テストが全くできないコードをよく見かけます。 単体テストの際には必ず必要になる知識なので、解説しておきます。 以下のサンプルでは PHPUnit を利用しています。 悪い例: 単体テストができないケース 以下のような Foo クラスの play() メソッドは、単体テストケースが書けません。 class Foo { public function play() { $bar = new Bar(); if ($bar->getSomething() === 1) { return true; } return false; } } play() 内で外部クラス Bar をインスタンス化しています。つまり Foo::play() メソッドは
VO, DTO, POSO, DAO, Entity の違い - Qiita
はじめに try! Swift ではじめてDTO、POSOという言葉を聞いて、Entityとの違いとかよくわからなかったので調べてみた。 すると、類似の用語が5つでてきた。 VO (Value Object) DTO (Data Transfer Object) POSO (Plain Old Swift Object) JavaだとPOJO (Plain Old Java Object) DAO (Data Access Object) Entity いずれもシンプルに関連するデータをまとめたobjectだが、微妙に性質が異なる。 VO (Value Object) getterのみ 不変 DTO (Data Transfer Object) VO + setter 可変。外から変更可能 異なるレイヤー間（モデル層、ビュー層など）でデータを受け渡すのに使う POSO (Plain Old
TypeScript3.4 の const assertion - Qiita
const assertion は TypeScript3.4 の新機能です。Const contexts for literal expressions すでに master に入っているので、nightly build で挙動を確認することができます。 VSCode のワークスペースバージョンを切り替えれば、本稿内容の挙動を確認できます。const assertion により、個人的に待望だった widening Literal Types の抑止が叶います。 widening Literal Types って何？ 従来、const 宣言代入で得られた Literal Types は widening 挙動により、可変の変数に代入すると、Literal Types ではなくなってしまう仕様がありました。参考：https://qiita.com/Takepepe/items/2c06f6
NestJSのカレンダー | Advent Calendar 2019 - Qiita
The Qiita Advent Calendar 2019 is supported by the following companies, organizations, and services.
NestJS の DTO と Validation の基本 - 型定義とデコレータで安全にデータを受け付ける - Qiita
この記事は NestJS Advent Calendar 2019 3 日目の記事です。前日は @euxn23 による Module と DI の話でした。 これまで NestJS のはじめかたと Module と DI の話をしていきました。3 日目となる本日は、もう少し実際の開発に身近な機能である、DTO と Validation について紹介いたします。 tl;dr NestJS にはコアに Request Payload の型定義とバリデーションの機能が備わっている クラスベースの型オブジェクト DTO の定義によって、 Request オブジェクトに触らずに受け付ける型定義ができる DTO にバリデーションを敷くことによって、 Controller のメインロジックより前の段階で不正なアクセスを弾ける リクエストデータの検証について Web API を構築する場合、リクエストのデ
触って覚える NestJS のアーキテクチャの基本 - Qiita
この記事は NestJS アドベントカレンダー一日目の記事です。 記念すべき一記事目ということで、今回は NestJS の基本的な構造について、概念を理解し、実際に触ってみるまでを紹介したいと思います。 NestJS の概念的な部分においての概要は下記スライドをご参照ください。前提知識として一読いただいた上で、手を動かしていただけると はじめに 実際の開発に入る前に、いくつか共有事項があります。 検証環境について macOS 上で、執筆時点での Node.js の LTS である v12.13.1 を前提とします。 この記事で学ぶことについて NestJS は非常に多くの機能を有しているので、今回は核となる一部の機能と実装例のみを紹介します。 具体的には、 CLI で初期化時に生まれる Service / Module / Controller だけで簡単な GET リクエストを返却する
GraphQL と N+1 SQL 問題と dataloader - Qiita
この記事ではハイパフォーマンスな GraphQL サーバを実装するのに避けて通れない N+1 SQL 問題について解説します。 TL;DR GraphQL は resolver を個別にかつ再帰的に実行していくため、 RDB のリレーションを効率的に先読みすることができません。そのため一般的に遅延読み込みを行います。 Facebook 社は GraphQL で遅延読み込みするために dataloader という npm パッケージを公開しており、各種言語にその移植版のライブラリが存在しているので、それを使って N+1 SQL 問題を抑制しましょう。 （復習）N+1 SQL 問題とは N+1 問題は「1 つの SQL で N 件のレコードをフェッチしたあと、それぞれ対して関連するレコードを個別にフェッチするのに N つの SQL を発行している」状態を指す言葉です。言葉で書いてもよく分からな
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
4歳娘「パパ、懐かしいJavaScript書いてるね！」 - Qiita
