Ionic Vue × GraphQL × Firebase でアプリ開発した話
タイトル通り、Ionic VueとGraphQLとFirebaseで簡単なアプリを作ってみたので、内容と技術要素について簡単に残しておきます。
ちなみに、アプリと言いつつ様々な理由からストアへの申請などはまだ行っていないので、現状はただのPWAです。ローカルで動かすことはできました。
アプリの内容
作ったのはマネーにっきというシンプルな家計簿アプリです。
他の家計簿アプリとの差別化としては、出費を購入単位ではなく日付単位で記録するようにしたのと、テンプレート機能があることで、なるべく入力時の手間を少なくしていることです。
自分自身が過去に高機能な代わりに入力が大変な家計簿アプリを何回も投げ出した経験があったので、自分で使いたいものを技術的な勉強も兼ねて作ってみました。
使用している技術
- TypeScript
- Vue 3.0
- Ionic Vue
- GraphQL (Vue Apollo)
- Firebase (Hosting, Firestore, Functions, Authenication)
技術選定の経緯
半年ほど前、個人的にアプリ開発に興味を持っていたところに、たまたまIonic Vueの正式リリースのニュースを見かけ、
新しい技術で単純に興味があったこと、自分が仕事でVueを使っていることからハードルがそれなりに低いこと、また仕事ではまだ採用しづらいVue 3.0を試す良い機会にもなることから選択し、年明けあたりから少しずつ開発を始めました。
バックエンドについては、GraphQLに触ってみたかったことと、自分の会社がRuby on Railsをメインに使っていることもあって、最初は graphql-ruby で作っていたのですが、
途中で、初心者がどうにか作った程度のDBでユーザー情報を保持することが怖くなってきたのと、またサービスとして必要になりそうな機能（例えばメールアドレスやパスワードを忘れた場合のサポートなど）を実装し終える目途が立たなかったので、
最終的にFirebase Authenticationでの認証に変更し、データベースはFirestoreにFirebase Functions の Apollo Serverでアクセスする構成に差し替えました。
各技術を触ってみての感想・評価
Ionic Vue
最大の強みはVueで書けること。とにかくVueに慣れている身からするとそれだけで嬉しいです。FlutterやReact Nativeも軽く触ってみたのですが、HTMLはHTML、CSSはCSSとして書けるありがたみを実感しました。
Webサイトのコンポーネントライブラリとしても、欲しい機能は一通り提供されていて、CSS変数を通して細かいカスタマイズもできるのでかなり使いやすかったです。
今回のアプリについては、本体のAPIを利用する仕組みがあまりなかったこともあり、Androidアプリのビルド自体はかなりスムーズに行うことができました（※iOS版はMacを持っていないため試していません）。
見た目も中身もPWAとほぼ一緒ですが、それでも自分で作ったアプリを自分のスマホにインストールして動かせた時は軽く感動しました。
Web版とAndroid版で挙動の差異もほとんどなく、気軽にクロスプラットフォーム開発が実現できたので、Vueエンジニアが簡単なアプリを開発したい場合にはかなり良い選択肢になってくるのではと思います。
反面、辛い点はサポート・ドキュメント不足。歴史的に当たり前ですが、Ionicの持つ機能のほとんどがAngularとの組み合わせを前提としており、Vueで使える機能は一部に限られているので、「Ionic 〇〇」で検索した程度では解決しない問題が多いです。
例えば、今回アプリ版の完成を先送りにした最大の理由が、WebViewアプリではFirebaseでのOAuth認証がサポートされていなかったからなのですが、その対応として案内されるIonicFirebaseUIは当然Angular前提であるなど、
Ionic公式の機能はまだしも、Ionic向けに提供されているプラグインのVue対応はほぼされておらず、また今後も広がっていくかは未知数に見えました。
他にも、例えば@ionic/storageがVue向けには未提供で、@capacitor/coreから直接呼び出すしかない、Ion Modalの @ionModalDidDismissがトリガーしないと思ったら @onDidDismissだった、など、ドキュメントに載っていない細かいハマりどころも割とあり、
IonicというよりCapacitorの挙動についてちゃんと理解していけば自力で解決できるのかもしれませんが、現状だと用途としては限定的になってしまう印象があります。
Vue 3 / Vue CLI
Vue 3での開発はほぼ初めてですが、Vue Composition APIをずっと使っているのであまり戸惑うことはありませんでした。emitsの型付けやv-modelの仕様など一部変更はありますが、eslint含めて特に違和感なく移行できる印象です。
一方、Vue CLIについては、普段Nuxtを使っているので様々な部分で戸惑いました。
当たり前といえば当たり前なのですが、Vue Routerや各種Plugin、FirebaseやAnalyticsなどとの連携を毎回調べて自分で記述しなければいけないのが微妙に手間で、Vue 3.0対応を除くと、あえてNuxtではなくVue CLIを選ぶ利点をあまり感じられませんでした。
ただし、そのエコシステムの巨大さが、Nuxt v3の遅れなどに繋がっている部分も少なからずあると思いますし、そもそもWebpackやVueの仕組みについてある程度理解しないと使えないのは本来正しい（Nuxtが高度に隠蔽しすぎている）と言えるのかもしれません。
Vue Apollo / GraphQL
GraphQL、使い始めた当初はREST APIと比べて使い勝手が悪く感じたのですが、それは自分がREST APIの単純な置き換えとして使おうとしていたからで、
Apollo ClientをVuexの代わりに使う（キャッシュ管理もApolloに寄せる）ようにすると一気にその強力さを実感できました。
特に、mutationの返り値を適切に設定することで、queryを再取得しなくても配列の該当部分だけ書き換えてくれるのが凄い。REST APIでも頑張れば同じことはできると思いますが、キャッシュ管理を自前で悩まなくていいのが本当に凄いです。
Schemaとの型情報のやり取りも、最初は使い方を勘違いしていたので「これ使いにくくない…？」と思っていたのですが、全くそんなことはありませんでした。勘違いの内容と丁寧なコメントは下の記事にあります。
今回新しく試した技術の中でGraphQLが一番気に入りました。今後は積極的にREST APIを置き換えていきたいです。
Firebase
Firestore、Authenication、Cloud Functions、Hosting、どれも使ったことはありますが、改めて個人開発では最強の味方です。特にサインイン周りは使いやすすぎます。
Apollo Server × Cloud FunctionsでFirestoreにアクセスする形は初めて試しましたが、Apollo Clientをそのまま使えるのでクライアント側がFirebaseに依存せずに済む、型情報を共有できる、などのメリットがあります。
が、セキュリティルールやリアルタイム更新などのFirestoreならではの機能は使えず、Cloud Functionsの関係で必ずBlazeプランへのアップグレードが必要などのデメリットもあるので、積極的に採用すべきかはやや悩ましいところです。何かの間違いでアクセスが殺到したら迅速に一旦閉鎖しようと思っています。
Apollo ServerをTypeScriptで書いてもFirestore自体には型がないので少し不便に感じる部分はありました。開発が終わってから知りましたが、下の記事のようなツールを使えば解決できたのかもしれません。
Ruby on Rails & ruby-graphql
最終的には採用しなかったのですが、せっかく触ったので感想だけ書いておきます。
知識ゼロの状態からいきなり【Rails】graphql-rubyでAPIを作成の記事を読んで作り始めたのですが、そんなレベルでも数日で動くAPIを作ってHerokuにデプロイまでできたので、Railsは凄いなと思いました。
最終的にRailsからFirestoreにデータベースを変更したことで、NoSQLのデメリットも何となくわかりました。本当はこの手のアプリはRDBの方が向いているはずで、将来的に分析機能とかを付ける際にFirestoreを選んだことを後悔しそうだなという予感がしています。
ruby-graphql も凄く使いやすかったです。Active Recordの操作しやすさと合わせて、query/mutationをどんどん追加できるのは単純に楽しく、フロントエンド開発をメインにしている身としては、GraphQL::RakeTaskのコマンド一発で自動生成されたschemaファイルをフロント側で読み込むだけで型情報からクエリまで全部更新してくれる体験に感動しました。
とにかくサーバーサイドの開発に対する「何となく難しそう」というイメージがかなり払拭されたので、今度改めてRuby on Railsを使って何か作りたいという気になりました。
あとWSL2が安定して動くようになったおかげでWindowsでもRails開発ができるようになって良かったです。
最後に
初めての個人開発……というにはかなりお粗末なのですが、とりあえず自分でそこそこ使えるレベルのものが作れたことは良かったかなと思っています。特にGraphQLを初めて使えたのが最大の収穫で、個人・仕事の両方で今後使っていきたいです。RailsもIonicも。
サービス自体については現状だと明らかに完成形には程遠くて、本来やりたかったこと、分析機能もないし、匿名アカウント対応もテンプレート複数登録も項目の並び替えも必要だし、そもそもアプリをストア配信するという元々の目的も達成されていないのですが、
そのあたりにこだわっていくとキリがないので一旦公開してみることにしました。
こういう自分で作ったサイトを公開するのも記事を書くのも初めてで、今はどちらかというと達成感よりも憂鬱な気持ちです。サービスと言えば3週間くらい前には大体できあがっていたのに公開する踏ん切りがつかなくて先延ばしにしていました。
社内にも個人開発を並行してやっている方が何人もいるのですが、仕事をしながら個人のプロダクトも並行して開発し続けられる人は本当に凄いなと、改めて尊敬の念を抱いています。
現状は辿り着くまででほとんど燃え尽きてしまったので、正直に言うと機能追加や継続的にメンテナンスをしていくモチベーションが今はかなり切れてしまっています。
なので使ってみたいと思ってくださった方がもしいれば、ぜひメッセージなど頂けるとありがたいです。よろしくお願いします。万が一iOSアプリの要望がたくさん来たらMacを買います。
Discussion