先日フロントエンド攻略！はじめてのReact x LIFFハンズオン #1 React & Vite編というオンラインハンズオンイベントに参加して来ました。
そこで学んだことや勉強になったことなどをメモがてら記述していきます。
イベント概要
今回のイベントではReactとLIFFを使って簡単にwebアプリを作ってみようというものです。
LIFFを用いて、LINEの認証を使ってReactのアプリケーションを閲覧したりできるようになります。
使用教材
当日のライブアーカイブ: Youtube LIVE
テキスト: Zenn
サンプルリポジトリ: リポジトリ
LIFF（リーフ）とは
LINE Front-end-Frameworkの略
LINEの機能をWebアプリなどで使えるようにしたフレームワーク
ユーザー情報
OS / 言語情報等
Bot との友達情報
メッセージ送信（LIFF ブラウザのみ）
QR スキャン（LIFF ブラウザのみ）
今回は単純にReactのデフォルトページをLINEで認証してLIFFを介して閲覧するというものでした。
簡単な手順方法
- LINE DevelopersでLIFFのセットアップをする
- Reactアプリをサーバーで動かす。アプリのエンドポイントURLを生成しておく。
- LINE DevelopersでセットアップしたLIFFに上記のエンドポイントURLをセットする。
- ReactアプリにLIFF IDをセットする。
- LINEにLIFFアプリのURLをトークで投げてリンクを踏むとアプリを触れるようになる
| ログイン画面 | 開いたアプリ |
|---|---|
 |
 |
Vite(ビート)とは
Viteはビルドツールです。
Reactのビルドツールはreact-create-appが有名どころではありますが、それよりも高速化が図れるビルドツールです。
react-create-appは、コマンド一つで雛形は作れますが、必要に応じてwebpack.configを書き換えたり記述が必要だったりすることが多いため、煩雑になりがちです。
Viteでは
# @vitejs/plugin-react
npm install @vitejs/plugin-react
yarn add @vitejs/plugin-react
でインストールしたのちに
vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
})
viteのconfigファイルにこのように記述するだけで、Vite上でReactが動作してくれます。