Appearance
Vite で 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 をご確認いただければ幸いです。
執筆済みの教材
今回の教材は Zenn book を利用しています。
React (Vite) で LIFF アプリを作ろう
React Tutorial から一歩踏み出してみたい人 / バックエンド経験があり、フロントを触ってみたい人へ LINE API と連携して、ユーザー連携や LINE へのメッセージなどを解説していきます。
Zenn
3 月 3 日当日の動画は、アーカイヴ化されています。
フロントエンド攻略！はじめてのReact x LIFFハンズオン #1 React & Vite編
【ぜひチャンネル登録をお願いします！今後もお役立ち情報を発信してまいります！】■本イベントはハンズオンサービスshilasで同時配信します。質問や講師陣とリアルタイムでのやり取りをご希望の方は、下記のURLからご参加ください！https://shilas.app/c/1ML5toDRIkEZtiVq64ur■イベ...
YouTube
テスト課題
- アイコン画像を表示する
- メッセージを送信する
参照リポジトリ
https://github.com/jiyuujin/vite-react-liff
また Vite 上で React を動作させる サンプル と合わせ、参考にしていただければ幸いです。
CHANGELOG
ver.2022.4 branch
React 18 に対応している。
ver.2022.3.2 branch
shareTargetPicker を利用して外部ブラウザで LINE にメッセージを送信する。
ver.2022.3.1 branch
LIFF ブラウザでメッセージを送信する。
ver.2022.2 branch
LINE ログイン時にアイコン画像を表示している。
ver.2022.1 branch
LINE Front-end Framework を利用して LINE 認証を実装している。
ver.2021.2 branch
React Router を v6 に更新している。
ver.2021.1 branch
Firebase Authentication の Google 認証を実装している。
補足
2021 年 12 月の React Conf 2021 で発表された StrictMode が与える影響についても書かせていただいた。
下記の記事も合わせてチェックいただければ幸いです。