【Next.js + LINE 連携入門！】初心者向けハンズオン勉強会【② / 全2回】
イベント内容
React 初心者向けの、ハンズオン形式のオンライン勉強会です👋
事前に作成した資料があるので、
それを参照しながら、ハンズオン形式で、Reactのミニアプリを構築します！
実際に手を動かして、その場で質問・相談しながら、楽しくReactを学んでいきましょうー！
今回のお題
作成するアプリ：
予約システム付きコーポレートサイト
レベル：中級編
概要：
このプロジェクトでは、架空のプログラミングスクールを想定して、コーポレートサイトを構築します。
公式 LINE を「友だち追加」することができ、
LINE 上、Web 上の両方で、無料カウンセリングの日時を予約できるシステムを構築します。
全 2 回のシリーズについて
毎週開催している、２時間のハンズオン勉強会では、
1つの技術トピックにフォーカスして、簡単なミニアプリを構築しています。
今回は、２時間では作りきれない、より実践的なアプリを2週（2時間×2回）で、構築します！
Webアプリと LINE の連携は、製品の市場調査、コーポレートサイトなど、実運用の面でニーズの高いスキルです！
日程は下記を予定しています：
（2回目から参加される方は、最初にその時点までのソースコードをクローンする形で進めます！）
- 第１回：3/30（日） 16時〜18時
- 第２回：4/6（日） 16時〜18時
学習する内容：
今回のテーマは、Next.js アプリでの LINE（LIFF）連携です。
シンプルな公式LINEアカウントの追加から、Messaging API連携、LIFFアプリの実装について、確認してください。
使用技術：
- LINE Messaging APIによるメッセージング機能
- LINE Front-end Framework (LIFF)による予約フローの構築
- Next.js 15 App Routerでのフロントエンド・バックエンド開発
- Vercel へのデプロイ
- Neon Postgres によるデータベースの活用
- TypeScript による型チェック
- Tailwind CSS を用いたスタイリング
- shadcn/ui によるコンポーネントの導入
この勉強会を通して、実際に運用していける Next.js アプリを構築することを目指します！
こんな初心者におすすめ！
- React の基本的な扱いに慣れてきた方
- LINE と連携したアプリについて学びたい方
- Next.js におけるデータベースを用いた実装に入門したい方
- React エンジニアとしての転職/就職を目指している方
- React/ Next.js を使った簡単なプロジェクトにチャレンジしてみたい方
要件：
- Node.js 環境（v18.18.0 以上）が構築されたPCが必要です
- Git/ GitHub環境（アカウント）の用意
- HTML/CSS/JavaScriptの基礎知識が必要です
- Reactの基礎（Progateレベルの内容）は理解している前提の内容となっております
- Next.jsの基礎（公式チュートリアルレベルの内容）は理解している前提の内容となっております
開催概要
➡️場所：Google Meet を予定(オンライン開催）
音声のみでOKです！
申し込みが完了すると「参加者への情報」という場所に、URLが表示されます。
なお、Google Meetへの参加は、Google アカウントが必要です！
➡️参加費
1500円 (当日 PayPay or stripeによるカード決済にて都合の良い方法で受け取ります。)
注意事項
下記を、ご確認ください：
- 実際に手を動かして、一緒に作業をするハンズオン形式のワークショップとして進行します。
- 視聴のみで参加することも、全く問題ないです！
- 登壇者の発表（LT）を視聴する形式の、セミナーではありませんのでご注意ください。
- 無断欠席・遅刻は、ご遠慮ください。
- 勧誘、迷惑行為、ハラスメント、マウンティング行為をはじめ、このイベントの趣旨にそぐわないと主催が判断した場合はご参加をお断りする場合がございます。
当日のスケジュールの流れ
ハンズオン中は、資料を見ながら一緒に作業を進めていければと思います！
（音声・チャットで、リアルタイムでリアクションや質問ができます）
| 時間 | 内容 |
|---|---|
| 16:00〜16:10 | 最初の挨拶 |
| 16:10〜16:20 | 仕様確認＆開発準備 |
| 16:20〜17:50 | ハンズオン開始 |
| 17:50〜 | 終わりの挨拶など |
その他：
- 実際は、時間内で、進めるところまでタスクを進める形になります。
- 時間内に完成しない場合でも、大まかな解説と手順を記載した資料を、配布いたします！
- なので、勉強会中は、ゆっくり・たくさん質問して頂ければと思います！！
ハンズオンの最中は、たくさんリアクションをして、盛り上げていただけるとありがたいです！
（進めるスピードなどの、進行に関するご意見も大歓迎です！）
参考キーワード
webアプリ開発, HTML, CSS, JavaScript,TypeScript, React.js, Node.js, Next.js, Github, コミュニティ, もくもく会, ハンズオンワークショップ
注意事項
※ 掲載タイミングや更新頻度によっては、情報提供元ページの内容と差異が発生しますので予めご了承ください。
※ 最新情報の確認や参加申込手続き、イベントに関するお問い合わせ等は情報提供元ページにてお願いします。
