ロカオプ技術ブログ

株式会社ロカオプの技術ブログです。

フルリモートチームでモブプログラミングをやってみて感じたこと

フルリモートチームでモブプログラミングをやってみて感じたこと こんにちは、プロダクト開発部の高野です。 今回、チームで初めてモブプログラミング(以下モブプロ)に取り組み、一つのプロジェクトをモブプロのみで完遂したので、その経験を通じて感じた…

ロカオプ流のSaaSプロダクト開発手法を解説します

概要 みなさんこんにちは。プロダクト開発部部長 / フルスタックエンジニアの高瀬 @takasehiromichi です。 今回は、SaaSプロダクトにおける開発の進め方について、ロカオプ流ではありますが解説したいと思います。 SaaSプロダクトを開発する目的 何事も、実…

【CI/CD】ロカオプにおけるCI/CDの仕組みと重要性【毎日平均1.5回のリリースを実施】

はじめに みなさんこんにちは。プロダクト開発部部長 / フルスタックエンジニアの高瀬 @takasehiromichi です。 今回は、迅速にプロダクトの価値を届けるために欠かせない、ロカオプが重要視しているCI/CDについてお話します。 CI/CD CI/CDは、Continuous In…

React npm ライブラリ/パッケージの作成入門からnpm公開まで

React npm ライブラリ/パッケージの作成入門からnpm公開まで(RollupとTypeScript編) こんにちは、皆さん!今日は、RollupとTypeScriptを使用してReactのnpmパッケージを作成し、exampleディレクトリで動作確認する方法について詳しく説明します。この記事…

DockerでMySQLがGPG Keyの期限切れでapt-get updateなどが動かない場合

みなさんこんにちは。フルスタックエンジニアの高瀬 @takasehiromichi です。 ローカル環境などでコンテナを使用していてMySQLを利用している場合に、GPG Keyの期限切れでapt-get updateなどが動かない場合は、apt-get updateをRUNする前に、以下のコマンド…

【プロダクトマネジメント論】SaaSプロダクトで重要な「アウトカム」について考えます。

概要 みなさんこんにちは。フルスタックエンジニアの高瀬 @takasehiromichi です。 今回は、SaaSプロダクトにとって重要な「アウトカム」について考えてみたいと思います。 「アウトカム」という言葉 皆さんは、「アウトカム」という言葉をご存知ですか? 「…

ResizeObserverとpostMessageを使ってクロスドメイン間でコンテンツの高さを同期する

はじめに ロカオプの縣です。一番好きなJavaScriptの関数はpostMessageです! ちょい前にiframeでの埋め込みでスクロールバーを出さずにピッタリの高さに中身とiframeの高さを同期が必要な要件がありました。 その際にResizeObserverとpostMessageを使ってう…

React でやってはいけないBad Practiceを12個まとめました (TypeScript版)

概要 01. 過剰なProp Drilling 02. 過剰なimport 03. component内に過剰にビジネスロジックを記述する 04. 過剰なre-render 05. ナンニデモuseEffect 06. ナンニデモ && 07. ナンニデモ三項演算子 08. propsをそのまま使用する 09. React.VC、React.VFCを使…

VSCodeでGoogle Apps Script を操作する素地を作る

概要 みなさんこんにちは。フルスタックエンジニアの高瀬 @takasehiromichi です。 今回は、VSCodeからGoogle Apps Script を操作する素地を作ったので、記事にしようと思います。 スプレッドシートの作成 今回編集したいのはスプレッドシートのGASなので、…

Simple Mail Transfer Protocol (SMTP) Enhanced Status Codes Registry を元に、送信されたバウンスメールのステータスコードによって原因が日本語でわかるプログラムをJavaScriptで記述した

概要 みなさんこんにちは。フルスタックエンジニアの高瀬 @takasehiromichi です。 最近、バウンスメールの対応を行なっていたのですが、バウンスメールにはSMTPステータスコードが記載されています。 このコードを元に、バウンスの原因が日本語でわかるよう…

Mac上のVSCodeでMermaid.jsが書けるように環境を整えてからER図を書く

概要 みなさんこんにちは。フルスタックエンジニアの高瀬 @takasehiromichi です。 今回は、新たにER図を作成する際に、Mermaid.js の書き心地や、見た目が良さそうだったので、VSCode上で書いたりプレビューできるようにしてからER図を書いてみたので、記事…

Reactのディレクトリ構成について再考する

概要 みなさんこんにちは。フルスタックエンジニアの高瀬 @takasehiromichi です。 今回は、Reactのディレクトリ構成について再考する機会があったので、記事にしようと思います。 なお、技術スタックについては以下の記事を参照してください。 tech.locaop.…

Cacoo でワイヤーフレームを描く技術 (カスタム図形編)

概要 みなさんこんにちは。フルスタックエンジニアの高瀬 @takasehiromichi です。 最近、Cacooでワイヤーフレームを描くことが多いです。 やっぱり、機能を追加実装する時とかは、本当にその路線でいいのかとか、ここにこういうUIを置いた方がUXがいいとか…

ロカオプを支える技術 2023年版

概要 みなさんこんにちは。フルスタックエンジニアの高瀬 @takasehiromichi です。 2023年にも入りましたので、今回は、株式会社ロカオプで使用している技術について、改めて記事にしようと思います。 ロカオプとは? 簡単にですが、ロカオプサービスについ…

Amazon SESで送信クォータやバウンスなどの制限に引っかからずにバウンスメールなどをテストする方法

AWS

概要 みなさんこんにちは。フルスタックエンジニアの高瀬 @takasehiromichi です。 今回、バウンスメールを受信した際にSNS通知を作り込んでいたのですが、その際にバウンスメールをテストする必要があったので、送信クォータやバウンスなどの制限に引っかか…

AWS CodeBuildの課金はPROVISIONINGフェーズ以降から発生するらしい

AWS

概要 みなさんこんにちは。フルスタックエンジニアの高瀬 @takasehiromichi です。 AWS CodeBuildの課金について知見を得たので、記事にしようと思います。 AWS CodeBuildの各フェーズについて AWS CodeBuildは、以下のフェーズがあります。 SUBMITTED QUEUE…

CloudFront Functionsを使ってLambdaで元のHostヘッダを取得する方法

AWS

はじめに 株式会社ロカオププロダクト開発部、縣(@agata)です。 CloudFront経由でAPI Gateway/Lambdaが呼び出される場合、Lambda側で元のHostヘッダーの値が取得できません。この問題はCloudFront Functionsを使うことで解消できるのでその方法をご紹介しま…

masterブランチの最新commitにタグをつけるスクリプトを作成してリリース作業の改善を行なった

概要 みなさんこんにちは。フルスタックエンジニアの高瀬 @takasehiromichi です。 今回は、普段の運用フローで実施している、タグをコミットに付与してリリース作業を自動的に行なっているところをもっと楽にするためにスクリプトを作成したので、記事にし…