WESEEK, Inc. のブログ
全74件
ブラウザの開発者ツールを使いこなそう
2023/05/19
ブックマーク
はじめに ブラウザの開発者ツールはウェブ開発において必要不可欠なツールです。 開発者ツールを上手に使うことで、ウェブサイトのデバッグやパフォーマンスの最適化、アクセシビリティの向上など多くのことが行えます。 本記事では、ブラウザの開発者ツールの基本的な使い方や様々なテクニックについて解説します。 開発者ツールとは何か 開発者ツールとは、ウ
Webpacker から Shakapacker へ移行するときの注意点
2023/05/12
ブックマーク
はじめに こんにちは。システムエンジニアの佐藤です。 WESEEK では Rails を使った Web アプリケーションの開発をするプロジェクトがあります。 この記事では Webpacker から後継である Shakapacker への移行を経験した際に、どのような差があったのか確認した結果を紹介したいと思います。 Webpacker は引退した Readme.md にもあるように、Webpacker は 5 年間に渡って Rails コミュニテ
ReactでuseIdを使い一意な文字列を生成し汎用コンポーネントのid重複を防ぐ
2023/04/10
ブックマーク
はじめに こんにちは WESEEK で yaml から css まで何でも書く haruhikonyan です。 フォームなどをコンポーネント化したときに同じページにそのコンポーネントを使うと id の重複に困ったりしませんか？ そんな時に React が公式で提供している useId という hook を使うと解決するかもしれません。 しかし利用においては注意点があるので具体例とともに紹介したいと思います。 use
Stripeで海外展開する際に気をつけるべき2つのポイント！
2023/04/04
ブックマーク
はじめに はじめまして。エンジニアの Ryo です。本記事では、オンライン決済サービス Stripe を用いて海外展開をご検討中のサービス提供者向けに、気をつけておくべき点を紹介します。 ※こちらの記事は、すでに Stripe をサービスに導入しているという前提で作成されております。もし、Stripe を検討中でまだ導入されてない場合は、以下の記事で Stripe 導入のメリットや
SWR 2.0 で追加された useSWRMutation の使い所
2023/03/27
ブックマーク
こんにちは。 GROWI エンジニアの 宮沢 です。今回は便利な React hooks である SWR 2.0 で追加された useSWRMutation の使い所について簡単に紹介しようと思います。ある程度 SWR を使ったことがある人向けの記事となっております。 使い所 「useSWRMutation」とは、手動でデータのミューテーションを行うことができる React Hooks の1つであり、API の POST、PUT、DELETE などの HTTP リクエスト
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 と