こんにちは、フロントエンドエンジニアのモアイと申します。 SmartHR では、SmartHR UI というプロダクト間共通の React コンポーネントライブラリを運用していますが、この記事では SmartHR UI のリリース作業を GitHub Actions で自動化した話をご紹介します。 ちなみに SmartHR UI そのものについては過去の記事で詳しく紹介されていますので、ご興味があればそちらも併せて御覧ください。 tech.smarthr.jp tech.smarthr.jp 三行まとめ リリース作業が複雑化していたので GitHub Actions を使って自動化した リリース中に作業者の確認を挟むプロセスを Issue とラベル付けによって実現した 自動化最高！ これまでのリリース作業 SmartHR UI では Pull Request ベースで開発しており、様々な歴

こんにちは。ここ数日は、以下の記事が話題になりました。 named exportは有害だと考えられます「named exportは有害」という主張はこれまで常識と思われていたこととは異なるため、界隈のエンジニアからは否定的・懐疑的な意見が見られます。実際、筆者もnamed exportが有害であるとは1ミリグラムも思っていません。 しかし、自分と異なる意見は当然に下等・幼稚なものであるというのは筆者が最も嫌う考え方ですから、このような異なる意見を分析・理解する必要があると思い、アンサー記事という形でまとめました。具体的には、異なる意見に達する理由としては前提が異なることと論理が異なることが主に挙げられます。前提が異なることが分かれば、自分と異なる意見に至った理由を理解でき、場合によっては取り入れることもできます。論理が違うのであれば、それは瑕疵であり指摘しなければいけません。 なお、そもそ

命令は、無条件に従うべき当為として命令する「定言命法」と、条件付きで「こういうときはこうすべき」と命令する「仮言命法」に分けられる

最近夜や休日に自分の勉強や開発をできなくなった。 夜や休日にそんなことせずに業務時間内でやるべきでしょという意見もあると思うが、自分の場合は以前は苦もなく自然とやれていた。それが今はできていない。 理由は明確で、自分が集中できていないからである。背景には育児家事の話はもちろんあるが、時間が取れていないわけではない。 息子は睡眠エリートで毎日2~3時間昼寝をするし夜20時半には寝ている。寝ている時間に何かをすればよいのだが、手が付かない。イメージとしては、1日のMPを使い果たしている感じ。こういう感覚は育児に関係なく経験していて、集中できなくなってしまう時期はあった。 なので「育児家事で時間が取れない」というのは正確ではなくて、「自分が集中できていない」というのが正しい気がする。これは自分の考えであって、家庭にもよるとは思う。家事育児の事情は本当に家庭によって全然違う。子どもが生まれたことで

Your shopping website is not an SPA. I repeat: your shopping website is not an SPA. Stop trying to sculpt David with a JS chainsaw and get yourself an HTML/CSS chisel.— Alex Russell (@slightlylate) 2021年8月10日 この主張、界隈（少なくとも自分の観測範囲）では割とよく見かけるし、なんか定期的に話題になるトピックなのかなーと。 まあ持論としてもコレには概ね同意しており、会社のスタンスとも相まって、常日頃からぼんやり考えてたりすることでもある。 で、そんな折にこのツイートを発見して、さらにそれに言及してる人々を見て、ふと自分でも現状を整理しておきたいなーという気持ちになったので筆を執った次第。

2021.07.28 プレスリリース 株式会社SmartHR、アクセシビリティ向上に関する取り組みを開始　〜 すべての人が使えるサービスの提供を目指し、ウェブアクセシビリティ基盤委員会に参加 〜 株式会社SmartHR（本社：東京都港区、代表取締役：宮田 昇始、以下「当社」）は、働くすべての人が使えるサービスの提供を目指して、アクセシビリティ向上に関する取り組み開始しました。同時に、2021年7月28日にウェブアクセシビリティ基盤委員会（Web Accessibility Infrastructure Committee、以下「WAIC」）(※1)へ参加いたしました。 当社は、クラウド人事労務ソフト「SmartHR」をより多くの人に、多様な状況下でご利用いただけるサービスにすべく、主にウェブにおけるアクセシビリティの向上に取り組んで参りました。アクセシビリティの社内勉強会の開催やウェブアク

最近のWebフロントエンドフレームワークでは、デザインとコードの分離ではなく、画面の役割をもって分離しています。そのためデザインとコードが一つのコードの中にあり、デザイナーにとっては慣れるまでデザインしづらいと感じているかも知れません。 もしReactで開発しているプロジェクトならば、Utopiaを使ってデザインしてみると良さそうです。 Utopiaの使い方 エディタ画面です。 ストーリーボードなる機能もあります。 コードエディタです。左側にはファイルツリーがあります。 コンポーネントの構造も可視化されます。 マウスで選ぶと選択されているコンポーネントが斜線されます。 ズーム表示もできます。 Utopiaはコンポーネントを変更したり、右側にあるプロパティを変更することでリアルタイムにデザインを確認できます。Visual Studio Codeとデザインプレビューが組み合わさった形になります

