株式会社スタメン の技術ブログ

FANTS ダッシュボードを支えるフロントエンド技術

こんにちは、株式会社スタメンで FANTS のフロントエンド開発を担当している @0906koki です。 今回の記事では、本日リリースした FANTS ダッシュボードのフロントエンド開発で選定したフレームワークやライブラリ、ディレクトリ構成について解説します。 目次 目次 FANTS ダッシュボードとは? 技術スタック Next.js SWR Styled-Components Storybook ディレクトリ構成 components apis 最後

【AWS FireLens 徹底解説】カスタムFluent Bitイメージで複数種類のログを扱う

本文 こんにちは、スタメンの松谷です。 最近、 Ruby on Railsアプリケーション環境をECSへ移行 しましたが、ログ管理には FireLens for Amazon ECS (以下FireLens)という仕組みを利用しました。 この記事ではFireLensについて説明し、実際の要件にどのように対応したのかを共有します。 FireLens とは FireLensは2019年にリリースされたECSのログ管理機構で、ECSで管理しているコンテナの logi

スタートアップのプロダクト成長の舞台裏とコンテナ化までの道のり

こんにちは。スタメンCTOの 松谷 です。 最近、弊社が提供している 「エンゲージメント経営プラットフォーム TUNAG」 と 「オンラインサロンプラットフォーム FANTS」 のアプリケーション環境をECS上のDockerコンテナへ移行しました。約5年間、EC2で本番運用してきたRailsアプリケーションをコンテナ化することはとても困難でリスクの高い大変な作業でしたが、今後、開発組

Ruby on Rails 5.1から6.1へのバージョンアップをカナリアリリースしました

こんにちは、スタメンのエンジニア、津田です。最近、弊社のサービスで、Ruby on Rails を 5.1 から 6.1 へバージョンアップした際、社内ユーザーからのリクエストのみを6.1環境へ送るカナリアリリースを実施したため、対応をまとめました。 今回は、Railsバージョンだけではなく、同時に以下のような変更を行いました。 EC2インスタンス上で動いていたRailsアプリケーショ

2021年上半期 社内勉強会レポート

こんにちは。株式会社スタメンの井本です。Railsによるバックエンド開発、およびSRE業務を担当しています。 弊社では頻繁に社内勉強会が開催されています。書籍をテキストとして使用するものや、ハンズオンがメインのものなど、形式は様々ですが、有志が週に一回程度時間を設けて運営しています。 最近では、バックエンド、フロントエンド、モバイルなどの それぞ

スキーマ駆動開発、はじめました

目次 はじめに スキーマ駆動開発とは 導入背景 課題 実現したい状態 スキーマ定義 ドキュメントの閲覧 バックエンド APIのテストに利用 フロントエンド モックサーバとしての利用 導入してどのように変わったか? おわりに はじめに スタメンでエンジニアをしている 田中 です。今回は新規プロジェクトにて導入したスキーマ駆動開発について、その背景や実際にどのよ

Reactive variables【Apollo Client】による local state 管理

はじめに はじめまして、株式会社スタメンのミツモトです。 普段は、REST API をベースに React + Redux で開発しています。 最近になり開発者体験の向上、プロジェクトのスピードアップという観点から、社内でスキーマファーストな開発に関心が集まっています。そういった背景もあり弊社でも GraphQL の勉強会を始めました。今後のプロジェクトにおいて GraphQL を導入する

Next.js + NextAuth.js + Prismaで認証付きアプリケーションの作成

こんにちは。フロントエンドエンジニアの 渡邉 です。 普段はReactとTypeScriptを書いています。 今回は自分がNext.js + NextAuth.js + Prismaを使って認証付きアプリケーションを作成する際の土台を紹介をしようと思います。 フロントエンドエンジニアとしてトレンドの技術を抑えておきたいというのと、実際に新規のプロジェクトで開発する際に採用される可能性もあるので、Nex

All set for Jetpack Compose?

モバイルアプリグループでおもにAndroidアプリ開発している @sokume です。 Android エンジニアの皆さん、Jetpack Composeへの準備はバッチリでしょうか。 2019年にJetpack Composeの発表があり、2021年7月にはJetpack Composeバージョン1.0がリリースされると Google I/O 2021 Developers Keynote の中で発表がありました。 この記事では、リリース目前となったJetpack Composeバージョン1.0に向けて、Jetpack

プロダクト部の社内勉強会を刷新しました

TL;DR (概要) スタメン モバイルアプリGでAndroid・iOSアプリを開発してるカーキです! 昨年から、プロダクト部の勉強会の主催を担当させてもらっています。 突然ですが、皆さんの会社ではどのように社内勉強会を実施されているでしょうか? スタメンではこの6月からエンジニアの社内勉強会の方法を一新しました。 今回このブログでは、スタメンの社内勉強会を新たにど

Redux/Storeのデータを正規化しパフォーマンスの向上を狙う

はじめに こんにちは、スタメンでエンジニアをしている手嶋です。普段は、React+TypeScriptでフロントエンドメインで開発をしています。 弊社のプロジェクトではフロントエンドの状態管理ライブラリとして Redux を使用していますが、直近のプロジェクトにおいて Redux の Store に格納するデータを正規化することで多くの恩恵を得られた為、今回はそのメリット及び具体的

Storybookについて調べてみました。

目次 はじめに Storybookとは メリット 導入方法 サンプルの解説 アドオンの紹介 おわりに はじめに 初めまして。 株式会社スタメンのフロントエンドグループでエンジニアをしている神尾です。 普段は弊社が運営しているエンゲージメントプラットフォーム TUNAG の開発をしています。 今回の記事では、フロントエンドの開発で使用される Storybook のメリットや導入方法、

【MySQL】トランザクションの実行時間を調査する

はじめに こんにちは、スタメンの松谷( @uuushiro )です。この記事では、MySQLのパフォーマンススキーマを利用し、トランザクションの実行時間を調査する方法を紹介します。なお、検証に利用した実行環境は Amazon Aurora MySQL5.7互換 です。 なぜトランザクションの実行時間を調査したいのか 過去に弊社が提供するWEBサービスのデータベースに、ALTER文などのデータ定義言語(

CIでのiOSアプリ依存パッケージビルド時間を削減する

mohamed Hassan による Pixabay からの画像 こんにちは、スタメンでモバイルアプリ開発を担当している @temoki です。 2月に Mobile Act ONLINE #3 というオンライン勉強会に参加し、 iOSパッケージマネージャー奮闘記 というテーマで発表しました(詳しくは以下のスライドをご覧ください)。 この発表でお話しした内容の背景にあるのは CIでのiOSアプリビルド時間を短縮したい という

React Hook Formとは?煩雑なフォームのstate管理を楽に実装する!

目次 はじめに Reactを使用したフォーム設計パターンについて React Hook Formとは ? React Hook Formの基本機能の紹介 React Hook Formのユースケース 最後に はじめに こんにちは、株式会社スタメンでエンジニアをしています、 ワカゾノ です。 Rails、Reactを使用して、弊社プロダクト TUNAG の機能開発を行っています。 直近のプロジェクトにおいて、Reactでフォームを実装する必要があ