React (Vite) × LIFF ハンズオンを開催しました
こんばんは、jiyuujin (Yuma Kitamura) です。
先日 React (Vite) アプリケーション上で LINE Front-end Framework を使ってみよう、というハンズオンを開催しました。
今回、配信会場として利用させていただいた shilas はボイスアップラボ社が提供するオンラインイベントサービス。
このイベント以前に何度か採用実績があるものの、新顔の存在。 YouTube Live を埋め込むことができ、事前に role 付与されたメンターとのやりとりに DM を使えたりできます。
なお、今回私自身は初めて shilas を知りました。
Zoom や Google Meet などの定番ツールに飽き飽きした感情を皆が抱く中、ぱっと見でデザインがしゃれている点には大変惹かれるものがあります。
自身は登壇者として、終始 StreamYard に滞在しており (shilas に滞在していなかったたものの) 、ユーザ体験として好印象です。
中の人いわくフロント Vue.js、配信 SDK に Agora を利用しているとのこと、機会あればその技術スタックも気になるばかりです。
企画自体、昨年の年末より進めていました。基本的に React を利用した Web アプリケーションの開発、 LINE Front-end Framework の利用に加え、Google の提供するスケーラブルなクラウドデータベース Firestore を利用した機能開発のアレンジの 3 点を目的にしました。
そうした前提の下、今回は React を利用した Web アプリケーションの開発と LINE Front-end Framework の利用に焦点を絞っています。
また肝心のターゲットについて、フロントエンド初学者を想定しました。一からフロントエンドにおけるビルドの必要性を説く話から、実際に巷では Hooks とも呼ばれている「関数コンポーネント」の内側を理解する話まで、解説する機会をいただきました。
詳しくはアーカイヴ動画と合わせ、執筆済みの教材をご確認いただけますと幸いです。
今回の執筆活動でお世話になったのが Zenn Book です。その裏で Zenn CLI を利用するさせてもらいました。
基本は、ローカル環境で npx コマンドの使える状態か確認してください。
# 導入
npx zenn init
# 記事の新規作成
npx zenn new:article
# 本の新規作成
npx zenn new:book
# プレビュー
npx zenn previewあとは事前に Zenn と該当のリポジトリが連携されているか確認した上で、いざ Github に push することで出版が完了となります。
詳しくは Zenn 公式の記事をご確認いただければ幸いです。
なお、今回のアンサー記事として、フロントエンドのビルドに採用した Vite を選定するまでの経緯を簡単に書かせていただいています。
最後に、今回のハンズオンの目標には React や LINE Front-end Framework の理解を促進させることに設定しました。
次回の日程等、詳細なことは現時点で決まっていませんが、暫しの間お待ちいただければと思います。
投げ銭はいりません。それより無料でできる拡散をしてください。 感想をツイートしていただけることが一番嬉しいです。