この度、昨年の年末より LINE Front-end Framework を React 上で動かす Web アプリについて昨年の年末よりハンズオンの企画を進めておりました。
::: message .is-primary LIFF アプリを製作する。
目指すゴールはフロントエンドライブラリ React でひとつの Web アプリを作ること。LINE Front-end Framework と Firebase Authentication を合わせアプリ内で LINE 認証を使えるようにします。
LIFF は LINE Front-end Framework の略で LINE 社 が提供する Web アプリのプラットフォームです。このプラットフォームで動作する Web アプリを LIFF アプリと呼びます。
| LINE Auth | Signed |
|---|---|
 |
 |
なお、実際の成果物は Firebase Hosting にデプロイを済ませており、 Next.js 並びに React on Vite をご確認いただければ幸いです。
:::
企画にあたって利用するフロントエンド・フレームワークの候補は下記の通りです。
- create-react-app (CRA)
- React on Vite
- Next.js
今回のターゲットにフロントエンド初学者を想定しています。
率直に言うと、下記の通り目標を設定しました。
- React を触る
- JSX (TSX) に慣れる
今流行りの Next.js では getStaticPaths や getStaticProps に代表される独自のプレレンダリング機能を始め、把握する情報は多いと判断しました。
また CRA は React 経験者誰しもが通る道にあるフロントエンド・フレームワークですが、最近の開発速度が低調になってきている点は非常に気掛かりです。
CRA の低調な開発に肩を並べるように、時を同じく Vite 2 の React サポート入り もあって、広く Vite がフロントエンドのビルドに使われ始めようとしています。
フロントエンド・フレームワークは三者三様、様々な背景が存在します。どれを選択すれば良いか、逆に選択してはいけないといったことも特にありません。
もう少し喋っておきたいこと
今回の LIFF アプリを製作する上で、近くリリースが予定されている React 18 のコンポーネントのライフサイクルが大きく変わるという話があります。
先日、発表された StrictMode が与える影響
2022 年 02 月現在、 React の stable バージョンは 17.0.2 です。昨年の React Conf 2021 でも React 18 の セッション があったように、近く React 18 がリリースされます。
数ある変更が存在する中で、特に useEffect 周りの挙動に変更が予定されています。
具体的にはコンポーネントがマウントされた際、通常の useEffect に加え余計に発火されてしまいます。
そもそも StrictMode を取り入れる動機が、コンポーネントをアンマウントする代わりに、状態を保持することを可能にするため。
この目的を達成するため、コンポーネントをアンマウントするときと同じライフサイクルフックを呼び出しますが、コンポーネントと DOM 要素の両方の状態を保持することになります。
これこそ、コンポーネントのマウントとアンマウントを複数回繰り返すことを意味しています。
詳しくは 参照 をご確認いただければ幸いです。
そう遠くない将来においては、複数回呼び出される可能性のある useEffect で init() しない方が良いでしょう。
LINE Developer コミュニティから
今回の教材は Zenn book を利用しています。
https://zenn.dev/jiyuujin/books/react-x-vite-x-liff
3 月 3 日当日の動画は、アーカイヴ化されています。
https://www.youtube.com/watch?v=D8GeQyrueEY
その他
Vite または Next.js 上で動く LIFF アプリをご確認いただければ幸いです。
また Vite 上で React を動作させる サンプル や、 Next.js 上で React を動作させる サンプル も合わせご確認いただきたい。