こんにちは、UXライティング部のibulogです。社内では「サポートコンテンツマネージャー」というポジションでお仕事をしています。 普通は記事の最後で「We Are Hiring!」するのが相場と心得ておりますが、逸る気持ちを抑えきれませんので、もう求人情報を貼っちゃいます。 サポートコンテンツ戦略・基盤担当 / 株式会社SmartHR さて、SmartHRではヘルプセンターを自社開発しており、かつ現在はエンジニアの支援を得ながらライター上がりのサポートコンテンツマネージャーが主体となって開発・運用をしています。 ヘルプセンター｜SmartHR ヘルプセンターのトップページ 開発に関わるいずれのメンバーもエンジニアとしてキャリアを歩んだ経験はなく、エンジニアの支援や自学によってスキルを獲得しています。まさにクロスファンクショナル。 本日は、少しでも便利なヘルプセンターを提供しよう！という物

こんにちは！プロダクトエンジニアのshiraです。 2024年6月にリリースした採用管理機能の開発をしています。 support.smarthr.jp 採用管理機能ではNext.jsのApp Routerを採用しています。SmartHRではこれまでApp Routerを使ったプロダクトがない状態だったので、技術選定時は採用するか迷いました。 この記事ではApp Routerを採用するまでの経緯と採用してみてどうだったかについて紹介させていただきます。 Pages RouterとApp Routerについて まずはじめにPages RouterとApp Routerについて軽く説明します。ご存知の方は読み飛ばしてください。 2024年9月現在、Next.jsのルーティングシステムは2つ用意されています。それがPages RouterとApp Routerです。 Pages RouterはNe

こんにちは。SmartHRで文書配付機能の開発しているプロダクトエンジニアのkekkeです。 私が所属しているチームではインフラにGoogle Cloudを採用しており、ウェブ アプリケーションをCloud Run 上に構築して外部へのアクセスはCloud NATを経由して行っています。 この記事ではCloud RunとCloud NATを組み合わせた時の「インスタンスあたりの最小ポート数」の適正値について調査した内容を紹介します。 背景 ある日Cloud NATのVMあたりの使用ポート数が増加して、このままだとCloud Runから外部にアクセスできなくなってしまうため対策を打つ必要がありました。 Google Cloudのドキュメントを確認したところ「インスタンスあたりの最小ポート数」を上げることで解決することがわかったのですが、以下のような疑問が生まれチーム内では腑に落ちない雰囲気を

マルチプロダクト戦略を掲げてプロダクトを急速に増やし続けている SmartHR のフロントエンド領域について、2018年から SmartHR に参加しているフロントエンドエンジニアの nabeliwo と技術顧問の koba04 が、これまでの振り返りと今後の展望を話しました。 SmartHR のフロントエンドでどんな技術が使われてきてどんな課題と向き合ってきたのか、そして今現在取り組んでいる課題や SmartHR ではどんなフロントエンドエンジニアが求められるのかなど、幅広いテーマが出てきました。 この記事ではその模様をお届けします。 目次 フロントエンドの Rails からの脱却とフロントエンド領域の確立 SmartHR UI の誕生 プロダクトの急増 複雑化する技術課題 テストの整備とロジック共通化の取り組み Next.js の導入 新たな技術的挑戦 フロントエンドミーティングの見直

はじめに SmartHRで届出書類機能を開発しているqwyngと申します。 今回はSmartHRの届書書類機能において、日本語エイリアスを用いた開発を行ったので紹介します。 背景 SmartHRの届出書類機能は、書類の作成から電子申請の送信までを一括で行うことができる機能です。 ユーザーは画面上で書類に記入するような感覚で書類の作成を行うことができます。 SmartHR届出書類機能の書類確認画面 この体験の実現のために書類のどんな項目にどのような値が入力されたかを永続化する必要があります。 DBのカラム名は英語であるため、開発者は日本語の項目名を英語のカラム名に脳内で変換する必要があります。 この変換が煩わしく、プログラムの修正やレビュー時を含めて開発者の負担になっていました。 そのため、日本語の項目名をそのまま実コードに使えるようにすることを検討しました。 日本語化の是非 日本語の項目名

