2/27 PlaywrightでE2Eテストを実装
PlaywrightでE2Eテストを実装しています。
クライアントから以下の点が分からんと言われたので対応策考えながらの実装です。
・classやidはテスト用に整ってないからDOMの取得方法を検討してほしい
・テストケースを綺麗に整えてほしい
DOMの取得方法
まずDOMの取得はdata属性を付与するようにしました。
classやidでも取得できますがテスト用に振り分けた方がより独立性を保てて良さそう。
class名やid名の変更などに影響を受けてしまいますからねぇ。
E2Eテストで有名なcypressのドキュメントを見てみると、
data属性を付与するのがベストだよって書いてました。なるほど。
テスト自動化ツールのAutify社のブログにもidの変更を伴う修正が困難になるので、
data属性がいいぞとのこと。ありがたい記事です。
以上からdata属性を利用することにしました。
ちなみにplaywrightのドキュメント読んでると「data-testid」を付与してあげて
getByTestIdで取得するといいぞって書いてたので習おうと思います。
HTML側
<button data-testid="directions">Itinéraire</button>
playwright側
await page.getByTestId('directions').click();
Page Object Model について
テストコード綺麗に整えてほしいとのことだったので、
Page Object Model とやらを導入してみました。
Playwrightのドキュメントの説明はこちら。
ドキュメントだけだとちょっと分かりにくいですね。
要は、
①画面の情報取得や操作に関するオブジェクトクラスと
②テストを実行するテストクラス
に分けるということですね。
①のオブジェクトクラスでは、
テスト中に行いたいクリックや入力などの操作と
そのために必要なDOMの取得などを記載していきます。
②のテストクラスでは、オブジェクトクラスの操作や取得したDOMを呼び出しつつ
アサーションの判定を中心に記載していきます。
こうすることで、テスト判定はテストクラスを見ればよく、
画面の変更があった場合はオブジェクトクラスを修正してあげれば、
それを呼び出すテストクラスが漏れなく修正されるということですね。
画像で視覚的に見やすかった記事
コードを踏まえて分かりやすい記事
E2Eテストで必要そうな情報がまとまったのでセコセコ書いていこうと思います。
2/25 ヌーラボ社のBacklog
副業先のプロジェクトでヌーラボ社さんのbacklogを使っています。
設計ができたらタスクチケットを切って開発部門に投げる感じ。
色味が鮮やかで使いやすくて好きです。
本業のリーダーもヌーラボさんのフォーラムによく参加してたみたい。
使いやすいよねという話で盛り上がった。
色覚障害の方にも使いやすいようにデザインの改善を重ねたらしい。
なるほどなぁ。
ヌーラボ社のBacklogについて
Backlogは、ヌーラボ株式会社が提供するプロジェクト管理ツールです。Backlogは、タスク管理、プロジェクト管理、バグトラッキング、コードレビュー、Wiki管理などの機能を提供しており、ソフトウェア開発をはじめとする様々なプロジェクトの管理に利用されています。
Backlogでは、ユーザーはプロジェクトごとにタスクを作成し、割り当て、優先度を設定することができます。タスクは、カテゴリ、ラベル、マイルストーンなどの情報で整理され、進捗状況をグラフィカルに表示することができます。また、タスクのコメント機能や、ファイルの共有機能なども備えており、プロジェクトメンバー間でのコミュニケーションや情報共有にも便利です。
また、Backlogはバグトラッキング機能を提供しており、バグレポートやバグの修正履歴、テスト結果の管理ができます。さらに、GitやSVNなどのバージョン管理システムとの連携も可能で、コードレビューやブランチのマージなどのプロセスを効率化することができます。
Backlogは、クラウド上で提供されており、Webブラウザからアクセスすることができます。また、スマートフォンアプリも提供されており、タスクの作成やコメントの追加など、必要な情報をいつでも確認することができます。
Backlogは、企業や組織のプロジェクト管理に利用されているほか、個人やフリーランスの方にも使いやすいように設計されています。基本的な機能は無料で利用することができますが、上限を超える場合には有料プランに移行する必要があります。
2/24 JavaScriptのレビュー指摘
フロントエンドに強いエンジニアが部署にいるのでJavaScriptのレビューをしていただいてます。
以前出た高階関数の利用の他に、以下の説明を受けました。
①変数宣言にはconst, letを利用すること。varは巻き上げが起こるのでエラーを発見しにくいみたい。
②単純な分岐処理には三項演算子を利用すること
③コードフォーマッターにprettierを利用すること
④静的解析にはESLintを利用すること
PHPではcs-fixerやPHPStanを使ってたけど同じようなのがJavaScriptにもあるんやな。
const と let の違いについて
JavaScriptにおける const と let の主な違いは、変数の値が再代入可能かどうかです。
const: 宣言した変数に再代入をすることができません。ただし、オブジェクトや配列などの参照型については、その中身を変更することは可能です。
let: 宣言した変数に再代入をすることができます。
const a = 1; a = 2; // エラーが発生する let b = 3; b = 4; // bの値が4に変更される const c = { x: 1 }; c.x = 2; // cの中身が { x: 2 } に変更される let d = [1, 2, 3]; d.push(4); // dの中身が [1, 2, 3, 4] に変更される
const は再代入ができないため、一度値を設定したら変更する必要がない場合に利用すると良いでしょう。一方、let は再代入ができるため、値が変化する可能性がある場合に利用すると良いでしょう。
varの巻き上げについて
JavaScriptにおいて、varで宣言された変数は、そのスコープ内で巻き上げ(Hoisting)されるという特性があります。巻き上げとは、変数の宣言がコードの先頭に移動することを指します。
console.log(a); // undefined var a = 1;
このコードは、変数 a を宣言してから、その値を 1 に設定しています。しかし、コードを実行すると undefined が出力されます。これは、var で宣言された変数が、実際にその行に到達する前に、宣言が先頭に移動したためです。
この特性により、varで宣言された変数は、宣言前に参照しようとしても undefined となるため、注意が必要です。また、このような特性を持たない let や const を使うことで、より安全で予測しやすいコードを書くことができます。
三項演算子について
JavaScriptにおいて、三項演算子は以下のように書きます。
条件式 ? 真の場合の処理 : 偽の場合の処理
この演算子は、if-else文と同様に条件分岐を行いますが、より簡潔に書くことができます。条件式が true の場合には、真の場合の処理が実行され、false の場合には偽の場合の処理が実行されます。
以下に例を示します。
const age = 20; const message = age >= 20 ? "成年です" : "未成年です"; console.log(message); // "成年です"
上記の例では、変数 age が 20 以上であるかどうかを条件式で評価し、真の場合には message に "成年です" を代入し、偽の場合には message に "未成年です" を代入しています。
三項演算子は、短い処理を分かりやすく書く場合によく利用されますが、複雑な条件分岐を行う場合は、if-else文を使った方が読みやすいコードを書くことができます。また、複数の処理を実行したい場合には、ブロックスコープを作成する必要があるため、if-else文を使った方が適しています。
prettier と ESLintについて
PrettierとESLintは、どちらもコードの品質を向上させるためのJavaScriptのツールですが、それぞれ異なる役割を持っています。
Prettierは、コードのフォーマットを統一するためのツールです。コードを自動的に整形し、読みやすく保つことができます。Prettierは、改行、インデント、クオートのスタイルなど、コードの外観に関する様々なルールを自動的に適用することができます。これにより、開発者がコードの見た目に気を取られることなく、コードの品質を維持することができます。
一方、ESLintは、コードの品質を検証するためのツールです。コードに文法的な問題や、ベストプラクティスに反するコードが含まれていないかをチェックし、開発者に警告やエラーメッセージを表示することができます。ESLintは、変数の未使用、関数の未定義、不適切な命名規則など、コードの内部品質に関するルールを定義することができます。これにより、開発者が品質の高いコードを書くための指針を提供することができます。
つまり、Prettierはコードのフォーマットに関するツールであり、ESLintはコードの品質に関するツールです。両方のツールを併用することで、コードのフォーマットと品質の両方を向上させることができます。ただし、ルールの設定や設定ファイルの管理など、両方のツールを組み合わせることで発生する課題に対応する必要があるため、適切に設定する必要があります。
2/23 TRUSTDOCK, Agora
副業先のプロジェクトで、開発部門からの質問に回答する一次受けをしてほしいと依頼がありました。大変そうですねぇ。
今までのやりとりから機能をキャッチアップしていく中で、TRUSTDOCKやAgoraを利用していることを知りました。詳しくなかったので概要把握しとこうと思い調べました。
TRUSTDOCK...オンライン上で本人確認サービスを提供
Agora...オンライン上で音声通話やビデオ通話などリアルタイム通信サービスを提供
TRUSTDOCK
TRUSTDOCK(トラストドック)は、オンライン上で本人確認(KYC:Know Your Customer)を行うためのサービスを提供する企業。金融機関やビジネス企業、不動産業界など、様々な業界で利用されている。
TRUSTDOCKの本人確認サービスは、個人が自宅にいながら、スマートフォンやパソコンを使って本人確認を行うことができる。具体的には、本人確認書類(パスポート、運転免許証、住民基本台帳カードなど)を撮影し、顔認証を行うことで本人確認が完了。本人確認が完了すると、TRUSTDOCKはその情報を保有せず、暗号化して金融機関やビジネス企業に提供する。
TRUSTDOCKの本人確認サービスには、以下のような利用方法がある。
- 金融機関による口座開設やクレジットカードの申請などの本人確認
- ビジネス企業による新規顧客登録や本人確認
- 不動産業界における入居者や購入者の本人確認
- オンライン上での高額取引などの本人確認
TRUSTDOCKの本人確認サービスには、高度な顔認証技術やセキュリティ技術が用いられており、高い精度と安全性を誇っている。また、多言語対応も行っているため、海外からの利用も可能。
TRUSTDOCKの競合比較
TRUSTDOCKの競合としては、以下のような企業が挙げられます。
- KYCチェックサービスを提供する企業
- Shufti Pro
- Onfido
- Jumio
- Veriff
- IDnow
- 電子署名サービスを提供する企業
- 本人確認に特化したサービスを提供する企業
- Authenteq
- VerifID
- Veriff
- ID.me
- Civic
これらの競合企業とTRUSTDOCKを比較すると、TRUSTDOCKは主に顔認証に特化した本人確認サービスを提供している点が特徴的。また、TRUSTDOCKは日本市場に特化しており、日本国内の法的要件や文化に合わせたサービスを提供している。
一方で、TRUSTDOCKの強みである日本市場特化が競合に比べて海外展開が難しい点や、多様な本人確認サービスを提供する競合と比べるとTRUSTDOCKのサービス範囲が狭い点が課題となる場合がある。
Agora
Agora(アゴラ)は、リアルタイム通信技術のプラットフォームを提供する企業。音声通話、ビデオ通話、リアルタイムチャットなど、様々なリアルタイム通信サービスを提供している。
Agoraのプラットフォームは、スケーラブルで柔軟性の高いリアルタイム通信機能を提供しており、高品質な通信を実現している。また、グローバルなネットワークを持っており、世界中のユーザーにサービスを提供している。
Agoraの利用方法としては、以下のようなものがある。
- ビデオ通話アプリやオンライン授業システムに組み込むことで、リアルタイムでの映像や音声の配信を実現する。
- リアルタイムチャットアプリに組み込むことで、ユーザー間のリアルタイムコミュニケーションを実現する。
- インタラクティブなライブストリーミングサービスを提供する。
- ゲームに組み込むことで、複数プレイヤーのリアルタイム対戦やチャットを実現する。
- IoT(Internet of Things)デバイスとのリアルタイム通信を実現する。
Agoraのプラットフォームは、APIを提供しており、簡単に導入することができる。また、開発者向けにドキュメントやチュートリアル、サポートも提供しており、開発効率を向上させることができる。
Agoraの競合比較
Agoraの競合としては、以下のような企業が挙げられる。
- WebRTCを利用したリアルタイム通信サービスを提供する企業
- Twilio
- Vonage
- Kurento
- OpenTok
- TokBox
- ビデオ通話プラットフォームを提供する企業
- ゲーム向けのリアルタイム通信技術を提供する企業
- Photon
- PlayFab
- Nakama
- GameSparks
- PubNub
これらの競合企業とAgoraを比較すると、Agoraはスケーラビリティとパフォーマンスの高さが特徴的。Agoraは、グローバルなネットワークを持ち、多数のユーザーを支えることができるため、大規模なリアルタイム通信サービスを提供することが可能。
一方で、競合企業と比較すると、Agoraの価格が高めであることが課題となる場合がある。また、競合企業にはビデオ通話やWebRTCに特化したサービスを提供するものがあるため、Agoraとの差別化が課題となる場合がある。
2/22 Astro, 高階関数, ESLint
フロントエンドを勉強している方との会話で、Astroが気になると話が出ました。気になって調べてみました。
JavaScriptのレビュー指摘で、高階関数を利用するとループ処理をほぼ書かなくて良いといただきました。Laravelのコレクション操作と似ているなーと思ったので調べました。
ESLintは知らずに利用していたので概要把握のために調べました。
Astro
Astroは、Webアプリケーションのフロントエンド開発のための新しいツールであり、次世代のコンポーネント指向のフレームワーク。Astroは、React、Vueなどのフレームワークと同様に、コンポーネントベースのアプローチを採用している。
-
コンポーネント指向のアプローチを採用しているため、再利用性とメンテナンス性が高いコードを書くことができる。
-
静的なWebサイトや動的なWebアプリケーションの両方に使用することができる。
-
モジュールバンドラーに依存しないため、パフォーマンスが向上する。
-
JavaScriptやCSSなどの通常のWeb技術をサポートしている。
JavaScriptの高階関数は、関数を引数として受け取る関数であり、その関数内で引数として受け取った関数を呼び出すことができる。JavaScriptの高階関数は、配列やオブジェクトを扱う場合に非常に便利。例えば、Array.prototype.map()やArray.prototype.filter()といったメソッドがあり、これらは高階関数として動作する。これらのメソッドを使用することで、配列内の要素を変換、フィルタリングすることができる。
LaravelのCollection
LaravelのCollectionでは、配列やオブジェクトのような複数の値を持ち、コレクション内の要素を変換、フィルタリングするための多数のメソッドを提供する。例えば、map()、filter()、reduce()、pluck()、sort()などがある。これらのメソッドを使用することで、コレクション内の要素を操作することができる。
ESLintの静的解析
ESLintは、JavaScriptの静的解析ツールの1つ。静的解析とは、コードを実行せずに、ソースコードを解析してバグや構文エラーなどを検出すること。JavaScriptのソースコードを解析し、様々なルールに基づいて問題を検出する。
様々なルールを提供しており、デフォルトではいくつかのルールが設定されている。これらのルールは、ソースコードに対してさまざまなチェックを行い、コードの品質を向上させることができる。例えば、未定義の変数の使用、未使用の変数や関数、不正な構文、一貫性のないインデント、不必要なスペースなどを検出することができる。
ESLintを使用することで、コード品質の向上だけでなく、コードの可読性や保守性、エラーの早期発見と修正、コード規約の統一などのメリットがありる。