Rails+React環境下における、Hot Module Replacementの導入

はじめに はじめまして。株式会社スタメンでエンジニアをしております、永井(@0906koki)です。 以前の記事では、筋トレを週5でしていると書いていましたが、今は週2に減らして体をメンテナンスしています。 今回の記事ではRailsとWebpack、そしてReactを使っ…

スタメン開発チーム 2020年の振り返りと来年の展望

スタメンの松谷(@uuushiro)です。2020年3月末にスタメンのCTOに就任し、約9ヶ月ほどが経ちました。色々と変化の大きかったスタメン開発チームの2020年を、私の目線で振り返ります。そして期待も込めて来年の展望を共有したいと思います! どんな2020年だった…

ジェネリック型で汎用性の高いReactコンポーネントを作成

目次 はじめに ジェネリック型とは 汎用性の高いコンポーネントを作成 おわりに はじめに こんにちは、スタメンでエンジニアをしている手嶋です。普段は、React+TypeScriptでフロントエンドメインで開発をしています。開発の中でReactコンポーネント(以下コ…

JSON:APIのRequestSpecに、jsonapi-rspecを導入する

目次 はじめに jsonapi-rspecのinstall 既存のRequestSpecによく見られるテストケースの例 jsonapi-rspecで置き換えてみる さいごに はじめに こんにちは、株式会社スタメンでエンジニアをしているワカゾノです。 4月からサーバーサイドエンジニアとして、弊…

【Google Cloud Storage】署名付きURLによる画像のアップロード

目次 はじめに アップロードの流れ Google Cloud Storage の準備 実装 おわりに はじめに こんにちは、スタメンのミツモトです。 スタメンではTUNAG、FANTSというサービスを提供しており、画像の保存先として Amazon Web Services のS3(Simple Storage Serv…

RSpec から API ドキュメントを生成する「rspec-openapi」を試してみた

はじめに 本記事では RSpec の request spec から OpenAPI 仕様のドキュメントを出力する Gem、rspec-openapi を紹介します。 ドキュメンテーションツール導入にあたっての負担を少なくしたい、実装とドキュメントが乖離しないようにしたい、という場合に参…

自動で画像最適化してくれるのうれしいよね(Next.js)

こんにちは。フロントエンドエンジニアの渡邉です。 普段はReactとTypeScriptを書いています。 今回の内容はタイトルにも記載されていますが、Next.jsを使った画像の最適化です。 画像の最適化でやるべきことは多々あります。 例えば、画像のサイズ・重さ調…

preload、eager_load、includesの挙動を理解して使い分ける

目次 はじめに 使用する関連付け preload、eager_load、includesの挙動 includesはどのような場合にpreloadとeager_loadの挙動となるのか preload、eager_loadの使い分け さいごに はじめに こんにちは、株式会社スタメンでエンジニアをしているワカゾノです…

スタメン新卒エンジニアが入社して半年で読んだビジネス書

みなさんこんにちは! 株式会社スタメンで主にTUNAGのモバイルアプリを開発しているカーキです。 スタメンに正式に入社して11月で約半年が経ちました。 スタメンでは自己研鑽としての読書が推奨されており、社内でお互いに本をオススメし合う「必読Book」と…

IntelliJ IDEA Code With Meでペア・プログラミングする

こんにちは。スタメンで開発者をしている津田です。IntelliJ IDEA系のIDEでリモート共同開発と、ペア・プログラミング行うためのツール、Code With Meが9月末にEAPリリースされたため、同僚と試用してみました。 Ruby on Railsアプリケーション開発のペア・…

プロジェクトマネジメント入門ちょっとだけ

こんにちは。スタメンでエンジニアリングマネージャーをしている @temoki です。 前回、プロジェクトマネジメント入門以前という記事でプロジェクトマネジメントとは何なのか?について次のようにまとめました。 プロジェクトとは 独自の目標を達成するため…

useSelectorとuseDispatchでcontainer componentを排除する

はじめに こんにちは。株式会社スタメンでフロントエンドエンジニアをしております@0906kokiです。 React Hooksが2019年にリリースされてから、Reduxの実装でコンポーネントがstoreと接続する方法に選択肢が増えました。 具体的に言うと、今までconnect関数…

Reactでページネーションを実装

目次 はじめに ライブラリ(react-paginate)の導入 ページネーションの実装 おわりに はじめに こんにちは、スタメンでエンジニアをしている手嶋です。今回は「react-paginate」というライブラリを使用し、Reactでページネーションを実装する方法を紹介したい…

Update to Android 11

スタメン、プロダクト部で主にモバイルアプリ開発(Android/iOS)を行っている @sokume です。 早速ですが、皆さんスマートフォンつかっていますか?スマートフォンは年に1度位、大きなアップデートが実施されています。アップデートが来たらできるだけ更新…

プロジェクトマネジメント入門以前

こんにちは。スタメンでエンジニアリングマネージャーをしている @temoki です。 私がスタメンに入社した2年前、プロダクト部のエンジニアは10人くらいでしたが、現在はその倍以上のメンバーとなりました。 その中にはエンジニアだけではなく、ディレクター…

Lighthouseを使ってパフォーマンス監視する

こんにちは。フロントエンドエンジニアの渡邉です。 普段ReactとTypeScriptを書いています。 目次 Lighthouseとは Lighthouseを導入しようとした経緯 使ってみる 最後に Lighthouseとは Lighthouse is an open-source, automated tool for improving the per…

【Stripe】サブスクリプションの支払いタイミングが特定日時においてズレる問題について

スタメンでエンジニアをしている田中です。 今回は決済プラットフォームであるStripeのサブスクリプションを扱う際に遭遇した問題について、発生した事象とその原因、および対策方法についてご紹介します。 なお、本記事ではStripeのサブスクリプションにつ…

Microsoft Teams連携機能を実装する

目次 はじめに 「Incoming Webhook」を使用したMicrosoft Teams (以下、Teams) 側の設定 Railsアプリケーションの実装 おわりに はじめに こんにちは、スタメンでエンジニアをしているワカゾノです。 TUNAGでは、タイムラインへの投稿が作成される際に、Team…

Redux Style Guide に学ぶ

はじめに こんにちは、スタメンでエンジニアをしているミツモトです。 スタメンでは、Web アプリのクライアント側の状態管理に Redux というライブラリを採用しています。 Redux によって API のレスポンスやローカルで扱う値を自由に状態管理できますが、デ…

rbs_rails & steep で型のある Rails 開発を体験しよう

こんにちは。スタメンの河井です。 RubyKaigi Takeout 2020 が楽しみですね。 Ruby 3.0 から型定義 & 型検査ができるようになると言われていますが、今の段階でもそれに関連した gem は公開されています。 今回は型のある Rails 開発を体験してみようという…

モバイルアプリとデザインガイドライン

はじめに スタメン、プロダクト部で主にモバイルアプリ開発(Android/iOS)を行っている @sokume です。 先月に弊社のブログでプロダクト部の個人モバイルアプリたちという、記事が投稿されましたがお読みいただけましたでしょうか? プロダクト部メンバーが…

ConstraintLayout2.0で追加されるFlowを使ってタグを実装する

みなさんこんにちは! スタメン プロダクト部 モバイルアプリチームでiOSとAndroidのアプリ開発を行っているカーキです。 先月の29日に ConstraintLayout2.0-rc1がリリースされましたね! リリースノートには「安定版前の最後のリリース」とあるので、Constr…

システム思考でアラート運用に関する問題を考える

スタメンの松谷(@uuushiro)です。この記事ではアプリケーションのアラート(エラー通知)運用に関する問題を「システム思考」で構造的に捉え、どのように改善していこうとしているのか、ということを紹介します。「システム思考」についても記事内で簡単に説明…

プロダクト部の個人モバイルアプリたち

目次 概要 はじめに 各サービスの紹介 まとめ 概要 こんにちは。スタメンでエンジニアをしている梅村です。今回は、スタメンのプロダクト部のエンジニアが個人開発しているモバイルアプリについての紹介を行っていこうと思います。 はじめに スタメンのプロ…

Star Code: プロダクトチームの VISION (目指している姿) と VALUE (価値観や行動指針) を改定しました

こんにちは、スタメン VPoE(開発部門の責任者) の小林です。 2020年7月に、スタメンのプロダクトを作っているプロダクト部の全員で合宿を行い、Star Code の改定を行いました。今回は改定した Star Code とその背景をご紹介したいと思います。 なお、はじめ…

Dynamic Reducerの実装方法

はじめまして。株式会社スタメンでフロントエンドエンジニアをしている永井です。週5で筋トレをしています。 弊社のプロダクトであるTUNAGでは、フロントエンドをReact、Redux、TypeScript、サーバーサイドをRuby on Railsで実装しています。 今回の記事では…

iOSアプリ開発においてSwiftのErrorを巧く活用するには

iOS

モバイルアプリ開発に限らずソフトウェアの実装においては必ずエラーハンドリングが必要になりますよね。Swiftのエラーハンドリングでエラーとして取り回されるのが `Error` です。今回はこの `Error` について深堀りし、巧く活用することを考えてみようと思…

【Ruby on Rails】Stripeのサブスクリプションで試したことをまとめてみた

スタメンでエンジニアをしている田中です。 今回は決済プラットフォームであるStripeのサブスクリプションについて、Rubyで実際にコードを書きながら調査をしたので、そのまとめを記述していこうと思います。 目次 Stripeのサブスクリプションについて 準備 …

Utility Typesで楽に、Type Transformしよう

こんにちは。フロントエンドエンジニアの渡邉です。 普段ReactとTypeScriptを書いています。 今回はTypeScriptのUtility Typesについて紹介します。 記事のタイトルが某 大柴さんみたいになっていますが、この記事を読んだ方の力に少しでもなれたら幸いです…

Amazon Athenaでのパフォーマンスログ分析

Amazon Kinesis Firehose 概要 こんにちは。スタメンで開発者をしている津田です。今回は、Amazon Athenaを利用しアプリケーションのリクエスト処理時間をセグメント別に計測することで、パフォーマンスの低下を検知しやすくしたことについて紹介します。 動…