フロントエンド攻略！はじめてのReact x LIFFハンズオン #1 React & Vite編

Mar

3
フロントエンド攻略！はじめてのReact x LIFFハンズオン #1 React & Vite編
華の節句にReactを学んでみませんか？

Organizing : LINE Developer Community

Hashtag ：#LINEDC

Registration info	参加枠1 Free Attendees 189
参加者への情報	(参加者と発表者のみに公開されます)

Description

Youtube チャンネルへの登録よろしくおねがいします！

イベント概要

人気のフロントエンド技術であるReactやViteの使い方を学びながら、実用的なLINEミニアプリ(LIFFアプリ）開発のポイントを網羅できるハンズオンです。テンプレートを触りながらLINE APIの使い方を知り、自分で拡張してLINEミニアプリやサービスを爆速で作れるようになることが目標です。またフロントエンド技術の入門や、生産性の高いフロントエンド開発の習得にも役立ちます。LINEプラットフォームを通して、フロントエンドエンジニア必携の技術を学んでみませんか？

第1回は、React x LINE API の使い方にフォーカス。続編（4月予定）と合わせて、アプリを徐々に進化させながら、フロントエンド技術を学んでいきましょう。

使用技術：

LIFF(LINE Front-end Framework)
Typescript
React
Vite

こんな人におすすめ

LINE APIを生かしたWebアプリ開発に興味があるエンジニア
Reactを学びたいフロントエンド開発初心者
Viteなど開発生産性の向上ツールに興味のあるフロントエンドエンジニア

このイベントで学べること

テンプレートでLINE APIの使い方を知る
- git cloneすればすぐ使える
- 自分で拡張して、アプリ・サービスを作れるようになる
React x LINE API(LIFF) の使い方
Viteの使い方

タイムテーブル

時間	内容
18:55	Youtube配信開始
19:10 - 19:55	React (Vite) で LIFF アプリを作るハンズオン：環境構築
19:55 - 20:10	viteについて解説
20:10 - 20:15	コードについて解説
20:15 - 20:30	react hooksについて解説
20:30 - 20:40	LIFFについて解説
20:40 - 21:40	ハンズオン：チャレンジ課題
21:50	クロージング

※適宜休憩を取りながら進めますので、時間は目安となります。

参加URL

Youtube Liveで配信します。参加URLは、お申込み後「参加者への情報」をご覧ください。

講師陣

内西功一(4geru)

LINE API Expert
学生時代に、ハッカソンに参加していたら、気づいたらLINE API Expertになっていました。

LINE APIの面白いところを知ってもらおうと日々活動しています。

※完全に趣味でしているので、仕事との関係はありません。

Twitter : @_4geru
Github : @4geru

jiyuujin

複雑なUIを作るのが好きです
- React/Next/Vue/Nuxt/Scala/Swift
スタッフとして色々と参画中
- FlutterKaigi 2021 / JAWS DAYS 2021 個人スポンサー / Flutter Japan User Group (Osaka) _ PWA night / v-kansai / kansai.ts

Twitter : @jiyuujinlab
Github : @jiyuujin
プロフィールサイト： https://yuma-kitamura.nekohack.me
技術ブログ： https://webneko.dev

河本貴史(もっちゃん)

LINE株式会社テクニカルエバンジェリスト
Microsoft MVP（2021～）／LINE API Expert（３期生｜2019～）／LINE Corp／テクエバ・DevRel／Azure Machine Learningが好き／著書『LINE API実践ガイド』／LINE、VS Codeコミュニティオーガナイザ／エンジニアフレンドリーシティ福岡アワード2020受賞(LDGQ)

Twitter : @kawamoto_LINER

LINE Developer Community Zennについて

イベントの登壇内容をZennに一部記事化しています！動画アーカイブよりさらに手軽に内容をおさらいできるので是非ご覧ください。 https://zenn.dev/linedc

コミュニティ行動規範（Code of Conduct)について

本コミュニティは参加する全ての方が不快な思いをすることなく、楽しんでいただくことを目的としております。そのために、以下のような行為は禁止されております。

ヘイトスピーチ
性的な言葉や画像、性別に言及したり、性別により受け取り方の変わる言葉や画像の使用
侮辱や軽蔑的、中傷や他者を貶めるような発言
他者のプライバシーや私的な情報の無許可での公開
その他多様性への配慮を著しく欠く発言や行動

ハラスメントを受けた、と感じた方は以下までご連絡下さい。
Twitter
E-mail

発表者

4geru

東京でサーバーサイドのプログラマーしています。

jiyuujin

Web Developer, HR Adviser, etc

Media View all Media

Feed

MuhammadSohail wrote a comment.

2023/05/11 17:05

When I was a student, I participated in a hackathon, and before I knew it, I had become a LINE API Expert. Now im an expert of all coding languages mainly java. https://geopard.tech/blog/topography-and-nutrition-content-in-soil-and-yield/

MuhammadSohail wrote a comment.

2023/05/11 17:04

https://www.universalapk.com/zombie-frontier-4-mod-apk/ When I was a student, I participated in a hackathon, and before I knew it, I had become a LINE API Expert. Now im an expert of all coding languages mainly java.

MuhammadSohail wrote a comment.

2023/05/11 16:58

When I was a student, I participated in a hackathon, and before I knew it, I had become a LINE API Expert. Now im an expert of all coding languages mainly java.https://geopard.tech/blog/topography-and-nutrition-content-in-soil-and-yield/

Daniellisa wrote a comment.

2023/05/11 16:49

When I was a student, I participated in a hackathon, and before I knew it, I had become a LINE API Expert. Now im an expert of all coding languages mainly java. Thanks Regards: https://linensrange.co.uk/product-category/kitchen-linens/

Daniellisa wrote a comment.

2023/02/07 19:56

Before getting started with React, you must have a basic understanding of HTML, CSS, DOM (Document Object Model), JavaScript, Node. https://www.unilightled.com/fine-pixel-pitch-led/

MalikG wrote a comment.

2023/02/01 02:19

Vite pre-bundles these dependencies using esbuild, which is 10-100x faster than JavaScript-based bundlers. "https://shakemods.com/"

MalikG wrote a comment.

2023/02/01 02:18

Prerequisites. Step 1 — Creating a Vite Project. Step 2 — Starting the Development Server. Step 3 — Previewing Your App from Mobile Phone. Step 4 — Removing the Default Boilerplate. Step 5 — Creating a Basic App. Step 6 — Building for Production. Conclusion.https://spotifymod.com/

clarkjenifer33 wrote a comment.

2023/01/05 00:57

MuhammadSohail wrote a comment.

2023/01/04 01:01

"Front-end strategy" is a method for estimating an answer to a calculation problem by focusing on the "front-end" or "left-most" digits of a number. Its strongest application is for addition. You buy a hamburger for $4.79, a drink for $1.26 and an ice-cream cone for $0.95. Will a five dollar bill cover the cost? https://plantsinsights.com/alocasia-nebula/