はてなブックマーク

フルリモートチームでモブプログラミングをやってみて感じたこと こんにちは、プロダクト開発部の高野です。 今回、チームで初めてモブプログラミング（以下モブプロ）に取り組み、一つのプロジェクトをモブプロのみで完遂したので、その経験を通じて感じたことをまとめました。 この記事では、一般的なモブプロの話に加え、フルリモートでのモブプロの取り組み方や、そのメリット・デメリットについても触れていきます。 フルリモートチームでモブプログラミングをやってみて感じたこと チームやプロジェクトの規模感 チームの規模 対象となったプロジェクトと期間 モブプロを取り入れるに至った背景 プロジェクトを通じて得られたメリット コードレビューを省略できる点 コード品質やユーザビリティの向上 全員がメンテナンスできるようになる点 その他のメリット オフラインでのモブプロと比較したリモートモブプロのメリット・デメリット メ

React npm ライブラリ/パッケージの作成入門からnpm公開まで（RollupとTypeScript編） こんにちは、皆さん！今日は、RollupとTypeScriptを使用してReactのnpmパッケージを作成し、exampleディレクトリで動作確認する方法について詳しく説明します。この記事では、初心者でも分かりやすいようにステップバイステップで進めていきます。さっそく始めましょう！ React npm ライブラリ/パッケージの作成入門からnpm公開まで（RollupとTypeScript編） 作ったもの なぜ自作のライブラリを作ったか 1. 前提条件 必要なツール 2. プロジェクトのセットアップ ライブラリにはどのようにパッケージするの？（npm rollupもしくはnpm pack？） npm packとは rollupとは 使い方によって用途は分かれる 3. ディレクトリ構

はじめに ロカオプの縣です。一番好きなJavaScriptの関数はpostMessageです！ ちょい前にiframeでの埋め込みでスクロールバーを出さずにピッタリの高さに中身とiframeの高さを同期が必要な要件がありました。 その際にResizeObserverとpostMessageを使ってうまく実装ができたので、その方法をご紹介します。 iframeの高さ調整問題とは？ iframeの高さ調整問題 ここでは便宜的に以下のように呼びます。 親ページ(https://parent.example.com/parent.html)：iframeを使って他のページを埋め込む側のページ 子ページ(https://child.example.com/child.html)：iframe内で表示されるページ 上記の場合、子ページの高さが可変の場合、iframeの高さを決め打ちで設定していると縦方

概要 01. 過剰なProp Drilling 02. 過剰なimport 03. component内に過剰にビジネスロジックを記述する 04. 過剰なre-render 05. ナンニデモuseEffect 06. ナンニデモ && 07. ナンニデモ三項演算子 08. propsをそのまま使用する 09. React.VC、React.VFCを使用する 10. 無名関数を使用したonXの汚染 11. インラインスタイルを使用する 12. import React from 'react'; を使用する まとめ 参考記事 概要 みなさんこんにちは。フルスタックエンジニアの高瀬 @takasehiromichi です。 Reactは、記述の自由度が高い一方で、Bad Practiceとされるものがあり、「よくない」書き方が存在します。 エンジニアによって、Bad Practiceを把握し

概要 みなさんこんにちは。フルスタックエンジニアの高瀬 @takasehiromichi です。 今回は、VSCodeからGoogle Apps Script を操作する素地を作ったので、記事にしようと思います。 スプレッドシートの作成 今回編集したいのはスプレッドシートのGASなので、まず先にスプレッドシートを作成します。 空白から 拡張機能 > Apps Script 無題のプロジェクトができます プロジェクトの設定から スクリプトIDをコピーしておきます VSCode側の調整 まず、npm initします。Enterを連打 package.jsonができます npm i @google/clasp を実行 package.jsonのスクリプトも調整 { "name": "test", "version": "1.0.0", "description": "", "main": "in

概要 みなさんこんにちは。フルスタックエンジニアの高瀬 @takasehiromichi です。 今回は、新たにER図を作成する際に、Mermaid.js の書き心地や、見た目が良さそうだったので、VSCode上で書いたりプレビューできるようにしてからER図を書いてみたので、記事にしようと思います。 Mermaid 公式サイト mermaid.js.org mermaid-cli インストール 例によって、Homebrewで入れましょう。 brew install mermaid-cli VSCode 拡張機能インストール 以下2つの機能を使用しています。 marketplace.visualstudio.com marketplace.visualstudio.com ER図作成 sample.mmd みたいな感じでファイルを作成してから、以下のように書きます。 erDiagram CU

概要 みなさんこんにちは。フルスタックエンジニアの高瀬 @takasehiromichi です。 今回は、Reactのディレクトリ構成について再考する機会があったので、記事にしようと思います。 なお、技術スタックについては以下の記事を参照してください。 tech.locaop.jp Reactのディレクトリ構成について 現状は、フロントエンドのsrc配下は以下のような感じになってます。 @interfaces/ (55) api/ (88) components/ (50) context/ (3) pages/ (136) utils/ (22) これ、ロカオプMEO側だけ書いているんですが、プロダクトもだいぶ成長してきまして、それぞれのディレクトリ内のファイル数がすごいことになってます。 (かっこ内の数字がファイル数です。) それぞれのmonorepo内のディレクトリが、こんな感じです

概要 みなさんこんにちは。フルスタックエンジニアの高瀬 @takasehiromichi です。 今回、バウンスメールを受信した際にSNS通知を作り込んでいたのですが、その際にバウンスメールをテストする必要があったので、送信クォータやバウンスなどの制限に引っかからずにバウンスメールなどをテストする方法について記事にしようと思います。 メールボックスシミュレータ Amazon SES には、メールボックスシミュレーターがあります。 docs.aws.amazon.com メールボックスシミュレータは、サンドボックス環境下でも使用できる アカウントの最大送信レートのクォータの影響は受けるが、毎日の送信クォータの影響は受けない メールボックスシミュレータに送信するメールは、配信性能や評価のメトリクスには影響しない メールボックスシミュレータに送信するメールは、他のメールに送信するのと同じ請求の換