株式会社ココナラ様、ニフティ株式会社様とフロントエンド合同勉強会を開催しました

レバレジーズ株式会社 システム本部の田中です。
2023/7/11に、ココナラさん、ニフティさんと、フロントエンドをテーマに合同勉強会を開催しました。 以前にエイチームさんと開催した合同勉強会に続きいて今回もconnpassで一般公開し、ココナラさん、ニフティさんを弊社の渋谷本社にお招きしてオフラインでの開催でした!

この記事では、弊社のエンジニアの発表内容を簡単にご紹介したいと思います。

発表内容

弊社からは、私を含めて3人が発表しました。


speakerdeck.com

フロントエンドをリードするエンジニアの育成を目的としたPJで取り組んだことについての発表です。


speakerdeck.com

AWS CognitoとAmplify SDKを使ってフロントエンドの認証処理を爆速で実装したという発表です。


speakerdeck.com

Next3、TypeScript、urqlを使ってmonorepo構成で新規プロダクトの開発に取り組んだことについての発表です。


We are hiring

レバレジーズ株式会社ではフロントエンドエンジニアも、それ以外のエンジニアも幅広く募集中です。 もし今回の勉強会の発表を見てご興味を持っていただけたなら、こちらのページからご応募ください。

勉強会の開催も随時受け付け中です

今回はフロントエンドをテーマに合同勉強会を開催しましたが、レバレジーズはオールインハウスで開発しておりフロントエンド、バックエンド、インフラ、機械学習と幅広い領域をカバーしているので、フロントエンドに限らず様々なテーマで合同勉強会を開催してくれる企業さまを募集中です。ご興味ある企業さまがいらっしゃいましたらこちらまでご連絡いただけると嬉しいです。

新人エンジニアが振り返る、学生・インターン・正社員におけるエンジニアリングの違いと3つの学び

はじめに

こんにちは、2022年新卒の河原です。

突然ですが、皆さんは今までどのような開発体験をされてきましたか?
学生時代からゴリゴリに開発していた人もいれば、全く違う職種から独学やプログラミングスクールで学んでエンジニアリングに携わっている人など、人によってキャリアは多種多様だと思います。

私の場合はこれまで、学生・インターン・正社員としてシステムの開発に携わってきました。まだ社会人になってから1年と少ししか経っておらず、学生時代の経験もある程度は新鮮に覚えています。

この記事では、そんな私が学生・インターン・正社員でのエンジニアリングを通して痛感した『開発体験の差』と、今後に活かしたい『3つの学び』をご紹介したいと思います。

日々の業務に追われ、過去を振り返ることを忘れがちになっている方々が「私もこんな経験があったな」「僕はどう成長してきただろうか」と思い出す・考えてみるきっかけになるような記事になれば嬉しく思います。

自己紹介

まずはじめに、自分の経歴を軽く紹介させていただきます。

学生時代、高専でコンピューターサイエンスを広く浅く学び、情報系の大学・大学院へ進学して情報系に特化したことを学んできました。
研究は、自然言語と音声といった複数の感覚次元を機械学習させるマルチモーダル感情認識を題目として扱っていました。当時はまだ最近話題のGPTの「GPT-2」が論文として発表され、様々なベンチマークを更新し、GeneralなLLMの台頭にワクワクしていた思い出があります。

その後レバレジーズに内定し、「早くから社会で通用する本格的な開発経験を積みたい」と思い、2021年の8月からエンジニアとして早期のインターンを始めます。
インターンでは、未経験のエンジニアが中心で構成された教育目的のチームにて、小さめの社内システムを要件定義・技術選定から設計・開発まで一通り経験させてもらえました。

そして、去年4月に正社員として入社し、現在は正社員として、若年層領域の事業を展開する『ハタラクティブ』や『キャリアチケット』というサービスで、営業職が使用するSFA(Sales Force Automation)開発に携わっています。
今のチームに移動してきて1年ほど経った状態です。

学生と社会人の違い

開発の『目的』

私が学生と社会人(インターン・正社員含む)で感じた開発体験の最も大きな違いは、開発の『目的』です。
どのように目的が違うのでしょうか?私の経験と合わせて、具体的に説明していきたいと思います。

私の学生時代は趣味や学業の一環で、簡単な

  • 2Dゲーム
  • 組み込みシステム
  • Webシステム
  • AIモデル構築

など様々な開発をしていました。
これらは、学業で必要になったり、興味関心が沸けば「開発してみる!」といった具合で、特に大きな目標はなく『開発を楽しむ目的』でいろんな開発をしてみていました。

しかし、どれも『システムが完成して目的を達成すれば、開発も終わり』のような拡張性がなく、モチベーション頼りの単発な開発でした。
結果として、作り上げたシステムとしての品質は高いとは言えず技術的な深掘りもあまりできておらず、また自身の能力的が成長した実感もあまりありませんでした

それに対して、社会人での開発目的は『利益を生み出す目的』へと変わりました。
社会人は全員「ビジネス的な視点」を持つ必要があります。
それはエンジニアも例外ではなく、開発したシステムを含めて、最終的には市場において競合優位性を確保する「サービス」を作り上げて『利益を生み出す目的』に合致したシステムを開発していく必要があります。

観点の多さと責任範囲

目的に付随して『責任』や『観点』にも違いが生まれてきました。
学生時代の開発観点は、システムの機能性ばかりに注目し、「とりあえず動けばOK!」のような考えが先行していた記憶です。

対して、社会人では利益を生み出すために正確で安全なシステムが、迅速にリリースされる必要があります。
そのため、開発観点はさらに多角的になり、

  • コードの可読性
  • 保守性
  • スケーラビリティ
  • アジリティ
  • セキュリティ

などの品質を満たした開発が必要になりました。

責任の変化なども加えて、感じた特徴の違いをまとめると以下になります。

学生 社会人
目的 開発を楽しむため 利益を生み出すため
モチベーション ・興味のあるものを作ってみたい
・学業で必要になったから
・システム、サービスをグロースさせたい
・社会に役立つシステムにしたい
開発物 いろいろ Webシステム
開発期間 完成すれば終了 継続的な利用がされる
開発観点 ・機能性
・正確性
(上記も品質は低い)
・機能性
・正確性
・保守性
・スケーラビリティ
・アジリティ
・セキュリティ
などなど…
責任 基本自分のみにかかる システム、サービス、会社全体へ影響することもあるため大きい

開発に向かう姿勢

ここまでで、違いを紹介してみましたが、決して学生時代の開発が良くなかったわけではありません。

学生時代の自由な開発がなければ、そもそもエンジニアリングに携わってみようというモチベーションも発生していなかったかもしれません。また、どんなシステムでも作ってみることで、わかることはたくさんありました
現在も、興味のある技術があれば、上手く開発できるかどうかはさておき触ってみたりしています。それは、個人開発の自由さと楽しさを知っているからだと思っています。

しかし、私個人としては作成したシステムが利益につながりより多くの役割を果たすことで、社会の役に立っていると実感できる社会人での開発の方が楽しく感じています。
これは、元々アルバイトなどの仕事が好きであった私の性に合っていたのかもしれないですが、システム開発を通して利益を生み出し、サービスをグロースさせるのは社会人ならではの醍醐味だと感じています。

インターンと正社員の違い

続いて、インターンと正社員で感じた開発体験の違いについてです。はじめに、それぞれの業務内容を説明します。

インターン時代は、小さめの社内システムを要件定義・技術選定から設計・開発まで一通り行いました。新規システムであり、かつ規模も小さいことから採用した技術はモダンなものが中心でした。

そして現在は、正社員としてSFA開発に携わっています。 SFAは、営業プロセスの自動化・効率化を行い、業務上の顧客の流入から売上の確定に至るまでの全てのデータを一元化することで、

  • 営業業務の効率向上
  • データ分析による戦略の立案
  • 施策の効果検討

など多方面に役立てられています。 営業・マーケティング・企画・データ戦略室といった関係者が存在し、システム自体も8年ほど前から存在するため、非常に高機能かつ規模も大きめなシステムです。

