LINE Developer CommunityはLINE APIに関連する最新情報や開発Tipsを共有するコミュニティです。この記事では2022年6月に行われた【LINE API総復習シリーズ】LIFF/LINEミニアプリ【LINE API Expert出演】イベント内で語られた、サードパーティの開発者がミニアプリ開発をする際に技術選定の過程と、最も効率の良いと考えている組み合わせを共有します。
自己紹介
株式会社YouLib CEOの兵藤といいます。LIFFとミニアプリのおすすめ技術スタック。バージョンは2022.0621、今日の日付です。明日になったらおすすめ技術スタックが変わってたというケースがあるので、ちゃんとバージョン表記しておきました。
まず初めに自己紹介です。ソフトウェアエンジニアとして主にフロントエンジニアとして活動していますが、学生の時にフリーランス独立して会社を設立して、今年念願だったサービス開発のM&A達成することができました。そのサービスがこちらの「気軽にEC Lea」になります。1年近く開発を続けてLINEマーケットプレイスっていうところに出店しております。
フロントの選定を軸に考えたおすすめ技術スタックを考えた
早速、本題に入っていきたいと思います。「LIFF/LINEミニアプリのおすすめ技術スタックVer2022.06.21」を紹介したいと思います。注意点として、自分がフロントエンジニアということでフロントの選定を軸にその他の技術スタックを決めてます。自分がよく使うフロントの技術では、Nuxt.jsとNext.js。この2つを主に使ってます。
Nuxt.js採用時の構成
Nuxt.jsの時の構成はこのような構成になっています。Lernaっていうモノレポ管理ツールでモノレポ管理をしていて、Firebaceをバックエンドにしてサーバーはexpressを使ってます。
Next.js採用時の構成
もう一つのNext.jsの場合はこのような構成です。変わった点は、モノレポ管理ツールにLernaではなく、NXっていうのを採用しました。Nuxt.jsでNXを採用しなかった理由としては、まだNXの公式が用意しているライブラリがNext.jsはあったのですけど、Nuxtはサードパーティーの外部の人が作ってたということがあったので、ちょっとライブラリーの更新とかが遅かったりするケースがあったのでLernaを採用しました。
サーバーはNestJSを採用しています。インフラはすべてGoogleCloudで完結するようにします。事例で紹介したサービスですが「すごい文字ばりぐっどくん」の方はNuxt.JSで作りLINE × EC の方はNext.jsで作りました。
一番効率を探して試した結果、Next.js一強
あえて違う技術スタックで作ったのですが、LINEミニアプリとかLIFFアプリを作る上でどの技術選定が一番効率がいいのか研究してまして。自分が一つ結論を出したのがNext.js一強だな、ということです。
理由はいろいろあるんですけど、一言にまとめるならこんな感じです。NXに関しては、コンポーネント管理が非常にしやすくて次のサービス開発につながるコードが非常に書きやすいところ。フロントのNext.jsはTypeScriptベースで開発しやすくNextjsに関してはSwaggerが導入しやすくフロントとサーバーの連携が非常に取りやすい。一言でいうと、開発が非常に効率よくなりました。
LINEアカウントにテイクアウトなどを組み込む受託事業
弊社の事業ですが、サービス事業以外にLINE × ○○で事業課題を解決するという受託開発事業を行っています。一般的な受託開発というよりは、すでに過去に作ったテイクアウト・予約・デジタル会員証・モバイルオーダー。それぞれをコンポーネント化してよしなに組み合わせてLINEに構築するっていう受託開発をしてます。
NXですが、弊社の方でやっている「よしなに事業」で、パズルのように機能を組み合わせて提供するビジネスをしていると言いましたがパズルビジネスを実現するにあたって、このNXっていう管理ツールは非常に強力な武器となっていると感じています。まだ言語化が完璧にできてる訳じゃないので、ちょっと説明は省略するんですけど言語化でき次第、Zennなどで記事にしますので、しばらくお待ちいただければなと思います。
まとめ
最後にまとめに入りたいと思います。個人的にNX+Next.js+NestJSの構成がLINEミニアプリとLIFFアプリ開発に非常に構成がいいんじゃないかなと、今現状の自分は考えています。他にもStripeやマーケットプレイスAPIを使うことで、LINE開発の幅が広がります。以上で発表を終わりたいと思います。ご清聴ありがとうございました。
Discussion