はてなブックマーク

はじめにこんにちは。 株式会社SHIFTのブラッドフォード です。 ついに　Storybook の v7.0 が正式リリースされましたね！ 早速利用していますが、設定や記法がシンプルになり使いやすくなりました。 Storybook といえば、コンポーネント管理を目的としたライブラリですが、最近はテストもこなせるようになりました。 公式では「インタラクションテスト」という名前で紹介されています。 今回はこの「インタラクションテスト」を使ったフロントエンドのテストを紹介します。 うまく活用できれば、単体テストや結合テストは「インタラクションテスト」に集約できるかもしれません。 執筆者プロフィール：ブラッドフォード 株式会社SHIFT DAAE部所属のフロントエンドエンジニアです。 最近は keyball を使って仕事しています。 おさらい｜フロントエンドのテストまずはフロントエンドのテストにつ

はじめにこんにちは、SHIFTの開発部門に所属している Katayama です。 GitHub Actions の CICD で、AWS 環境に Deploy する際に最も簡単なのは AWS のクレデンシャルを GitHub Actions のSecretに登録して、パイプライン（yaml）でそれを利用する事だと思う。 具体的には以下のような感じ。 - name: Configure AWS Credentials uses: aws-actions/configure-aws-credentials@v1 with: aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }} aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }} aws-region: ap-northeast-

はじめにこんにちは、SHIFT の開発部門に所属しているKatayamaです。今期から転属になり、開発を担当していくことになりました。 現在、基本的な事から学ぶ研修中です。開発部門では新しく学ぶことがたくさんあり、それらを自身の振り返りアウトプットとして発信していけたらと思います。記事が溜まったら、noteのマガジンにもまとめる予定です。 今回はExpressのエラーハンドリングの実装方法について、その実装方法のオプションについてと、middlewareを使った実装方法について理解したので、それについてまとめておこうと思います。 Expressとはhttps://expressjs.com/ ExpressのデフォルトエラーハンドリングExpressにはデフォルトのエラーハンドリングが実装されており、以下のようなコードを書くとちゃんと500エラーが返ってくる。 const express

はじめにこんにちは、自動化アーキテクトの森川です。 本日はCircleCIのパイプラインに関するTipsです。 やりたいことCircleCIのクラウド環境でE2Eテストをまわすとき、VMからテスト対象へのアクセスが必要となります。 開発環境にIPアドレス制限がかかっていることは「あるある」です。 IPホワイトリストのオプション契約をしていれば万事解決ですが、POCフェイズではそのようなリッチな環境は望めません。 CircleCIで開示されているIPアドレスリストを使うのはセキュリティ的に難しい場合もあるでしょう。 IP アドレスの範囲 - CircleCI Note: Jobs can use any of the address ranges above. また、このアドレス リストは、本機能を有効化しているすべての CircleCI ユーザーと共有されることに注意してください。 そこで

はじめにSHIFT DAAE部 shinagawa です。 最近、JSのランタイムである「Bun」が話題になっているのを目にしました。 ちょっと調べてみると、スピードやパフォーマンスについて注目されているようでしたが、 特に気になった点は、実装にZigという言語が利用されていることでした。 ※ Zigについて Zigは、アンドリュー・ケリーによって設計された命令型の汎用の静的型付けのコンパイル型システムプログラミング言語である。 この言語は「堅牢性、最適性及び保守性」向けに設計されており、コンパイル時のジェネリクス、リフレクション、クロスコンパイル及び手動メモリ管理をサポートしている。 Zig (プログラミング言語) - Wikipedia他の言語と比べて情報量がそれほど多くは無かったのですが、実行バイナリを小さくできる点と、 ビルドの標準のオプションでWasmが吐ける点が素晴らしいと思っ

はじめにはじめまして！SHIFT DAAE(ダーエ) 開発グループ所属の武藤です。 早速ですが、supabaseご存知でしょうか？最近試しに使ってみたところ、バックエンドに欲しい機能が簡単に作成できるサービスだったので、Webアプリケーションの開発デモを交えてご紹介します。 なお、当記事は2022/6/28時点の情報をもとにしています。 supabaseについてサービス概要subabaseは、認証やデータべースといったバックエンドに必要な機能を提供している、いわゆるBaaSの1つです。 BaaSの他サービスとしてはGoogleのFirebaseが有名ですが、supabaseはそのFirebaseに取って替わるサービスであると謡っています。まだPublic Beta版（企業以外のほとんどのユースケースに耐えうる）ではありますが、大きな注目を集めているオープンソースの1つです。 機能supab