開発はスクラム体制で、新規機能開発とCakePHP→Laravelへのフレームワークリプレイス作業がメインです。
技術選定やインフラに触れる機会は減りましたが、複雑な要件を把握して適切なソリューションを考案し、設計・開発を通して解決していくことは、良いエンジニアリング経験になっていると感じています。

それぞれの特徴をまとめると以下のようになります。

インターン 正社員
特徴 社内で利用目的の新規システム 約8年前から開発・運用しているSFAシステム
目的・要件 シンプル 複雑で多種多様
規模 小さめ 大きめ
機能 少なめ 多め
関係者 ・主にエンジニア
・関係者数が少ない
・営業、企画、マーケティングなど
・関係者数が多い
技術 モダンなものが中心 新旧混在
担当業務 ・要件定義、技術選定
・設計
・開発
・運用保守業務(フレームワーク移行・インシデント対応・法務対応)
・新規機能設計・開発
開発 FE・BE・インフラ全て BE中心
開発体制 ウォーターフォール スクラム

システムの『役割』の理解の深さ

特徴や規模、言語・技術が全く違う2つですが、ここで感じたことは「システムの役割を理解する必要がある」ということです。

インターン時代は、『新規社内向けシステム』ということもあり、純粋にエンジニアとして開発に必要な知識や経験を培い『Webシステムの開発』に注力することができました。
これは当時いたチームの目的が「手を動かしながら学習して、PDCAを回し、システム開発に必要な基礎を身につける」ことにあったためです。
作成していたシステムを振り返ると、未経験中心のチームであったこともあり、決して品質が高いとは言えませんでしたが、チームの目的を達成するための役割は果たしていたと思っています。
私個人としても、当時未経験でありながら、包括的な開発体験をさせていただけたことはとても良いファーストキャリアになったと思っています。この時の

  • 業務で知識不足を痛感する
  • 知識不足と感じたことを学習する
  • 学習した内容を業務に活かす

というエンジニアにとっては当たり前のサイクルが、開発体験上大きな成長実感をくれました。

対して、現在の『SFA開発』は、サービスの根幹を支える基幹システムです。メリットである機能の多さやデータの一元化の対価として、デメリットは、

  • 8年前から存在する古いコードと新規のコードが混在すること
  • 複雑な要件・関係者が多いといった特徴による開発の鈍化

などが挙げられます。 これは、例えば、新規機能開発にてテーブル構造を変えれば、そのテーブルを分析に利用しているマーケティング職の業務に影響が生じたりします。

そんなSFAの役割は何に当たるでしょうか?
これは明確で、SFAの利点が上げられると思います。開発した機能や蓄積したデータ活用によってビジネス的な利益に結びついているためです。 そのため、『機能性・拡張性・保守性・セキュリティが比重重めに重要視される』反面、相対的に『UI/UXといった使用性は軽視される傾向になる』ことはあります。

システムの役割が明確で、開発に軸があることで、数々の開発タスクの優先度や重要度を振り分け、サービスや組織全体にとってより良い開発を進めることができています。

システム品質特性は様々な観点がありますが、優先・重要視される観点は『システムの役割』によって多面的に変わると思います。皆さんが携わるシステムはどんな特性を重要視されていますでしょうか?

3つの学び

これまでで学生時代から、インターン、正社員での開発体験の違いを説明してきました。

開発のポートフォリオも目的も技術もそれぞれ違いますが、これらを通して痛感した、以下の3つの学びがあります。

  • 新しい技術が最適とは限らない
  • 負債を生む可能性を常に考慮する
  • 基礎が大事

新しい技術が最適とは限らない

インターン時代は、frourioと呼ばれるフルスタックフレームワークで用意したTypeScript・Next.js・Material-UIなどを用いた開発を行っていました。
対してSFAは、BEはphpのフレームワークであるCakePHP・Laravel、FEはscss、jQueryとReact・Graph-ql(JavaScriptとTypeScript)が混在しています。

インターン時代は新しめの技術が中心でしたが、当時は自分やチームのメンバー含めて、Webシステム開発の知識や経験が浅かったこともあり、以下のようなことが起きていました。

  • インターネット上に参考となる事例が少ないことによる開発のつまづき
  • 発展途上の技術は、カバーされてない箇所もあること
  • 扱う人の知識不足で各技術の利点を活かしきれていないこと

あるあるだと感じる人も多いのではないかと思いますが、特に3つ目はエンジニアにとって無くしていきたいことだと思っています。

対して、SFA開発ではどうでしょうか。

  • 現在主にフレームワーク移行中であるLaravelは、非常に高機能で、開発者としての使い勝手の良さがある
  • FEで利用しているjQueryは現代の主流とは言えないですが、複雑な業務的な要件を満たす機能は果たしてくれています

これらを通して僕が感じたことは、新しい技術のみが万能ではないということです。

「古い技術の方が良い!」というわけではありませんが、どんな技術も

  • 扱う開発者のスキル
  • システム(≒サービス)の性質

によってその価値は変わると思っています。

例えば、エンジニアとして、現在のSFAのFEをjQueryからReactなどのモダンなフレームワークへリプレイスさせたいなという気持ちはあります。
しかし、現在のSFAの特徴として、

  • システムが多機能なことから、リプレイスに要する時間は多大なこと
  • その他の観点と比べると、UI/UXといった使用性が軽視される傾向にあること

があります。

そんなシステムにおいて、FEコードのリプレイスを行うビジネス的な価値は果たしてどのくらいあるのでしょうか?これはとても難しい判断だと思います。

この疑問は、営業職やマーケティング職が数値を根拠に仮説を立てて業務を行う職種の働き方を間近で感じられるレバレジーズで培われた視点かもしれません。
エンジニアはしばしば手段と目的を逆にしてしまうこと(「この技術を使いたいから、これをしよう!」など)がありますが、その行動の価値を証明する根拠を正しく策定しなければ、この後に書く「負債」につながると思います。

負債を生む可能性を常に考慮する

1年前の自分が書いたコードを見ると恥ずかしい気持ちになる方は、経験が浅い方であれば誰でもあると思います。
私自身もそれは痛感しており、それは自身が成長しているという実績でもあると言えますが、意図しない将来的な技術的負債を残しているという事実にも繋がります。

現在のSFAは古めのシステムであるため、

  • 設計思想が今と合わなくなっていた
  • 機能拡張を繰り返した

ことが要因で、コード品質が低下していました。また、業務要件が複雑で綺麗な設計が難しい場合も多いです。
多くのテスト駆動開発や開発アーキテクチャの文献でもそう述べられている通り、将来的な技術的負債を軽減させることは重要です。これがシステムの保守性や拡張性に大きく関わってくることは、フレームワーク移行・新規機能拡張の業務を通して痛感しています。
自分のコードの品質が高いかどうかの判断は難しいですが、品質向上のための学習や仕組みによる解消、適切な指摘が行えるチームビルディング・コミュニケーションを怠らないことが必要だと感じています。

また負債とは、特に技術だけではありません。それは、例えばドキュメンテーションや開発ルール、会議など様々です。

  • 作成したはいいものの、保守されていなくて結局使われていない資料
  • なぜこうなっているのかわからないけど、みんなで守っている運用・開発ルール
  • どの立場として参加はしているかわからず、意見のまとまらない会議

開発だけでなく、仕事をする上では様々な将来的な負債が発生している可能性はあり、それは自分だけでなく、チームや組織にも当てはまります。

  • 本当に解決したい課題は何なのか?
  • その機能はスケールできるのか?アジリティは高いのか?
  • 品質のスコープはどこまでなのか?また、それはなぜなのか?

といった目的と手段の整合性や効果を明確にすることが重要であり、それを正しく行うためには、賛同と同程度に建設的な批判ができるチームや組織が理想であると思っています。

これは開発職以外と関わることが多い自社開発企業におけるメリットであるとも感じます。他職種においても、仮説立てやロジカルシンキングを用いて施策を提案しています。
その姿勢から学べることもたくさんあります。

基礎が大事

全ての体験で共通して感じたことですが、結局基礎が最も大事だなと痛感します。