SmartHRプロダクトエンジニアのgongo(@gongoZ)です。 年末調整機能を担当しています。 最近の週末の過ごし方は醤油ラーメン(中華そば)を食べることです。 今回は Ruby on Rails が提供する ActiveStorage に関連した「こういうことをやりたいけど困ったこと」と、「それをどのように解消したのか」を紹介します。 本記事で紹介する現象 再現させるための最小コードです。Ruby on Rails 6 以降であれば再現できます。 # # 全文 https://gist.github.com/gongo/f3bcff91a1773b1640ca97f9320600f4 # class User < ActiveRecord::Base has_one_attached :profile end user = User.create! ActiveRecord::B

こんにちは。プロダクトエンジニアのatsushimと言います。 社内ではプロダクトを開発する傍ら、アクセシビリティを高めるための改善や仕組みづくりを進めています。 この記事ではSmartHR独自のESLintのルールを作っている話をしたいと思います。 SmartHRでは アクセシビリティ（以降a11y） を考慮したアプリの開発・改善を行っており、過去記事でその様子をご確認いただけます。 SmartHR Tech Blog: アクセシビリティ の検索結果 ただ普段の開発中、a11yを意識しつつ開発を行うことは、エンジニアにかなりの負荷がかかります。 フロントエンドの経験が少なく基本的なマークアップの知識が足りていない アクセシビリティを意識してね！といわれても何をすればいいのかわからない そのため、SmartHRでは独自のESLint ルールを作成し、CIに組み込むことでa11yを担保、改善

こんにちは！SmartHRプロダクトエンジニアのhimiです。 この記事ではプレースホルダーのアクセシビリティとユーザビリティについての課題と、その解決手段についての話を書きます。 プレースホルダーって何？ Webアプリでよく見る、フォームコントロールに値が無いときに表示するテキストのことです。 主な用途としては、フォームの入力例や入力内容の説明テキストが設定されることが多いです。 HTML Standardでは The placeholder attribute represents a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief de

こんにちは。人事評価機能のプロダクトエンジニアをしているotaniです。 私達のチームでは起こったエラーの検知・対応を監視ツールであるSentryで行っていますが、表示されるエラーメッセージやスタックトレースだけでは原因の特定が困難で、対応の優先度を決めかねることがありました。ひと目見て原因や再現方法が分かる場合は良いのですが、例えばユーザー側で入れたブラウザの拡張に起因したエラーや、特定のタイミングで操作すると起こるエラーなどには調査に時間がかかってしまい、結果として判断しきれずに優先度が下がってしまう問題などが起こっていました。 そんな状況の中、Sentry Replayによって上記のような課題を部分的に解決し、エラー調査の負担を減らすことができたので紹介したいと思います。 Sentry Replayとは Sentry Replayとは、Sentryのアドオン機能の1つで、アラートが上

こんにちは！はじめまして！ プロダクトエンジニアとして働いておりますkobadaiと申します。 今回は開発のノウハウや技術とは関係のない、よくある一エンジニアのリモートワーク環境を改善するために導入した何某についてつらつらと記していきたいと思います。 拙い文章ではありますが、最後までお付き合いいただけると幸いです。 なぜ買おうと思った？ 新型コロナウイルスとやらが流行して以降、リモートワークとやらが世の中では流行り始めているようで、 例に漏れずSmartHRでもその働き方が推奨される時代になりました。 前職でリモートワークが導入されたときから「武士は食わねど高楊枝…意地でも便利な環境には染まらねえ＿＿＿」をモットーに、地べたに座ってリビングの机にモニターを置いて潰れきったビーズクッションの上に座って作業をするというスタイルを貫いた結果、背中全体がまんべんなく痛くなるという症状に見舞われてい

