はてなブックマーク

はじめに こんにちは。スペースマーケットでWebエンジニアしてます、新卒のdumbled0reです。 4月に入社してから早2ヶ月経って、入社式が昨日のように感じています。時の流れは早い。 日頃、ブラウザ操作する時はPythonのライブラリであるSeleniumを使用していましたが、vscodeにあるPlaywrightの拡張機能を使用すれば非エンジニアの方でも簡単にブラウザ操作用のコードを書けたので紹介します。 Playwrightとは PlaywrightとはMicrosoftが開発したオープンソースのE2Eテスト自動化フレームワークです。 Chromium、Firefox、WebKitなどの主要なブラウザで対応しており、1つのコードで複数のブラウザ上で動作確認も行えます。 環境 node 20.9.0 playwright 1.44.0 拡張機能のインストール 今回使用するVScode

私が好きな惣菜はメンチカツ、わらびを使ったおひたし的なやつ（正式名称不明） 好きな惣菜がまた出てきた時は発表したいです。 ということで最近私たちのチームで生産性を上げるためにいくつか取り組みをしてみたのですがどんどん生産性が上がっているのでそこで行なった取り組みを発表します。 これで皆さんのチームも良くなるかは分かりませんが、参考にできる部分があると嬉しいです。 以前タスクを小さくしようという話も書いたので参考までに チームの課題を見つける まずはチームの課題を見つけるところから始めました。 何をするにもチームの生産性を上げるためにはその中での課題を見つける必要があります。 ちょうど3月に新たなEMが誕生したので、チームを分割し2つのチームに分かれました。 そのタイミングで改めて新しいメンバーの課題点を洗い出してみました。 弊社ではFindy Team+を導入しております。 Findy T

terraform state 理解してない人、 俺、ガチで危機感持った方がいいと思う。 terraformerとして危機感持った方がいい それこそが、お前がどう足掻いたって、apply出来ない理由だと思う。 apply出来ないって、これまでに一度もterraform state向き合ってこなかったら、厳しいって、明らかな事実だと思う。 俺には俺は向いてないから理解力ないから、家に引きこもってる方が楽しいから、俺はゲームが好きだから、やばいって。 何がやばいかっていうと、terraformerとして成熟しないんだよね。 その人生の中で、なんかしらの競争をしてないと、terraformerとして成熟するためのパーツに欠けるんだよね。 お前最後にapplyしたのいつ？terraformに理不尽なエラー言われたのいつ？ないでしょ そういう経験ないと弱いって、絶対メンタル弱くなるって 勝負の世界に

起動確認 いつもの 初期設定 VSCode左下の><をクリック 開発コンテナー構成ファイルを追加 ワークスペースに構成を追加する こちらを選択することでGit上で構成ファイルを管理出来ます。 定義済みのコンテナー構成定義から Node.js & TypeSctipt 導入する、言語などを選択してください。 バージョンを指定してください。 お好きな拡張機能を追加してください。 .devcontainer/devcontainer.jsonに以下の様なファイルが出来上がります。 // For format details, see https://aka.ms/devcontainer.json. For config options, see the // README at: https://github.com/devcontainers/templates/tree/main/src/

前談 本番リリースの待ち時間ってドキドキして、他の作業も手につきませんよね？ そんなモヤモヤタイムを減らすべく今回Next.jsアプリケーションの本番リリース時間を半分以下に出来たので何が効果的だったのかの共有記事になります。 概要 Next.jsの本番リリースフローを見直して、本番リリース時間の短縮を目指しました。 今回の記事では、細かい実装内容については省略している部分がありますので、どんなことをやれば時間短縮につながるのか？といった部分の確認にいただければと思います。 基礎技術 Amazon ECS Amazon ECR Nextjs Yarn 修正を加えた技術 AWS CodePipeline GitHub Actionsへ移行 AWS CodeBuild GitHub Actionsへ移行 成果 本番へのリリースフロー全体の待ち時間 40分→18分に短縮 内訳 ステージング環境か

Pythonの高速なスーパーセットとされているMojoがApple Silicon Macについに対応したので、早速インストールしてMojo入門してみました。 ※ 記事作成日の前日（2023年10月19日）に公開されました。 インストール手順 0. ModularにSign up 基本、上記から遷移した先の以下の場所に記載しているインストール方法に沿って入れていきます。（ちょっと詰まった部分あるので本記事ではそれも記載してます） なお、curlコマンド部分に記載されているMODULAR_AUTHの値は本記事で {YOUR_TOKEN_HERE} となっている場所で使うため、メモっておきます。 1. （Homebrewインストールしてない方は入れておく） 2. Modular CLIをインストールする

こんにちは。株式会社スペースマーケットでフロントエンドエンジニアをしておりますwado63です。 以前弊社の記事でReactのテストの実践的なTipsを紹介していましたが、もっと細かい、テストをちょっとよくするかもしれないTipsを紹介したいと思います。 Mock関数に型を当てる jestのnamespaceには、jest.MockedFunctionという型があります。 これを使うことでMock関数に元の関数の型を当てることができます。 import { myFunction } from './myFunction' jest.mock('./myFunction', () => ({ myFunction: jest.fn() })) const mockedMyFunction = myFunction as unknown as jest.MockedFunction<typeo