現代は便利なフレームワークやインフラサービスが豊富な時代ではありますが、最終的にはHTMLやCSS、JavaScript、SQLなど基礎的なWebシステムの技術に帰結すると思います。

インターンやSFA開発、どの開発段階においても、基礎となる部分の知識不足の壁にぶつかり、バグや障害発生の問題の根本を掴めず、適切な対応ができない・対応が遅れることがありました。ですが、逆に基礎を理解していると、新しいフレームワークや技術に対する理解のハードルも下がりました。

つまりは、新しい技術の習得や興味を持つこともとても大事ですが、それ以上に基礎的なスキルが必要不可欠だと感じます。学生時代の勉強や開発が、この基礎の学習において役立っていることは言うまでもありません。

私の場合、最近はBE周りに携わることが多いため、データベースそのものの仕組みや、SQL・データ指向のアプリケーションのようなBEに関わることを

  • 達人に学ぶDB設計 徹底指南書 初級者で終わりたくないあなたへ
  • 達人に学ぶSQL徹底指南書 第2版 初級者で終わりたくないあなたへ
  • データ指向アプリケーションデザイン - 信頼性、拡張性、保守性の高い分散システム設計の原理

等の書籍やWeb上の事例を用いて、基礎から学びなおして応用まで学習の範囲を広げてみています。データ指向アプリケーションデザインはまだ読書中ではありますが、この3冊は非常に有益であったので、BEに関わる方におすすめしたい書籍です。

最後に

学生・インターン・正社員での開発体験の違いと今後に活かしたい3つの学びをご紹介させていただきました。

今回の記事で、自分の体験を忘れないための備忘録と、今後も意識したい学びを書き留めることにより、将来の自分が過去を振り返るきっかけになったと思います。
今後も学んだことをチームや組織に活かせる社会人になるために、BEを中心としてまだまだコンピュータサイエンスを深く学んでいきたいと思います。

読者の皆様も、日々の業務に追われ、新しいことを立て続けに学んでいる日常であると思います。
そんな日々で、過去を振り返る機会が減ってしまってはいないでしょうか?
自分の過去や現在の開発経験のふりかえり、得られた学びをまとめてみることで新たに見えてくるものや自分の目指す方向性を再確認するきっかけになると思っています。

レバレジーズでは、様々な体験ができるシステム開発を行っています。ぜひ、みなさんも一緒にサービスを作っていきませんか?レバレジーズに少しでも興味を持っていただけた方は、是非下記リンクを覗いてみてください!