こんにちは。SmartHR プロダクトエンジニアの sasaki (@s_sasaki_0529) です。 今回は、私が開発に携わっている届出書類機能における E2E テストを、Capybara + Selenium の構成から Playwright に移行し、開発プロセスに組み込んだお話をします。 扱う話題 E2Eテスト基盤を移行する具体的な背景と理由 移行における提案から、合意形成までの流れ 移行後の開発プロセスがどう変わったか 扱わない話題 Playwright など、記事内で扱う技術要素自体の詳細説明 移行作業自体の詳細 テストコードの設計・実装に関する具体的なテクニック なお、本記事では便宜上、移行前の E2E テストを「旧テスト基盤」移行後を「新テスト基盤」と呼称します。 届出書類機能について E2Eテストに限らず、テストというのはプロダクトの特性によって最適な手法は大きく変わ

こんにちは。SmartHRで届出書類機能を開発している sasaki (@s_sasaki_0529) です。 先日、第一回SmartHR LT大会が開催されました。どのようなイベントだったのかを紹介します。 SmartHR LT大会について SmartHR LT大会(以降、本イベント)は、その名の通りSmartHRによる社内向けのLT(Lightning Talks)大会です。 企画立案はDevRelのinaoさんによって行われ、プロダクトエンジニア全体を巻き込む大きなイベントとなりました。SmartHRにおけるDevRelについては以下記事もご覧ください。 tech.smarthr.jp 本イベントは、以下のような特徴があります。 東京オフィスでのオフライン開催で、オンライン配信あり LT1時間・懇親会1時間の2部構成 発表時間は原則5分で延長不可の強制終了 遠方在住者で聴講のみの参加

Storybookのモックデータに向き合う この記事はSmartHR Advent Calendar 2023シリーズ2の8日目の記事です。 こんにちは！SmartHRのプロダクトエンジニアのshunです。 突然ですが、皆さんはStorybookのモックデータをどのように用意していますか？この記事ではプロダクト開発でStorybookを活用する上で最適なモックデータとは何かを考えてみます。 Storybookとは Storybookとは、UIコンポーネントをカタログ形式で表示し、実施にアプリケーションを起動せずともUIの開発を行えるようにするためのツールです。 SmartHR社内では複数のプロダクトにおいてStorybookが導入されており、Chromaticと組み合わせた画像回帰テスト（以下VRT（Visual Regression Test））による品質担保や、UIレビューの効率化等で

こんにちは、SmartHR でプロダクトエンジニアをしている @nabeliwo です。 今年の9月に SmartHR のログイン後のホーム画面がリニューアルされました。 【9/21更新】新しいホーム画面を公開しました | SmartHR｜シェアNo.1のクラウド人事労務ソフト この記事では、新しいホーム画面の実装の中で、開発者体験を損なうことなく多言語化対応を進められるよう、TypeScript の型定義を工夫した話をします。 まだまだ改善の余地がある状態ではあるのですが、私達のチームでの試行錯誤が読んでくれた方の参考になれば幸いです。 SmartHR の多言語化対応 SmartHR の既存のページではすでに WOVN.io というツールを使った多言語化対応が行われていました。 ただ諸々の理由があり1、新しいプロダクトでは自前で翻訳の仕組みを用意していこうとしています。 実際に、Smar

こんにちは！SmartHRで配置シミュレーションの開発を担当している、プロダクトエンジニアの @tommy6073 です。 今回は、最近チームで実践してきた「ホメと感謝」にまつわるお話をご紹介します。ちなみにSmartHRにおいて、ホメとは褒めることを意味しています。 ホメ祭り 2023年8月上旬に、チームで「夏のホメ祭り2023」と題して、互いのホメやチーム・プロダクトで達成したことを伝え合って自己肯定感を高め合う会を開催しました。 元々はSmartHRの別チームが行っていたものを、これは良いとメンバーの1人が私たちのチームでもやろうと企画・開催したものです。 ホメ祭りのやり方としては、事前準備として、オンラインホワイトボードツールのMiro上に、各メンバー、チーム・プロダクトの枠を用意し、各メンバーはそれぞれの枠にホメを記入した付箋を貼っておきます。 そして当日に、冒頭で、会の目的と、

