リモートワークでOJTは成立するのか

最近世の中全体がフルリモートから出社回帰になっている1。朝電車に乗るととても混んでいるし、帰りもそこそこ混んでいる。 それに合わせてなのか、リモートワークでジュニア層の育成はできないとか、できるとか結構記事を見るようになった。 自分は2年ほど…

スプラトゥーン3をやっている

昨年、ニンテンドーカタログチケットの期限が来てしまうけどあまり取り替えたいものがない状況になった。あまりシューティングゲーム、しかもオンライン対戦ありのゲームは忙しくて好きではないので避けていた。しかし、なんか有名だしイカちゃんが可愛いか…

Slackのtimesチャンネル文化が好きじゃない

speakerdeck.com はてなブックマークやxでこの資料が話題になっていた。80%くらいは同意できるが、Slackの部分は個人的にはうーんと思った。特にtimesが好きではなくて、「timesじゃなくてチケット管理システムを使え」と思ってしまった。なんで好きじゃない…

フィードバックを早く受けた方か早く終わる

OJT

雑感です。実力は同程度、または仕事が終わる人の方が能力値が低い状態を想定しています。 仕事が終わらない人の特徴 1回目のレビューが遅い。〆切ギリギリに出てくる。仕事がほとんど終わった後に始めて出てくる。 やり直しの幅が広いので直すのに時間がか…

未経験の状態から5ヶ月で開発できるようになるために必要なこと

OJT

正確な時間は忘れたが、そういう状態になったことがあった。 ある程度自力(ベッタリではなく、短期間でレビューを挟む程度で良い)状態に持っていくには何が必要だったか整理してみる。 最初に結論 数字が若い順に最優先で何とかする。大前提として本人が改…

Testing LibraryとJestを用いて親子コンポーネント間のイベント発火をテストする方法

UIコンポーネントからイベント発火したことをテストする 親子コンポーネントの連動をテストする際、子コンポーネントでイベント発火したことを親コンポーネントに伝えたか確認したいことがある。特に小コンポーネントで状態を加工して親コンポーネントに送る…

Storybook 8.xのStorybookファイルをTesting Libraryで使用する

UIコンポーネントのカタログツールStorybookを使い、コンポーネントをセットアップする方法もある。StorybookはStoriesというファイルに「どのようなコンポーネントをStorybookに描画するか」を記載する。propsに応じて描画内容を出し分けることもできる1。 …

Testing Libraryでrender関数を使ってUIコンポーネントをレンダリングする方法は複数ある

テストランナーを動かす前に「UIコンポーネントは今どういう状態なのか」をセットアップしなければいけない。UIコンポーネントが必須のpropsを持つ場合、propsを与えなければUIコンポーネントは動作しない。また、 特定の場面で挙動が変わる場合は特定の場面…

悪いフィードバック耐性をつけないとひよこエンジニアから抜け出せない

OJT

何かを上手くなりたいときはフィードバックを早くもらえるような習慣を身につけると良い。 プログラミング初学者が陥りがちなこと 最初から完成形を作ろうとしてしまう。完成形には次のものが含まれる。 実装後にどのように動けば良いか(仕様) どのように…

OJTでは手順だけでなく理由も教えないと身につかない

OJT

OJTをやっていると方法を説明する・やって見せる機会が何回も出てくる。例えばGitでコンフリクトしたとき解消する方法だったり、エラーが起きていて解消できないため手伝う(解消する)、ツールの使い方を示すなど。ここで手順だけ教えて「次は一人でできる…

Testing Libraryで<td>要素に関するテストを書く場合にどうやって要素を探索するか

Testing Libraryで<td>要素に関するテストを書く場合、getAllByRoleで<td>タグを取得する方法と<tr>タグで一度対象の列を取得したのち<td>タグを取得する方法がある。 <td>タグを直接取得する方法 getAllByRoleでARIA roleのcellを指定して取得できる。<td>(テーブルセル)は複数存</td></td></td></tr></td></td>…

Testing Libraryでフォームの値を編集するときのテストを書くときに気をつけること

テキスト入力フォームの特徴は「入力値をユーザーが好きに編集できる点」である。テストケースもフォームの値を編集した後UIが変わることを確かめたい場合が多い(例:入力値に応じてバリデーションチェックを行う)。フォーム入力はDOMイベントになるためus…

Testing Libraryで<input type="text">に対するテストケースを書く

テキスト入力を行う<input type="text">1コンポーネントはWebアプリケーション開発を行う場合ほぼ必須となる。このテストケースの記載方法を覚えておくとあらゆる面で応用が効くためTODOを挙げて記載方法を確認していく。 TODO 苗字の入力フォームと名前の入力フォームが存在す…

Testing Libraryで複数の<option>を選択する<selectbox>のテストを記載する