はじめにSHIFT DAAE(ダーエ) 開発グループ所属の武藤です。 うっかりSolidJSに触れてみたら、沼にハマりそうです。そんな個人的に第一印象抜群のSolidJSは、高パフォーマンス&Reactの様にコードが書けることが特徴の、最近注目を集めるJavaScriptフレームワークです。 早速、ご紹介していきます。入門編としてご覧ください！ SolidJSとは概要ReactやVueと同じく。宣言型のJavaScriptフレームワークです。仮想DOMを使用せず、一度作成された実DOMノードをSignalやMemoといったプリミティブの変化に伴い部分的に更新させることで、高パフォーマンスなUIを実現しています（SignalとMemoについては後程の実装で触れますので、分からない場合はとりあえず読み飛ばしていただいて大丈夫です）。 Reactの様に書けるJSX, Fragment, Cont

こんにちは。インフラエンジニアの北野です。 kustomizeを使用する機会がありましたので、そこで得た知見を紹介したいと思います。 kustomizeについて知りたいかたの一助になれば幸いです。 kustomizeとはKustomizeは、複数のKubernetesクラスターを管理する状況において、リソースの構成や設定などをYAML形式で記述したマニフェストファイルをシンプルに管理できる便利なツールです。 Kubernetesではリソースの構成や設定などをYAML形式で記述したマニフェストで管理を行います。 マニフェストに定義した構成や設定を、マスターノードに登録することで、「Infrastructure as Code」を実現しています。 インフラの設計や設定がCode化されていると、構築が大変捗りますよね。 しかし、実務において、使用するクラスターは一つだけではなく、開発環境、本番環

はじめにこんにちは、SHIFT の開発部門に所属している Katayama です。 バックエンドでは配置する資材のサイズについて気にする事はないが、フロントエンドの場合は違う。 ブラウザの読み込み速度は利用者の快適さに直結するので、できるだけフロントエンドの資材のネットワーク転送量は少ない方がいい。 そこで今回は、以下に挙げた 3 つの方法を使って、できるだけネットワーク転送量が少なくなるようにし読み込み速度を向上させるという事をやってみた。 ①webpack-bundle-analyzerを用いて webpack で build する際に bundle サイズを小さくする ②HTML/CSS/JavaScript を縮小する（minify） ③gzip による圧縮する 以下でそれぞれの方法についてみていく（①・② については、実際にその方法を試すのは純粋な webpack ではなく、Vu

はじめにこんにちは。SHIFTのインフラ・アーキテクトの岡田です。 テストツールのLocustを使用してAPIの性能テストを行う機会がありました。そこで得た知見を、よく使用する機能に絞って紹介したいと思います。「Locustを使ってすぐに性能テストを始めたい！」という方の一助になれば幸いです。 Locustって何？Locust（ https://locust.io/ ）はWebアプリケーションやAPIの性能テストを行うための、オープンソースの負荷テストツールです。同様のものとしてはJMeterやk6などが有名ですが、Locustの特徴は何といってもPythonでテストスクリプトを書けることです。 テストスクリプトは普通のPythonプログラムなので、使い慣れたIDEはそのまま使用できます。また、Pythonの豊富なパッケージを使ってテスト結果を処理したり、CI/CDに性能テストを組み込むこ

スクラムマスター目指して日々勉強中！SHIFTの三谷です。 先日、スクラムマスターの資格「PSM I」を無事取得しました！！ やったー！！ そこで、実際に取得した私の経験に基づいて、 PSM Iを取得することに、メリットはあるか？ PSM Iの取得は、どんな人におすすめか？ について、私の考えを述べたいと思います。 そもそもPSM Iって何？PSM（Professional Scrum Master）は、Scrum org.が認定しているスクラムマスターの資格です。 レベルはI～Ⅲまであります。PSM Iが最も易しく、スクラムガイドの記載内容と、その応用が問われます。 スクラムマスターの資格といえば、CSM（Certified Scrum Master）、LSM（Licensed Scrum Master）を想像する方も多いでしょう。その2つの資格との大きな違いは、以下の3つです。 研修の