こんにちは！プロダクトオーナーの塚本です。 先日、「SmartHR本体」のスプリントレビューを初めてバザー形式で全社員を対象に開催してみたのでその話をご紹介したいと思います。 まず開発体制ですが、従業員データベース「SmartHR本体」の開発は大規模スクラム（LeSS）を採用していて、現在は4チームで構成されています。 複数チームでスクラム開発する場合のスプリントレビューのやり方の1つとして、「バザー形式」があります。バザー形式のスプリントレビューは、コミュニケーションや議論が活発化しそう、かつ純粋に楽しそうだなぁと思い描いていて、ずっとやりたかったことの1つでした。しかし、コロナ禍ということもありチャレンジしづらい状況が続いていました。 そんな時、近い日程で会社での予防接種の予定が入り、いつもより多くの人が出社するこの機会に、コロナ対策を万全にする前提で開催することに決めました。 事前準

こんにちは！　UXライターの @aguringo です。今日は、エンジニアマネージャーの吉成さんに頼まれて、「SmartHRの開発者とパパママ業は両立しやすいのか」というテーマでブログを書きます。 なぜ、私がこの記事の担当になったのかと言いますと、私自身も娘を育てているママだからです。ちなみに、わが家のムスメさんはプリキュアの小さなお友達としての年齢を遥かに上回り、今では大きなお友達として毎週デパプリを楽しみにしています。 SmartHRでの働き方は、子育て中のパパママから見ると、どんな印象？ 今回、協力してくれたのは、プロダクトエンジニア、プロダクトマネージャー、プロダクトデザイナーとして働く、計17名。お子さまたちの年齢層は0〜11歳で、半数が2人のお子さんを育児中です。 ストレートに「SmartHRって子育てしやすい会社だなぁと感じたことはありますか？」という質問を投げかけてみたとこ

はじめに こんにちは、SmartHRでQAエンジニアをしている machi です。 先日、E2Eの自動テストをプロダクトリポジトリに取り込んでビルドパイプラインに組み込むということにチャレンジしてみたので共有したいと思います。 SmartHRのE2E自動テスト SmartHRでは、E2E自動テスト(ここではChromeなどのブラウザを介して行なうテストを指しています)をプロダクト自体のコードがあるリポジトリとは別の独立したリポジトリとして管理していました。E2E自動テストを単純にCIに組み込むと、自動テスト全体の実行時間が数倍〜数十倍に肥大化してしまう恐れがあるためです。 そこでE2E自動テストをステージング環境に対して定期的に実行し、失敗したらslackにアラート通知するという構成となっていました。 このE2E自動テスト用リポジトリは、単一のリポジトリの中でSmartHRのほぼすべてのプ

これはSmartHR Advent Calendar 2022の9日目のエントリーです。 こんにちは、SmartHRの基本機能のプロダクトでエンジニアリングマネージャーをしているsakoです。 今回はチームに新しくメンバーが入ってくる際に行うオンボーディングについて、SmartHRの中でこれまで取り組んできた活動を紹介していきます。 オンボーディングとは オンボーディングとは、新しく入社した方が出来るだけ早く会社やチーム、仕事に慣れてパフォーマンスを発揮してもらうための取り組みです。 ドキュメントや適切なイベントを設けることで、業務に必要な知識や環境が手に入り、迷うこと無く業務に入ることができます。 オンボーディングでやること 受け入れる側として、以下の取り組みを行っています。 全社オリエンテーション メンターのアサイン オンボーディングToDoの作成 初顔合わせMTG 歓迎会 キックオフ

こんにちは、SmartHRのUXライター kunyです。今年のクリスマスプレゼントは、Eyevolのメガネが欲しいです。 さて、SmartHRのフィーチャーチームは、クロスファンクショナルに取り組んでいます。クロスファンクショナルの詳細については、以下の記事をご覧ください。 SmartHRにおけるクロスファンクショナル実践例 - SmartHR Tech Blog 自律分散な意思決定を実現するために、SmartHRはデザインを特殊能力にしない - designing この記事では、一年ほどクロスファンクショナルに向き合ってきた自分が、「勘違いだったな」と思うポイントを紹介します。クロスファンクショナルに取り組まれている方・チームのお役に立ちますように(-m-) ※ この記事は、SmartHR Advent Calendar 2022の3日目の記事です。 クロスファンクショナルについて勘違い