SmartHR Tech Blog

スマートエイチアール開発者ブログ

Ruby on Rails 初心者勢が SmartHR に入社して初めてのアプリを作るまで

こんにちは。エンジニアのrisacanです。去年末から年始にかけて、SmartHRの開発チーム内でRailsのOJTをしていただきました。 その内容を紹介します! 😊

Rails OJT

今回のRails OJTは12月に入社したエンジニア2名を対象に実施されました。 まるまる15日間、他の業務はせずOJTのみを行いました。2人ともソフトウェア開発の経験はありますがRailsは未経験で、Rails Tutorialを1周やり終えた状態からのスタートでした。

お題

今回のOJTは、1人1つずつ、お題に沿ったアプリを一から作るような内容となっています。 以下のような内容です。

# 研修の内容

以下の要件を満たす「経費精算アプリ」を作ってください

- 事業所アカウントを新規登録してログインできること
- 事業所アカウントには複数のユーザが紐づくこと
- ユーザには管理者権限と従業員権限があること
- 管理者権限では以下の操作ができること
    - 従業員からの申請管理
        - 承認・却下を行う
        - その際、コメントをつけられること
    - 月ごとの申請管理
        - 合計金額表示
        - 申請種別ごとの数を出す
        - その他気がきく機能
- 従業員権限では以下の操作ができること
    - 経費精算の申請
    - 申請の取り消し
        - 申請の修正は不可とする
    - 申請した経費精算の確認
- 申請には以下のステータスを持たせること
    - 承認待ち
    - 承認済み
    - 却下

指定されたGemを使いつつ、これらの要件を満たすアプリを作ることがOJTのゴールとなります!

進め方

アプリの設計

まずは、要件からモデルと画面を設計するところから始めました。 モデルはKibela上にUMLで描画し、プロトタイプはSketchとHTMLを書き出すプラグイン( markhorgan/click-thru-prototype )を利用して作成しました。

f:id:risacan:20180216134608p:plain

Pull Requestでのやりとり

コードの管理はGitHubを使い、レビューもPull Requestで行いました。 f:id:risacan:20180215185524p:plain

ペアプログラミング

つまったところは随時ペアプログラミングをしてもらいました。 ペアプログラミングにはAtomのTeletype for Atomを利用しました。Teletypeを使うと、複数人がそれぞれのラップトップから1つのファイルを同時に編集できます。今回は、私のローカルのファイルをチューターと同時に編集しました。タイピングを見てもらえたり、自分の手が追いつかない箇所は代わりに記述してもらってさっと次の課題に進めるため、とてもおすすめです。

ペアプログラミングで、デバッグの方法や、よく使われるイディオムなどを次々と教えてもらいました!

フィードバック会

研修終了日から2日前に、OJTをうけている2人とチューター2人でフィードバック会を開きました。 改めて新規登録〜経費登録までの流れを触ってみて、統一感のなさ、ミスリーディングなUI、不親切なページングなどの指摘を受けました。 1人で開発していると個々の機能の実装に集中してしまい全体的な使いやすさ・デザインが後回しになっていたため、とても貴重なフィードバックでした。 また、最終日まで時間がないなかでのフィードバックだったので、どの部分を優先的に実装するか判断する練習にもなりました。

成果物

最終的にこんなアプリができました。

1人目

f:id:risacan:20180216135015p:plainf:id:risacan:20180215185752p:plain

経費の状況を可視化したところがポイント!

2人目

f:id:risacan:20180216155218g:plainf:id:risacan:20180215185809p:plain

こちらは、キャッチーなLPでデモ映え!

OJTの前と後

RailsやGemに慣れた!

Rails OJTをしていたことで、実際の業務にスムーズに移行できました。Rails内で目的のコードの場所のあたりをつけられるようになったこと、Gem特有のファイル・設定を認識できるようになったことなどが理由です。

UI / UXを意識する視点を得た!

自分がゼロから立ち上げたアプリをレビューしてもらう機会って実は少ないと思います。当たり前ですが、ただ本を読んでインプットする以上の気づきとがあり、良い経験になりました!

チームに慣れた!

チューター以外のエンジニアにもPull Requestでレビュー/コメントをしてもらいました。コードを媒体にすることで、違和感なくコミュニケーションできました。 業務のルーティンに組み込まれる前段階でレビューのやりとりが練習できてよかったと思います。

オフィス移転した! 🚚

オフィスがPMO半蔵門へ移転しました 🚚 f:id:risacan:20180215191816j:plain f:id:risacan:20180215191838j:plain

おわりに

今回、OJTをしたことで迷わずスムーズに業務に移行できました。また、フルに時間を使って設計と実装ができ、とても楽しかったです! チューターのおふたりとエンジニアのみなさんに感謝です。ありがとうございました💐

チューターを担当してくださった @meganemura さんはRails Developers Meetup 2018に登壇します! 🙌 これは必見! 会場で握手だ!