【連載】 マネクラのフロントエンド事情2020

💡 この記事は GMOペパボ インターンシップ2020 の連載記事です。

こんにちは！引き続き dojineko がお送りします。予定しているカリキュラムの一番最初の内容となります。

■ カリキュラム
・マネクラの構成紹介 ← ｲﾏｺｺ
・初めてのWebAPIを作ってみよう
・データベースを使ってみよう
・ログイン機能を作ってみよう
・ミニブログを作ってみよう
・ミニブログに機能を追加してみよう

今回のインターンシップでは、諸事情によりプロダクトコードに触れていただく機会をご用意できなかったため、少しでもサービス開発の雰囲気がお伝えできるようにマネクラのフロントエンド (=サービスサイトやお客さま向けの管理画面を担当しているアプリケーション) についてご紹介します。

ロリポップ！マネージドクラウド

🔒 現在採用している技術スタック

マネクラのフロントエンドは現在以下のような技術スタックで構成されています。

・Node.js: アプリケーションランタイム
・TypeScript: 開発言語
・Nuxt.js: フロントエンドアプリケーション
・Express.js: バックエンドアプリケーション
・TypeORM: データベースとの接続

🚗 大まかなアプリケーション構成

マネクラのフロントエンドアプリケーションは Nuxt.js と Express.js を組み合わせて利用しています。

The Intuitive Vue Framework

Express - Node.js web application framework

もう少し具体的にお話しすると、下記のような二段構成になっています

・Express.js のミドルウェアとして Nuxt.js を組み込んだ上で、Nuxt.js から Vue.js を利用してフロントエンドアプリケーションの構築を行っています。
・ログイン処理やサーバーの設定変更などの操作については Express.js 上に実装した API を利用する構成となっています。

そのほかのマネージドクラウドのフロントエンドの構成については、2017年のイベント資料を公開していますのでよろしければご覧ください。

🎈 サービス開始からの技術変遷

ここでは2020年9月現在、公開資料から変化している部分と変化した理由についてそれぞれご紹介します。

🌠 開発体験を向上するため TypeScript の導入

資料公開時にはすでに着手していたのですが、静的型付けの仕組みを上手く利用して安全に、そして素早くかつ手堅く Node.js アプリケーションを開発するための手段として TypeScript を導入しました。

JavaScript With Syntax For Types.

サービス黎明期はチームに開発ノウハウがあまりなかったこともあり JavaScript (CommonJS) を利用した標準的な Node.js アプリケーションの開発を行うに留めておりました。しかしながらプロジェクト開始後の早い段階から TypeScript の検証導入を進めていたため、新規機能の開発を行いつつ TypeScript への移行を進めることができました。現在では Nuxt.js で標準的な TypeScript の機構「Nuxt TypeScript」を利用する形に追従しています。

Nuxt TypeScript

🧙‍♀️ 規模拡大を見越してのクリーンアーキテクチャの実践

サービス開始当初はサービスアプリケーションの開発速度を重視したため MVC2 を参考にした形で開発していました。現在はプロダクトもある程度大きく落ち着いてきており、思い切った変更も少なくなりました。長期的な運用を見た際に、開発速度を重視した結果、アプリケーションを構成する要素が過剰な密結合になっている点が課題として見えてきました。そこでクリーンアーキテクチャを参考に、アプリケーションのビジネスロジックを適切な単位に分割し、依存しているライブラリを抽象化することで、より単体テストしやすい構造にしたり、継続的なバージョンアップをしやすいようにしたりするなどの改善しています。

Clean Coder Blog

🚚 Sequelize から TypeORM への移行

先に紹介したスライドでは、データベースの操作ライブラリとして Sequelize を紹介していました。しかしながら TypeScript への移行を行ったことから、TypeScript との親和性を鑑みて TypeORM を使っていくことが長期的には良さそうという観点から、上記のクリーンアーキテクチャへの移行と合わせて、ORMライブラリへの密結合が起こらないように工夫しながら、TypeORM への移行を行っています。

TypeORM - Amazing ORM for TypeScript and JavaScript (ES7, ES6, ES5). Supports MySQL, PostgreSQL, MariaDB, SQLite, MS SQL Server, Oracle, WebSQL databases. Works in NodeJS, Browser, Ionic, Cordova and Electron platforms.

🏖 Vue.js 3 への更新準備

現時点では Nuxt.js の対応する Vue.js のバージョンが Vue.js 2 であるため実際に切り替えを行っているわけではありませんが、互換性のある範囲で Vue.js 3 への切り替えをスムーズに行えるよう準備を行っています。

また Vue.js 3 で登場する Composition API を活用できるように補助ライブラリを追加して運用しており、Vue.js 2 を使いながら最新の機能も使っていけるようになっています。

Composition API RFC | Vue Composition API

📚 まとめ

以上が間近の大まかなマネクラのフロントエンド事情となります。

マネクラ開発チームでは日々新たな技術をスピード感を持って取り入れており、常に開発環境を最新に保てる土壌を形成しております。またそれを用いてお客さまにより良い体験を素早く提供できるように活動しています。なおここまで挙げたような改善は、決してトップダウンで進めてきたものではなく、各自の得意分野を活かしつつそれぞれの裁量においてチーム内の合意を取りつつ、進めてきました。

さて、次回はそんなマネクラを使って「初めての WebAPI を作成」してみようと思います。次回もお楽しみに！