私がアプリ開発に採用してるフレームワーク・プラットフォームをフロントからバックエンドまでまとめてみる

2021/04/19に公開

Bootstrapを使ったり、PHPを使ったりしてた時代もあって、以下は、現在のスナップショットではあるのですが、BtoC、BtoB問わずに大体固定化されてきたので、簡単にですがまとめておきます。この技術がいいよ!という一面もありますが、基本的に協業する時に提示することのできる資料という側面が強いです。

どういう人が書いてるの?

一般社団法人リレーションデザイン研究所 代表理事で、Ionic Japan User Group代表です。自社プロダクトをつくっています。

https://twitter.com/rdlabo

フロントエンド

UIフレームワーク

Ionic Frameworkを使っています。

https://ionicframework.jp/docs/

これはモバイルUIを実現するためのフレームワークで、iOSで表示するとHIGに沿ったデザイン、Androidで表示するとマテリアルデザインで表示されるコンポーネントを利用することができます。最近は私がつくるアプリはWebアプリであってもモバイルでアクセスするユーザが大半となったので、単純にレスポンシブで表示できるデザインではなく、ユーザが学習済みのUIを提供するようにしています。またdiv地獄にならないのでコードの視認性がいいのも気に入っています(Custom Element)

JavaScriptフレームワーク

Angularを利用しています。

https://amzn.to/3mYrGp2

もともとAngularJS時代からユーザだったということもありますが、AngularはSemVerによるバージョン管理がしっかりしており、また破壊的変更が提供された場合も ng update コマンドを提供することで自動的に対応することができるのがめちゃくちゃ気に入ってます。フルスタックフレームワークなので、利用するライブラリの9割を公式から選べるのも安心感があって好きです。あとデフォルトでTypeScript。

フロントエンドサーバ

Webマガジンや広報を兼ねたようなページ毎にOGPを変更して返さないといけないようなWebアプリの場合は、Netlifyを利用しています。prerenderを使うことができますので。ログイン必須のようなOGPを必要としない(※トップページのみでいい)アプリの場合はFirebase Hostingを利用しています。こっちのほうが安定して高速ですね。

https://www.netlify.com/

https://firebase.google.com/

クロスプラットフォームライブラリ

Capacitorを利用しています。

https://capacitorjs.jp/

Cordovaがビルドの度にconfig.xmlから全コードを毎回自動生成するので、どこかひとつ問題があった時すべてのビルドが失敗することに対して、Capacitorは最初にプラットフォームを追加すると以降はその部分はいじらないのでとても安定しており気に入ってます。

バックエンド

バックエンドフレームワーク

NestJSを利用しています。

https://nestjs.com/

Angularからインスパイアを受けて開発されてるフレームワークなので、設計思想がAngularに似通っててとっつきやすかったです。型をバックエンドとフロントエンドで共有できるところがお気に入り。

バックエンドサーバ

案件によって変更しますが、LambdaかElasticBeanstalkを利用しています。

https://aws.amazon.com/jp/lambda/

https://aws.amazon.com/jp/elasticbeanstalk/

基本的にはLambda、Lambdaのコールドスタートがネックになったり、バッチ処理のために稼働時間を15分以上みないといけない場合はElasticBeanstalkを利用する感じです。

データベース

MySQLを使ってます。

https://amzn.to/3xa4sBg

SQL言語で慣れ親しんでるというだけなので、そこまで強い思い入れはありません。PostgreSQLが得意だったら、PostgreSQL使ってたと思います。ちなみに、RDS使ってます。自動バックアップ機能とサービスの規模に応じたスケーリングができるのが魅力。

その他

認証

Firebase Authentication使ってます。ユーザのメールアドレスもパスワードも自社サーバで管理したくないのでBaaS頼み。

メール送信

SendGridつかってます。AWS SESだとキャリアメールに届かないこと多かったので、こちらに乗り換えました。

デプロイ

GitHub利用してて、コミュニケーションはslackを利用することが多いです。デプロイはタグ(x.x.x)をフックにしてGitHub Actionを利用しています。Gitで履歴の残らない本番デプロイ絶対だめ。

https://zenn.dev/rdlabo/articles/1fda37f6e1025999e86e

Discussion