こんにちは！ スペースマーケットでQAエンジニアをしている柴山です。 皆さんはテスト項目をどのように管理していますか？ 弊社ではスプレッドシートで管理していたテスト項目を、最近では一部のプロジェクトでQase（ケース）に移行しました。今回は、Qaseを運用する上で気付いたメリット/デメリットをご紹介します。 Qaseの概要 Qaseはクラウド上でテスト項目を効率的に管理するためのSaaS型ツールです。テスト項目の作成や実施、バグ管理、テスト結果の分析など、幅広い機能を提供しています。 Qaseには料金プランが4つ存在し、利用可能な機能がプランによって異なります。無料で利用できるFreeプランもありますが、アカウント数やAPI連携などに制限がありますので、チームでの導入を検討する場合はStartupプラン以上がおすすめです！ なお、弊社ではStartupプランを契約しています。この記事で示す

こんにちは！ スペースマーケットでフロントエンドエンジニアをしているmizukiです。 少し前に新規でコンポーネントを実装したのですが、パフォーマンスについてはあまり意識せずに実装したところ、画面の読み込みや処理にかなり遅延が発生してしまいました。 そこから処理速度を上げて遅延をなくすためにパフォーマンスチューニングをしたので、その話について書いていきたいと思います。 数値上の結論を先にお伝えすると、この改善をしたことで、当初は50秒ほどかかっていたユニットテストが7~8秒ほどまで短縮することができました。 （改めて文字に起こすと改善前は時間かかりすぎですね・・・） 問題発覚 コンポーネント実装時には、PCのchromeでローカル環境を立ち上げて挙動を確認していました。 コンポーネントではAPIからデータ取得後に少し複雑な加工処理を行なっていましたが、PCのchromeで見る分には特に遅延

スペースマーケットでSREを担当しています小見です。 今回は、2022年11月に発表されたばかりのAmazon Aurora Blue/Greenデプロイを利用して、 サポート終了となるAurora1のアップグレードを実施した時の調査や、躓いたところをまとめていきます。 実践している記事がほぼ皆無なため情報は公式の情報とAWSサポートに問い合わせた内容となります。 https://aws.amazon.com/jp/blogs/aws/new-fully-managed-blue-green-deployments-in-amazon-aurora-and-amazon-rds/ https://docs.aws.amazon.com/AmazonRDS/latest/AuroraUserGuide/blue-green-deployments.html 概要 今回実施したことは、Auro

スペースマーケット所属のfumink7です。 北欧へのあこがれが高まっています☃️ ReactでのWebアプリケーション開発をはじめる中で、ユニットテストを書き始めたときに知って役立ったtipsをまとめてみました。 テスト環境 テスティングフレームワークはJest、UIテストのためにTesting Libraryを使用しています [email protected] [email protected] [email protected] @testing-library/[email protected] ①アサーション 特定の要素内に絞って要素検索を行う - within getBy、findByなどで「要素A内にある要素Bを取得する」場合にwithinを使って要素Aを指定することができます。 const formElement = screen.getByRole('form') expect( within(formE

こんにちは。 スペースマーケットでフロントエンドエンジニアをしているmizukiです！ 今回はタイトルの通り、配列で型を絞る際にflatMapを使うのがおすすめだよ！といった話をします。 配列から特定のデータを排除する 例えば、配列からnullableな値を消したいとします。 その場合は以下のようなコードになります。 const nullableArray: Array<string | null> = ['hoge', null, 'fuga'] const array = nullableArray.filter((data) => { return !!data }) ただ、この場合だと型定義としてはnullが排除されたことを認知できず、変数arrayの型は引き続きArray<string | null>と認識されてしまいます。 isを使って型を絞り込む 先ほどの場合、期待値としては

useStateでしょ！ という声が聞こえてきますね。 おっしゃる通りなんですが、それよりも実はそういう時はuseReducerの方がより適しているという話です。 はじめましてスペースマーケットでフロントエンドエンジニア兼リーダーをしています。 はじめに useState / useReducerがなんぞや？という方は公式のリファレンスをご確認ください。 1度だけ変更されるstateでいうと下記のようなイメージでしょうか？ const Hoge: FC = () => { const [finished, setFinished] = useState(false) const onClick = () => { setFinished(true) } if (finished) return <div>送信しました！</div> return ( <div> <button onClic

「そんなもの余裕なんですけど」 と言ってくださったのでGitHub Actionsでリリース用PRを作成するお話をしていきます。 はじめましてスペースマーケットでフロントエンドエンジニア兼リーダーをしている和山です。 なぜやるのか さっそくですが、今回なぜGitHub Actionsにこのようなお仕事をお願いすることになったのかその経緯からまずはお話させていただきます。 スペースマーケットでのブランチ運用は下記のようになっています（※リポジトリのできた時期によって若干運用が異なる場合があります）。 大きく分けると3種類、featureの開発ブランチとstaging環境と同期しているstagingブランチ、本番環境と同期しているmaster(main)ブランチとなります。 また環境と紐づくブランチではpushイベントを契機としてAWSのCodePiplineを通してそれぞれの環境へ資材が反映