RGAでインフラエンジニアをしている川合です。 以前SHIFT EVOLVEでOpenAPIについて発表したのですが、この時はライトニングトークだったということで持ち時間も少なく、あまり詳しくは話すことができなかったので、以下の2点についてここで少し詳しく書いておこうと思います。 OpenAPIというものはなにかの概要解説 OpenAPIを用いた開発手法について簡単な説明 ※元のスライドはこちらをご参照ください。 https://speakerdeck.com/shift_evolve/apihuasutofalsekai-fa ※コードはこちらにありますので合わせご参照ください。 https://github.com/kwryoh/oapi-sample OpenAPI とはOpenAPIはRESTful API記述方法のひとつです。 APIの各パスやリクエスト・レスポンスの形式の仕様を

【ポエム】さようならInternetExplorer。Seleniumで乗り越えたあるある課題を思い出す どうも、こんにちはテスト自動化アーキテクトの森川です。 先日IEのサポート終了が公式に発表されました。エンジニアが多い私のSNSタイムラインではざわざわとしていました。 自動テストエンジニアはE2Eテストの難所・鬼門と言われたIE環境と やっとお別れをすることができそうですね。 Microsoft 社 Internet Explorer のサポート終了について：IPA 独立行政法人 情報処理推進機構 Selenium × IEを振り返る検証スコープにIEが含まれると、「あぁ、E2Eテストは遅れるだろうな。ちゃんとバッファ積んでね。」と思ったものです。 IEDriverServerの動作自体が重たいですし、検証時の開発者ツールも不安定、そしてエンジニアのモチベーションも上がりにくい。 他

