React 19 で変わるアクセシビリティ周りの技術 - SmartHR Tech Blog
こんにちは。アクセシビリティ本部のアクセシビリティエンジニアの五十嵐です。SmartHRでは主にアクセシビリティテスターが見つけた課題を技術的な観点から改善したり、根本的な問題を解決するための仕組みづくりを担当しています。 さて、Meta が開発する UI ライブラリとして長い間人気を博している React ですが、2024年4月に最新版であるバージョン 19 のRC版が公開されており、注目を集めています。 バージョン 19 では "use client" や "use server" でも知られる Server Components を含む様々な機能が含まれる予定ですが、この記事では、そんな React バージョン 19 をアクセシビリティの観点からキャッチアップし、特に便利になりそうな点や、注意が必要になりそうな点などを見ていきます。 forwardRef が不要になった 仮想 DOM
アクセシビリティを担保するためにESLintの独自ルールを作っている話 - SmartHR Tech Blog
こんにちは。プロダクトエンジニアのatsushimと言います。 社内ではプロダクトを開発する傍ら、アクセシビリティを高めるための改善や仕組みづくりを進めています。 この記事ではSmartHR独自のESLintのルールを作っている話をしたいと思います。 SmartHRでは アクセシビリティ（以降a11y） を考慮したアプリの開発・改善を行っており、過去記事でその様子をご確認いただけます。 SmartHR Tech Blog: アクセシビリティ の検索結果 ただ普段の開発中、a11yを意識しつつ開発を行うことは、エンジニアにかなりの負荷がかかります。 フロントエンドの経験が少なく基本的なマークアップの知識が足りていない アクセシビリティを意識してね！といわれても何をすればいいのかわからない そのため、SmartHRでは独自のESLint ルールを作成し、CIに組み込むことでa11yを担保、改善
E2Eテストを Playwright で作り直して開発プロセスに組み込む話 - SmartHR Tech Blog
こんにちは。SmartHR プロダクトエンジニアの sasaki (@s_sasaki_0529) です。 今回は、私が開発に携わっている届出書類機能における E2E テストを、Capybara + Selenium の構成から Playwright に移行し、開発プロセスに組み込んだお話をします。 扱う話題 E2Eテスト基盤を移行する具体的な背景と理由 移行における提案から、合意形成までの流れ 移行後の開発プロセスがどう変わったか 扱わない話題 Playwright など、記事内で扱う技術要素自体の詳細説明 移行作業自体の詳細 テストコードの設計・実装に関する具体的なテクニック なお、本記事では便宜上、移行前の E2E テストを「旧テスト基盤」移行後を「新テスト基盤」と呼称します。 届出書類機能について E2Eテストに限らず、テストというのはプロダクトの特性によって最適な手法は大きく変わ
テックブログを GitHub で管理できるようにしました - SmartHR Tech Blog
こんにちは！エンジニアリングマネージャの 吉成 です。 この記事は SmartHR Advent Calendar 2023 4日目の記事なのですが、実は ANDPAD さんの Advent Calendar 2023 1日目 とまさかのネタ被りです。 この日のために 後回しにしていた 寝かせていたネタだったので、二番煎じとなりますがこのまま出させていただくことにしました 😌 背景 さて、弊社では今年の5月から、各プロダクトチームが週ごとに持ち回りでテックブログを執筆する取り組みを開始しました。 元々は執筆のためのフローは特に整備しておらず、公開までの壁打ちやレビューといったものは有志の方にすべておまかせしておりました。 今年の8月に DevRel の1人目として inao san が入社され 1、テックブログの担当チームやレビューなど諸々の業務を引き継いでいる中で、組織でのはてなブログ
多言語化対応における TypeScript の型定義を通して開発のしやすさについて考えた - SmartHR Tech Blog
こんにちは、SmartHR でプロダクトエンジニアをしている @nabeliwo です。 今年の9月に SmartHR のログイン後のホーム画面がリニューアルされました。 【9/21更新】新しいホーム画面を公開しました | SmartHR｜シェアNo.1のクラウド人事労務ソフト この記事では、新しいホーム画面の実装の中で、開発者体験を損なうことなく多言語化対応を進められるよう、TypeScript の型定義を工夫した話をします。 まだまだ改善の余地がある状態ではあるのですが、私達のチームでの試行錯誤が読んでくれた方の参考になれば幸いです。 SmartHR の多言語化対応 SmartHR の既存のページではすでに WOVN.io というツールを使った多言語化対応が行われていました。 ただ諸々の理由があり1、新しいプロダクトでは自前で翻訳の仕組みを用意していこうとしています。 実際に、Smar
同僚に2要素認証を回避するフィッシング攻撃(の演習)をしてみた - SmartHR Tech Blog
こんにちは、セキュリティエンジニアの岩田です。今回は「擬似サイバー攻撃演習」と銘打って行った社内の演習についてご紹介します。 擬似サイバー攻撃演習とは? 実際のサイバー攻撃をシミュレーションして実施することで、現在行なっているセキュリティ対策が有効に機能しているかを検証するための演習です。「レッドチーム演習」や「脅威ベースのペネトレーションテスト(TLPT)」などと呼ばれるものと同様の試みですが、誰にでもより直感的に内容が伝わるようにこの名称にしました。 今回は2要素認証を回避するフィッシング攻撃によって実環境のID管理サービス(IDaaS)のアカウントを乗っ取って侵入し、機密情報を盗み出す攻撃シナリオで演習を行いました。 具体的には、攻撃者がフィッシングメールをユーザーに送ってフィッシングサイトに誘導し、ユーザーからのフィッシングサイトへのリクエスト内容をそのまま実際のサイトに転送するこ
SmartHR UI のリリース作業を GitHub Actions で自動化した話 - SmartHR Tech Blog
こんにちは、フロントエンドエンジニアのモアイと申します。 SmartHR では、SmartHR UI というプロダクト間共通の React コンポーネントライブラリを運用していますが、この記事では SmartHR UI のリリース作業を GitHub Actions で自動化した話をご紹介します。 ちなみに SmartHR UI そのものについては過去の記事で詳しく紹介されていますので、ご興味があればそちらも併せて御覧ください。 tech.smarthr.jp tech.smarthr.jp 三行まとめ リリース作業が複雑化していたので GitHub Actions を使って自動化した リリース中に作業者の確認を挟むプロセスを Issue とラベル付けによって実現した 自動化最高！ これまでのリリース作業 SmartHR UI では Pull Request ベースで開発しており、様々な歴
React v17 の変更に関するこぼれ話 - SmartHR Tech Blog
こんにちは、フロントエンド技術顧問の @koba04 です。 今回は React v17 での変更に対して気になった部分や、RC からリリースまでにあった修正の中で個人的に興味深いと思った話を紹介したいと思います。 v17 自体の変更点については下記で紹介している公式ブログで確認することをオススメします。 React v17.0 (日本語ブログ) React v17.0 Release Candidate: No New Features (日本語ブログ) SmartHR では毎週フロントエンド MTG を行っており、今回紹介するような内容はこの MTG で取り上げています。 SmartHR での フロントエンド MTG のようなプロダクト開発以外の活動に興味のある方は下記のブログ記事を参照ください。 tech.smarthr.jp Changes to Event Delegation
「プロダクト間共通の React コンポーネントライブラリ」がどうなったか、という話 - SmartHR Tech Blog
こんにちは！ フロントエンドエンジニアの @diescake です！ 1 年程前に @nabeliwo よりこんな記事を公開しています。 tech.smarthr.jp 一言で要約してしまうと、SmartHR の各種プロダクトで一貫したユーザー体験を提供するために、SmartHR UI という React コンポーネントライブラリを実装し始めたよ！ しかも OSS として公開してるよ！ という話でございました。 github.com 本記事では、それから 1 年弱たった今 SmartHR UI がどうなっているか、という話をしつつ、現在の SmartHR UI の運用・開発体制について話をしてみようと思います。 SmartHR UI は成長しているよ！ 2019/08/01 2020/05/21 バージョン v3.9.2 v8.2.0 コンポーネント数1 30 66 ソースコード規模2 3
プロダクト間共通の React コンポーネントライブラリを運用する話 - SmartHR Tech Blog
こんにちは、 フロントエンドエンジニアの @nabeliwo です。 弊社には SmartHR というプロダクトの他に SmartHR の従業員 DB を利用して開発・提供される SmartHR Plus アプリ (以下、 Plus アプリ)というものがあります。 SmartHR CTOが語る中長期戦略。徹底的なアプリ開発とAPI対応で「プラットフォーム化」促進へ - SmartHR ガイド 既に多くの Plus アプリがリリースされており、そのほとんどのプロダクトのフロントエンドは React x Redux という技術スタックで構成されています。 オンライン雇用契約 カスタム社員名簿 ラクラク人事レポート etc Plus アプリは毎回新規でプロジェクトを立ち上げて開発していくことになります。 とはいえブランディングの観点から見ると、基本的なトンマナや UI パーツは SmartHR
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
