サイボウズインターン 参加レポート

はじめに

今回サイボウズさんの「kintone 開発コース」で二週間インターンをさせていただきました。

実際のタスク内容やそこで感じたサイボウズさんのよさについて描いていこうと思います

スケジュール

1 日目〜 3 日目 PC セットアップ & オンボーディング

オンボーディングでは、ドキュメントをもとに実際のプロダクトコードを書き換えたり新規 API を作成しながら Closure ライブラリや Spring フレームワークについて学びました。

4 日目〜 最終日 サブチーム join

スプリントの開始日ということで 3 日目の水曜日から kintone のサブチームに参加させていただきました。

タスク内容

既存の UI を新しいデザインに差し替えるタスクでした

ボタンとページ遷移用のタブのコンポーネント作成を行いました

学んだこと

アクセシビリティーについて

今回の UI 作成では、特にタブの部分の実装に関してアクセシビリティの観点での議論がありました。
具体的には、「滞在中のページに遷移するタブは非活性にしたい」という要件についてです。

リンク(a タグ)を非活性の実装案

実装案	懸念点
条件分岐を利用して非活性のコンポーネントを div タグにする	tab キーなどでフォーカスが当たらない
css でcursor: not-allowed;を指定してリンクを動作しないようにする	非活性であることが伝わりづらい
event.preventDefault()を付与する	非活性であることが伝わりづらい

これらをまとめてアクセシビリティチームの方にお話を伺った結果
「条件分岐を利用して非活性のコンポーネントを div タグにする」が無難であるという結論になりました。

実装イメージ

import React from "react";

type Props = {
  isActive: boolean;
};

export const TabComponent = ({ isActive }: Props) => {
  return <div>{isActive ? <div>hoge</div> : <a href='/hoge'>hoge</a>}</div>;
};

アクセシビリティーチームの方のお話

• 非活性のものに関してはフォーカスが当たらなくても良い。
• タブは矢印キーを用いて操作できる必要があるが、この場合ページ遷移ナビゲーションリンクのような扱いになる。
• ページ遷移のようなものを矢印キーで操作できるようにすると、ユーザーが望まない場面で遷移してしまう場合があるのであまり望ましくない。

普段キーボードのみでブラウザ内の操作を行うことがないのでお話を聞いていてとても新鮮でした。

業務外でもアクセシビリティー勉強会に参加させていただき、実際に音声コントロールについて触りながら学ばせていただきました。

テストコードを書くときの考え方

実装後はテストの記述をしていきました。
テスト内容は先ほど記述した UI の遷移についての動作を確認するものでした。

遷移を確認する際のテストコードのフロー

• a タグ(リンク)の存在を確認

  • Page コンポーネントを render
  • Role を指定するメソッドで link要素と中の文字列を指定して要素を取得
  • linkが存在する場合は pass

• a タグ(リンク)がないことの確認

  • Page コンポーネントを render
  • div タグにaria-labelを付与してgetByLabelTextで要素を取得
  • リンクではないことを確認し、その場合は pass

このテストで学んだこと

初めに自分がテストを書いていた時は、異常系のテストがしっかり書けていませんでした。

正常系のテストでは「a タグでかつ、その中の指定した文字列が一致しているもの」を取得しているのに対して、異常系の方では「指定した文字列要素」のみを取得していました。

要するに、正常系が「ラップしている要素に対する検証」
異常系が「文字列に対する検証」になってしまっていたわけです。

これでは異常系のテストを書いてる意味がなくなってしまう、ということで何度かレビューをいただきながら修正していきました

div タグをテストの中で要素として取得する手法としてdata-testidやaria-labelなどの方法があること、それらのメリデメについてもここで知りました。

またdescribeで分割するときの考え方やtest/itなどでのアサーション分割の考え方など、様々なことを教えていただきました。

チーム間のコミュニケーションの大切さ

インターン期間中自分以外にもチーム体験で新たにサブチームに参加する方がいらっしゃいました。
その度に雑談会などを開いて親睦を深めたりしていてとても良い文化だと感じましたし、その後のコミュニケーションも取りやすくとても助かっていました。
業務外でも普段から良い関係性を築くのは大事なことだなと再認識しました。

また、スクラム開発のスプリントの開始日や終了日のミーティングでは、業務上で感じたことや改善案などを話し合っていました。
既存の仕組みや体制にとらわれることなく常に最適化しよう、より良くしようという動きが見えてとても良かったです。

感想

ミーティング中のチャットの雰囲気や社員同士の関係性など見ていると本当に温かい職場なんだなというのを感じました。

また、サイボウズと聞くとレガシーな印象を抱く方も少なくないかもしれませんが、社内勉強会も定期的に行われていて社員さん自身も新しい技術のキャッチアップを日頃から行っていました。
ペアプロ中やミーティング中の会話を聞いていても、しっかりとレガシー技術に向き合っているんだなということが伝わってきました。

色々なことがありすぎて上手くまとめられないですが、本当に頼もしい方ばかりでしたし自分自身落ち着いて仕事ができる良い環境だなと感じました。

改めて、関わってくださった皆様に感謝です！