Tanstack Query を活用したフロントエンドアーキテクチャの紹介 ~ 持続可能な開発を目指して ~ | MEDLEY Developer Portal
2023-03-31Tanstack Query を活用したフロントエンドアーキテクチャの紹介 ~ 持続可能な開発を目指して ~こんにちは。医療プラットフォーム第一本部プロダクト開発室所属エンジニアの髙橋です。 普段の業務では、医療 SaaS プラットフォーム CLINICS の医療機関向けアプリケーション（以下、CLINICS）の開発を担当しています。 CLINICS では、昨年 10 月頃から React コードベースのリアーキテクチャに取り組んでいます。 その取り組みの 1 つとして、非同期状態管理に関連する実装を Tanstack Query を使って刷新しています。 この記事では、CLINICS における Tanstack Query の活用方法を導入背景と狙いを含めて紹介します。 目次 Tanstack Query についてTanstack Query を活用したフロントエンド
JSONPlaceholder - Free Fake REST API
{JSON} Placeholder Free fake API for testing and prototyping. Powered by JSON Server + LowDB. Tested with XV. Serving ~2 billion requests each month. Sponsors JSONPlaceholder is supported by the following companies and Sponsors on GitHub, check them out 💖 Your company logo here Try it Run this code here, in a console or from any site: fetch('https://jsonplaceholder.typicode.com/todos/1') .then(re
PdM/EMが気づくべき「技術負債」の異変
技術負債が溜まっている勘所について。現場のエンジニアは実際のシステムを触っているので変更や追加をする過程で当事者になるのでおおよそ異変に気づく。 一方、実際にそのシステムに対となるプロダクトに関わっているのはエンジニアだけではない。PdMやEM、事業責任者がいる中でこのメンバーにどう常に変化し続けるシステムアーキテクチャの異変に気づいてもらうのか、自ら気づかせるのかは至難の業である。 とはいえ、つばり一番わかり易いのは工数の予測精度の幅がある。 以下の3つのフェーズがあったときにそれぞれのズレが大きい場合は負債が溜まっていることが多い。（特に、1.と3.） 一般的な視点と現場システムへの理解度のズレ詳細から開発手前での予測のズレ予測工数と実績工数のズレここでいう工数予測がズレるのはエンジニアリングスキルの問題ではなく、システムに関する理解度の認知問題によってズレるケースが該当する 1.一般
「ALB 502 エラーの原因切り分け Yes/No 診断」を作ってみた | DevelopersIO
こんにちは、テクニカルサポートの Shimizu です。 弊社ヘルプデスクへ「Application Load Balancer（ALB）の 502 エラーの原因調査が難しい」というお問い合わせをよくいただきます。 実際サポート側においても「原因箇所が ALB 側か、またはバックエンド EC2 サーバー側か」の切り分けは確認するべき点が多く、毎回時間がかかります。 そこで「もっと簡単に原因を切り分ける方法がないか」と考えた結果、Yes/No 形式のトラブルシューティングを作ろうと思いつきました。 それでは始めてみましょう！ 質問 [質問1] 該当時刻の ALB のメトリクスを確認しましょう。「HTTP 5XXs」は出ていますか？ YES（出ている） バックエンドサーバーの内部から 500 系のエラーレスポンスが返されており、バックエンド側の問題を明確に示しています。 → [結果A] へ N
「ALB 502 エラーの原因切り分け Yes/No 診断」を作ってみた | DevelopersIO
こんにちは、テクニカルサポートの Shimizu です。 弊社ヘルプデスクへ「Application Load Balancer（ALB）の 502 エラーの原因調査が難しい」というお問い合わせをよくいただきます。 実際サポート側においても「原因箇所が ALB 側か、またはバックエンド EC2 サーバー側か」の切り分けは確認するべき点が多く、毎回時間がかかります。 そこで「もっと簡単に原因を切り分ける方法がないか」と考えた結果、Yes/No 形式のトラブルシューティングを作ろうと思いつきました。 それでは始めてみましょう！ 質問 [質問1] 該当時刻の ALB のメトリクスを確認しましょう。「HTTP 5XXs」は出ていますか？ YES（出ている） バックエンドサーバーの内部から 500 系のエラーレスポンスが返されており、バックエンド側の問題を明確に示しています。 → [結果A] へ N
実践ViewComponent（3）TailwindCSSのクラスとHTML属性（翻訳）｜TechRacho by BPS株式会社
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: ViewComponent in the Wild III: TailwindCSS classes & HTML attributes—Martian Chronicles, Evil Martians’ team blog 原文公開日: 2024/01/23 原著者: Vladimir Dementyev（首席バックエンドエンジニア）、Travis Turner（技術記事編集者） サイト: Evil Martians -- ニューヨークやロシアを中心に拠点を構えるRuby on Rails開発会社です。良質のブログ記事を多数公開し、多くのgemのスポンサーでもあります。 日本語ブログ: 合同会社イービルマーシャンズ - Qiita はじめに Ruby on Railsのフルスタック開発がHTMLファーストという方法によって軌
ゲームプログラミング研修 - KAYAC Engineers' Blog
こんにちは。技術部平山です。 たぶん15年ぶりくらいに研修の類の講師をやったので、そのことについて書きます。 概要 2D用(github)、 3D用(github) の2つのUnityプロジェクトをテンプレートとして用意して、 そこに「コードだけで」ゲームを作る研修をしました。 どちらも、Hierarchyに何かを足すことは禁止、 足して良いアセットはC#ファイルのみで、 そのC#ファイル内ではUnityEngineの機能を使用禁止、 というレギュレーションです。 いずれも、IMachineなるインターフェイスが存在し、 これを通してゲームを作ります。 例えば2D用のIMachineの主要部分はこんな感じです。 public interface IMachine { public int Width { get; } // スクリーン横解像度 public int Height { get
複数の Next.js アプリケーションをローカルで同時起動する際にポート番号を覚えきれない問題を nginx で解決する - Uzabase for Engineers
こんにちは、株式会社アルファドライブ @takano-hi です。AlphaDrive で Web フロントエンドを中心に設計・実装などを担当しています。 今回は、弊社のローカル開発環境で localhost:xxxx といったポート番号が増え続ける問題を解決した話をまとめてみました。 背景 弊社では Next.js を利用したフロントエンドアプリケーションを複数開発しており、今後も増える見込みがあります。 通常 Next.js アプリケーションは、ローカル開発環境の起動時に localhost:3000 にホストされます。 これが複数になると、2つ目以降はそのままではポート 3000 番が占有されていることによるエラーが発生するため、別のポート番号を指定する等の方法で回避することが多いと思います。 さらに、それぞれのプロジェクトごとに Storybook を用意したりすると、必要なポート
タイミーに入社し、プロダクトデザインチームを組織化するために実行したこと｜Yasuhiro Yokota
【宣伝】タイミーではプロダクトデザイナーを募集しています! ご興味のある方はぜひお話しましょう! カジュアル面談(YOUTRUST) こんにちは、横田です。2024年2月、タイミーにプロダクトデザインマネージャーとして入社しました。 タイミーには、コミュニケーションデザイングループとプロダクトデザイングループが存在し、それぞれマネージャーが在籍しています。 私はハーフコミットの2週間と、正社員3週間がたったところで、プロダクトデザイングループの組織化キックオフをおこないました。ここまでにとったアクションを紹介したいと思います。 これまで一緒に働いてきた方には、元気でやってますということで読んでもらえたらと思います！ 最初は最初で大変さて、最初のミッションはマネージャー不在だったデザイナー組織を組織化するというものでした。お任せくださいといって入社したものの、インプットすること・考えることが
OpenAPI仕様 Version 3.1.0（YAML版）
訳者序文 このドキュメントは正式な日本語訳ではありません。また、Zennの記事の上限である 80,000 文字に収めるために、YAML と併記されていた一部の JSON の例を省略しました。 オリジナルと同様、The Apache License, Version 2.0 の下でライセンスされます。 正式な仕様書を必要としている方は、以下を参照ください。 OpenAPI 仕様 Version 3.1.0 このドキュメント内のキーワード "MUST", "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD", "SHOULD NOT", "RECOMMENDED", "NOT RECOMMENDED", "MAY", および "OPTIONAL" は、ここで示したように全て大文字で表記される場合、また、その場合のみ BCP 14 RFC2
分析関数（ウインドウ関数）をわかりやすく説明してみた
はじめに ちょっととっつきにくいけどとっても便利な分析関数について、なるべく分かりやすく説明してみようと思います。Oracleを対象にしていますが、他のDBでもたぶん似たようなものでしょう（無責任）。 まず分析関数とは何をするものか、ですが、一言で言うと集合関数と同じ集計動作をそれぞれの行に制限範囲で実行するものです。ここでいう集合関数とは、MAXやSUMやAVG等、GROUP BYと共に使い行をまとめるて集計計算する関数ですね。分析関数は集合関数と同様の計算をしますが、集合関数と違い行をまとめません。それぞれの行で集計計算し結果を返します。ここが集合関数との大きな違いです。 また、集合関数ではGROUP BYの同じカラム値をもつ全行を一つに集計しますが、分析関数では集計対象となる行の範囲を任意で指定できます。関数に続くOVER句でこの範囲指定を行います。集合関数と分析関数は基本同じ名前な
Reactでロジックをhooksにまとめないという選択肢 - Hello Tech
javascripterです。ハローでは、プロダクトのローンチ前からAutoReserve の開発に関わっています。 突然ですが、Reactを使用する際、コンポネントのロジックや状態が増えてきたとき、みなさんはどうされてるでしょうか。 関数コンポネントでは、一般にcustom hooksとしてまとめて切り出すことが多く行われていると思います。 今回の記事では、useState/useRef + custom hooksという単位で切り出すのではなく、 クロージャを使いロジックや状態をコンポネントの外に持たせるようにリファクタリングすることで、コードの見通しが良くなる、という事例を紹介します。 JavaScriptにおけるクロージャとは、関数が外側のスコープの変数などへの参照を保持できる機能のことです。ここではクロージャとして実装しましたが、同等のことはclassを使っても実装できます。 A
中級 Vim 操作
この記事は Vim 駅伝 の 06/05 の記事です。 前回の記事は thinca さんによる、 06/03 の「Meguro.vim #23 を開催しました」という記事でした。 次回は 06/07 に投稿される予定です。 はじめに 本記事は以下の記事のオマージュです。 Vim の基本操作のうち、比較的マイナーながら汎用的に使える機能や小技を集めました。プラグインや複雑な設定が必要なものは含まれておらず、いずれも Vim と Neovim の両方で使うことができます。気になったものがあれば使ってみてください。 ノーマルモード編 検索結果を次々と置き換える Vim で文字列置換を行う最も有名な方法は :substitute コマンド （短縮形: :s） ですが、ノーマルモードの cgn というイディオムも便利です。これは c オペレータと gn テキストオブジェクト (:h gn) を組み合
デザイントークンの効果的な命名方法｜トビ / KazuhiroTobita
サイボウズでkintoneのデザインシステム開発をしているトビ（@0b1tk）です。こんにちは。 今回はデザイントークン、特にセマンティックトークンの命名方法について掘り下げます。 まずはデザイントークンの定義について、W3Cから設立されたデザイントークンの仕様策定をするコミュニティ「Design Tokens Community Group」の定義を引用いたします。 Design tokens are indivisible pieces of a design system such as colors, spacing, typography scale. （訳：デザイン・トークンとは、色、スペーシング、タイポグラフィ・スケールなど、デザインシステムを構成する不可分の要素のことである） Design Tokens Community Group このデザイントークンの名前づけについて
コードレビューについて - camlspotter’s blog
このところ立て続けにコードレビューについて話をする機会があったので 私が経験した最高のレビュー体制を簡単にまとめておこうと思います。 利点 何故必要か 何が嬉しいのか コスト うまく回すためには何が必要か 細かい運営方法 はっきり言って当たり前の事しか書きません。 私も当時は当たり前のことだと思っていましたから、特に気にもしていなかったのです。 ただ見聞するところによると、これをちゃんとやっているところはとても少ないようです。 ウォールストリート系のファンドでもろくにレビューしてないとかどういうことなんでしょう。 だから時々会社が吹っ飛ぶんですね… 結局は、ああだ、こうだ各論を言っても、ちゃんとやれるのか、それ一点に尽きてしまう話なのですが… 利点 レビューを何のためにするか、それはまず第一に自分達の書いているコードに潜在するバグによる損失をできるだけ少なくすることでしょう。 型システムや
next/fontはCIでモック推奨
Next.jsではnext/fontを活用することで、Googleフォントをセルフホスティングすることができ、Googleへの通信が発生しないことにより、ページの読み込み速度を向上することができます。 next/fontの使い方などは公式ドキュメント等に委ねますが、next/fontかつCIを導入している方にモック化することを勧めたく思います。 なぜモック化するのか run buildなど実行時にフォント取得に失敗する場合があります。 どういったCIを組んでいるかにもよりますが、それが原因でCI自体が失敗する可能性があります。 頻度としては10回に1回もない程度で、再実行すれば解消しますが、ストレスを減らすためにmock化するのが好ましいです。 storybookのdocにでもモックを推奨されてます。 どうモックかするか 上記のstorybookのドキュメントで確認できますが、やることとし
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Attributify preset
Building Reusable Object-Oriented Systems: Composition
GitHub - mattrighetti/envelope: An environment variables cli tool backed by SQLite
認証認可｜【Next.js 14】App Router + Server Actionsで作成する管理画面チュートリアル