(詳しくはこちら

株式会社エイチーム様とフロントエンド合同勉強会を開催しました

レバレジーズ株式会社 テクノロジー戦略室室長の竹下です。
2023/3/24に、エイチームさんと、フロントエンドをテーマに合同勉強会を開催しました。 以前もプレイドさんと合同勉強会を開催したことがあるのですが、前回は2社クローズだったところを今回はconnpassで一般公開して開催しました!
また、弊社の開発拠点が東京の渋谷で、エイチームさんの開発拠点が名古屋なので、リモートでの開催でした。

この記事では、弊社のエンジニアの発表内容を簡単にご紹介したいと思います。

発表内容

弊社からは、4人が発表しました。


speakerdeck.com

AWS Amplify Studioと Figmaを組み合わせて、HTML,CSS + Reactを自動生成し、ランディングページの開発効率を爆上げしたという発表です。


speakerdeck.com

代数的データ型(Algebraic data type, ADT)とGraphQLの組み合わせて、TypeScriptのUnion TypeやGraphQLのコード生成を使用したエラーハンドリングの定義方法のご紹介です。


speakerdeck.com

Nuxt2からNuxt-bridgeを経てNuxt3への移行を完了した奮闘記です。


speakerdeck.com

React + Vercelを組み合わせて、Markdownの記述を補助するツールを短期間で作ってみた!という発表です。


We are hiring

レバレジーズ株式会社ではフロントエンドエンジニアも、それ以外のエンジニアも幅広く募集中です。 もし今回の勉強会の発表を見てご興味を持っていただけたなら、こちらのページからご応募ください。

勉強会の開催も随時受け付け中です

今回はフロントエンドをテーマに合同勉強会を開催しましたが、レバレジーズはオールインハウスで開発しておりフロントエンド、バックエンド、インフラ、機械学習と幅広い領域をカバーしているので、フロントエンドに限らず様々なテーマで合同勉強会を開催してくれる企業さまを募集中です。ご興味ある企業さまがいらっしゃいましたらこちらまでご連絡いただけると嬉しいです。

振る舞い駆動開発

speed

はじめに

レバレジーズ株式会社でフロントエンドエンジニアとして勤めている森山です。

今回は振る舞い駆動開発(Behavior Driven Development、通称BDD)をご紹介します。 ここでの振る舞い駆動開発とはDan North氏が提唱しているBDDの要点を掴み、自チーム流に昇華させたものです。

振る舞い駆動開発を導入して最も良かったことは、アジャイルにおいても開発スピードを保ちつつ一定の品質を担保できたことです。 一定の品質というのは機能適合性が担保されているということです。

また振る舞い駆動開発をすすめていく中で副次的に開発者のプロダクトへの理解度や視座が高まり、より良いプロダクトを作ろうという意思が一人ひとりに芽生えたと感じています。

概要

振る舞い駆動開発の目的は以下です。

  • 開発スピードを維持しながら一定の品質担保

振る舞い駆動開発の手順は以下になります。

  • ユビキタス言語の定義
  • ユーザーストーリーの定義
  • ユースケースの定義
  • テストケースの定義
  • プロダクト実装
  • テスト実装

振る舞い駆動開発ってなに?

そもそも私が振る舞い駆動開発をどう定義しているのか説明します。

観点としては以下になります。

  • 目的はなに?
  • 振る舞い駆動開発ってなに?
  • テスト駆動開発とは何か違うの?
  • 振る舞いってなに?

目的はなに?

開発スピードを維持しながら一定の品質担保です。

振る舞い駆動開発ってなに?

端的に言うと「システムの振る舞いに焦点を当てたテスト駆動開発」です。
一般的に振る舞い駆動開発はテスト駆動開発の1つの流派として捉えられています。

テスト駆動開発とは何が違うの?

テストの対象が異なります。

イメージとしては、テスト駆動開発よりも振る舞い駆動開発の方がテスト粒度が荒く、網羅性が低いです。
振る舞い駆動開発はその名の通りシステムの「振る舞い」のみをテストの対象としています。

一方、テスト対象以外はテスト駆動開発と振る舞い駆動開発もテストファーストな開発手法としては同じです。

テストファーストとある通りテストコードを先に書いてから、
そのテストコードをパスするような実装とリファクタリングを繰り返します。

テストファーストは以下のメリットがあります。
致命的な欠陥を開発終盤に持ち越さない。
開発者がシステム要件を深く理解できる。
デグレードを恐れずリファクタリングができる。

ただテストファーストな開発はメリットだけではないと思っています。

以下のような難点も存在します。

  • プロダクトコードのみを書く場合よりも開発が遅い。
  • テストすべき内容や粒度をどのように判断するのか難しい。
  • 仕様が変更された時の影響が大きい。

上記はウォーターフォール開発であればさほど目立ちません。
そもそも短期間で成果を出すことは求められていないですし、
テストで担保したい基準も最初に決定するはずです。
また手戻りがあるとしても要因は考慮漏れくらいで、外的要因による仕様の変更も少ないはずです。
つまりテスト駆動開発の恩恵を存分に享受できます。

しかし上記の難点は、アジャイルな開発だと顕著になります。
特に課題に上がるのは以下です。

  • スプリント期間内でアウトプットを出す難易度が高い。
  • 機能毎にテストの粒度を判断するコストが高い。
  • 仕様変更による手戻りの影響範囲が大きい。

プロダクトコードと合わせてテストコードも書く必要があるので、短期的に見ると開発スピードは落ちます。
そのためスプリント期間内に動くものをアウトプットする難易度が上がります。

またテストはどの粒度で定義するのかという迷いも生じます。
最初に決めることができればよいですが、それも難しいはずです。
なぜなら、システムの最終ゴールが分からないからです。
そもそも開発当初にシステムの最終ゴールが見えないために、アジャイルな組織体制で市場の変動等に適応していく手段を選択していたりするのかなと思います。
テスト粒度の線引が完璧にできないので、機能毎に都度どこまで網羅的にテストをするのか判断していくことになります。
例えば、「データを描画するだけならこの程度で良いか。」、「決済機能は重大なインシデントに繋がるからカバレッジをできる限り高めよう」などです。
また過去に実装した時は適切な厳密さでテストができていたが、機能拡張で再度判断が必要になることもあります。
スプリントの中で都度テストの厳密さを適切に判断していくというのはコストが高いです。

さらに手戻りが発生した時の影響範囲も大きいです。
改修範囲がプロダクトコード + テストコードになるので当然ではありますが、手戻りの改修がしんどくなるのはアジャイルの良さが失われてしまいます。

とはいえテストファーストで一定の品質を保ちつつ開発者のシステム要件の理解度を上げていきたいので、アジャイルで開発しつつもテスト駆動開発の旨味を享受するためにテスト対象として「振る舞い」に着目します。

振る舞いってなに?

振る舞いとは、ユーザに価値を提供できるシステムの動きです。

極端な例ですがECサイトを考えます。
ユーザーが実現したいことはオンラインで欲しい物を購入できることです。
その過程として、「商品をカートに入れる」はユーザが実現したいことを叶えるためのシステムの動きです。
しかし「ボタンを連打できない制御」が施されていたとしてもそれはユーザーが実現したいことに密接には紐付きません。

「商品をカートに入れる」ことができれば、ボタンの連打制御は無くてもいいです。
あれば嬉しいなくらいです。
端的に言えば機能要件よりも非機能要件を重視したいということになります。

またこれは私の持論ですが、困りごとが解決できる手段があれば多少使い勝手が悪くても嬉しいです。
確かに入念なテストをパスしたソフトウェアは安心感があります。
しかし多少レイアウトが崩れていたり、フォームにバリデーションがない状態になっていたとしても課題を解決できる手段があることの方が圧倒的に嬉しいです。

ソフトウェアが提供する価値の種類にもよるので一概にも言えませんが、アジャイルな開発で求められるソフトウェアは上記がほぼ当てはまるのかなと思っています。
つまりテストをする際にもまずは動くことを担保するテストを優先させたいということです。

ただ単純にテストという言葉に引っ張られると大抵「xxxであるべき」という文言を使って理想状態を定義します。
そしてそれを満たしているかテストコードを書いていきます。
「xxxであるべき」となると各テスト項目はビジネスインパクトに関わらず、どれも等しく満たしている必要があるように見えます。
そしてテストを書いていく中でも「xxができていない。」、「yyは担保しなくていいのか?」と不安にも駆られます。

開発者としても「システムとしてあるべき状態を担保するテストを書け」と言われると際限がないように思えます。
しかし「ユーザが実現したいこと(振る舞い)を担保するテストを書け」と言われると自然と機能要件に着目しそれ以上を闇雲に目指すことは無いはずです。

もう一度、この章の冒頭の言葉を引用すると「振る舞いとは、ユーザに価値を提供できるシステムの動き」です。
この振る舞いにフォーカスすることで、アジャイルで開発していく中でも特に必要な機能をテスト対象として選定できます。

また「振る舞い」はコード上ではシステマチックに定義されます。

振る舞いひとつの構成は以下です。

  • Given: システムがこの状態の時に
  • When: この動作をすると
  • Then: システムはこう振る舞う

詳しくは後述しますが、振る舞いは1つのユーザーの1つのアクションに対してシステムがどう動くのかを定義します。
そしてこの振る舞いが複数集まることでユーザーがどの順番で、何を成し遂げたいのかも見えてきます。

振る舞い駆動開発の手順

振る舞い駆動開発の手順は以下になります。

  • ユビキタス言語の定義
  • ユーザーストーリーの定義
  • ユースケースの定義
  • テストケースの定義
  • プロダクト実装
  • テスト実装

上記の手順が生まれた背景・思考プロセスはざっくり以下です。

  • 一定の品質を保ちながら開発をすすめるためにテストファーストな開発をしたいな。
  • テストファーストな開発をするためには、何をテストすべきか決まっている必要があるな。
  • 何をテストすべきか決めるにはシステムがユーザーに提供したい価値や手段を明確にする必要があるな。
  • ユーザーに提供したい価値を明確にするためにはユーザーストーリー、ユースケースの定義が必要だな。
  • ユーザストーリーやユースケースを開発者やPDM等、誰が読んでも一律同じ解釈ができるためにはユビキタス言語の定義が必要だ。

上記の背景・思考プロセスを逆転させて振る舞い駆動開発の手順となっています。

次章から各手順でどんなことをしているのか説明します。

ユビキタス言語の定義

ユビキタス言語とは

開発者やPDMを含むチーム全体の共通言語のことです。

例えば、会社を表現する時にそのまま「会社」という表現を使うのか、「企業」という表現を使うのかをチームの中で決めておくということです。 またプロジェクト独自の概念や造語も含まれます。

ユビキタス言語を定義する目的

目的は以下の3つです。

  • コードやドキュメントを誰が読んでも一律同じ解釈ができる状態にすること
  • システム上での表記揺れを無くすこと
  • 新規参入者のオンボーディング

ユビキタス言語の定義方法

定義方法は簡単で、テーブル形式で記載しています。
以下がその一例です。

ドキュメント 類義語 プログラム単数 プログラム複数 意味
企業 会社、組織 corporation corporations 利益を得ることを目的にして事業を行う組織体のこと。
引き直し 再登録 paymentReload - サブスクリプションサービスを解約していた人が再契約した時に決済予定が記録されること。

各カラムについて説明します。

ドキュメント

開発者やPdMが会話上やドキュメント上で活用していく表現です。

類義語

端的に言うとNGワードのような扱いです。
定義されたユビキタス言語が「表記ゆれを起こすとしたらこんな表現だろう」という言葉が類義語というカラムに記録されます。
なので類義語を見つけたら開発者やPdM間で指摘し合います。

プログラム(単数/複数)

コード上で変数名やテーブルのカラム名として活用されます。
プログラム上でもユビキタス言語が無いと企業idをフロントエンドではcorporationIdと定義しているのに、
バックエンドではcompanyIdという命名で定義しているということが起きてしまいかねません。

念の為複数形も定義しておくと良いです。
基本的には英語の複数形のルールに従えばOKですが、プロジェクト独自の概念や造語があるとブレそうになる場面があります。
概念として複数形が存在しない時はハイフンを入れています。

意味

その単語の意味です。

ユビキタス言語の恩恵

ユビキタス言語の恩恵としては、コードやドキュメント上で顕著に発揮されています。

特にコード上で、企業idをフロントエンドではcorporationIdと定義しているのに、バックエンドではcompanyIdという命名で定義しているというような場面を稀に見かけます。

これの悪いところは、変数名を変更するという改修が顧客に対して価値を生み出さないところです。
ビジネスインパクトが弱いからという理由で修正が後回しにされていくことが多いです。
しかし個人的にこれは大きな技術的負債です。
見るたびに脳内でcorporationId = companyIdという変換でメモリが食われて本当に考えたいことに100%のリソースを避けないことが永遠に続きます。
たった1つであれば問題ないと考えているとどんどん増えるので見かけたら即直してユビキタス言語を更新する方が良いと思っています。

ユビキタス言語は新規開発者のオンボーディングでも役に立ちます。
ユビキタス言語の一覧表を眺めるだけでそのシステムが何をしたいシステムなのか雰囲気をさっと掴むことができます。

ユーザーストーリーの定義

ユーザーストーリーとは

ユーザーストーリーとは、ユーザーができるようになりたいことをまとめたものです。 システムが何を提供すべきかではなく、ユーザーが何をしたいかに焦点を当てます。

ユーザーストーリーの目的

ユーザーストーリーの目的は開発するシステムに引っ張られずにユーザーに提供したい価値を見える化することです。 ユーザーストーリーがあることで開発者は「振る舞い」を実装・テストする際にそもそもその振る舞いは何を実現したいのか?を見極め自分自身でシステムとして適切な機能なのか有効なテストなのか判断できます。

ユーザーストーリーの構成

ユーザーストーリーは以下の要素から構成されています。

  • アクター
  • エピック
  • ユーザーストーリー

それぞれ何を意味するのか説明します。

アクター
ユーザーストーリーに登場する人物の列挙と各人の説明です。

エピック
ユーザーストーリーの骨子です。
エピックはユーザーストーリーよりも1段抽象度が高い概念です。
複数のユーザーストーリーのまとまりがエピックです。

ユーザーストーリー
ユーザーのニーズと背景が2つセットで表現されます。
ユーザーストーリーは箇条書きで記載しています。

ユーザーストーリーの具体例 例としてフリマサイトのユーザーストーリーを書いてみます。

アクター

  • 出品者
    • 商品の出品者
  • 購入者
    • 商品の購入者

エピック

  • 出品者は、商品を出品する。
  • 購入者は、商品を検索する。
  • 購入者は、商品の詳細を確認する。
  • 購入者は、商品をお気に入り登録する。
  • 購入者は、商品を購入する。

ユーザーストーリー

  • 出品者は、商品を出品する。
    • 出品者は、出品する商品の画像をアップロードする。
      • なぜなら、商品がどんな商品なのか購入者に画像で知らせたいから。
    • 出品者は、出品する商品の価格を設定する。
      • なぜなら、商品をその価格で販売したいから。
    • 出品者は、出品する商品の詳細情報を設定する。
      • なぜなら、商品の画像で伝わらない商品の情報を購入者に伝えたいから。
    • 出品者は、商品の出品を完了する。
      • なぜなら、設定した内容で商品を出品したいから。
    • 出品者は、自身の出品リストを確認する。
      • なぜなら、先ほど出品した商品が出品できているか確認したいから。
      • なぜなら、出品した商品の設定内容に誤りが無いか再確認したいから。
  • 購入者は、商品を検索する。
    • 購入者は、
    • …etc

上記のように箇条書きで羅列する形式でユーザーストーリーを書いています。

ユーザーストーリーの定義方法

定義方法の要点は3点あります。

  • フォーマット
  • 行動はシステムを介さないユーザー視点
  • いきなりユーザーストーリーを書かない

1.フォーマット
フォーマットとしては、以下の体裁を守っています。

  • [アクター]は、xxxする。
    • なぜなら、yyyしたいから。

ユーザーのニーズと背景が必ず一対一もしくは一対多で紐付く形式にするためです。

2.行動はシステムを介さないユーザー視点
商品の出品完了に関しては「商品の出品ボタンをクリックする。」ではなくわざと「商品の出品を完了する。」のようにやや抽象度の高い表現になっています。
些細な違いですが、「出品ボタンをクリックする。」になっているとこの時点で出品ボタンがある前提のUIが設計されます。
「完了する。」にしてUI決定の余地を残しておくことで、もしかしたら上にスワイプすることでリッチなアニメーションと共に出品が完了するようなUIになるかも知れません。

また場合によってはシステムが介入しないユーザーストーリーも存在しえます。
例えばシステム上のデータをプリンターでプリントアウトする。等です。
労務系の業務システムであれば帳票を印刷して行政に提出するようなアナログな動きが業務の中に含まれることもあり得ます。

3.いきなりユーザーストーリーを書かない
ユーザーストーリーをいきなり箇条書きで列挙するとユーザーにはそのニーズ以外を満たす余地を与えないタスク指向のシステムになってしまいやすいです。
事前にユーザーストーリーマッピングやオブジェクト思考UIを絡めて定義していくのが良いです。

ユースケースの定義

ユースケースとは

ユースケースとは、端的に言うとユーザーストーリーを具体化したものです。
ユーザーストーリーを実現するためのユーザーとシステムのインタラクティブな動きを表現するものです。
ユーザーストーリーとの違いは、システムが介入するかどうかです。

ユースケースの目的

ユースケースの目的は、ユーザストーリーを実現するための画面上での遷移や操作を表現することです。

単にシステムがどう振る舞うかのドキュメントではなく、「ユーザーストーリーを実現するための」というところが重要です。
システムの振る舞い1つ1つがユーザーストーリーを実現するために適切な動きなのか、適切な導線設計なのか、開発者からも深ぼって確認することができます。

ユースケースの構成

ユースケースは以下の要素から構成されています。

  • アクター
  • エピック
  • ユースケース

それぞれ何を意味するのか説明します。

アクター
ユースケースに登場する人物の列挙と各人の説明です。

エピック
ユースケースの骨子です。
エピックはユースケースよりも1段、抽象度が高い概念です。
複数のユースケースのまとまりがエピックです。

ユースケース
ユーザーのアクションとシステム挙動が2つセットで表現されます。

ユースケースは箇条書きで記載しています。

ユースケースの具体例

例としてフリマサイトのユースケースを書いてみます。

アクター

  • 出品者
    • 商品の出品者
  • 購入者
    • 商品の購入者
    • システム

エピック

  • 出品者は、商品を出品する。
  • 購入者は、商品を検索する。
  • 購入者は、商品の詳細を確認する。
  • 購入者は、商品をお気に入り登録する。
  • 購入者は、商品を購入する。

ユースケース

  • 出品者は、商品を出品する。
  • 出品者は、フリマアプリにアクセスする。
    • システムは、ログイン画面を表示する。
  • 出品者は、ログイン情報を入力する。
    • システムは、トップページを表示する。
  • 出品者は、「出品ボタン」をクリックする。
    • システムは、出品画面に遷移する。
  • 出品者は、「商品の画像アップロードボタン」をクリックする。
    • システムは、OSのファイルシステムを起動する。
  • 出品者は、出品したい画像を選択する。
    • システムは、アップロードされた画像を表示する。
  • 出品者は、商品の価格に3000と入力する。
    • システムは、商品の価格を3000と表示する。
    • システムは、商品の手数料を300と表示する。
    • …etc
  • 購入者は、商品を検索する。
    • 購入者は、
    • …etc

上記のように箇条書きで羅列する形式でユースケースを書いています。

ユースケースの定義方法

定義方法の要点は3点あります。

  • フォーマット
  • ユーザーストーリーと紐ついていること
  • ケースの網羅は不要

1.フォーマット
フォーマットとしては、以下の体裁を守っています。

  • [アクター]は、xxxをする。
    • システムは、yyyする。

2.ユーザーストーリーと紐ついていること 基本的にユースケースは何かしらのユーザーストーリーと一対一で紐ついています。
また、エピックも同様です。
ユーザーストーリーで定義されたエピックは、ユースケース上にも存在します。

3.ケースの網羅は不要 基本的にユーザーストーリーを実現する手段は細かく見ると複数存在します。
例えば、「出品者は、画像をアップロードする」というユーザーストーリーでも以下の3種類のアクションが考えられます。

  • デバイスのカメラを起動して撮影してアップロード
  • OSのファイルシステムを起動してアップロード
  • ドラッグ&ドロップでアップロード

ユースケースはユーザーストーリーを実現するための詳細な挙動なので3パターンのユースケースが想定できますが、
基本的には最も発生頻度が高そうなケースで1パターン書かれていれば良いです。
ユースケースの主たる目的としてユーザーストーリーという1つのフローを実現するための大まかな動きを確認することだからです。

テストの定義

テストケースとは

ここでのテストケースとは、振る舞いをシステマチックにテストケース化したものです。

振る舞いはユースケースの一つ一つから以下のようなフォーマットで作成されます。

  • Given: システムがこの状態の時に
  • When: この動作をすると
  • Then: システムはこう振る舞う

上記の様にGherkin記法と呼ばれる書き方で記載します。

  • Given = 前提条件
  • When = ユーザーのシステムに対する動作
  • Then = ユーザーの動作に対するシステムの挙動

Given、When、ThenのそれぞれをStepと呼びます。
またこれらのStepの塊をScenarioと呼びます。

そして1つのユースケースが1つのScenarioとしてテストケース化されます。

テストケースの具体例

テストケースの具体例としては以下になります。

Feature: 商品の出品

    Background: 前提条件
        Given ログインしていること

    Scenario: 出品の開始
       Given トップページにアクセスしていること
        When 「出品」ボタンをクリック
        Then 商品の出品画面に遷移していること

    Scenario: 商品価格の入力
       Given 商品の出品画面にアクセスしていること
        When 商品の価格フォームに3000と入力
        Then 商品の価格が3000と表示されていること
           * 商品の手数料が300と表示されていること

    Scenario: 商品詳細の入力...

Gherkinではまず上記の様にFeatureとしてユースケースのエピックに該当する大項目を記載します。
その後、各Scenarioに共通する処理があればBackgroundに表現します。
(BackgroundはJestで言うところのBeforeEachのような役割です。)

そこから各Scenarioを列挙していきます。
振る舞いのテストケースでは1アクションnレスポンスの形式になっています。
なので各ScenarioにおけるWhenは1つになるのが一般的です。
1つのアクションに対して複数の動作が発生することはありえるのでThenは複数になることもあります。

テストの実装

Gherkin記法で定義したテストケースに紐付くテストを実装していきます。
テスティングライブラリとしてCypressを活用しているのでcypress-cucumber-preprocessor(以下、CCP)というライブラリを用いています。

テストの実装自体はCypressを用いた実装になりますが、CCPの関数を間に挟むことでテストケースと紐付くテストが存在していることを機械的に担保できるようになります。

例として、先ほどのユースケースに紐付くテストを書くと以下になります。

import { Given ,When, Then } from '@badeball/cypress-cucumber-preprocessor';

Given("ログインしていること",()=>{
  cy.login();
});

// 出品の開始
Given("トップページにアクセスしていること",()=>{
  cy.visit("http://toppage")
});
When("「出品」ボタンをクリック",()=>{
  cy.get('[data-cy="ExhabitButton"]').click();
});
Then("商品の出品画面に遷移していること",()=>{
  cy.url().should("equal", "http://exhabit");
});

CCPは、各Step(Given、When、Then)の関数を提供してくれています。
テストファイルの中ではGherkin記法で書いた各Stepの文面を第一引数に取ってCCPのStep関数を呼び出します。

各Step関数の中では、Cypressのテスト関数がそのまま使えるので対応するユーザーのアクションを定義していきます。
イメージとしてはCypressのE2EテストをCCPのStepでラップしてカテゴライズしているような感覚です。

テストファイル内での各Step関数の第一引数はGherkinファイルで定義した各Stepの内容と完全一致している必要があります。

CCPのアルゴリズムとしては、まずテストケースの中身を上から順番に読み込みます。
その中でStep(Given、When、Then)があればそのStepに紐付く文面をテストファイルの中から探しに行きます。
テストファイルの中でStep関数の第一引数が完全一致したStepの中身を実行します。
完全一致する文面が存在しなければエラーを返します。

以下は「商品の出品画面に遷移していること」というテストが存在しなかった時のerrorです。

そもそもテストが存在しないときには、紐付くテストを定義するようにサジェストされます。
Gherkin記法で記載したテストケースとそれに対応するテストが実装されていない場合は上記の様にテストがfailするので担保したい振る舞いがテストできていることを機械的に検知できます。

サジェストにあるように”pending”という文字列をStep関数で返却するとテストをスキップすることができます。

Then(("商品の出品画面に遷移していること")=>{
  return "pending";
});

テスト結果ではPendingの件数が表示されます。
なのでプロダクトコード実装前に動作を担保したい振る舞いはテストの中身をPendingで全て仮定義します。
プロダクトコードの実装が進むと同時にテストの中身を実装しPendingのテストを潰していきます。
実装結果にPendingの件数が表示されるので担保したい振る舞いのテストが未実装のまま放置されてしまうことも無いはずです。

振る舞い駆動開発の恩恵

最も実感しやすかった恩恵は実装スピードを落とさずに一定の品質を担保できているところです。

元々は、開発者とPdMの目線があっていないことが原因で手戻りが発生していました。

しかし以下がシステマチックに管理されることでその手戻りは激減しました。

  • システムはどう振る舞うべきか?
  • その振る舞いはユーザーにどんな価値を提供するのか?

またテストの実装漏れも少なくなり、実装段階から品質を担保することができるようになりました。

そして開発者が機能の背景を理解していることで「ユーザーがこのニーズを満たしたいのであればxxの機能があったほうが良いのでは?」等の新たな提案も生まれやすくなりました。

振る舞い駆動開発の副次的な恩恵として開発者がやらされ仕事で実装するのではなく、視座を高くもって開発に取り組むことが実現できたことも良い点でした。

終わりに

いかがでしたでしょうか。 私の所属する事業部は発足してまだまだ成長段階でプロダクトの状況も0-1フェーズにあります。なのでこういったどういう構成で開発を進めるべきかなどを検討・決定していける機会が多いです。この記事をご覧になり、この事業部を一緒に盛り上げてみたいなと思う方が1人でも増えれば嬉しく思います!(詳しくはこちら

レバレジーズで歩む、ユーザーファーストなエンジニアとしてのキャリア

はじめに

こんにちは、レバレジーズ株式会社の髙橋です。2020年に新卒エンジニアとして入社して以降、エンジニア向けQ&Aサイト「teratail」のメンバーとして働いています。最初の2年弱を企画メンバーとして過ごした後に、開発メンバーとしてのキャリアを今日まで進めてきました。

本記事では、新卒から2年弱を開発せずに過ごした結果、

  • どのような経験をし、
  • どのような能力を身につけ、
  • どのようなエンジニアへと成長して行ったのか

を、時系列に沿って以下の7章綴りでお送りいたします。

本記事(私のキャリアパス)を通して、なかなか知る機会のないレバレジーズでのエンジニアキャリアをお伝えし、少しでもレバレジーズの魅力をお伝えできればと思います。

また、本記事では私がキャリアを歩む上で抱えた苦悩も紹介しています。 エンジニアでありながら、開発をせずに過ごす上で、本記事で紹介するような苦悩はつきものと思っております。全てが良いことだけで歩めるキャリアではなかったため、同じキャリアを歩まれている方に向けて、同じ悩みを抱える私を知ってもらうことでエールを届けられたらと思っております。

※ お忙しい方は、後半2章をご覧ください。現在の姿はここに詰まっています。

対象読者

対象読者は以下になります。

  • レバレジーズでのエンジニアキャリアに興味がある方
  • エンジニアとしての仕事に興味がある方
  • エンジニア経験が浅く、今後のエンジニアとしてのキャリアパスが定まっていない方、あるいは、悩んでいる方

入社前から変わらない、私のキャリア目標

私のキャリアの目標は「あったらいいな」を実現できるエンジニアとなり実現していくことです。「あったらいいな」とは、自分だけでなく周囲のさまざまな人が抱えている悩みを解消するものであったり、あるいは、夢や空想上の欲しいと思うものやサービスのことです。私がこのキャリアの目標を立てたときは、ソードアートオンラインという作品のナーヴギアというゲーム機に憧れがあり、こうした憧れを実現できるような人になりたいと思っていました。そのためには、自分を含め、人が持つ「あったらいいな」を分析し、システムとして表現できる能力をつける必要がありました。

こうして、エンジニアとしての就活をはじめ、レバレジーズのエンジニアとなり、キャリアをスタートさせていきます。

エンジニアの課題解決を促進していく。これからのteratailを考える

入社後の研修を経て2020年7月にエンジニアとしてteratailチームに配属されました。最初は、teratailのサービスとシステムの理解を深めるために、過去のドキュメントの確認や簡単なバグの修正を通してオンボーディングを進めました。

当時のteratailは開発と企画の2チームがあり、開発はサービスの運用や機能追加・修正などを担当し、企画はteratailのユーザーを分析し、どのようにサービスを拡大するかを企画することをメインで行っていました。

エンジニアとして配属された私は当初、エンジニアとして開発スキルを伸ばすために開発をすべきであると考えていましたが、ユーザーを分析しサービスを改善・拡大するという企画チームの業務内容を知ったことをきっかけに、自分の目指すエンジニアになるためには企画での経験値を積んだ方が良いのでは? と思い始め、teratailでの企画に興味を持つようになりました。

さて、なぜエンジニアである私が、開発ではなく企画に興味を持ったのでしょうか。

理由は大きく二つあります。

一つは、自身のキャリア目標を踏まえた時に、ユーザーの目線に立って企画を進める経験は重要で、必要な能力であると考えたからです。「あったらいいな」を考えるためには、

  • 誰をターゲットとして
  • どのようなことに悩んでいて
  • 何を必要としていて
  • なぜそれを必要としているのか

といった視点で考察できる必要があると考えており、このような視点で考察する能力を養ううえで、企画することは学びを得られる場であると考えました。

もう一つは、teratailでの企画の仕事はやりたくてもなかなかできない仕事だと考えたからです。teratailでの企画は、機能の改善のための企画だけでなく、サービスの今後を考え、どのように拡大していくのかを決めることまで担っていました。こうしたタスク(特に後者)に入社まもないうちから着手し経験を積めることも、自身のキャリアにとってプラスになると考えました。

そして、企画のタスクに手を挙げ、teratailを利用するユーザーの課題解決に向けた企画を進めることになります。

抱える苦悩、同期の成長とベクトルが違う自分

企画の仕事に携わるようになりしばらくした頃でした。

新卒のエンジニアとして入社した同期が皆、それぞれの配属先でエンジニアとしての成果を出すようになりました。同期との交流が盛んだったこともあり、互いが今どのような開発をしているのかを話す機会も多く、同期の活躍が自然と耳に入ってきます。

最初はこうした話を嬉しく思っていたのですが、次第にある不安を抱えるようになります。

それは、同期と比較した時の自身の「開発力の低さ」と「成果を実感しにくい」ことです。

配属されて間もない頃から企画に取り組んできていたため、開発はほとんどできていませんでした。同期が業務を通して開発力を伸ばす一方で、私の開発力は停滞したままでした。エンジニアであるのに開発力が伸びていない状況は、エンジニアとしての自信をなくす要因となりました。

そして、企画を通して実感できる成果のなさが、さらに自信を無くさせることになりました。開発では、作ったものをリリースすることですぐにエンドユーザーに届き、利用してもらえるため、目に見えた成果を実感しやすいです。一方で企画の仕事は、ただ企画をするだけでは目に見える成果とし現れず、そこから要件定義や開発を通して初めて形となります。また、企画としての完成度が高くなければ開発に動き出すことができず、何度も企画をやり直し、終わりの見えない仕事に成果を実感することはありませんでした。

こうして、同期との開発力の差の広がりや実感できる成果の少なさから、自分の仕事に自信をなくしていきました。

大規模なプロジェクトが動き出す

企画をしている頃、開発チームでは、CakePHPをTypeScriptを使用したマイクロサービスへとリプレイスするプロジェクトが始まります。

※ 本記事では技術的な内容は記載しません。もし興味がありましたら、これに関する記事を公開しておりますので、以下からご覧ください。

tech.leverages.jp tech.leverages.jp

1年以上をかけてリプレイスを行うことになるのですが、私はリプレイスプロジェクトへはほとんど参画しません。これまで通り企画に従事しつつ、開発メンバーが行っていた保守運用の仕事を引き受けることになります。ここで、ようやく開発に少しずつ着手することになりました。

そして、リプレイスプロジェクトも終盤に差し掛かった頃に、サイトの動作テストを担当することになります。

比較的規模の大きいサイトでもあったため、一時的なテストチームを組むことになるのですが、エンジニアは私のみでした。限られた時間でテストを完了するには、非エンジニアの方でもスムーズにテストを進められるテスト項目書を作成する必要がありました。

このテスト項目書の作成の際に、企画で培ったユーザーやサービスを見る力が活きることとなります。それは、

  • サービスを利用するカスタマー
  • テスト項目書を利用するテストチームのメンバー

の2者のユーザーを考えてテスト項目書を作成することです。

サービスを利用するカスタマーが、普段、teratailをどのように利用しているのかを考えることで、サービスとしてあるべき姿をテスト項目として抽出し、 テスト項目書を利用するデバッグチームのメンバーが、どのような属性を持っているのか(どれくらいITリテラシーがあるかなど)を考えることで、テスト手順を書く際に理解しやすく表現することを自然とできるようになっていました。

このような形で企画の時に培った能力を発揮できていたことで、過去に感じられなかった成長を感じることができました。

こうしてデバッグを終え、リプレイスのプロジェクトが一段落しました。  

そしてエンジニアへ

大規模なリプレイスプロジェクトが一段落したころに、本格的に開発をすることになります。バックエンド開発に始まり、次第にフロントエンドに寄っていき、現在に至るまで、フロントエンド開発に携わっています。

開発をする上でも企画の経験が活きる瞬間があり、また、過去に感じていた不安が払拭し始めます

開発メンバーとして開発を始めたての頃は、設計や言語仕様への理解が浅く一つ一つのタスクをこなすだけで精一杯なことが多く、とてもエンジニアとはいえないレベルでした。それでも、実装したものをすぐにユーザーに利用してもらえ、Twitterやサービスのお問い合わせを通して多くのフィードバックを受けられるようになったため、成果を実感しやすくなりました。開発を通したこの体験が、過去に抱えていた不安を次第に解消してくれました。

そして、開発に慣れてからは、協働するメンバーが読みやすいコードとなるように意識したり、作業時間の短縮による時間的な余裕が生まれ、機能追加と併せてリファクタリングできる箇所を併せて修正したり、簡単に直せるバグや機能追加であれば対応することができるようになっています。

ここまでの開発経験を通して、ある程度自走したエンジニアとしてチームに貢献ができるようになりエンジニアとして自信が持てるようになっていきました。

自分で企画し、要件を定義し、開発できるエンジニア

バックエンド・フロントエンド両方の開発に慣れ、開発に自信がつき始めたころ、小規模な機能追加プロジェクトを立ち上げることになりました。このプロジェクトでは、企画、要件定義、プロジェクトマネジメント、開発全てに携わる形で、これまでに得た能力を掛け合わせて遂行しました。

企画や開発ではこれまでに体験し得た能力をそのまま活かし、要件定義やプロジェクトマネジメントでは、企画や開発を通して得たユーザーファーストな思考から、

  • その機能を通してサービスのユーザーにどのような体験を生み出し、実現するか
  • プロジェクトを遂行する上で、いかにしてメンバーの働きやすさを実現するか

を自然と意識して取り組むことができるようになりました。

また、「企画、要件定義、プロジェクトマネジメント、開発全てに携わりながらプロジェクトを遂行する」ことは、私のキャリア目標である「「あったらいいな」を実現できるエンジニアとなり実現する」ことでもありました。

3年目にして、必要な基礎能力を一通り揃えることができ、こうして一つの機能として実現できたことで、「あったらいいな」を実現できるエンジニアとしてのキャリアを始められた気がします。

レバレジーズで歩む、ユーザーファーストなエンジニアとしてのキャリア(まとめ)

これまでのまとめです。ここまでお読みいただいた方、本当にありがとうございました。拙く長い文章で読みにくかったことと思いますが、あと少しだけお付き合いください。

今日に至るまで、多くのことに挑戦させていただきました。サービスの企画を通してユーザー志向を身につけ、設計や開発の際に応用することで、サービスのユーザーや協働するメンバーに価値を提供することができるようになりました。(道中で苦悩もありましたが、、、

とはいえ、まだまだ至らぬ部分も多く成長できる余地が多いため、今後も「あったらいいな」を実現するエンジニアとして、より多くの価値を提供していけるように努めて参ります。

新卒からの3年間をこのように歩み、「あったらいいな」を実現するエンジニアをスタートさせることができたのは、「エンジニア = システム開発をする人」という枠にとらわれずに、さまざまな職域に挑戦できるレバレジーズの文化が大きく関わっています。レバレジーズには、こうした挑戦をするメンバーを支えてくれる上司やメンバーが多くいます。私の他にも開発以外の職域を経験しているエンジニアは多く、それぞれが違ったスキルを持ち、関わり合うことでより大きな価値を生み出しています。

本記事を読んで、レバレジーズのエンジニアとしてのキャリアに興味を持ってくださった方は、ぜひ、採用フォームよりご応募ください。

最後までお読みいただき、ありがとうございました。

https://recruit.jobcan.jp/leveragesrecruit.jobcan.jp

【Architect New World on AWS 2022】ITエンジニア特化型Q&Aサイトteratailを 言語、DB、クラウドなど フルリプレイスした話

レバレジーズ株式会社 テクノロジー戦略室室長 兼 テラテイルチームリーダーの竹下です。

Architect New World on AWS 2022のイベントで発表した際のスライドです。 teratailのリプレイスのインフラ面に注目した発表になっています。

現在レバレジーズでは一緒に働いてくれる仲間を募集しています。ご興味のある方は、以下のリンクからご応募ください。
https://recruit.jobcan.jp/leverages/

テックフェス2022秋レポート React Suspense ~ v18から見えること ~

はじめに

こんにちは。レバレジーズ株式会社の松本です。普段はHRテック事業部で主にフロントエンドの開発を担当しております。 今回の記事では、入社2ヶ月の私がテックフェス全体のレポートと、弊社フロントエンジニアの小林がReact18について発表した「Parce que j’aime la React.」を受けて、追加で調べたり試したりしたことをご紹介したいと思います!

テックフェスとは?

レバレジーズグループに所属するエンジニアを対象に社内で半年に一度行われている技術の祭典です。エンジニアが新しい技術に興味を持ち、勉強をするきっかけを作ることを目的とし、グループ全体の技術力向上を目指します。

11月22日行われたテックフェス2022秋では、「まずは知ろう。次に学ぼう。そして明日使おう」というテーマで開催されました。

テックフェス全体について

当日の流れは、有名な「テスト駆動開発」の日本語訳をされた和田卓人氏をお招きし、「質とスピード - ソフトウェア開発の典型的な誤解を解く(2022年秋版)」の基調講演から始まり、Sessionが2時間弱、LTが30分程、最後にパネルディスカッションが1時間程というタイムスケジュールでした。

オープニング

基調講演(和田卓人氏)

Sessions(30分 × 4名の弊社エンジニア)

LT(5分 × 5名の弊社エンジニア)

パネルディスカッション(1時間 4名の弊社ベテランエンジニア)

パネルディスカッションでは、「ITエンジニア35歳定年説について語る」というテーマで、意見を交わしていました。

・面白かった発表
特に面白かった発表は、個人的には和田卓人氏の発表と最後のパネルディスカッションでした。 和田卓人氏の「質とスピード」についての発表では、スピードのために犠牲にしようとしている品質とは何を指すのか、品質とスピードはトレードオフではないことを経験談やデータに基づいてお話ししていただきました。 スピードおよび質とトレードオフなのは教育、成長、多様性への投資であるというお話もあったので、内部品質(スピードは落とさない)への投資はエンジニアだけでなく事業会社全体にとって重要であると感じました。

また、最後のパネルディスカッションも個人的には非常に面白かったです。 一般的に、「ITエンジニア35歳定年説」というのはネガティブな意味で広まっていると思います。 調べてみると一般的に35歳定年説と言われているのは、学習能力の低下や体力の低下が理由とされているようです。

ただ、今回はそれとは反対にポジティブな印象を受けました。 登壇された方々もキャリアを積むにつれてコードを書くことが減ってきているとのことでしたが、前述したネガティブな理由ではなく、できることが増えたことで業務の幅が広がったことが大きな理由の一つとなっているようでした。 エンジニアに関わらず、年齢に関するトピックではネガティブに語られることが多いイメージだったので、今回はポジティブな話を聞くことができて非常に良かったなと感じました。

・関心があった発表
SessionsやLTの発表も非常に面白かったです。また、個人的には弊社フロントエンジニアの小林によるReactについての発表(30分のSesssion)「Parce que j’aime la React.」は、普段触れている技術領域ということもあり非常に関心がありました。 今回は、この発表から何を知って、何を学んで、何を使ったのかについても共有できればなと思います!

何を知って、何を学んで、何を使ったのか?

・知ったこと
小林の発表ではReact18で提供されるものとして、並行処理レンダリング、Suspense(正しくはアップデート)の紹介がありました。 例えば、以下のような実装だと、FetchComponent内でPromiseがthrowされている場合(サスペンドした場合)は、fallbackで指定されているComponentが返されます。このPromiseが解決された時はFetchComponentが返されます。

function App() {
 return (
     <Suspense fallback={<Spinner />}>
       <FetchComponent />
     </Suspense>
 );
}

また、Reactの日本語公式ドキュメントには、以下のような記述があります。

サスペンスにより、「UI ロード中状態」というものが、React のプログラミングモデルで宣言的に記述可能な主要コンセプトに昇格します。

今まではuseQuery等を利用してloadingの状態を実装者が管理し、それを用いてUIを分岐させるような実装をしていた方も多いと思います。私も同じような実装をしておりました。

この分岐のロジックをReact側が担ってくれるようになるため、我々はloadingの状態やそれを利用した分岐に関心を持つ必要がなくなり、ロード中とロード完了後のUIを宣言するだけで良くなったということだと解釈しています。


・学んだこと
React18で提供される機能の一つとしてTransitionというものがあります。今回はこの機能について学んでみました。

Transitionは更新処理に優先順位をつけたり、中断するための機能です。この機能では、更新処理を「緊急性の高い更新」と「トランジションによる更新(緊急性の低い更新)」で区別しています。緊急性の高い更新は即座にUIを更新します。一方、トランジションによる更新では緊急性の高い更新が発生したら更新処理を中断し、最終的な結果のみを返します。これはSuspenseと合わせて利用することもできるようです。

また、React18について学んでみて面白かったのは、この更新処理に優先度をつけたり更新処理を中断するような機能は ”React Fiber” というアーキテクチャによって実現可能になったということです。

Fiberについて調べていた中で、こちらの記事がとても面白かったです。 ”React Fiber”はReact16から採用されたもので、React16以前とは仮想DOMを更新してUIに反映するアルゴリズムが変更されているとのことです。今までは仮想DOMを上から再帰的に更新していたものが、各ReactElement一つ一つに対して更新処理が用意されるため、非同期的に仮想DOMを更新することが可能になったとのことみたいです。

また、少し古いものですが、こちらにも以下のような記載があります。

The goal of React Fiber is to increase its suitability for areas like animation, layout, and gestures.

“suitability”という単語が使われているように、FiberはUIの動きを絶対的に早くするものではなく適性を高めること、つまりUXの向上を目的にしていると考えられそうです。 この目的を達成するための基盤にFiberが必要で、今回のReact18で導入された機能はまさにこの目的を達成するための具体的な方法の一つと言えそうだなと感じました。


・使ったこと
今回学んだ内容は業務ですぐに使える内容ではないこともあり、ここではサンプルを触ってみた感想のみにしようと思います。公式のReact Docsに載っているuseTransitionのサンプルコードを手元で動かしてみました。 所感としてはSuspenseは比較的理解しやすく感じた一方で、useTransitionは思っていたよりも腰を据えて学んでいく必要があるものだなと感じました。

SuspenseもuseTransitionも背景には並行処理レンダリングがあって、私たちが見えている画面の状態とは別でもう一つ状態をもっていることが少し理解できました。 今後遠くない未来で実務での利用もありそうなので、引き続きインプットを続けていこうと思います。

最後に

今回の記事では、テックフェスで知った内容からReact18について自分なりに学んだことを書かせていただきました。ReactはUX改善のためのアップデートを続けているというのが非常に面白かったです。また、テックフェスは非常に魅力的な発表ばかりで、話を聞いていてとても楽しかったです。 私は今年の9月に中途で入社したばかりですが、このように組織内での技術の共有があるのは、ナレッジ共有の観点からも非常に有意義だと感じています。 皆さんもレバレジーズで一緒に働いてみませんか? レバレジーズに少しでも興味を持っていただけた方は、こちらからエントリーをお願いします!

recruit.jobcan.jp