SmartHR における、ESLint v9 と Flat Config への移行事例 - SmartHR Tech Blog
本記事は、SmartHR Advent Calendar 2024 シリーズ 1 の 19 日目の記事です。 こんにちは。SmartHR プロダクトエンジニアの sasaki (@s_sasaki_0529) です。 この記事では、SmartHR が共通で利用する ESLint の設定パッケージを、ESLint v9 と Flat Config に対応させた取り組みを紹介します。 ESLint とは ESLint は、JavaScript や TypeScript を中心に幅広く使われている静的解析ツール（Linter）です。コード品質やスタイルの不整合を自動検出し、大規模なプロジェクトや、多様なフレームワークにも柔軟に対応できる豊富なプラグイン・ルールセットを備えています。 近年は Oxc や Biome (旧 Rome) など新しい選択肢も増えていますが、ESLint は高いカスタマイ
SmartHRのフロントエンドの技術的変遷 ── 技術顧問のkoba04と語るこれまでとこれから - SmartHR Tech Blog
マルチプロダクト戦略を掲げてプロダクトを急速に増やし続けている SmartHR のフロントエンド領域について、2018年から SmartHR に参加しているフロントエンドエンジニアの nabeliwo と技術顧問の koba04 が、これまでの振り返りと今後の展望を話しました。 SmartHR のフロントエンドでどんな技術が使われてきてどんな課題と向き合ってきたのか、そして今現在取り組んでいる課題や SmartHR ではどんなフロントエンドエンジニアが求められるのかなど、幅広いテーマが出てきました。 この記事ではその模様をお届けします。 目次 フロントエンドの Rails からの脱却とフロントエンド領域の確立 SmartHR UI の誕生 プロダクトの急増 複雑化する技術課題 テストの整備とロジック共通化の取り組み Next.js の導入 新たな技術的挑戦 フロントエンドミーティングの見直
React 19 で変わるアクセシビリティ周りの技術 - SmartHR Tech Blog
こんにちは。アクセシビリティ本部のアクセシビリティエンジニアの五十嵐です。SmartHRでは主にアクセシビリティテスターが見つけた課題を技術的な観点から改善したり、根本的な問題を解決するための仕組みづくりを担当しています。 さて、Meta が開発する UI ライブラリとして長い間人気を博している React ですが、2024年4月に最新版であるバージョン 19 のRC版が公開されており、注目を集めています。 バージョン 19 では "use client" や "use server" でも知られる Server Components を含む様々な機能が含まれる予定ですが、この記事では、そんな React バージョン 19 をアクセシビリティの観点からキャッチアップし、特に便利になりそうな点や、注意が必要になりそうな点などを見ていきます。 forwardRef が不要になった 仮想 DOM
SmartHRにおけるフルリモートワークの生産性や満足度調査 - SmartHR Tech Blog
こんにちは。VP of Engineering の morizumi です この記事では2024年2月にプロダクトサイド（注：プロダクト開発に直接的に関わっている各部の総称）内で実施したフルリモートワークに関するアンケート結果のサマリをご紹介します。SmartHR では2021年7月より本格的にフルリモート体制に移行しており、移行から2年半ほどが経ちました。2年半を経て、従業員としてフルリモートワークをどのように受け止めているのか？ というのを調べるために行ったのが今回のアンケートです なお、この記事は僕が書いた社内ドキュメントからほぼコピペして作っているため、一部わかりにくい用語や言い回しがあったり、若干の内輪ノリがあるかもしれませんがその点はご容赦いただけると幸いです それでは早速、アンケート結果のサマリをご紹介していきます （これ以降基本的に社内ドキュメントのコピペです） アンケート
「ミニマムテストの壁」を超えたネイティブアプリ立ち上げ - SmartHR Tech Blog
こんにちは！SmartHRのプロダクトマネージャーのgackeyです。 この記事は「SmartHRのプロダクトマネージャー全員でブログ書く2024」への参加記事です。25人が持ち回りで毎週記事を投稿します。ぜひご覧ください！ 実は私が持ち回りラストです。トリにふさわしいかどうかドキドキしています。 SmartHRでは、2023年の９月に初めて、スマートフォン向けのネイティブアプリ（以下アプリ）をリリースしました。 現在順調に（どころか予想以上の勢いで）利用ユーザー数も伸び、ホッと胸をなでおろしつつ、次へ向けて仕込みを進めています。 「もっと早く欲しかった！」「ずっと待ってた！」というお声もたくさんいただき、PMとしては喜びもひとしおな一方、このアプリのリリースには、構想から足かけ１年半を要しました。 この記事では、SmartHRが行ってきたネイティブアプリの検証における試行錯誤についてご紹
プレースホルダーのアクセシビリティ上の課題と解決策 - SmartHR Tech Blog
こんにちは！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
多言語化対応における TypeScript の型定義を通して開発のしやすさについて考えた - SmartHR Tech Blog
こんにちは、SmartHR でプロダクトエンジニアをしている @nabeliwo です。 今年の9月に SmartHR のログイン後のホーム画面がリニューアルされました。 【9/21更新】新しいホーム画面を公開しました | SmartHR｜シェアNo.1のクラウド人事労務ソフト この記事では、新しいホーム画面の実装の中で、開発者体験を損なうことなく多言語化対応を進められるよう、TypeScript の型定義を工夫した話をします。 まだまだ改善の余地がある状態ではあるのですが、私達のチームでの試行錯誤が読んでくれた方の参考になれば幸いです。 SmartHR の多言語化対応 SmartHR の既存のページではすでに WOVN.io というツールを使った多言語化対応が行われていました。 ただ諸々の理由があり1、新しいプロダクトでは自前で翻訳の仕組みを用意していこうとしています。 実際に、Smar
会議中に質問する社員にはマイクを投げつければ一石二鳥！（デザインで解決する会議の課題） - SmartHR Tech Blog
こんにちは！SmartHR デザイナーのNamです。 今年2月、二人目のデザイナーとして入社しました。 SmartHR デザインチーム発足 これまでデザイナー渡邉が制作物全般に携わっていましたが、プロダクトの成長に伴いクリエイティブ面もさらに強化すべく、この度デザインチームが発足しました🎉 最近こんなもの作りました さっそくですが、今回はメンバー全員がパフォーマンスを高めて働ける環境づくりのひとつとして作成したミーティングで活用するツール2種をご紹介します！ 1.「完全理解」の札 作成した背景 社内ミーティング時、メンバーそれぞれの理解度・認識のズレが生じないために、 聞く側は「発言するよりも気軽に自己主張しやすい」、話す側は「議題に対してどれくらいの割合で理解されているかが可視化できる」札のようなものがあればいいね！と言う声が挙がり、作成することになりました。 大量生産 単発イベントな
組織全体がアジャイルになっていくには 〜アジャイル推進室連載企画第2弾〜 - SmartHR Tech Blog
こんにちは。プロダクトエンジニア兼アジャイル推進室メンバーの長田（shooen）です。 今回はアジャイル推進室連載企画第２弾として、SmartHRにアジャイルコーチとして参画いただいている豊田さんのインタビュー記事をお届けします。 開発の現場に限らず組織全体がアジャイルになっていく上での困難や必要なチャレンジについて、参考にしたりヒントを得たりしてもらえたらと思います。 豊田 聡 2020年9月にSmartHRへジョイン。開発組織におけるスクラム/LeSSの導入支援をはじめ、ピープルマネジメントや組織開発の支援、組織全体のマネジメント力向上施策などに力を入れている。 直近3年間のSmartHRの変化 豊田 聡さん。趣味は筋トレ。スクワットとデッドリフト100kg上げている。 長田： まず豊田さんがジョインした頃のSmartHRの印象を教えてください。 豊田： 会社の7つのバリューが特にいい
フィーチャーチームについてまとめてみた - SmartHR Tech Blog
こんにちは、SmartHR本体機能の開発をしているkouryouです。 SmartHRでは毎月多くの方が入社しており、日々組織が拡大しています。 しかし一般論ですが、組織は拡大とともに分業化が進み、顧客価値を中心にチームで仕事することが難しくなっていきます。 実際SmartHRでも同じ課題感がありました。 そこで当時、組織が拡大しても顧客価値を中心にプロダクトを作るための考え方である「フィーチャーチーム」に注目し、推進しました。 今回は当時理解を促すために社内向けに書いたドキュメントを改めてまとめてみました。 フィーチャーチームとは エンドツーエンドで顧客中心の機能を実現する、安定した長期存続するチームのことです。 出典: 大規模スクラム Large-Scale Scrum(LeSS) アジャイルとスクラムを大規模に実装する方法 何かしらの案件を「着想」レベルで受け取り、チームメンバーだけ
歴代のスクラムマスターがやってきた取り組みを解剖してみる - SmartHR Tech Blog
この記事は SmartHR Advent Calendar 2022 の22日目のエントリーです。 こんにちは。プロダクトエンジニア兼アジャイル推進室メンバーのshooenです。 今回はアジャイル推進室メンバーとして、社内の「交代制スクラムマスター」という取り組みで歴代のスクラムマスターたちがどういうことに取り組んできたのか見ていきたいと思います。 交代制スクラムマスターとは そもそも「交代制スクラムマスター」ってなんやねんという話ですが、ざっくり説明するとスクラムマスターのようにチームや組織を見れる・アクションを起こせる人を増やすために、スクラムマスターの役割を敢えて交代制で回す取り組みです。 詳しくは「組織のさらなるカイゼンを。SmartHRの「交代制スクラムマスター」制度のお話 - SmartHR Tech Blog」をご覧ください。 歴代のスクラムマスターはどんな取り組みをおこなっ
SmartHRが大切にするフロー効率とは - SmartHR Tech Blog
こんにちは！ SmartHRで開発したり、アジャイル推進したり、筋トレしたりしてるkouryouです。 突然ですが、皆さんのチームの生産性は高いでしょうか？ この議論を始めると必ず直面する壁が、そもそも生産性とは何か？です。 生産性を上げようとする際の効率化の考え方には、リソース効率とフロー効率という2種類の考え方があります。 そしてSmartHRでは、特にフロー効率の方を重視しています。 そこで本記事では リソース効率/フロー効率とは何か なぜSmartHRはフロー効率を重視しているのか について解説していきます。 リソース効率とフロー効率 リソース効率とは リソース効率とは、リソースの稼働率のことです。 リソース効率を高めるということは、リソースに空きがあればタスクを与え、全員が何かしら手持ちのタスクがある状態を作ることになります。 手が空いてる人を作らないという至って普通の考え方なの
CEO が3年半ぶりに SmartHR の開発チームにメンバーとして入ってみた結果 - SmartHR Tech Blog
こんにちは。VP of Engineering の森住です 今回は、2022年1月に SmartHR の CEO に就任した芹澤さんが、なぜか最近になって SmartHR の開発チームにイチメンバーとして二週間ほど参加していたので、一体なにがあったのかとインタビューを敢行してまいりました いつの間にか CEO をクビになっていたのでしょうか？ 気になりますね それでは、今回のインタビューの登場人物をご紹介します 登場人物 SmartHR 代表取締役CEO 芹澤さん 2016年2月に SmartHR に入社。VPoE、CTO を経て2022年1月に CEO に就任。CEO 業に専念していたかと思いきや、いつの間にか SmartHR の開発チームにイチメンバーとして参加していた 芹澤メンバーを受け入れるチームのマネージャー 山本さん 2020年10月に SmartHR に入社。SmartHR
配置シミュレーション機能のフロントエンド技術選定 - SmartHR Tech Blog
こんにちは。プロダクトエンジニアの@cidermitainaです。 2023年2月に配置シミュレーション機能がリリースされました。 配置シミュレーション機能のフロントエンドを作るにあたってどのような技術選定したのか、その背景と意思決定をまとめていこうと思います。 配置シミュレーション機能とは？ まずは、ざっくり配置シミュレーション機能についての説明です。 配置シミュレーション機能は、SmartHRに蓄積された人事データを活用しながら、ドラッグ&ドロップで人員配置のシミュレーションができる機能です。 異動前後の平均勤続月数や平均年齢など、部署全体の統計データを参照しながら配置の検討ができます。 ベースの技術 では、本題の技術選定についてです。 ベースの技術は以下になります。 Next.js React TypeScript まず、どのような技術を使ってフロントエンドを開発していくかを検討しま
2022年のプロダクトマネジメント方針を公開します - SmartHR Tech Blog
こんにちは、プロダクトマネージャー（以下、PM）のadachiです。 SmartHRでは、年始に各部署のリーダーがその年の方針を発表することになっています。今回は私がPMグループの方針として書いた文章を、丸ごとそのまま公開したいと思います。 本文に入る前に、少しだけ補足をさせてください。 現在PMグループには13名のPMが所属しており、それぞれ担当するプロダクトの性質もフェーズも異なります。そのようなチームに向けたメッセージということで、やや抽象的かつ焦点が絞りきれていない内容になっております。（言い訳その1） また、改めて読み返すとかなり基本的なことしか書いていないのですが、基本に立ち戻ってがんばろうぜ！という趣旨であることをご理解いただければと思います。（言い訳その2） そして、あふれる思いを詰め込んだ結果、かなりの長文になってしまいました。シンプルさを美徳とするPMとしては汗顔の至り
SmartHR UI を中心としたエコシステムのすすめ - SmartHR Tech Blog
こんにちは、プロダクトデザイナーの @uknmr です。昨日に続き SmartHR UI に関する話を書きます。ええ、そう。今日はやや社内に向けて書きます。アドベントカレンダー14日目? 知らない子ですね。我が家にクリスマスの概念はないので、そんなものはありません。 SmartHR UI の目的とは? ブランド観点から UI を揃えたい、一貫したユーザー体験*1を提供したい、という気持ちから生まれた SmartHR UI ですが、本当ですか? 我々は本当に UI を揃えるためだけにコンポーネント集を手入れしていますか? 共通コンポーネント集があれば、それを使い続けさえすれば UI が揃っていくのは必然です。「揃えたい」という気持ちは「誕生した瞬間に達成された」とも言えます*2。 では、何のために自前でコンポーネント集を手入れし続けているのでしょうか? 私はそれを「SmartHR というプロ
プロダクト体験の「インフラ」となったUIコンポーネントSmartHR UIの現在とこれから - SmartHR Tech Blog
こんにちは、念願の高級水拭き兼用ロボット掃除機を買ってほくほくなプロダクトデザイナー@kgsiです。 ※ この記事は、SmartHR Advent Calendar 2022の13日目の記事です。 SmartHRではReact コンポーネントライブラリ「SmartHR UI」を全プロダクトで使っています。なぜ使っているのか？それはSmartHRのプロダクトの体験統一と、開発速度を向上させるためです。 github.com SmartHR UIがそもそもどういったコンポーネントライブラリなのか、どうやって始まったのか、運用やリリース手順の改善については、過去の記事にて説明しています、よろしければ以下の記事をご覧ください。 「プロダクト間共通の React コンポーネントライブラリ」がどうなったか、という話 - SmartHR Tech Blog プロダクト間共通の React コンポーネント
Google Apps Scriptで、社内プロダクトのnpmライブラリの利用状況をスプレッドシートに出力してみた話 - SmartHR Tech Blog
こんにちは！SmartHRのプロダクトエンジニアの@diescakeです！ 今日は「Google Apps Scriptで、社内プロダクトのnpmライブラリの利用状況をスプレッドシートに出力してみた話」を題材にしつつ、主にGoogle Apps Script（以降GAS）の開発環境周りの話をします。技術の分野としてはWebフロントエンド（以下フロントエンド）に関連した話が多くなります。 全体の構成図はこんな感じです！ ソースコード管理から、スプレッドシートに反映されるまでのデータフロー図 大まかな構成・データフローは上図のような感じで、主な技術スタックとしては、GAS + Clasp + TypeScript + esbuildを採用しました。 この図を左側から見ていくと、まずGitHubでソースコードを管理していて、昨今のフロントエンド開発と同様に、TypeScriptでコードを書き、必
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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