こんにちは、SmartHRプロダクトデザイングループの@kgsiです。 先日、弊社のVP of Product Designの@oujiがこんな記事を公開していました。 みなさん、これを読んでどう思われましたか？内部からみてもよくわからんのが本音だったりするのですが、何故か魂がザワザワしました。 さて、記事の中で繰り返し述べられている「ヘヴィメタル」と、今回ご紹介する内容がマッチするかはわかりませんが、プロダクトデザイナーが関わっている、プロセス改善活動をご紹介します。 プロダクトデザイナーの責任とは？VPはヘヴィメタルな記事の中でこう述べています。 SmartHR ではお前がお前の責任（インターフェース品質）を果たすためなら、お前はどんな成果の出し方を選んでもいい。弊社、特にプロダクトデザイングループにおいては、成果の出し方(＝プロセス)が限定されていません。つまり、プロダクトのインター

こんにちは！ SmartHRでWebアプリケーションエンジニアをしている藤井です。 弊社では「クラウド人事労務ソフト」の名の通り、人事労務に関わるプロダクトを開発・提供しています。 そんなSmartHRでは事業を拡大させるためエンジニアを積極的に採用しています。 採用活動をしていると、カジュアル面談などの場で、「労務って入社・退社とかですよね、まったくその分野について知らないのですが…」といった声を聞くことがあります。 すべての従業員に関わってくる「労務」ですが、多くのエンジニアにとっては馴染みが薄く、イメージがつきにくいのだろうなと思います。 入社時点で労務の知識を持っていた人はほぼいません まずは、プロダクト開発のエンジニア向けにこんなアンケートをとってみました。 「SmartHR に入社する前に労務の実務経験や労務に関するプロダクトに関わった経験がありますか?」 結果は「労務に関する

こんにちは。SmartHRでPM（プロダクトマネージャー）をしているadachiです。 最近、面接などで「SmartHRではどのような流れでプロダクトを作っているのか」という質問をよくいただくので、このあたりでいちど現状を整理しておこうと思い立ちました。 SmartHRでは、全社的にスクラム開発を採用しています。このブログにも スクラムに関する記事 がたくさんあるのでぜひ読んでいただきたいのですが、今回はもう少し引いた視点から、顧客から受けた要望がどのように開発されていくのかという全体の流れを取り上げてみたいと思います。 なお、開発プロセスは状況に合わせて日々更新されていますので、今回ご紹介するのは2021年6月時点での内容になります。 プロダクトの構成 SmartHRには、大きく分けて2種類のプロダクトがあります。ひとつはコア機能である「本体」で、もうひとつは本体にアドオンする形で使える

こんにちは！ エンジニアマネージャーの森住（@t_morizumi）です！ 今回はシリーズD調達を果たしたSmartHRのこれからをご紹介すべく、各事業領域のエンジニアリーダーにインタビューをしていきます。 それぞれの領域について、これまでどういう開発をしてきたのか、これからどういう開発をしていくのか、事業として今後どうしていくのか、といった部分を中心に各エンジニアリーダーに語っていただきます。 なお、本記事は以下の三部構成となっています。 引き続き事業の軸となる「SmartHR本体」 エンジニアマネージャー : 鈴木 睦央 新たな軸としての「人材マネジメント」 PdM兼エンジニア : 疋田 駿 働くすべての人を支える未来に向けて「プラットフォーム化構想」 CTO : 芹澤 雅人 それでは早速、SmartHR本体のエンジニアマネージャーを務める鈴木さんからお話をうかがっていきます！ 鈴木

このサイトについて このサイトは@tagucchが日々インプットしたことをメモとか備忘録みたいな軽いノリでアウトプットしようとする場所(の予定) このサイトを作った理由 端的に言うと、 React が書きたい Next.js が盛り上がっていたので使ってみたい ポートフォリオになるようなものを作りたい 個人開発を完結させて公開させるまでの経験をしたい 極限までハードルが低いアウトプットの場をつくりたい という感じ。 Next.js を触ってみたい ここ 2 年くらいはフロントエンドに興味があり、フロントエンドをメインに仕事をしている。 最初に React を触り始め、当時勤めていた会社を辞めてしばらくは業務委託で Nuxt と Next の両方を少しずつ触らせてもらっていた。 転職してからはずっと Nuxt を使っているのだが、個人的に Vue より React のほうが書き心地が好きだし

