React & React Nativeで最高のオンライン指導体験を作るエンジニア募集中！

これまでマナリンクのWeb実装はVue(Nuxt)をメインで行ってきました。

加えて、前段にFastifyを置いているため、Encapsulation機能を使って一部の機能のみをReactで開発できます。

先生のプロフィールページなどは引き続きVueで実装しつつ、アプリとの共通機能はReactに統一して開発していきます。

バックエンドはFirebase、Firestoreをメインで構築しています。Firestoreはクエリの癖が強いですが、リアルタイム通信が容易に実装できるシステムを管理不要で利用できるメリットもかなり大きいです。データは基本はFirestoreに保管し、場合によってはRDB + GraphQLなどを使い分けることも検討していきます。

【開発プロセス】

▼業務で利用しているツール

以下のようなツールを普段使っています

- GitHub, Slack, Figma, Google Drive, Zoom, Notion

マナリンクでオンライン指導に関する機能を実装するときは、先生が普段利用しているWeb、そしてご家庭が利用するアプリの両方に実装していく必要があります。

WebのフロントエンドをReactで、アプリをReact Nativeで実装することで、同様のライブラリを使ったり設計手法を互いに応用しつつ実装していくことができます。

オンライン家庭教師サービスは、指導力のある先生方に指導していただけることが最も重要です。オンライン指導を便利にする機能は、先生方から見たマナリンクの魅力を高め、事業の競争優位に大きく貢献できる開発です。

【オンライン指導カレンダー】

▼目的

オンライン家庭教師の先生が使っているGoogle Calendarと連携して、マナリンク上からご家庭が指導予約を行うことができたり、試験日程など重要なイベントの登録ができる機能の開発です。

マナリンクにはオンライン家庭教師を専業で行っている社会人の先生に特化して登録していただいているため、同時に10人以上の指導を行っている先生も多くいます。

そのため、普段利用しているカレンダーアプリでの予定登録と連携して、横断的に指導に関する予定調整ができることが、日程調整の事務作業を減らす上で重要になります。

▼実装

実装する上で難易度が高い、乗り越えないといけないポイントは以下のとおりです。

- データ構造の設計
- Google Calendarとの連携・セキュリティ
- Webとアプリ双方へのカレンダーUIの構築
- 外部サービスとの連携に伴うテスト体制の整備

カレンダーは出来合いのライブラリでUIを作るか悩みどころです。Google Calendarとの連携はある程度疎結合にやっておきたいですから、設計手法も工夫ができそうです。

【映像授業】

▼目的

先生が事前に予習用の動画をアップロードして生徒に見てもらうことで、指導効果を高めます。

オンライン指導は週に1度、1時間といった頻度が多いため、貴重な指導時間の効率アップが必要です。また、先生にとっては指導動画のストックを作成していくことで、日中のスキマ時間を自分の指導力アップに有効活用ができます。

▼実装

- 動画のアップロードをどう作るか
- 特にReact Nativeアプリ内での動画再生UI。再生や一時停止など自前で組むか？

動画を自前で所有したり、再生のUIをある程度自前で組むとなると工夫のしがいがありそうです。

【生徒の学習計画立案と分析機能】

▼目的

先生が毎日○ページ問題集を進めると言った勉強計画を作成して、そのとおりに生徒さんが学習を進めているかどうかをチェックしてほしいといったニーズがあります。

計画の立案と実行のみならず、日々の勉強時間や使っている問題集などを先生が画面上で確認ができて、必要に応じてグラフにするなどの可視化を行います。

▼実装

- データ構造の設計
- 日々の利用頻度が多いため、入力が自然に行える画面遷移やUI構築
- グラフをWeb、React Nativeに描画

使う技術としては難しくないですが、基本的な入力UI、多くのデータの関連を管理すること、最後にグラフで生徒の状況を可視化するといった細かい機能が多いです。積極的にアニメーションなど細かいインタラクションにこだわると良いプロダクトになりそうです。

その他、様々な新規機能を検討しております。

オンライン家庭教師業界には大きく2つの課題があると考えています。

- 利用者と提供者が、お互いに事前に情報を見えにくい。例えば体験指導と本指導の先生が異なっているなど、不明瞭な部分が多くある

- 指導以外のオペレーションがまだまだ非効率。先生とご家庭の間で行われる日程調整や宿題管理、計画立案といった事務作業が多く、指導そのものの改善に注力しにくい

1つ目の課題については、マナリンクのサイト上で先生一人ひとりの自己紹介動画をYouTubeで公開したり、分かりやすい価格体系で「指導コース」を作成できるようにすることに取り組んでいます。

2つ目の課題については、ご家庭に対してオンライン指導専用のアプリを提供するとともに先生向けにはWeb上に管理画面を提供し、オンライン指導に関する調整や事務作業を効率化していきます。

「指導以外のオペレーションがまだまだ非効率」という課題に対して、Web上で先生が利用する管理画面を実装し、ネイティブアプリでご家庭が利用する機能を実装していきます。

これらは共通の機能がほとんどになるため、React & React Nativeで開発していきます。
Reactが好きで、Reactを使って次々機能開発していきたい方にぜひチャレンジいただきたいです。

■必須条件/スキル

- Reactの基礎知識（関数コンポーネントの作成、標準Hooksの利用など）
- TypeScriptの基礎知識
- Firebaseの基礎知識（AuthとFunctionsを軽く触ったことがある程度）
- HTTPの基礎知識（Cache-Controlなどのヘッダを知っている、GETやPOST等の使い分けができる、ステータスコードの使い分けができる）
- 何らかのテストコードを書いたことがある
- 著名な脆弱性について簡単な説明と対策方針の説明ができる（XSS、CSRF、SQLインジェクションなど）
- 技術の勉強が好き

■歓迎スキル

- 個人で検証したりサービス開発をしている
- React Nativeの基礎知識（Navigationの実装、認証機構などの実装）
- React Nativeでのアプリリリース経験
- 簡単なUIデザインなら自分でそれっぽく完遂できる
- セマンティックにHTMLを扱うことができる（ボタンをdivでマークアップしない、リストタグを使うなど）
- CSSスキル（BEMを知っている、メディアクエリによるレスポンシブデザインを実現できるなど）
- Firebase Firestoreにおけるデータ構造の設計経験
- GraphQLによるデータの取得、更新の実装経験
- Redux(redux-sagaなど含む)の利用経験
- Concurrent Mode、Suspenseなど最新のReactについてのキャッチアップ力