はじめに
この記事はトレタ アドベントカレンダー 14日目の記事です。
自分はトレタにフロントエンジニアとして約半年前にジョインしました。
トレタは飲食店向けに予約/顧客台帳のiPadアプリをサービスとして提供している会社です。
入社して最初に関わったのが「トレタマネージャー」と呼ばれるトレタのWeb版アプリケーションのリニューアルでした。Web版はiOSの台帳アプリと同等の機能を提供するもので、主に飲食店の本社などPCからの利用されるケースが多いです。
【画像の真ん中のがトレタマネージャー】
リニューアルの経緯
自分はリニューアルの途中から参画したのですが、主な理由はフロントのフレームワークを新しくするためです。当時のトレタマネージャーはAngular1系で作られていたたため、今後も継続開発をしていく為にAngular2系に全面書き換えのリニューアルを行いました。
Angularを選んでどうだったか
フロントエンドのフレームワークの選定において、自分が選んだわけではないので選定理由は詳しくは語れませんので、実際にAngularで実装してみての良し悪しについて語ります。
ちなみに、前職ではReactやVueの経験が多かったので、トレタではAngularを使っていると聞いたときの第一印象はあまり良くなかったです。だって他のフレームワークと比べて人気なかったし、1系から2系への互換性がなくなった時は選ばなくてよかったーとか思ってた勢なので。。
【良く見かけるフロントエンドの人気投票】
React、Vue.jsはViewLibraryであり、Angularはフレームワーク
ReactやVue.jsはコア部分は薄く、必要なライブラリを適宜各々で好きに取り入れていく方針に対して、Angularはオールインワンなのが特徴です。RouterなどSPAとして必要なものが全て揃っているので、SPAとしてやると決まっているなら環境を整えやすいです。
周辺ライブラリが既に備わっているということは、Githubでスター数調べたり、ライブラリごとのバージョン互換を気にしたりする必要がないので非常に楽です。
堅牢、決まった仕組み
アーキテクチャとしてサービス層やパイプなど構成が決まっているので、多人数でやる時でもルールが揃えられるし、敷かれたレールに乗ってる感があります。さらにTypeScriptに完全に対応しているので、型づけがしっかりできるのもいい点です。
言語で例えるなら、Vue.jsは書きやすくていいとこ取りのRubyなら、AngularはJavaです(ちなみに自分はJavaあまり好きではないw)。ベンチャーWeb界隈はRuby好き多いのでVueが人気でるのもわかります。
勉強コストは高い
他フレームワークと同じくコンポーネント志向なのでReactとか触ったことあるなら大きくスイッチイングコストがかかるわけではないですが、RxやDIなどAngularだと必須な要素があり、先述の通りAngularのレールに乗るにはAngularの作法を知っておく必要があります。
それと日本語の技術記事も比較的少ない上に、1系と2系の記事が混ざってて検索しづらいのが地味にツラいです。
リニューアルで変えたこと
リニューアルは基本的に同機能で同じ画面デザインへの移行を行いました。ただ、要件を整理した結果、スコープを一部絞ることにしました。
IEの対応をやめた
IEの対応コストが高かったので、Edge以前のIEの対応は打ち切りました。
これはBtoBのサービスであるところが大きいですが、ChromeとSafariを標準ブラウザとして使ってもらうことを前提にしています。どうしてもIEしか使えない場合は、元のリニューアル前を残してあるのでそちらを使ってもらう方向にしました。
モバイルの対応をやめた
リニューアル前はレスポンシブ対応をしていたのですが、リニューアルにあたって要件を整理した際に、PCとモバイルでは利用シーンが大きくことなるが分かっていました。
例えば予約を入力するという操作はモバイルで行うことはほとんどなく、当日の予約状況の確認などがメインとなります。
なのでPCとモバイルでも使えるレスポンシブなデザインにするよりは、PCでの画面サイズ&使用感に特化するように作りました。
モバイル版については別アプリケーションとして作るか、iOSアプリで作るなどこちらもモバイルに特化した形で作り直すように検討中です。
状態管理
状態管理のライブラリとしてNgrxを入れました。
正直この時点での規模・開発人数を考えるとそこまで必要はないとも思いますが、表示と入力フォームが連動する画面のような複雑な部分は、stateを一元管理しておくととても扱いやすくなりました。
おわりに
エンジニアリングの力で飲食業界の働き方をデザインするフロントエンドを募集！
お決まりのWe are hireing!
トレタはiPadアプリがメインのサービスなので、今回のトレタマネージャーのようなWeb版はわりと日陰な存在になりがちではありますが、その他にもレストランWEB予約やiPadアプリのWebView、新規事業などフロントエンドで活躍する場は山ほどあるので、フロントエンドエンジニアの採用を積極的に行なっています。