Scala、Angular未経験の中途エンジニアから3週間研修の体験談
はじめまして
ネクストビートでWebエンジニアとして働いているキムと申します。
ネクストビートは今年7月入社で、7月下旬からキズナコネクトというサービスの開発を担当しています。
ネクストビートには中途エンジニアScalaのキャッチアップ等のために約3週間のプログラミング研修を用意しています。
私の場合も前職ではサーバサイド側はJavaとRuby、Python でフロント側は業務でReact、個人の学習でVueを触った程度で、ScalaとAngularは全く経験なしの状態でした。
この状態から3週間の研修で私が得られたこと、学んできたことを共有し、これからScala、Angular未経験でネクストビートの応募を検討している方々の参考になればと思います。
研修目標の設定
研修を始める前にまずは研修の目標を設定しました。
研修の期間内でネクストビートが使用しているツールや技術知識を全て身につけることはできないので、チーム配属を想定して、何が必要か３週間でどこまでできるかを考えた上で目標を設定しました。
- Scalaコードの書き方（関数型プログラミング）に慣れる
- Play Frameworkの全般を理解する
- Angularのプロジェクトを作る
列挙した目標も3週間では相当高いハードルだと思いましたが、とりあえず研修の方向や集中するべきものについて自分の頭の中に整理することができました。
基礎研修
基礎研修では、Scalaの標準ライブラリを中心に学習して行きました。
研修は社内で用意している研修資料があり、Option、Seq、Futureなど、標準ライブラリの概要、機能について研修を行います。
各研修の学習後は練習問題があり、それを解決しながら学習した知識を固めていきます。練習問題は社内のSlackに提出し、提出した回答を検討して正解の可否やもう少し改善できることをトレーナーが教えてくれます。
標準ライブラリ研修の後は追加の応用問題が用意されていて、もう少し難易度高い問題を解くことで、更にScalaの標準ライブラリを理解することができました。
研修の資料以外でも下記の資料がScalaの勉強に役に立ちました。
Scalaの標準ライブラリの機能が一目で見れることができ、大変参考になりました。
こちらの資料も参考にしながら研修を行ったことで、研修目標の
Scalaコードの書き方（関数型プログラミング）に慣れる
が少し実現できたかと思いました。
応用研修
応用研修では、Play Frameworkで基本的なCRUD機能を持つTodoアプリを作成しました。
こちらにはプロントエンドのフレームワークを使わずにTwirlというPlay Frameworkのテンプレートエンジンを使ってサーバサイドレンダリングでページを表示します。
TodoアプリはただのPlay FrameworkでのWebアプリではなく、追加で弊社のプロダクトで使っているOSSであるIxiaSを利用してTodoアプリを作っていきます。
研修資料としてはTodoアプリのサンプルコードがあり、そのコードから環境設定や基本的なCRUDが実現でき、Play Frameworkの色々な内容を理解しつつTodoアプリを作っていきました。
基本的には研修資料とフレームワークのDocsを参考にしましたが、研修中にもネクストビートの実際のプロジェクトを参考にすることができ、そちらも参考にしながら問題なく応用研修を行うことができました。
Angular導入
応用研修の後は、TodoアプリをAPI化してAngularを導入してみました。
Angularを導入するために、先に既存のTodoアプリをAPI化してその後にAngularのプロジェクトを作る必要がありました。
なので、簡単ではありますが、既存のTodoアプリからイベントを洗い出し、そこから必要なAPIが何かをまず考えてみました。
必要なAPI
- 一覧表示のAPI
- 削除のAPI
- 新規作成API
- IDに該当するTodo情報API
- 更新API
その後に実際に既存のTodoアプリをAPI化するための調査をしました。
TodoアプリのAngularプロジェクトをAPIと繋ぐために必要なものはCORS設定とJSON設定でしたのでそちらを中心に学習してTodoアプリをJSONデータで受け渡しするよう上記の必要なAPIを実現して行きました。
CORS
Angularプロジェクトを別のポートで起動するので、Play Framworkで提供しているCORS制御について学習しました。
JSON
API化することによりデータの受け渡しはJSONになるためPlayのJSONデータ扱いについても確認して行きました。
Play FrameworkのDocs、ネクストビートの実際プロジェクトを参考にしながら、応用研修で作成したTodoアプリをAPI化することにことができました。
Angularのプロジェクト準備
Angularのプロジェクトを構成するために、当然ですがAngularの学習が必要になりました。
ですが、このAngularプロジェクトを準備するタイミングで研修の時間が1週間半ほどしか残っていない状態でしたので、Angularを完全に学習する時間はなさそうでした。
そこで、ReactとVueを学習した経験を思い出しながら、AngularのDocsから優先度が高いものを先に考えました。
優先度高いと思った機能
- コンポーネント
- テンプレート
- ルーティング
- フォーム
- HTTPクライアント
- 依存性の注入
優先度高いと思った機能から学びながらAngularの環境構築を行いました。Angularの環境構築を完了して機能を実現する中で追加で下記のライブラリが必要になりました。
RxJS
Angularには非同期またはコールバックベースのコードの作成のためRxJSというライブラリが採用されていました。特にAPIを繋ぐ処理やそのAPIの処理が終わった後の動きなどを制御するため必要なライブラリです。
RxJSはObservable、Observer、Operators、Subscriptionなどの概念があり、Operators機能だと何十種類以上も存在しているので、全てを理解することは厳しいですが、意外と実際のプロジェクトに使っている機能がそんなにありませんでしたので、実際のプロジェクトを参考にしながら理解して行きました。
NgRx
NgRxはAngularで使っている状態管理のライブラリです。
Reduxベースで作られていてAngularでコンポーネント間で状態共有ができるライブラリになります。
NgRxの学習はDocs以外で下記の記事が参考になりました。
この記事を読みつつAngularプロジェクトにNgRxを導入しました。
NGXS
NGRXよりさらに簡単なコードで書ける状態管理ライブラリです。
NgRxを導入したAngularプロジェクトをNGXSに変えるようにして、NgRxとNGXSの違いを理解して行きました。
実際にNgRxからNGXSに変えてみてすごくシンプルにコードができ、可読性も良いライブラリでした。
NGXSの学習はDocs以外で下記の記事が参考になりました。
Angularプロジェクトと APIの結合
AngularプロジェクトにTodoアプリから改造したAPIを結合しながら画面を実装して行きました。
画面の実装はAngular Materialを利用しました。Angular Materialは色々なUIコンポーネントを提供していて、簡単にUIを実現することができるライブラリです。
応用研修で作ったTodoアプリと同じ機能を1画面ずつ実装していくことで、TodoアプリにAngularを導入することができました。
認証機能の実装
Angularの導入まで終わり、研修期間が少し残っていた状態でしたので、認証機能の実装に挑戦して見ました。
IxiaSではPlay Frameworkに認証機能を実現するためのものがあり、IxiaSの理解も深めるためにそれを用いてTodoアプリに認証機能を追加しました。
社内にはいい資料をまとめた資料集があり、その資料集の内容を参考にしながら、IxiaSの認証機能を把握して行きました。
IxiaSの解析は、Scalaの機能や機能設計にも大変参考になりました。
ここまでで、3週間の研修が無事に終わりました。
最後に
本記事では3週間の研修について体験談を紹介いたしました。
研修の3週間では期待以上の成果はあったと思いますが、これで全てを学習したとは言えません。
ですが、この3週間の経験を元に今後も所属している事業に取り組んでいながら頑張って行きたいと思います。
最後まで読んでいただき、ありがとうございます！
We are Hiring!
「人口減少社会において必要とされるインターネット事業を創造し、ニッポンを元気にする。」
を理念に掲げ一緒に働く仲間を募集しております。
バックエンドにはPlay Framework（言語はScala）、フロントエンドの開発には主にAngularを用いています。フルスタックに開発したい！という方のご応募をお待ちしております。
