🤶

LINE と共に React Hooks をものにする

LINE Developer コミュニティで React hooks × LINE Front-end Framework のハンズオンを企画するにあたって、当ブログではその補足を説明させていただきます。

#React#TypeScript#FirebaseHosting#LIFF

By jiyuujin at

この度大好評企画 (?) 第 2 弾として、今年も LINE Front-end Framework を React 上で動かす Web アプリについて、ハンズオンの企画を進めておりました。

と言いますのも、この 1 年間に大きな変化がありました。

今年 2023 年 1 月、LINE (Developers Community) さまより LINE API Expert 認定を受けました。

LINE Front-end Framework の提供している LIFF API を中心として、これまで以上に技術知見を発信させていただきます。

:::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 をご確認いただければ幸いです。

:::

企画にあたって利用するフロントエンド・フレームワークは、今回も Vite を選択します。

また、今回のターゲットもフロントエンド初学者を想定しています。

目標については昨年の目標に加え、下記の通り新しい目標を設定しました。

  • React を触る、JSX (TSX) に慣れる
  • カスタムフック化を通して設計の一端を身に付ける -> 今回設けた新しい目標

もはや、単純に Web アプリを製作して済むフェーズではないと判断しました。

ソースコードの実装として 100% の状態にまで持ってくる必要は無いと考えていますが、しかし技術負債にならない程度の最善策のひとつとしてできる限りの設計を押さえておく必要があります。

実際、今回の LINE Front-end Framework へのアクセスを始め、コアとなる設計の考え方はフロントエンド・フレームワークに依存することはありません。

三者三様、フロントエンド・フレームワークを選択するのは自由であるいま、改めてコアの部分を理解することは大変重要と考えています。

もう少し喋っておきたいこと

先日リリースされた LIFF v2.22.0 のプラガブル SDK についても活用していきましょう。

プラガブル SDK の詳細については、先日の記事を確認してください。

https://blog.nekohack.me/posts/liff-2-22

また、今回 Zenn book ではチャレンジ企画をご用意しました。

今年 2023 年 3 月に ChatGPT と Whisper モデルの API 利用が開始されました。

ChatGPT and Whisper are now available through our API (plus developer policy updates). We ❤️ developers: https://t.co/vpoyxZ7XnD

— OpenAI (@OpenAI) March 1, 2023

アプリや製品へ組み込むため、汎用言語モデル ChatGPT と音声認識モデル Whisper の API が使えるようなっています。

これをきっかけに ChatGPT を利活用する事例が続出、おはようエンジニアでも毎週話題になっています。

今日から AI 関連の話題を別のドメインに分けました
まずはこちらから進めます #ohayo_engineer https://t.co/9wKWTIPYAz

— おはようエンジニア 🙋‍♀️ (@ohayo_eng) March 31, 2023

なお、チャレンジ企画では下記マイルストーンに沿って進めてみましょう。

  • <textarea> をベースにしたコンポーネントを作成する
  • ChatGPT の API 実行できる環境を整備する
    • 環境変数を設定する
    • ChatGPT の API を実行した結果へ反映する
    • <textarea> よりユーザーの入力した値を取得、それを受け取る

今後 LIFF アプリを製作する上で、LINE のミニアプリと合わせ ChatGPT を始めとした OpenAI の API を利用するケースが増えるという話があります。

LINE Developer コミュニティから

今回の教材は Zenn book を利用しています。

https://zenn.dev/jiyuujin/books/react-hooks-x-liff-more

5 月 17 日当日の動画は、アーカイヴ化されています。

https://www.youtube.com/watch?v=D8GeQyrueEY

その他

Vite または Next.js 上で動く LIFF アプリをご確認いただければ幸いです。

また Vite 上で React を動作させる サンプル や、 Next.js 上で React を動作させる サンプル も合わせご確認いただきたい。