一言でいうと コロナ禍のストレスやフルリモートでの働き方に適応出来ずどうしても厳しいと判断したので、少なくとも人に会ったり出来るようになるまでは勤め仕事は辞めて休養をすることにしました。 もう少し詳しく 1年前にコロナによる自粛が始まって以来、自分は不要不急の外出を控えるという行政の指示に従い極力外出をしないようにし、友人などと会うこともなく、ほぼ家とコンビニの往復しかしないという生活をしていました。 もともと自分は過去にひきこもり状態だったこともあるし、数ヶ月の休暇を取ることも珍しくなかったので、「外に出なくてもそれほど困らない方だろう」と思っていました。 しかし、自粛が数ヶ月続いた去年の夏ごろから徐々に心身ともに調子が悪くなっていき、それから今に至るまで慢性的な体調不良に悩まされています。 また、フルリモートでの業務委託の仕事というのも上手く適応することが出来ず、かなりストレスの高い状

stackblitz が提唱して実装している node.js が動くブラウザ環境。container といってるが、 Docker 等とは関係ない。 stackblitz/webcontainer-core このコンテナはブラウザ内で node.js (らしきもの)が動くことがターゲットで、現在デモとして next.js をビルドしてプレビューできている。これによって node.js + webpack + next.js cli が動いていることがわかる。 デモはここで試せる。 まだ OSS ではないので、この記事の大部分は想像によって書かれている。 webcontainer 概要 (自分の理解なので話半分に) ブラウザサンドボックスでも electron なしでも動かせるようになってきた。しかし現在 node.js を動かすには色々と欠けている部分があるので、それらを総称して webc

こんにちは！SmartHR バックエンドエンジニアの yoshinarl です。 気づけばはや5年…私が入社した頃は小さなマンションの一室で社員も7名しかいませんでしたが、今では社員も400人を超えてオフィスビルのワンフロアを貸し切っています。 何やら 老害達が語るSmartHR初期 という会が開かれるほどに歴史のある会社になったわけですが、あのメンバーはほとんどが私より1年以上あとに入社してるんですね。老を越して仙ですよ、仙。仙人です。創業者を除けば最古参なんです。 さて、そんな私ですが、実はまだ経験したことのない行事があるんです。そう、新入社員オリエンです。 当時は入社前に遊びに行ったと思ったらオフィスの書類棚作りを手伝っているような状況でしたから、当然オリエンなんてあってないようなものです。 2020年の1年間で社員数がほぼ倍増しリモートにも対応した SmartHR ですが、いったい

こんにちは、SmartHRでカスタマーサクセスをやっています、下地（@bunnyboy）と申します。 SmartHRでは「SmartHR スクール」という、SmartHRの仕組みや使い方が学べるeラーニング形式のコンテンツを用意しています。 導入前の準備から、機能の理解や運用方法、前任者から引き継いで新たに管理者になった方向けの説明など、さまざまなコースをお客様自身で選択して、いつでも好きなときに学ぶことができるツールです。 この記事では、「なぜスクールをはじめようと思ったか」、「どうやって作ったのか」、「コンテンツを作る上で大事なこと」について書いていきたいと思います。 なぜSmartHR スクールをはじめようと思ったか2018年ごろの話です。 当時のカスタマーサクセスでは、オンボーディングメニューの中で、お客様に実際にSmartHRを触って使い方を学んでもらう「トレーニング」という工程

こんにちは！ エンジニアマネージャーの森住（@t_morizumi）です。 現在 SmartHR は saiyo-tasukete プロジェクトの名の下、エンジニアの採用ブランディングと再び向き合っている真っ只中にあります。 「普段取り組んでいることをきちんとテックブログで発信する」という、ぐうの音も出ないほど当たり前のことが大切であることに CTO が気づいてしまったため、僕もこうして筆を取っている次第です。 さて、今回はエンジニアのキャリアについてということで、SmartHR がエンジニアのキャリアアップにどのように取り組んでいるのかをご紹介したいと思います。 SmartHR のエンジニア組織について まずは大前提として、SmartHR のエンジニア組織は以下のような構造になっています。 （※ 組織構造の概略をお伝えすることが目的のため簡略化しています） CTO がマネージャーを支え、

「なんだか Next.js の Static Generate に使っている外部 API 呼び出し回数が多いような？」と思っている方へ。閲覧されもしないページを、ISR（Incremental Static Regeneration）でみだりに再生成していませんか？本稿では、Link コンポーネントの振る舞いと ISG / ISR の組み合わせの際、注意したい prefetch の設定について言及します。 ISG のおさらい ISG（Incremental Static Generation）は、Next.js がオンデマンドでページを静的生成するアプローチです。「オンデマンドで静的生成する」ことで、ビルドタイムの静的生成をスキップすることができます。 getStaticPaths の fallback オプションを true か 'blocking' にすることで発動します。 これは膨大