2022年のふりかえりと2023年の抱負
昨年は多くの方々にお世話になり、誠にありがとうございました。本年もどうぞよろしくお願いします。
2021年のふりかえりはこちら。
仕事について
「マネーフォワード Pay for Business」リリース後の本格的な運用フェーズに入りました。そのため、安定的に成果物をリリースできるようにすることと、プロダクトの質を担保し続けることのふたつが新しいミッションに加わりました。例えば、リリース基準の策定や、E2Eテストの導入など新たにいくつかの改善施策に取り組み、ユーザーと開発者双方にとって快適な環境作りを進めています。
また、同時にインターンも始まり、ジュニアレベルのエンジニアの育成にも関わり始めました。エンジニア単体でのキャリアが短いので、ちゃんと育成できるか不安なところも正直ありましたが、課題への対処やチーム開発のノウハウなど、デザイナー時代に培ったものも十分に活用できました。インターンの詳細は下記を参照。
技術面の変化については、上記の通り運用フェーズならではのバグ修正やセキュリティ強化作業から、より深くフロントエンド開発に入り込んでいくことができました。とは言うものの、チームの先人たちに比べるとまだまだという認識があり、地道に目の前のことをやっていく所存です。
最後に、英語についてです。エンジニア組織のグローバル化に伴い、3ヶ月間ほど英語の研修を受けていました。最初に受けた実力測定では、全く基準に届いていなかったのですが、研修後にはどの基準も達成することができました。年をまたがずに結果が出てよかった。
プライベートについて
新型コロナウィルスの感染者の波がちょうど落ち着いたタイミングで、2年越しの結婚式を執り行うことができました。家族内だけで小さな式ではありますが、ようやくできて安心しましたし、とても良い思い出になりました。やってよかった。
また、ブラジリアン柔術も新たに始めました。4月から道場に通い始めて、1-2回/週単位でマイペースに練習しています。テクニックと体の使い方の奥深さ、セルフディフェンスと競技性を兼ね備えていること、比較的安全に行えることなど、様々な長所と楽しみがある格闘技で、がっつりハマっています。2022年ベストバイ（？）と言っても過言ではありません。
2023に向けて
仕事の抱負
引き続き、サービス運用とチームの生産性を上げる施策を行いつつ、技術力の向上と英語の習得に割く時間を増やそうと思っています。
インターンを始めて、人とチームを育てるということを強く意識するようになりました。成長をリードするためにも、高い技術力を持つこととグローバルなコミュニケーション力は必要不可欠ですし、自分がイメージする今後のキャリアと比べてまだまだ足りないところですので、改めて表明したいと思います。
プライベートの抱負
まず明確に、柔術の大会に出たいと思っています。柔術は、自分のペースや意向に合わせて行うことができるので、必ずしも試合をする必要はありません。ただ、競技としての面白さがあるのもたしかですし、それを感じられるのは大会ならではですので、思い出作りも含め、挑戦したいと思います。
漠然と家のことなども考えており、リモートワークがベースとなると部屋数を増やしたいのですが、なかなかペット可の物件がない...ということで購入も含め検討するタイミングに差し掛かりました。
以上です。2023年も、引き続きどうぞよろしくお願いします。
cryptoをjestでmockする
crypto.randomUUIDを使う機会があり、どうやってmockできるかを調べたのでメモ。
spyOnでmockReturnValueすると、valueがundefinedになってしまった。別の方法を探していて、Object.definePropertyを使えば良さそうということだったので、valueにfunctionを追加して、こちらでjest.fn().mockReturnValue()したらちゃんとmockできた。
describe('test', () => {
Object.defineProperty(window, 'crypto', {
value: { randomUUID: jest.fn().mockReturnValue('foo') },
});
2021年のふりかえりと2022年の抱負
本年は多くの方々にお世話になり、誠にありがとうございました。来年もどうぞよろしくお願いします。
2021年は、相変わらず世間的には大変な年ではありましたが、私にとっては大きな転機となった年でした。
4月までは、NEORTでデジタルアートのサービスを開発していました。それもそれで本当に楽しい日々でしたが、個人的な理由で5月からマネーフォワードにフロントエンドエンジニアとして転職しました。それまで7-8年ほどデザイナーをしていましたが、今年から新しいキャリアがスタートしました。浅草キッドの「一度ならまだしも、二度も人生切ってんだよ」ごとく、強い思い入れで挑戦しています。
現在、私はマネーフォワード Pay for Business のフロントエンドエンジニアとしてズンズンとサービス開発をしてます。私の役目は実装以外にもあり、デジタルプロダクトのデザインやファシリテーションなど、デザインの知識を活かして、フロントエンドチーム内外の連携を円滑にし、開発における効率と満足度を向上させることです。デザインとエンジニアリング、双方知識を身につけることの有利性については言うまでもありませんが、他のエンジニアにはない特別なスキルと受け止めて、自分らしいスタイルで今後も歩んでいけたらと思っています。
2022年に向けて
デザイナーという背景に甘んじずに、自分の専門領域のフロントエンドのスキルアップをしていきます。幸い私たちのチームには、技術の垣根を超えて活躍できるメンバーばかりで、尊敬する彼らに徐々に近づけたらと思っています。
また、サービスの質を高めていくためにも、まだまだ優秀なエンジニアに参加していただかなければなりません。福岡開発拠点、また私たちPay事業のプロダクト開発に興味を持っていただけるよう、もっとアウトプットしていく必要があります。社内外で連携をして、プレゼンス向上のアクションを実行していければと思っています。
2022年も、引き続きどうぞよろしくお願いします。
フロントエンドエンジニアになってから6ヶ月が経った
10月が終わり、フロントエンドエンジニアとして働き始めて満6ヶ月になった。タイミング的にもいろいろとプロジェクトが落ち着いたり、新しい体制になったりしたので、振り返って今後以降に繋げていきたい。
3ヶ月過ぎたあたりで書いた記事はこちら。
半年の振り返り
5月にジョインしてから、ずっと開発してきた「マネーフォワード Pay for Business」が10月にリリースされた。
このプロジェクトの開発を通して、モダンなフロントエンド技術を習得していった。同じチームの開発メンバーにも恵まれていて、技術だけでなくエンジニアとして色々と学ぶことができたし、なによりも楽しく開発することができたのがよかった。入社当時からできることが増えていって、自分の成長を感じられたのも嬉しかった。もちろん、今でもまだまだ学ぶことはあるし、楽しく開発できており、今後も同じように取り組んでいきたい。
サブプロジェクトとして、福岡開発拠点を盛り上げる取り組みにも参加している。エンジニアブログへの投稿や社外勉強会への登壇を通して興味を持ってもらうだけでなく、採用に繋がるようなアクションを今後も行なっていく予定だ。
（ちなみにMeety作ったので、もし興味があればカジュアルにお話ししましょう）
今後
「マネーフォワード Pay for Business」のファーストリリースが終わり、新しい開発体制になった。僕個人はフロントエンド開発チームのチームリーダーを引き継ぎ、実装だけでなく円滑な開発のためのファシリテーションも期待されることになった。
もちろん、フロントエンド開発にフォーカスすることがメインだが、サブミッションとしては、デザインとプロダクトマネジメント面で、これまでの経験を活かしてサポートをしたり、エンジニアリングとの橋渡しもやっていきたい。デザインエンジニアリングという言葉が妥当なのかはわからないが、自分のバックグラウンドをもっと上手く活用していきたいという思いがある。
僕が携わっているサービスはまだまだ始まったばかりだし、福岡開発拠点もまだまだ大きくなる。あらゆる面において今後大きな変化もあると思うが、次の6ヶ月も楽しんで乗りこなしていこうと思う。
next/headの導入
それなりに大きなNext.jsのプロジェクトにnext/headを導入するにあたってやったことなどのメモ。
共通Headコンポーネント
下記では色々と簡略化してるけど、各ページ共通で使うtitleやmetaタグなどをまとめてprops経由で設定できるようにする。
// Head.tsx import NextHead from 'next/head'; export type Props = { title: string; description?: string; }; export const Head = ({ title, description = 'Test description' }: Props): JSX.Element => { return ( <NextHead> <title>{title}</title> <meta property="description" content={description} /> </NextHead> ); };
<Head title="Test" />的な感じで利用できる。
参考にしたのは下記のページ。
テスト
Jest + React Testing Libraryを利用しており、単にHeadコンポーネントをrenderしてもbodyタグしか表示されないので、少し工夫する必要があった。結果が下記のコード。
import { render } from '@testing-library/react'; import { Head } from '../'; jest.mock('next/head', () => 'Head'); describe('Head', () => { it('default', () => { render(<Head title="Test title" />, { container: document.head, }); expect(document.title).toBe('Test title'); expect( document .querySelector("meta[property='description']") ?.attributes.getNamedItem('content')?.value ).toBe('Test description'); }); });
こちらのページを参考にした。next/headをモックする必要があり、最初は参考ページと同じコードを書いてみた。
jest.mock('next/head', () => { return { __esModule: true, default: ({ children }: { children: Array<React.ReactElement> }) => { return <>{children}</>; }, }; });
この方法だと、自分の環境ではテスト実行時にbabel関連の参照エラーが発生してしまった。
ReferenceError: /dev/head/__tests__/head.test.tsx: The module factory of `jest.mock()` is not allowed to reference any out-of-scope variables.
Invalid variable access: jsx_runtime_1
...
Note: This is a precaution to guard against uninitialized mock variables. If it is ensured that the mock is required lazily, variable names prefixed with `mock` (case insensitive) are permitted.
6 | __esModule: true,
7 | default: ({ children }) => {
> 8 | return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children }, void 0);
| ^^^^^^^^^^^^^
9 | },
10 | };
11 | });
...
いくらか調べてみたが、有効そうな解決方法が見当たらなかったので、シンプルにファクトリ関数にモジュール名を指定してみたところうまくモックができた。
なぜエラーが発生したのかについてはまだ詳しくわかってない。先ほどのコードでdoMockを試してみたら参照エラーは無くなったが、今度はrenderした結果が空だった...という経緯があった。
ひとまず、これで共通で使えるコンポーネントとテストができるようになった。やったぜ。
デザイナーからフロントエンドエンジニアにキャリアチェンジした
8月になって試用期間を終えたので、転職のことについて書いてみる。
今年5月からマネーフォワード社に入社し、福岡開発拠点でフロントエンドエンジニアとして働き始めた。それまでは7-8年ほどUIデザイナーをしており、今回が初めてのキャリアチェンジだった。現在はひたすらTS + Reactでプロダクト開発をしている。
それなりに続けたデザイナーキャリアを手放した理由や、転職で苦労したことなど、キャリアチェンジについてよく聞かれるので、書き残しておく。同じような境遇の人にとって参考になればと思う。
きっかけ
去年の9月に結婚し、ライフステージが変わったこともあり、今後の人生について考え直すことがあった。当時、時間もお金も気持ち的にも余裕が全然なくて、妻にだいぶ負担をかけてしまっていた。結婚するまでは、自分自身の成長を最も優先し、無茶を承知で働いていたが、結婚を機に、自分と家族が安心して暮らすために働こうと考え方が変わり、転職を決意した。
当時の勤め先の社長に、全く同じことを退職理由として伝えた際、家族を大切にするあなたをリスペクトしたいと言われ、本当に最高なパートナーと一緒に仕事ができていたんだなということを改めて感じた。
なぜキャリアチェンジを選んだか
端的に言うと、コードを書く時間をもっと増やしたかった。シニアポジションの「コードが書けるデザイナー」として転職する手ももちろんあった（し、そっちの方が給料も高い）が、デザイン業務から離れてエンジニアリングに集中した方が、自分のキャリアにとって良い影響があると感じていた。これにもいくつか理由がある。
エンジニアリングへの憧れ
ひとつめの理由は、元々エンジニアの仕事に強い憧れがあったからだ。エンジニアリングによってビジネスの可能性が広がっていく現場を、これまで何度も間近で見てきた。もしチャンスがあればそういった仕事がしてみたいと思っていた。もちろん、コードを書くのも好きだった。
ありがたいことに、前々職からモダンなフロントエンド開発に携われる機会があり、多少なりとも実務経験を積むことができていた（TS + Vue.js環境で1-2年程度、主にView側の実装）ので、このチャンスを掴むことができた。
デザイナーじゃなくてもデザインができる
ふたつめの理由は、デザイナーじゃなくても広い意味でのデザインの仕事はできるからだ。デザイナーの守備範囲は年々広がり、他の職種とも役割が被るようになってきた。逆に言えば、デザイナーという職種じゃなくてもデザインに携わることができる。
まあこの辺はいろいろと言いたいことはあるが、自身の話をすると、プロダクトやUIなどサービスに関する仕組みづくりをしたり、新しい体験を作り出したりすることは好きなのだが、デザイナーとしてビジュアルデザインを仕事でやり続けることに関心がなくなってしまった。デザインについてのバックグラウンドを生かして、別の手段で自分の好きなことに取り組み、価値を発揮した方がキャリアとしても良いのではないか、と考えた。
これらの理由から、デザインの知識と経験を活かしつつ、コードを書くことに集中できるフロントエンドエンジニアが、次のキャリアとしてぴったりだった。実際、この選択は正しかったと思えるくらい、毎日楽しく仕事ができている。
転職状況
最終的にはリファラルで入社させてもらえることができたので、ご縁が一番大事...だとは思うが、そうは言ってもいろいろ苦労したことはあるので、選考前と選考以降について分けて書いていく。
選考前
そもそもフロントエンドエンジニアについて、ほぼ知らないというところからスタートした。コードを書く以外の仕事内容も、業界的な給与水準も知らない状態だったので、まずは検索して一般的に知ることができる情報を集めた。フロントエンドエンジニアの採用ページは特に重要で、リストアップして目を通し、扱っている技術や必要な知識・経験など全体的な傾向を掴んだ。
自分で調べられることにも限界はあるので、知り合いのツテやメンタリングサービスなどを利用し、何名かのエンジニアに相談した。現場の当事者からの生の声も集めるようにした。
転職サイトもいくつか利用したが、そのサイト上で自分から応募しに行くということはなく、デザイナー職も含め20-30件ほどのオファーをもらっていくつかの企業と話した。オファーから選考につながる確率は低かったが、提示された条件に関しては内定後面談で参考値として利用できた。
ポートフォリオについてもよく聞かれる。フロントエンドエンジニアとしてのポートフォリオは用意しなかった。デザイナーの時の実績はちょくちょくまとめてたので、それと職務経歴書などの書類は用意したくらい。その代わり、自分の実績についてしっかりと話せるように頭の中で伝え方を整理していた。
上記の準備がだいたい終わったころに、オファーをいただいた気になった企業に返信したり、中の人に問い合わせたりして、最終的に2社選考を受けることにした。
（2社とも内定をいただき、そこで転職活動終了したのでこの少なさだが、一般的にはこううまくはいかないかもしれない...。）
選考以降
選考に進んでから内定までは、1ヶ月ほどの時間がかかった。
フロントエンドの知識と経験については、明らかに他の候補者よりも劣っているだろうと思っていた。なので、選考を受ける企業とビジネスとチームについてとにかく理解し、自身の知識と経験を、今後のフロントエンドエンジニアとしてのキャリアにオーバーラップしていくと、どんな価値が発揮できるか、ということについて自分なりに整理し伝えていった。
自分の場合は、UIデザインができるから企画から実装まで自分ひとりで完結できてスピーディであること、UXリサーチやデータ収集などのプロダクト改善の知識もあるから実装以外でもビジネスの成長に貢献できること、の2点を伝えたと思う。
質問事項としては、技術職がよく受けそうな、どうやって情報収集しているかとか、特定の技術に関する現状の知識の確認だった。意外とされそうでされなかったのは、「今後どうキャッチアップしていくか」という質問だった。実際の業務の中で学んでいくのが一番早いから、聞くまでもないということなのかもしれない。
実際にキャリアチェンジ（転職）をしてみて
今のところ、いいことづくしなのでどれから伝えたらいいのか非常に悩ましい。
まず、大元の自分と家族が安心して暮らすことができるような働く環境であるかについては、明らかなYESだ。スタートアップでデザイナーをしていた時よりも、稼働時間は短く、地方拠点ではあるが東京本社と同じ待遇で迎えてもらっており、心に余裕ができた。
心配していた技術面でのキャッチアップも、開発業務とプライベートでの勉強で少しずつではあるができており、スプリントごとに作業量を増やしていけている。デザイナーのキャリアも役立っており、仕様を考慮した上でのUI改善の提案ができたり、逆にユーザービリティ面から実装要件の変更ができたりと、自分ならではの価値を掴みかけてきている。今後どうなっていくかが非常に楽しみだ。
とりわけ自慢したいのがチームだ。このキャリアチェンジという大きなチャレンジが今のところうまくいっているのは、チームのおかげだと言っても過言ではない。技術力の高いメンバーからサポートを受けられるのはもちろん、小さなことでもチーム内で活発に質問や相談などのコミュニケーションが行われている。社内全体に言えることかもしれないが「あなたのここを尊敬する」という賛辞をちゃんと言葉にして伝える文化もあり、モチベーションが上がる。
結果としては、キャリアチェンジして良かったと心から思える。
以上、今回のキャリアチェンジの概要を書いてみた。キャリアとか転職について困っているデザイナー、未経験エンジニアの人たちにとって参考になれば嬉しい。
あと、一緒に開発していく仲間も絶賛募集中なので、もし気になったら下記の採用ページから申し込むか、カジュアルにお話ししたい人は@horaotokoまでDMください。
Jest + React Testing Libraryで同じようなDOMの状態チェックをする
同僚の実装を見て「こうすればできるのでは？」と思ってやってみたメモ。同じような構成のDOMがたくさんあって、それぞれにTest IDなどを振るのがめんどくさい場合に便利。
下記はfooラベルを持つラジオボタンがたくさんあるAppComponentのテストをするケース。
import { render, screen } from '@testing-library/react'; import { AppComponent } from './AppComponent'; describe('Sample', () => { it('test', async () => { await render(<AppComponent />); screen .getAllByLabelText('foo') .forEach((radio) => expect(radio).not.toBeChecked()); }); });
getAll~はHTMLElementの配列を返すので、ループ回して配列の要素にアクセスすればexpectにチェインする処理が実行できる。