ドロップダウンには複数の<option>を選択できるパターンが存在する。これをテストする例は探しても中々出てこないため、記載する。 複数要素は<select>にmultiple属性を設定することで実現できる。 export default function StayExtensionMultipleSelectBox() { return ( // </select></option>…

Testing Libraryで<select>と<option>を操作するテストケースを書く

クリックすると複数の選択肢が表示され、一つまたは複数を選ぶことができるUIパーツを「ドロップダウン」「プルダウン」「セレクトボックス」などと表現する。HTML選択要素とも表現される。HTMLタグは<select>1と表現する。ここではMDN日本語ドキュメントに合わせt「</select>…

Testing Libraryでラジオボタンのvalueを取得するテストを書きたい

ラジオボタンやセレクトボックスのように、valueを持つHTMLタグがある。 UIコンポーネントテストを書く際、valueが意図通り設定できていることをテストしたい場面がある。 ハマってしまいやすいのでメモする。 ラジオボタンの値を取得したい場合 こういう実…

Testing Libraryを用いてラジオボタンの選択状態をテストする

ラジオボタンやチェックボックスなど、クリックしたときchecked属性を切り替えてON・OFFを表現するUIコンポーネントがある。 これのテスト方法を毎回探し回っていたため、記録しておく。 ラジオボタンをクリックしたとき選択状態が切り替わるかテストする ラ…

UIコンポーネントテスト:ボタンクリックで要素の表示・非表示を切り替えたいとき

ボタンクリックで表示・非表示を切り替えたい UIを開発しているとボタンをクリックすると指定要素の表示・非表示を切り替えたい場面が出てくる。これをUIコンポーネントテストに落とし込む場合、少し注意が必要となる。 理由は「見た目上は消えているがレン…

getByRole()を使ったボタン要素の取得方法

Testing Libraryで<button>要素に関するテストケースを書く場合、ボタン要素の取得はgetByRole()1を使うことをおすすめする。 getByRoleを使うと「〇〇ラベルのボタン要素」に対するテストであることを一目で例示できるためである。 getByRole()は各要素に紐づくWAI-</button>…

わかっているつもりを見分ける

OJT

仕事の進め方や技術面など、何かを教えた後は「わかりました」と言われる。 しかし一度言われた程度で習慣が改善されたり、技術が身につくことはほとんどない。 額面通りに受け取ってしまうとこちらが勝手に期待してがっかりした…。みたいなことになる。 完…

マッチャーを使い分けながらテストを簡潔に記載する

テストランナーにはマッチャー(Matcher)1というAPIが存在する。これは、テストを実行するライブラリ(テストランナー)に「こんな検証をしてほしい」と伝えてテストを実行してもらうための関数である。マッチャーの使い方を知っていると、初めて出てくる仕…

UIコンポーネントテストでユーザーイベントを再現するときのポイント

UIコンポーネントテストでは「ボタンをクリックするとテキストが表示されることを確かめたい」など、ユーザーの操作を再現したい場面が出てくる。 ユーザー操作の種類は無限にあるように見えるが、考え方を身につけていればUIコンポーネントテストを書ける。…

UIコンポーネントテストで要素を取得する

UIコンポーネントテストで鬼門となるのは「テスト対象の要素を取得する」ことである。 要素が取得できないとそもそもテストしようがないのである。UIコンポーネントパーツはお決まりのパターンがあるので真似れば良いが、100%参考にできるわけでもない。また…

初期状態(props)を活用して仕様を表現する

ここでの初期状態とはUIコンポーネントテストを書くとき設定するpropsのことである。 propsが複数ある場合、全てのパターンを網羅しようとすると組み合わせの数次第ではテスト数が膨大になる。 すると、テストケースの維持やメンテナンスが難しくなる。 自動…

UIコンポーネントテストを書く流れ

UIコンポーネントテストをいきなり書くのは難しい。最初にテストを書く流れを抑えたあと書き始めると良い。 テスト用ライブラリの思想を理解する(最初の1回のみ) UIコンポーネントの仕様を言語化する 言語化したものを元にTODOリストを作る TODOリストを元…

なぜUIコンポーネントテストは難しいのか

UIコンポーネントテストを書く行為は後回しになりやすい。それは難しさが要因に含まれているからと考えられる。 どのような部分が難しいのだろうか。 セットアップが難しいから UIコンポーネントを動かすためにはブラウザ環境を擬似的に再現する必要がある。…

UIコンポーネントテストと単体テストの違い

UIコンポーネントテストは単体テストと似ている面もありつつ、異なる点も存在する。両者の違いを明確にすることで更に理解を深めたい。 単体テストとは 『【この1冊でよくわかる】 ソフトウェアテストの教科書 [増補改訂 第2版]』1によると、単体テストは次…

UIコンポーネントテストとは何か

普段何気なく書いているUIコンポーネントテストについてまとめた。 UIコンポーネントテストは、「UIコンポーネント」の動作を自動的にテストするプロセスである。「UIコンポーネント」について、Reactの公式ドキュメント1では以下のように説明されている。 R…

これからはじめるReact実践入門を読んだ

これからはじめるReact実践入門 を読んだ。感想メモをまとめる。 全体の感想 これからReact.jsを始める人におすすめできる一冊だなと思った。一番最初にJavaScriptの登場からなぜReact.jsが出てきたのか?を説明している項があるため、React.jsは何が嬉しい…

振り返り2023

りまりま団のもふもふです。 2023年の仕事を納めたので振り返りをやっておきたいと思います。 昨年分 振り返りブログを更新できなかった 課題感を強く感じないと行動できない性格なので、守れたNext Actionはそのときの課題に結びついている。来年も継続。 …