useEffectの中でfetch （取得系のリクエスト）しないでください。以上です。ご清聴ありがとうございました。いいねと高評価、チャンネル登録よろしくお願いします。 おまけ とはいえ、useEffectの中でデータ取得することを考えなければいけない場合もあります。例えば、React 16をまだ使っている場合とか。React 18以降ならSuspenseがあるので考えなくていいです。 ということで、筆者は最近React 16の世界でどうしてもuseEffectの中でfetchしなければならない場合を最近経験しました。その場合にもできる限りベストプラクティスに従いたいということで、考えたことを紹介します。 まだReact 16系に囚われている方は参考にしてください。また、新しいReactを使っている方はこの記事で紹介することをそのまま実践する必要はありませんが、useEffectのベストプ
はじめに パスワードハッシュやトークンなどの文字列を比較する際には、== ではなく Rack::Utils.secure_compare を使ったほうが良いということを学んだので、勉強の記録として共有します。 == での文字列比較の危険性 Rack::Utils.secure_compare を知るまでは、まさか == に危険性があるとは思いませんでした[1]が、パスワードハッシュやトークンなどを比較する際には == は使用しないほうが良いです。 その理由は、Timing Attack (タイミング攻撃) と呼ばれる攻撃によって機密情報である文字列を推測されてしまう可能性があるからです。 タイミング攻撃とは、機密情報となる文字列を左から見ていったときに、どこまで合っているかを、文字列比較の処理時間 (false が返ってくるまでの時間) を利用して、推測するという攻撃手法です。 この説明だ
はじめに 長らくReactを雰囲気で書いてきました。コンポーネントを作り、propsを渡し、状態を管理する基本的な概念は理解していたものの、より体系的なアプローチや設計パターンについては深く考えずにコードを書いていました。しかし、より大規模で保守性の高いアプリケーションを構築するにつれ、単なる「動くコード」を超えた、堅牢な設計原則の必要性を痛感するようになりました。 この記事は、私自身の再学習を共有するものです。 ※2025/04/21時点、私が関わっているプロダクトのCrowd AgentのReactのバージョンは"18.3.1"です。 目次 Reactデザインパターンとは HOC (高階コンポーネント) パターン[※React18以降では、カスタムフック推奨] Provider パターン Presentational と Container コンポーネントパターン React Hook
はじめに こんにちは、Watanabe Jin(@Sicut_study)です。 ReactはAIブームなども相まって人気のJavaScriptフレームワークです。今後も更にReactを利用したアプリケーションは増えることが想像できます。 Reactのコンセプト(基礎)をしっかりと理解することは、効率的で保守性の高いアプリケーション開発において不可欠です。今回はそのなかでも特に大切なものを20個解説していきます。 この記事を読むことで Reactの基礎から応用までの体系的な知識を一箇所で習得できる コンポーネント設計やステート管理など、直面する課題に対する解決策を理解できる パフォーマンス最適化やエラー処理などアプリケーション開発に必要な知識を得られる 最新機能（React 19、Suspenseなど）について学び取り入れられる 面接や技術的な議論の場で、Reactについて自信を持って説明
最近 React コード生成機を作っていて「一番文句言われなさそうな React コンポーネントの書き方ってなんだ…？」と改めて疑問に思ったので考えてみました。 結論から言うと以下の形をデフォルトにするのが良さそうかなと思いました。 function vs. アロー関数 -> アロー関数 型は基本的に VFC でつけて、 children が欲しい場合は明示的に props に追加する return を省略可能な時省略するか -> しない props を destructure するか -> しない派だったけどした方がいい気がしてきた const Hoge: React.VFC<Props> = ({ title }) => { return ( <Fuga title={title} /> ) } ちなみにですが、大事な前提として TypeScript を使うことを前提としています。(型
ReactのuseEffectは、フックの中でも使い方が難しいものの一つです。そこで、この記事では筆者が考えるuseEffectの望ましい使い方を皆さんに伝授します。 基本原則 技術やその要素の使い方を考えるにあたって、筆者が好んでいるのは基本原則を置いてそれに基づいて判断することです。ということで、この記事ではまず筆者が考えるReactの基本原則を紹介します。 筆者がもっとも重要視する原則は、ReactはUIライブラリであるということです。つまり、ReactにはUIの管理をさせるべきであって、その他のことはReactの役目ではないということです。Reactが難しいと思う人がいる場合、何でもかんでもReactにやらせようとするから余計に難しくなっているのだと思います。 例えばアプリケーションのロジックの管理やそれに付随するステートの管理はReactの役目ではないので、Reactの外部で処理
こんにちは、開発２部の早瀬です。普段はリユースプラットフォームの出品管理SaaSの開発を行っています。 私が関わっているプロダクトでは外部サービスとの連携が非常に多く、開発環境ではそれらとの連携をモックしたいということがありました。そこで、WireMockを使用して開発環境にスタブサーバーを構築することで、外部サービスとの連携をモックすることができたので、今回はその方法と実践的なWireMockの使い方を紹介したいと思います！ 背景 WireMockとは 基本的な使い方 ディレクトリ構成 モックの定義 実践的なユースケース クエリパラメータを含む場合 レスポンスを動的に返す ファイルを分割した上で動的にレスポンスを返す GraphQLのモック XMLのモック WireMockではモック定義が難しい場合 まとめ 背景 出品管理SaaSでは同一の商品を複数ECサイトへ同時出品するというのが主な
4/9(水) お昼にYouTubeでも解説します🙌 やさしいMCP入門 ＆ 実践LT会（KAGと学ぼう！勉強会） https://kddi-agile.connpass.com/event/351600/
Claude 3.7 Sonnetに代表される現在の主力なコーディングモデルやソフトウェア開発タスクの自動化に利用されるLLMは、知識のカットオフにより2024年後半頃までにネット上に存在する情報をもとにしたソースコードしか書くことができない。例えばAnthropicのAPIを直接利用して確認すると、「React Routerの最新バージョンはv6です」と返答が来る。しかし、最新版はv7だ。v7.0.0はちょうどこの時期にリリースされたため境界にあり、つまりv7の実践的な知識はない。これに限らず、LLMの世界ではNext.jsはv14、Flaskはv2、Railsはv7と一世代遅れたバージョンを認識していることになっている。 これらのアップデートによって入った変更は、既存のソースコードに記述していればLLMが空気を読んで従う。加えて、ユーザーがカスタムルールとしてエディタ側で追加情報を設定
CarrierWaveは、Rubyアプリケーションにおけるファイルアップロード機能を簡単かつ柔軟に実装できる強力なGemです。 本記事では、CarrierWaveの基本的な使い方から高度な実装テクニック、さらには実践的なプロジェクト例まで、包括的に解説します。 CarrierWaveの基本的なセットアップと設定方法 単一・複数ファイルのアップロード実装テクニック 画像処理機能の活用法と最適化テクニック 高度な設定とカスタマイズオプション セキュリティ対策とベストプラクティス パフォーマンス最適化の手法 他のGemとの連携活用法 トラブルシューティングとデバッグ手法 実践的なプロジェクト例と応用シナリオ CarrierWaveとは？Rubyファイルアップロードの革命児 CarrierWaveは、Rubyアプリケーション開発における画期的なファイルアップロードソリューションです。 このGemは
既存プロジェクトにNext.js等のSSRを導入する場合は既存の認証機能を維持したり活かしたりする必要があります。しかしSSRの認証とCSR(SPA)の認証は同じではなく、簡単に共有できるものではありません。 ここでは複数のテックブログの事例を見ながら、この難しさと本物のウェブサービスで採用された解決策を見ていきます。 CSRとSSRの認証の違い まず最初に、CSR(SPA)とSSR[1]の認証の違いをざっくり紹介します。技術的制約を理解していただくことが目的です。 クライアント視点では、認証システムは突き詰めると、トークン(鍵)[2]を安全に保管し、必要時にサーバに渡す(鍵穴に差し込む) ことです。この２つに絞って解説します。[3] https://www.flaticon.com/free-icons/vault (by IYIKON) https://www.flaticon.com
Intro 弊社で開発しているサービスの、ドメインを変更することになったときの話。 すでに旧ドメインで一部顧客に利用していただいていたため、旧ドメインは破棄せずに新ドメインにリダイレクトさせるようにしました。 DNSの設定やコードをいくらか修正し、リリースをしました。Webアプリを触って画像が表示されたりデータが取得更新できたりと、通常通り使えることを確認して一安心していました。 問題発生 すでに使っていただいていた社外ユーザーから「画像が表示されない」と連絡がありました。 スクリーンショットを見るとたしかに画像が切れてALTテキストが表示されていました。しかし同じ画面を自分のPCで閲覧すると正常に画像が表示されています。 先方のファイアウォールがホワイトリスト制にでもなっているのかと思い、ファイアウォールの設定をご確認くださいと返答しました。ですが「TCP/80(http)とTCP/44
はじめに こんにちは！Ruby on Railsフロントエンドエンジニアを目指し、Hotwireを中心に活動しつつ、Next.jsもReactも勉強している加々美です！ 2025年2月14日(バレンタインデイ)に、ReactのチームはCreate React Appを公式に非推奨とするブログポストを公開しました。そして代わりにSPA用のフレームワークを使うべきだと彼らは強く主張しました。 大事なポイントは、SSRフレームワークを推奨したわけではないということです。SPAフレームワークを推奨したのです。CDNとか静的ホスティングサービスにデプロイできるSPAでもフレームワークを使いなさいということです。 「オレはSSRに興味ねぇ！SEOはどうでも良いからSPAで十分だ。Create React Appがダメなら、Viteを使えば良いさ！」 => これは違います。 Reactチームはこういう人
パンダとおくだが、Web業界の当たり前を「これって本当にそうだっけ？」と問い直すラジオを配信しています はじめに 昨年末にこんなツイートをしたら、ちょっとバズってしまいました。 https://x.com/Panda_Program/status/1864333831886786971 色々コメントを頂くことで考えを深めてブログを書きますと言っていて、まだ着手していなかったのでざっと書くことにします。ただ、今日はクリーンアーキテクチャが対象です。 簡単に自己紹介をすると、私は現職でフルスタックエンジニアをしています。また、「バックエンドのためのフロントエンド入門」 というテーマで登壇をしたり、自分のエンジニア人生を変えた書籍リストにクリーンアーキテクチャを挙げており、TypeScript でクリーンアーキテクチャを実践する という記事では Web からでも CLI からでも動かせるアプリケ
/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/ だ。いいね？ なぜこの正規表現がいいのか ちなみにこれの何がいいかというと 「HTMLの標準仕様を定めるWHATWGの正規表現をそのまま使っている」ところ。 つまり、各ブラウザのデフォルトの<input type="email" />のバリデーションと一致するという大きなメリットを得られる。 これはMDNにも載っている列記とした「実用的な」正規表現だ。 ちなみにRFCオタクがRFC準拠のおおよそ実用に耐えないであろうメールアドレスの正規表現を推してくるかもしれないが無視して良い。 例えば、RFCに準拠している以下のようなメ
コーエーテクモゲームスから、PS5/PS4/スイッチ/Xbox Series X|S/Steamでリリースされた『無双アビス』は、「真・三國無双」シリーズと「戦国無双」シリーズでおなじみの英傑たちを召喚して亡者たちと戦い、地獄の最奥を目指すローグライト無双アクションゲームです。 「発表と同時のリリース」、「見下ろし型ローグライトアクション」、そして「ミドルプライス」という、同社としては新しいものづくしな本作はどのようにして生まれたのか？ プロデューサーを務める平田幸太郎氏に話をうかがいました。また、インサイドではプレイレポート記事も掲載していますので、あわせてご覧ください！ コーエーテクモゲームス・平田幸太郎氏 ◆「無双」×ローグライトというありそうでなかった組み合わせが実現！――まずは簡単に自己紹介をお願いします。 平田幸太郎氏（以下、平田）コーエーテクモゲームス、ω-Force（オメガ
ダイアグラムプラグインを有効にする この機能は、DataGrip にデフォルトでバンドルされ有効になっている Diagrams プラグインに依存しています。関連する機能が利用できない場合は、プラグインを無効にしていないことを確認してください。 Ctrl+Alt+S を押して設定を開き、プラグインを選択します。 インストール済みタブを開き、ダイアグラムプラグインを見つけて、プラグイン名の横にあるチェックボックスを選択します。 データベースダイアグラムは、データベースの構造とデータベースオブジェクト間の関係をグラフィカルに示します。データソース、スキーマ、テーブルのダイアグラムを生成できます。データベースオブジェクト間の関係を作成するには、主キーと外部キーの使用を検討してください。 次のビデオは、DataGrip のダイアグラムの概要を示しています。 生成されたダイアグラムは、UML と PN
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く