はじめにこんにちは、SHIFT の開発部門に所属している Katayama です。 Node.js のプロジェクトに限らずだが、開発をする上では少なからず何かしらの OSS のライブラリに依存する事があると思う。 今回は Node.js を例に、ライブラリを利用する際にそのライブラリのライセンスをチェックする方法についてみていきたいと思う。 結論 どうやるのか？NPM License Checkerとsimple-git-hooks、lint-stagedを利用する。 [study@localhost node-express]$ yarn add --dev license-checker simple-git-hooks lint-staged { ... "scripts": { ... "prepare": "npx simple-git-hooks" }, "lint-stage

はじめにはじめまして！21年新卒としてSHIFT DAAE(ダーエ)開発グループに所属されました田中です。 DAAEでの新卒研修終了後、初めてアサインされたプロジェクトにてサーバーサイドKotlinを使ったDDD開発に取り組むことになりました。当初DDD開発未経験だった頃からそのプロジェクトに携わり早１年…、DDD開発の経験談やその魅力を少しでも共有できればと思いここにまとめます。 ｜DDD（ドメイン駆動設計）とはドメイン駆動設計の著者エリック・エヴァンスさんは、DDDは以下の４つから成り立つと言っています。 ・Focus on the core complexity and opportunity in the domain ドメイン(*1)の中核となる複雑さと機会にフォーカスする ・Explore models in a collaboration of domain experts

はじめにこんにちは、SHIFT の開発部門に所属している Katayama です。 Node.js（ES6 で実装）における ESLint・Prettier の設定を 1 からやってみたでは、以下のように書いていた通り、コードのスタイルルールは Prettier の設定にしつつも、ESLint にそのルールを組み込み、ESLint のチェック時にコードスタイルのエラーも表示されるようにしていた。 今回はフォーマットルールに沿っているか？も静的解析でチェックをしたい（ESLint のルールとして検証する構成にしたい）ので plugin:prettier/recommended を extends に入れる このように設定すると、Integrating with Lintersで触れらているように、以下の画像の通りエディター（VS Code）上でスタイルのエラーが表示され、煩わしかったりした。

はじめにこんにちは！Unit～E2Eのテスト自動化を生業にしている、いしいと申します。 ユニットテストに限らず、何かを始めようと思ったとき、人は様々な壁に直面しますよね。知識・経験の問題、コストの問題（金銭、時間）、メンタルの問題（納得感、不安感）、それらが複合的に結びつく社内政治的な問題などなど・・・。そして、それらの壁を乗り越えて第一歩を踏み出すことには大変な困難を伴います。 この記事では、ユニットテストを書いていくのにあたって、どのような壁・問題があるのかを確認し、それに対してどのようにアプローチをすれば乗り越えられるのかを考えていこうと思います。 ユニットテストの壁とその乗り越え方メンタルの問題根本的にモチベーションが上がらない それはユニットテストのメリットや魅力に理解、納得がいっていないからです。人間、無駄なことをやりたいとはなかなか思えません。仮に、無駄と思いながらやったとし

どうも自動化アーキテクトの森川です。 卵はどちらかといえば白身が好きな方ですが、どうやらそれは我が家が超固ゆで派で、いつも黄身がパサパサで月のミニチュアの様だったからだと思います。今では半熟卵が大好きです。 数年前にとある中堅Excel王国からSHIFTに転職した自分としては、なるべくExcelマクロやVBAには触れずに純粋なプログラミング言語やフレームワークを触って過ごしたいと常々思っています。 しかしながら望むようにはならないものです。 VBAであれこれExcelのIN/OUTを自動化したり、COMコンポーネントで自動処理したり、まだまだMS-Officeと業務は切っても切れない我々人類なのですね。 先日もとある自動ツールをVBAで開発していましてGitでバージョン管理していましたが、なにぶんExcelファイルはZIPアーカイブみたいなものですから変更履歴がさっぱり見えない。 コミット

テスト自動化アーキテクトの森川です。 本日はニッチな自動テストに関するTipsをお送りします。 CircleCI上で自動テストのレポートツールAllureを利用する際のTipsです。 Allure Framework 環境・Java: AdoptOpenJDK1.8.232 ・Gradle4.x ・Gradle Plugin : allure-plugin ・Junit5.x 問題導入しやすく見やすいレポーティングができるAllure ReportはCircleCIでも利用できてOrbsも公開されています。 CircleCI Developer Hub - ayte/allure ただ、このままでは過去ビルドのレポートが見れません。見るようにするにはひと手間が必要でした。 こちらについてはエントリー記事がありますので今回は触れません。 参考：自動テストのレポートツールAllure Repo

こんにちは自動化エンジニアの水谷です。 最近業務でGo言語（golang）に触れる機会がありました。私がこれまで主に使っていたプログラミング言語は、C/C++やC#などが主で、あまり最近の（？）プログラミング言語には触れてこなかったのですが、Goはまだ新しく、名前も良く（個人的感覚）、プログラミング言語年収ランキングで1位を獲得したこともあることから、ちょっと気になっていました（ややミーハーですがｗ）。 Goは、デスクトップアプリやコマンドラインツールをはじめ、WebアプリのバックエンドAPIの開発や、モバイルを含んだクロスプラットフォームで動作するアプリの開発など、いろいろな用途に使われている言語ということで、この機会にGoがどんな言語でどんなアプリ開発経験（主にどれだけ快適に楽しく書けるか）が得られるのかを試してみたいなと思いたちました。 ということで、全く初心者の私が今回から数回に分

こんにちは、自動化エンジニアの水谷です。 最近Linux系OSを使って仕事をする機会が増えてきたのですが、そこで感じたことの１つは、パッケージ管理ソフトは便利だな、ということです。 Linux系OSでのソフトウェアのインストールは、Windowsのそれとは異なり、apt-getやyumのようなコマンドラインベースのパッケージ管理ソフトを使うことが一般的です。これらのソフトを使えば、コマンド１つでソフトウェアが安全にインストールできるし、アップデートやアンインストールもできて便利で、しかもインストールの自動化もしやすいのです（MacではHomebrewがこれに相当しますね）。このようなパッケージ管理ソフトがWindows用にはないのかな？　と、いうと実はあります。今回はその１つであるChocolateyを紹介してみたいと思います。 ChocolateyのインストールまずはChocolatey