テックブログWizは、最新のIoTやICTサービスをお客様に届ける「ITの総合商社」です。フロントエンドこんにちは、フロントエンドエンジニアの菅野です。今回は私もプロジェクトで導入しているTestCafeと昨年にリリースされたPlaywrightについて簡単に比較してみたのでお話したいと思います。Inc.リリース年:2016年Github:https://github.com/DevExpress/testcafePlaywright開発会社:Microsoftリリース年:2020年Github:https://github.com/microsoft/playwrightどちらも最新リリースが10日以内(8/23時点)なので活発に開発されています。PlaywrightはMicrosoftが開発しているので今後開発されなくなるリスクは少なそうに思います。他にもたくさんあるのですがいくつか抜粋して書いてみました。Playwrightにはテストケースをちまちま書かなくてもユーザーの操作からコードを生成してくれる機能があったりと、それぞれに特徴や強みがあるのが分かります。簡単にですがスクリーンショットを撮るコードで違いを見てみたいと思います。browser.close();})();Playwrightではブラウザコンテキストとコンテキストの中でpageを生成する記述があるため、TestCafeと比べるとコードが少し長くなってしまいます。あとは、browser.close();を書くことでブラウザを閉じ処理を終了するのですが、TestCafeは記述を書かなくても自動でブラウザを閉じてくれるのでそういう細かいところで便利だなと思います。続いて実行時間を比べてみます。今回はブラウザUIを表示させて時間を計測したかったので、Playwrightではデフォルトでtrueとなっているheadlessモードをfalseにしています。2313.172ms実行時間はPlaywrightが7秒以上速い結果となりました。TestCafeはブラウザが立ち上がるまでに特に時間がかかってしまうのでそこで大きく差が出てしまいました。比較をしてみると互いの長所短所が分かりやすくなりますね。ユーザー操作からコードを生成してくれるPlaywrightはメンテナンスのしやすさからフォームテストなどのテストケースが多い場合に向いてると思います。TestCafeはサポートブラウザが充実しているのでスマホ実機、IEなど様々な環境でテストを行いたい場合に選ぶと良さそうです。プロジェクトによってどういったテストを行いたいのか、検証範囲はどこまでなのかなどがあると思いますので、ぜひそれぞれにあったフレームワーク,ライブラリを選んでみてください。バックエンドこんにちは、バックエンドエンジニアの米山です。コンストラクタ、使っていますか?特に、ビジネスロジックをまとめるクラスを作った時や、似たような処理を行うクラスの初期化に役立つのがコンストラクタです。今回は、そんなコンストラクタを複数作る手法と、私なりのオススメ度も併せてご紹介しようと思います。それではいってみましょう〜!そもそも、「コンストラクタ」って何?Wikipediaにはこうあります。constructor)は、オブジェクト指向のプログラミング言語で新たなオブジェクトを生成する際に呼び出されて内容の初期化などを行なう関数あるいはメソッドのことである。JavaやPHP、C#に代表されるようなオブジェクト指向言語では、クラスのインスタンスを作成する時に初期化処理を行うことができます。この初期化処理のことを「コンストラクタ」と呼んでいます。具体的にPHPを例に、コードで表すとこんな感じになります。}}コンストラクタを複数実装する方法それでは本題に入りましょう。コンストラクタを複数実装し、引数の数や内容で処理を分岐させます。いくつか方法があるので、私なりのオススメ度も併せて記載しておきます。【オススメ度:★★★☆☆】方法その1:コンストラクタをオーバーライドさせるPHPでは関数のオーバーロードができません。似たようなことをやるためには、abstractクラスを用意し継承した先のクラスで「自分自身のコンストラクタを呼ぶ」もしくは「親クラスのコンストラクタを呼ぶ」という分岐になります。コンストラクタだけ、オーバーライドすることができます。【余談】オーバーロードとオーバーライドさて、上記で説明した通りなのですが「オーバーロード」「オーバーライド」は混同しやすい用語なので、解説を挟みます。私なりに理解した内容で説明するとオーバーロード:同名の、類似メソッド(または関数)の作成オーバーライド:メソッド(または関数)の上書きです。オーバーロードを実際にコードで表すとこうです。PHPでコンストラクタをオーバーライドすると・・・?話を戻して、PHPでコンストラクタをオーバーライドさせると、こうなります。}}これを、例えばControllerクラスなどで呼び出す場合、以下のようになります。}}【オススメ度:★★★☆☆】方法その2:コンストラクタをオーバーライドさせる(1メソッドで分岐)方法その1と似ていますが、こちらのやり方では必ず子クラスのコンストラクタを呼び、引数の内容によって親クラスのコンストラクタを呼ぶ、というやり方です。}}【オススメ度:★☆☆☆☆】方法その3:func_num_argsとfunc_get_argsでコンストラクタを分岐するこの方法は、可読性の観点からオススメはしません。PHPのバージョンにより挙動が変わる可能性があります。func_num_args関数でコンストラクタに渡した引数の数を取得・チェックし、引数の数に応じて呼び出すコンストラクタを変える方法です。分岐先のメソッドに渡す引数はfunc_get_args関数で取得できます。}}【オススメ度:★★★★☆】方法その4:interfaceを使ってクラスで分岐する方法その1では継承を使いました。「同じような処理を行う」が「初期化処理が異なる」場合はinterfaceが有効です。この例ではfactory関数を用意し分岐条件に応じてそれぞれの初期化を行う、別々のクラスを返すようにします。コンストラクタの分岐を行うことで少々複雑さが増します。主処理が同じ場合は初期化を行ってから主処理を行うクラス初期化を行わず、主処理を行うクラスにクラスそのものを、分けてしまった方がわかりやすくなるケースがあります。}}この場合、呼び出し元では下記のようになります。}}この例ではcreateSample関数の中で、直接コンストラクタに引数を渡していますが、呼び出し元(Controller)から引数を繋げたい場合は、createSample関数へ渡す引数を可変長引数リストにする等で対応可能です。まとめPHPでコンストラクタを複数実装する方法をご紹介しました。他の言語のようにオーバーロードができないので、少し不恰好になってしまいますが継承を使い、親クラスと子クラスでコンストラクタを分けるfunc_num_args関数、func_get_args関数を使って、処理パターンを分岐させるinterfaceを使ってクラスそのものを分岐し、それぞれで初期化させるまとめるとこの3パターンになります。Wizではエンジニアを募集しております。興味のある方、ぜひご覧下さい。エンジニアリングマネージャーはじめまして。エンジニアリングマネージャー(以下EM)の岡本です。今回は私がプレーヤーからマネージャーになって変化した「行動」について書いていきます。マネージャーになり、基本的に何にでも興味を示し行動するようになりました。課題と感じたらとりあえず何かやってみたり、と何でも好き嫌いなくまず行動するようになりました。今回振り返りも兼ねてまとめていきたいと思います。私は2016年7月に中途でフロントエンドエンジニアとして入社しました。2019年4月にマネージャーになるまではフロントエンド開発をメインでしておりました。基本的に内気で初対面の人や人前で話すのが苦手です。趣味はゲームやキーボードと完全なインドアタイプです。いった人間にEMが務まるのかと心配になりますが、とりあえず振り返っていきましょう!【振り返り1】ビジネス意識が変わったから?プレーヤーのときはプロダクトを作ること(コードを書きまくること)が楽しく、その先にあるビジネス意識は薄く、設計やトレンドの技術に意識が向いていました。何のために作るのかを理解してプロダクトに落とし込むことはできても、そのプロダクトの利益を最大化するためにエンジニアとして何をすべきかという考えは殆どありませんでした。徐々にビジネスへの意識というのは高まっていきました。ビジネスとエンジニアを繋ぐためだったり、ビジネスインパクトを与えられるエンジニア組織を構築するための勉強をしたりと、とりあえずはインプット量を増やすことを心がけました。結果、ミッション達成のためにこちらから提案したり、エンジニア組織についての思いをメンバーにアウトプットすることが増えたと感じます。組織としての成功を一番として行動できるような「マインドの変化」が自分の中であったことが、行動の変化に結びついているのかもしれません。本を読むようになったから?マネジメント能力を強化したく、色々本を読むようになりました。心理学などの本を読んでいて「あの本に書いてあった内容とこの本のこの部分って似てるなー」とか「あの本で言ってたことってこういうことだったのか!」と他の本を読んでいるときに気づくことがよくありました。「学ぶ」ことに境界線を作っていた自分が恥ずかしいと思うようになりました。様々な分野への興味に結びついているのかもしれません。今まで関わらなかったビジネスサイドの人やバックオフィスの人と関わりが増えました。基本的に誰かとコミュニケーションを取ることが仕事になってきています。「メンバーの話し方や表情から色々情報が取れるの大事だしおもしろい」と様々な学びを得たり、コミュニケーションの重要性に気づいたというのが大きいです。「コミュニケーションを取っていないからこそコミュニケーションが苦手だった」ということに気づいたのです。積極的な行動に変化しているのだと感じます。今まで見えなかったもの・見ようとしなかったものが見えてくるようになることで「考え方=思考」が変化していきました。「思考」が変化することでそれはやがて「行動」へと変化していきます。その結果が今の私を作っているのではないかと今回振り返ってみて感じました。これらの経験はマネジメントだけでなく、今後プレーヤーのときにも活かせることであると感じます。EMになって学んだこと。それは、「自分自身で壁や境界を作らず、何にでも興味を持ちインプットし思考し続けること」です。雑食に何でも学ぶ姿勢が自身を成長させてくれるのかもしれません。AliasについてTypeScriptはじめに皆様こんにちは、フロントエンドの松本です。Aliasについてお話していきたいと思います。オブジェクトの宣言時などはどちらを使えばいいのか、頭を悩ませるトピックの一つでもあると思います。それでは早速、両者の具体的な違いをみていきましょう。Aliasと違って=が不要になっており、見た目としてはほとんど一緒です。Aliasは右辺に任意の型を指定できるという点で汎用的です。AliasをInterfaceに書き直す方法はありません。書き直すとエラーが起こります。extendsを使うことで、継承したサブインターフェースを作成できます。Aliasをextendsすることも出来ます。Aliasは拡張こそできないものの、交差型を利用して既存のタイプを組み合わせることができます。AliasとInterfaceはほとんど同じことができ、違いは小さなものです。Aliasは型に名前をつけるもの、Interfaceは構造を定義するものです。オブジェクトの宣言時などはInterfaceを使用するなどして、ケースバイケースで使い分けると良いと思います。Aliasで書いた方が安心できる派です。(Interfaceは宣言のマージにより、意図しないところで型が変化する恐れがあるので)最後になりますが、Wizではエンジニアを募集中です。読者になるもっと読むコメントを書く2021-08-05NextAuth.jsでカスタムログインページを実装する方法Next.jsこんにちは、フロントエンドエンジニアの松尾です。最近はNext.jsが盛り上がっており、エコシステムも充実してきています。その中に、NextAuth.jsという認証機能を簡単に実装できるライブラリがあり非常に便利です。next-auth.js.org本記事では、NextAuth.jsを使用したカスタムログインページの実装方法について説明したいと思います。NextAuth.jsとは?NextAuth.jsとは、Next.jsに簡単に認証機能を実装できるライブラリです。アカウント登録も必要なく、ライブラリをインストールするだけで実装できます。メールアドレス認証に加えて、Google・Twitter・FacebookといったサービスのOAuth認証を組み込むことが可能です。NextAuth.jsでログインする場合、以下のようにNextAuth.js専用のログインページに遷移する形となっており、自由にページをカスタマイズできません。認証機能を特定のページに組み込みたい場合も多いのではないでしょうか?そこで、カスタムログインページの実装方法について説明したいと思います。実装方法まず初めに、next-authをインストールしてください。next-auth次に、NextAuth.jsのAPIルートを作成します。/pages/api/auth/[...nextauth].jsを作成し、以下を記述してください。NextAuthの認証関数。credentialsにログイン情報が格納される。ログインID・パスワードは環境変数にて設定する。ログイン成功後ユーザー情報を返却する。値はsessionに格納される。ログイン失敗後認証を拒否し、エラーメッセージを返却する。ログインページを指定する。今回はトップページのため'/'を指定。options)最後に、認証機能を実装するページに以下を記述します。ユーザー名、ログアウトボタンを表示。ログアウト状態の場合。ログイン失敗後、エラーメッセージを表示。<div>ログインID又はパスワードが間違っています。POSTリクエスト(サインイン・サインアウトなど)に必要なCSRFトークンを返却する。LoginPageログインに成功すると、useSession関数のsessionにユーザー情報が格納されます。以下のように、sessionにユーザー情報が含まれているか否かで表示を切り替えています。ログイン後また、認証失敗時に関しては、URLパラメータのerrorを参照し、エラーメッセージを表示させています。ログイン失敗時まとめ以上NextAuth.jsを使用したカスタムログインページ実装についての説明でした。今回は簡易的な認証機能の例でしたが、NextAuth.jsは、Google・Twitter・Facebookといったサービスの認証機能の組み込みや、データベース・メール送信サービスとの連携も可能となっています。NextAuth.jsは無料で使用できますので、興味ある方は是非お試しください!最後になりますが、Wizではエンジニアを募集中です。JavaScriptはじめに皆さんこんにちは、フロントエンドエンジニアのWooです。パッケージ)を作成しデプロイしてオープンソースとして使えるところまでやってみたいと思います。Manager)開始する前に、簡単にnpmについて調べてみたいと思います。npmの役割はパッケージ管理ツールです。ソフトウェアを管理し、インストールをサポートしてくれます。この記事を書いた時点では公開のパッケージ数約1,688,642個以上のnpmパッケージが公開されており現在もまだnpmのパッケージが増えています。インストールNode.jsをインストールするとnpmも同時にインストールがされます。下記のリンクでNode.jsのインストールが簡単にできます。initのコマンドを叩く必要があります。Package.jsonは開発に必要な情報などを記載する場所であり、必要なパッケージをインストールする時に自動で記載をしてくれます。package-lock.jsonpackage-lock.jsonは各パッケージの依存関係の管理をするファイルです。initを実行した時には生成されませんが、このnpmパッケージをインストールしたり、変更、削除などの操作を行うと生成されます。npmユーザー登録npm公式ページで登録することができます。お名前とメールアドレス、パスワードを入力した後、加入したメールアドレスに本人認証メールが届くので承認したらnpmパッケージをデプロイすることができます。初期化プロジェクトのフォルダ(リポジトリ)を作成してコマンドを叩きます。-ypackage.jsonが生成されるので下記のように設定を行います。<-変更}注意点としてはlicenseの設定ですが、自分はMITによくします。オープンソースにはMITライセンスをよく使うらしいです。他にもいろいろなlicenseがありますので調べてみてください。npmパッケージ作成rootにindex.jsを作成します。下記は簡単挨拶文を出力する簡単なサンプルコードです。}}その他最低限必要なファイルを追加してモジュールのアップロードの準備を完了します。package.jsonnpmログインログインはディレクトリのrootからコマンドを叩きます。https://registry.npmjs.org/.ログインが成功されたらアクセストークンが発行されコマンドでデプロイすることができます。トークンはマイページで確認することができます。デプロイデプロイは上記のpackage.jsonに記載したnameがパッケージ名になります。約1,688,642パッケージの中から被らないパッケージ名で公開しなければいけません。そのため@useridを頭につけると被ることはないので一般的には@useridをつけてデプロイをすることが多いです。例)@npmid/modalのような感じです。-yの時、defaultで1.0.0が記されます。自分は正式のリリースとして問題なければ1.0.0でアップを行い、その前までの開発段階では0.0.1から設定して公開するようにしてます。今回はサンプルとして公開し後ほど削除するので1.0.0で公開しました。"1.0.0",公開コマンド(下記は無料プランのコマンドです。Test(`npm`)console.log(test.action())npmにちゃんと挨拶をしていますので問題なく公開はされているようです。注意点としては最後に消したいバージョンを書かないといけないのと、時間過ぎてしまうと自分で消すことができずnpmに問い合わせをしないといけないようなので必要でなければすぐ消しましょう⚡️。@userid/test@1.0.0最後に今回の内容はサンプルとしての内容ですが実際にはフォームのバリデーションのパッケージを開発し公開しました。開発をして色々調べながらですがとても勉強になりました。実際公開したパッケージをどんどんプロジェクトに導入し工数削減を目指して行きたいと思っております。バックエンドエンジニアの河内です。ORMにクエリスコープという機能があります。その中に、ローカルスコープという機能があって、それを使うと頻繁に利用するクエリ条件を1箇所にアクセスしやすい形でまとめることができます。このローカルスコープを使うと、コードが非常に読み下しやすくなるんですね。それはなぜなんだろう、というお話です。公式からの抜粋ですが、たとえば「人気のあるアクティブユーザー」だけをDBから取得したい場合、以下のように「人気のある」スコープ(=scopePopular)と「アクティブ」スコープ(=scopeActive)を用意します。ここで想定されている仕様については、「人気のある」とは「票数が100より大きい」であり、「アクティブ」とは「アクティブフラグが立っている」...と読み取れます。}}これらのスコープを利用するには、以下のように書きます(チェーンできます)。利用時に、scopeプレフィックスは不要で、scopeを取り去ったあとの単語を小文字で呼び出します。User::popular()->active();逆に、スコープを利用しないと以下のような同じような条件を何度も書くことになります。1);たとえば、「人気」の基準が、「票数が200より大きい」という仕様に変更になった場合、個別に書いて回ったソースコードを書き換える旅が始まってしまいます。処理をまとめるのはプログラムの基本ですが、スコープで条件が書かれていると、読み下しやすいのもポイントです。要求と意図なぜ読み下しやすいのでしょうか。それは、たとえばscopePopularについていえば、「票数が100より大きい」ユーザーを取得するという論理的な「要求」が、「人気のある」という「意図」である、という位置付けに変換されたから...だと考えます。ここでの「要求」と「意図」という単語は、スケールする要求を支える仕様の「意図」と「直交性」という記事の文脈から援用しました。この「要求」と「意図」、わりと順不同でどちらが発端にもなるのかな、と思っています。意図発たとえば、「人気のある」ユーザーだけをトップページに表示したい、という「意図」発で依頼がやってくることも往々にしてあるかと思います。この場合、「人気のある」とはどういうことなのか...ということを依頼者(DDD*1の文脈ではドメインエキスパート)と協議して「要求」を煮詰めることになります。逆に、「要求」発の場合、まさに「意図」を見出だす必要があります。これは依頼者が「意図」を意識的に持っていることもあれば持っていないこともあり、持っていなかった場合、プログラマ側が抽出する必要があります。「サイトのトップページに『票数が100より大きい』ユーザーの降順に表示したいんだよね」という要求があったときに、「つまり、『人気のある』ユーザーですよね」という意図を見出だし名付ける...ローカルスコープのメソッド名はまさに、その意図についての名付けの好例なのだと思います。まとめLaravelのローカルスコープは、「要求」を「意図」に変換しその「意図」に名付けをおこなっている行為でした。このローカルスコープの例に限らず、およそプログラミング自体がそういうものなのだ、ということは、DDDなどの設計思想に触れるにつれ痛感します。「意図」の名前は、客観的な「要求」と違い、主観的なより生き生きとしたものになってくるかと思います*2。いう「意図」で編まれたプログラムは見通しのよいものになるのだと思っています。最後にWizではエンジニアを募集しております。興味のある方、ぜひご覧下さい。(1)リンク利用規約/免責事項このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。ブログを報告する引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。