WESEEK, Inc. のブログ
全69件
Lerna v6 (Lerna + Nx) について解説
2023/03/10
ブックマーク
システムエンジニアの蛸井です。今回は Lerna についてと Lerna v6 の Nx の機能について解説します。 Lerna とは Lerna とは monorepo ツールです。 monorepo とは、1つのリポジトリで複数のサービスを管理することを言います。 monorepo のメリットとして、例えば以下のことが挙げられます。 リポジトリ内の複数のサービス間でコードを共有できる サービスを横断してのテストができ
SWR ver 2.0 の Optimistic Updates (楽観的 UI 更新)について
2023/02/15
ブックマーク
こんにちは、システムエンジニアの Kota です。今回は少し前に発表された SWR ver 2.0 に便利で新しいオプションが追加されたので、簡単に解説したいと思います。 今回追加されたオプション optimisticData クライアントキャッシュを即座に更新するためのデータ、または現在のデータを受け取り新しいクライアントキャッシュデータを返す関数 populateCache リモートミューテー
【vscode】devcontainerのClone in container volumeがよいという話
2023/02/10
ブックマーク
こんにちは、 ryosuke です。 今回は、 vscode で devcontainer を使った開発環境について、 「Clone repository in container volume」を使うとうれしい点を取り上げます。 「Clone repository in container volume」とは何か vscode で devcontainer を使った開発環境を構築する場合、下記のような手順を踏むことが多いと思います。 PC の任意のフォルダに repository を clone する 該当フォルダを vscode で開く
VictoriaMetricsのKey conceptsをササッとなぞって理解を深める
2022/12/23
ブックマーク
こんにちは、システムエンジニアの kouki です。 この記事では VictoriaMetrics のドキュメントに掲載されている Key concepts - VictoriaMetrics をハンズオン形式にまとめてみました。記事を書くに至ったモチベーションは下記の通りです。 VictoriaMetrics に入門してみたいけど、日本語で記述されているチュートリアル的なものがない (2022年12月現在) 自身でデータを登録して、自身で
TypeScriptのis演算子を使った自作型ガードを使う
2022/12/13
ブックマーク
はじめに こんにちは WESEEK でわりと何でもやっている haruhikonyan です。 みなさん TypeScript 書いてますか？ フロントエンドはもちろん Node でサーバサイドを書いてもよし、さらに型安全！ そんな型安全な TypeScript をより強固に使いこなすための User-Defined Type Guards の一つである is 演算子を使った自作型ガードの紹介をします。 型ガードとは まず最初に型ガードとは何かで
Cypress で XHR エラーになってしまう場合の対象方法
2022/12/06
ブックマーク
こんにちは、WESEEK でエンジニアをしている 宮沢 です。普段はオープンソースな wiki である GROWI を開発しています。今回はそんな GROWI のビジュアルリグレッションテストで利用している Cypress で発生した XHR エラーの対処方法について解説していきます。 エラー内容 今回紹介するエラー内容は以下の赤丸で囲った部分となっています。スクリーンショットは実際の GROWI
マルチカーソルを用いて快適に VSCode を使う
2022/12/06
ブックマーク
はじめに こんにちは、WESEEK でエンジニアをしている、藤澤です。 この記事では VS Code でマルチカーソルを使う方法をその具体例とともに解説します。 マルチカーソルを使いこなすことで日々の業務の時間短縮が図れるはずです。 ぜひこの記事を見て、マルチカーソルを使うことを検討してもらえればと思います。 マルチカーソルとは VS Code では複数のカーソルをサポ
【React】useCallbackの適切な使い方とパフォーマンス
2022/12/05
ブックマーク
はじめに こんにちは、システムエンジニアの蛸井です。 最近は React のパフォーマンスチューニングにハマっており、どのようなコードを書くのが最適なのか気になったため色々と調べてきました。 今回の記事では、パフォーマンスチューニングの中でも React Hooks の useCallback に絞って、適切な使い方・使い時について詳しく解説します。 useCallback とは React Hooks の useCallb
【Sass】@importは廃止！@use の基本的な書き方とベストプラクティス
2022/12/02
ブックマーク
はじめに こんにちは、システムエンジニアの @cao19x です。この記事では、Dart sass が提供する @use の基本的な使い方をご紹介します。 まだ@import を使っている方、@useを聞いたことがあるがよくわからない方、これから@useを使ってみたい方 などが対象読者となっています。 [toc] 今までの @import (公式により非推奨) @import は、公式で廃止予定であることが明言されており、「
ActiveModel::SerializersでSTIのtypeに応じてSerializerを切り替える
2022/11/29
ブックマーク
こんにちは 田村 です。 STI を使用して複数の type のモデルデータがあり、これを 1 つの API エンドポイントで混ぜて返したいとします。 このとき、 STI の type に応じて serializer を切り替えたくなります。 今回は、その方法を紹介します。 STI については こちら を参照してください。 困ったこと 以下のようなクラス階層を STI で実現しているとします。 SimplePosts は title と
【簡単】オンライン決済サービスStripeでのクーポン適用方法
2022/11/08
ブックマーク
はじめまして。エンジニアの Ryo です。本記事では、最近、勢いに乗ってきているオンライン決済サービス Stripe を用いてオンラインサービス提供者向けに、特定の顧客に対して割引を行う方法をご紹介します。 ※こちらの記事は、すでに Stripe をサービスに導入しているという前提で作成されております。もし、Stripe を検討中でまだ導入されてない場合は、以下の記事で
pure selectors must contain at least one local class or id
2022/10/28
ブックマーク
経緯 css modules ファイル内に、html セレクタを直接記述したらエラーに遭遇したので、原因と解説、解決方法を簡単にまとめました。 やったこと css modules ファイル内で、 <h1> タグ内の文字色を 黄色 にするクラス指定を追記。 import styles from '../styles/xxx.module.scss' export default function Home() { return ( <div className={styles.container}> <h1>Welcome to My app!</h1> // ここの
Next.js 13 の Turbopack をカスタムサーバーで試そうとした話
2022/10/27
ブックマーク
経緯 Next.js Conf 2022 でNext.js 13に関する発表、その中には Turbopack なる大変アツい代物がありました。 Next.js 13 Blog から 700倍だと？？ これは試してみたいですね。 TL;DR 2022/10/27 現在、v13.0.0 ではカスタムサーバー(Custom Server)向けに Turbopack を使う方法はありません。 バージョンアップを待ちましょう。 試してみる ブログでは優位性について記述があるものの、実際の手順は
Rails における hash のキーの扱いについての tips
2022/10/20
ブックマーク
みなさん、こんにちは kota です。 日頃、業務では Rails を使っているのですが、先日 hash のキーの扱いについて、再認識したことがあったので、簡単に共有したいと思います。 困ったこと model からデータを所得し、変数に入れ、その変数に対し attributes メソッドを使って hash 化した。 hash 化した変数から name の値を取得しようと user[:name] でアクセスするも、nil が返って
複数のdevcontainerを連結して開発できるようにした話
2022/10/19
ブックマーク
こんにちは、GROWI.cloud の開発・運用を担当している WESEEK のエンジニアの伊勢です。 今回は、 GROWI.cloud の開発で困った問題が起きて、その問題を解消した時の話をご紹介します。 背景 GROWI.cloud は node.js を主な言語として開発しており、そのプロジェクトを役割に応じて「プロジェクトA」「プロジェクトB」... と分割しています この「プロジェクトA」「プロジェクトB」..