Render hooksをコンポーネントの拡張として理解する - Qiita
Render hooks とは、ReactにおいてカスタムフックからJSX式を返す設計パターンのことです。リンク先は私が当時在籍していた会社のテックブログに書いた記事で、当時の会社でこの設計パターンがハマる箇所に出会ったためアイデアを記事化したものです。ちなみに、Render hooksという命名は私ではなく当時の私の上司です。 私は当時から今までずっとこのパターンを推奨しているのですが、あまり流行る気配がありません。そこで、この記事では皆さんがこのパターンの考え方にもう少し納得できるように、render hooksパターンは普通のコンポーネントの拡張であるという見方をご紹介します。 Render hooksパターンの概要 Render hooksパターンは、UIの実装（JSX）と、そのUIに関連するロジック（たとえばステート）をまとめてカスタムフックから提供することを指します。簡単な例を
【AWS】複数Availability Zoneに跨るInternal ALBが名前解決で返してくるIPアドレスはどのIPアドレスか？ - Qiita
【AWS】複数Availability Zoneに跨るInternal ALBが名前解決で返してくるIPアドレスはどのIPアドレスか？AWSdnsTerraformAvailabilityALB 転職して初めての記事です。 転職後の会社の先輩から表題の質問を貰い、即答できなかったので検証してみました。 たまたま前職でALBの環境の構築をTerraformで行ったので、今回もTerraformで環境構築を行いました。 予想される結論 この先輩の方とも社内のチャットでやり取りした時にもお話したのですが、複数のAvailability Zoneに跨ったALBは名前解決ではラウンドロビンでそれぞれのAvailability ZoneでALBに割り振られたIPアドレスを返してくるんじゃないかな？というのが私の予想です。 ではこの予想通りになるのか、違う動作をするのか検証をしましょう。 構成図 では早
そのuseRef+useEffect、refコールバックのほうが良いかも？ - Qiita
Reactにおいて、useEffectのユースケースとして知られているのが、DOMノードに直接アクセスしなければいけない場合です。useRefでDOMノードをrefオブジェクトに取得し、エフェクト内からDOMノードにアクセスするというのがその場合の基本的なやり方です。 このようなuseRef + useEffect の使い方は、問題ない場合もありますが、実は別の手段を使った方がいい場合もあります。その場合に別の手段として適しているのがrefコールバックという機能です。 そこで、この記事ではどのような場合にuseRef + useEffectよりもrefコールバックが適しているのか、そしてrefコールバックを使う場合の注意点について解説します。 復習: refコールバックとは React DOMでは、組み込み要素（divなどHTMLの要素）に対してrefという特殊なpropを与えることができ
Next.jsのApp Routerを学ぶ際、shadcn/uiが参考になったという話 - Qiita
Next.jsのApp Routerを学ぶ際に、UIライブラリを探していたところ、shadcn/uiが参考になったので紹介します。 shadcn/uiは、フレームワークやライブラリではなく、コピペで利用できるReactコンポーネントのサンプル集という立ち位置になっています。Tailwind CSSでデザインされており、React Server Components(RSC)にも対応しています。 サンプルの実装方法が参考になる点も魅力の一つです。 簡単ですがつらつらと紹介していきたいと思います。 shadcn/uiとは デモを見てるとフレームワークやライブラリなのかなと思いきやそうではなく、コピペで利用できるサンプル集という立ち位置になっています。基本的にはTailwind CSSでデザインされてるようです。 サンプルとはいえ、実装方法で参考になった箇所が結構あったのでそこも気に入ってるポイ
プログラミングの生産性向上のためにお金をかけてよかったもの10選 - Qiita
タイトルのとおり、生産性向上のためにお金をかけてよかったものをご紹介します。 基本的には仕事道具と健康系が多いです。 腰痛 睡眠 集中力向上 このあたりにお悩みをお持ちの方の一助になれるかもしれません。 おしりセレブ 他のトイレットペーパーだと、おしりを拭いた後大体痛くなってしまいます。 そのまま長時間椅子に座って作業をするのが辛い…というのがあったのですが、おしりセレブを使うようになってからその悩みがなくなりました。 ステッパー メンタリストDaiGoさんがお薦めされていたのを見て購入しました。 もともと腰痛に悩まされており、「少し運動しようか」という日頃ランニングを日課としていました。 が、ランニングのために決まった時間をガッツリ取らないといけなかったり、雨の日はできなかったりという課題がありました。 ステッパーを買ってからは雨でも気にせず有酸素運動ができるし、Amazon Prime
Postmanを使い始めた時に知っておきたかった地味に便利な機能10選 - Qiita
普段何気に使っているPostman。最近まで「手軽にGUIで疎通を試せて、設定を共有できてべんり〜」くらいで使っていました。 けどふと「実はもっと便利な機能があるのでは？」と思って調べてみたところ、色々出てきたのでせっかくなのでシェアしたいと思います。 たまたまですがちょうど10選！ 地味に便利な機能10選 VSCode拡張 PostmanにはVSCode拡張機能があります。 インストールするだけで、VSCodeのサイドバーから利用可能です。 日本語設定 日本人なので日本語で使いたい。 右上の歯車→Settingsから以下の通り選択することで日本語化が可能です。 変数の定義 複数のAPIで同じ値を使いたい場合があるとします。例えばテスト用のユーザーIDなどです。 Postmanではそんな値をAPIファイルに逐一ハードコードする必要はなく、変数に保存することが可能です。 Postman Ec
Next.jsのError Boundaryについて - Qiita
Error Boundaryとは Reactドキュメントより以下のようにありました。 error boundary は自身の子コンポーネントツリーで発生した JavaScript エラーをキャッチし、エラーを記録し、クラッシュしたコンポーネントツリーの代わりにフォールバック用の UI を表示する React コンポーネントです。 公式のNext.jsのError Boundaryについて Next.jsのError BoundaryのページではError Boundaryについて解説してあります。 簡単に説明するとError Boundaryというコンポーネントを作成し、それを_app.jsxでwrapしてくださいということです。 class ErrorBoundary extends React.Component { constructor(props) { super(props)
テーブル・DB設計するときの極意 - Qiita
はじめに 「テーブル・DBを設計するときのさいきょうの極意」を完全に理解したので 初心者（私）向けに共有する記事です。 どうぞ揉んでいただければ幸いです。対戦よろしくお願いします。 さいきょうの極意 初心者が「テーブル・DB設計して」と言われると、 「アソシエーションってあったよね・・・バリデーションも？中間テーブルを使うときと使わないときと・・・」と大変に混乱し、何から手をつけていいかわからなくなります。 そんなあなたにこれ！ テーブル・DB設計は「属性」と「関係」の２つだけ 「属性」は必要なものを書くだけ 「関係」は 1:1 / 1:N / N:N しかない（しかも、ほとんど 1:N） これが極意だ！！！ 一般的な、「ユーザーがいて、投稿ができて、コメントといいねができるサービス」で考えてみましょうか。 users / posts / comments / likes のテーブルが必要
一番分かりやすい OpenID Connect の説明 - Qiita
はじめに 過去三年間、技術者ではない方々に OpenID Connect（オープンアイディー・コネクト）の説明を繰り返してきました※1。 その結果、OpenID Connect をかなり分かりやすく説明することができるようになりました。この記事では、その説明手順をご紹介します。 ※1：Authlete 社の創業者として資金調達のため投資家巡りをしていました（TechCrunch Japan：『APIエコノミー立ち上がりのカギ、OAuth技術のAUTHLETEが500 Startups Japanらから1.4億円を調達』）。 2017 年 10 月 23 日：『OpenID Connect 全フロー解説』という記事も公開したので、そちらもご参照ください。 説明手順 （１）「こんにちは！ 鈴木一朗です！」 （２）「え！？ 本当ですか？ 証明してください。」 （３）「はい！ これが私の名刺です！
AWS ECS Service Connect について理解する - Qiita
概要 今回は、AWS Service Connect のチュートリアルを試してみたいと思います。 なお、ECS の基本的な事については、理解している前提で進めていきます。 ECS Service Connect とは マイクロサービスアーキテクチャなどの構成において、ECSサービス間の通信を簡単に設定できるようにしたアップデートです。 今までも、ECSサービス間の通信を接続する方法として、以下の方法がありました。 ELB ECS Service Discovery AWS App Mesh 但し、これらのサービスはいくつかの課題もありました。そのあたりの課題を上手くやってくれるのが、AWS Service Connect です。 ELB、ECS Service Discovery、AWS App Mesh、AWS Service Connect の違いなどについては下記の資料が大変参考にな
TCP/IP構造と通信 - Qiita
OSIとTCP/IP構造 OSI参照モデルとTCP/IPプロトコルスタックの対応関係を示しています。 OSIモデルはデータ通信のための抽象的なモデルで、7つの階層（レイヤー）から成り立っています。 一方、TCP/IPプロトコルスタックはインターネットで実際に使用されているプロトコルの集まりで、4つの階層から構成されています。 TCP/IPの４層構造 アプリケーション層：OSIモデルのアプリケーション層、プレゼンテーション層、セッション層に相当します。HTTP、FTP、SMTPなどのプロトコルが含まれます。 トランスポート層：OSIモデルのトランスポート層に相当します。TCPやUDPがこの層で動作します。 インターネット層：OSIモデルのネットワーク層に相当します。IPプロトコルがこの層で主に使用されます。 ネットワークインターフェース層：OSIモデルのデータリンク層と物理層に相当します。E
戻るボタンで「ページ遷移」させてはいけない - Qiita
UI/UXと画面遷移について、 そのボタンに割り当てるべきアクションは、「ページ遷移」なのか、「ヒストリーバック」なのか、という話です。 ヒストリーバックを用いた理想的な遷移 あなたは一覧画面と詳細画面を持つサイト/Webアプリを開発しています。 詳細画面では、ヘッダーの左に戻るボタンが表示され、ヒストリーバックが割り当てられています。 ① ユーザーは、Googleの検索結果から一覧画面にランディングし、さらに詳細画面に遷移しました。 ② ユーザーは詳細を見終わったので、左上に表示された戻るボタンを押下し、一覧画面に戻りました。 ③ ユーザーは他に見たいものがなかったので、次はブラウザのヒストリーバックを使ってGoogleの検索結果に戻りました。 ユーザーはヒストリーバックを用いて期待通りのブラウジングができました。 ヒストリーバックとページ遷移の混在した悪い例 このサイトを改修し、ヘッダ
どうしてあなたの共通化は間違っているのか：目次 - Qiita
はじめに この連載では共通化とモジュール分割について扱います。この話題においてQiitaで有名な記事のひとつが@MinoDrivenさんの単一責任原則で無責任な多目的クラスを爆殺するでしょう。この記事を未読の方はまずこちらを読むことをお勧めします。本連載では、この記事に書かれているような基礎的な事項については既知であることを前提に、どのようにすれば単一責任原則にそったモジュールの分割を行うことが出来るのかをなるべく 「場合による」という言葉に逃げずに なるべく 網羅的・理論的に 解説します。 いいね、ストックをよろしくお願いします。 対象読者 設計に興味のあるエンジニア 基礎的な設計原則について学んだものの、実際の場面でどのように応用すればいいのかが掴めないエンジニア ミクロな設計についての知識を増やしたい人 ※この記事では、特定のメソッドをどのように作成するべきか、このクラスは複数の処理
【PHP8.2】PHP8.2でジェネリクスが導入された - Qiita
4. ジェネリクス PHP 8.2 では、ジェネリクスのサポートが導入されました。 ジェネリクスを使用すると、コードの再利用性が向上し、型安全性も確保されます。 interface Collection<T> { public function add(T $item): void; public function get(int $index): T; } class StringCollection implements Collection<string> { // ... } $stringCollection = new StringCollection(); $stringCollection->add("Hello"); $stringCollection->add(123); // エラー：string 型が期待されています この注釈、詳細ページには一切記述されていないため
「JavaScriptで要素をドラッグして移動する簡単な方法」という記事が初耳だらけだった件 - Qiita
はじめに まず↓の記事を見てない方はぜひ見てください！ 自分にとってはこの記事には「えっ、ナニコレ！」なテクニックが多く、特に解説もなかったのでいろいろ調べてたら休日が消えてました... なのでその時間の供養もかねて、自分が知らなかった部分を中心に、僭越ながら元記事の解説を書いてみたいと思います。 ちなみに、以下が元記事のコードそのままを実装したものです。たしかに掲載コードだけで要素がグリグリ動きますね。 See the Pen js-drag-move-original by www-tacos (@www-tacos) on CodePen. 初耳1: $img まずコードのここ <img id="$img" src="https://js.cx/clipart/ball.svg" width="40" height="40"> <script> $img.onpointermove
JavaScriptで要素をドラッグして移動する簡単な方法 - Qiita
要素をドラッグして移動することは、JavaScriptにおいて頻出パターンです。 しかし、それを簡単に実現するコードは意外と知られていません。 <img id="$img" src="https://js.cx/clipart/ball.svg" width="40" height="40"> <script> $img.onpointermove = function(event){ if(event.buttons){ this.style.left = this.offsetLeft + event.movementX + 'px' this.style.top = this.offsetTop + event.movementY + 'px' this.style.position = 'absolute' this.draggable = false this.setPointe
SQLの達人への道: MySQLでの高速・効率的クエリ作成術 - Qiita
データベースとテーブルの作成 テスト用のデータベースtestdbを作成し、パフォーマンスチューニングを検証するためのcompanyおよびpersonテーブルを定義します。 CREATE DATABASE testdb; USE testdb; CREATE TABLE company ( company_id INT AUTO_INCREMENT PRIMARY KEY, company_name VARCHAR(255) NOT NULL, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); CREATE TABLE person ( person_id INT AUTO_INCREMENT PRIMARY KEY, company_id INT, person_name VARCHAR(255) NOT NULL, email VARCH
詳細設計の書き方 - Qiita
はじめに システム開発において詳細設計という工程があります。 プログラマーはこの詳細設計を確認しながら開発を行うことになります。そのため詳細設計ではシステムの構造や仕様、動作などを細かく定義することが必要になります。 詳細設計を行うことでシステム開発の方向性が明確になり、コーディングやテストをスムーズに行うことができます。 詳細設計の成果物としてはクラス図やシーケンス図、画面設計書やデータベース設計書などがあり、システムの動きや機能を具体的に表現するものです。 今回は詳細設計を作成する機会があったので、詳細設計の書き方についてまとめたいと思います。 詳細設計の目的やメリット 詳細設計の目的は、システム開発の品質や効率を向上させることです。詳細設計では、システムの仕様や動作を細かく定義することで、以下のようなメリットがあります。 開発工程でのバグや遅延を減らすことができる テスト工程での不具
オブジェクト指向は業務システムで本当に不要なのか？ - Qiita
主旨 以前はシステムの状態をオブジェクト指向でカプセル化し、オブジェクト同士の通信でシステムの制御をしようとしていた しかし、Webアプリケーションのように状態をメモリ上に保持し続けるのが難しい環境が増えると、上記のことがやりにくくなった（ORMのインピーダンスミスマッチの影響が大きくなった） 現在では、システム全体の状態を管理するためにオブジェクト指向を用いるシーンは減っているが、要所要所でシステムを抽象化する道具の一つとして用いるシーンはあり、適材適所で使い続ければ良い はじめに 一時期あれだけもてはやされた「オブジェクト指向」ですが、現在では「業務システム開発においてオブジェクト指向で作るとろくなことがない」、とか、いっそ「不要である」、という意見もよく見かけます。 オブジェクト指向、この記事では特に「オブジェクト指向プログラミング」を対象として話をしますが、その利点は以下の３点に集
レイテンシ(遅延)とスループット(帯域幅)と帯域幅遅延積 - Qiita
マルチクラウド展開にまつわる既成概念を覆すより データ転送では、特に長距離の場合にレイテンシ（遅延）が問題になることがありますが、現在はすべてのクラウド・プロバイダーがそれぞれの物理インフラストラクチャを互いの近くに配置（専門用語では「コロケーション」）しているため、これはさほど問題となりません。この近接性（場合によっては同一コロケーション施設内の別の部屋）は、クラウド間のレイテンシがミリ秒単位であることを意味します。それに加え、クラウド・データセンター・リージョンは世界中で増加しており、クラウド・リージョン間の距離は縮まっています。 という事で、レイテンシ(遅延)について、まとめてみてみます。 ■ Agenda レイテンシ(遅延)とスループット(帯域幅) レイテンシと TCP の動作 帯域幅遅延積(Bandwidth-Delay Product) TCP Window Size の調整と
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
