はじめに こんにちは。スペースマーケットで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

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/

こんにちは。 スペースマーケットでフロントエンドエンジニアをしている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を通してそれぞれの環境へ資材が反映

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