2020年8月26日にオンラインで開催された、ラクスさん主催 **フロントエンドLT会 vol.1 -2020夏祭り-**に参加しました！
刺激を受けたLTがたくさんあったので、レポート＋感想を残したいと思います
全部ぶわーーーーっと書くと超大作になりそうだったので…ひとことレポートです！
（登壇者のツイッターアカウントや、(公開していれば)登壇時のスライドも載せています）
すてきなLT会の雰囲気を、さらっと感じていただけたら嬉しいです💐
追記：主催者様がイベント中のツイートなどをTogetterにまとめてくださったので、そちらもぜひ！
冒頭で本記事をご紹介いただいていて、まじで嬉しすぎて拝んじゃった
|
フロントエンドLT会 vol.1 -2020夏祭り- まとめ #frontendlt 2020年8月26日に開催したフロントエンドLT会 vol.1の様子です。 |
|
LTタイトル (サイト掲載順)
- Reactで話題のRecoil使ってみた - Mikihiro Saito さん
- denoを使ってReactSSR - カーーズさん
- Nuxt.jsとFirebaseで配色サービスを作った話 - Sanadi さん
- Netlify + Vue で 画像ジェネレーターを作った話 - fushino_tetsu さん
- Blazor WebAssembly 触ってみた - naito さん
- 「SCSS紹介」デザイン通りにスタイルを抽象的に書けた！ - Misha Soliterman さん
- Firebase + Bolt で もくもく会用のSlack botを作った話 - RyoKawamata さん
- javascriptでも条件式を使いたい話 - philomagi さん
- Preact で手書き文字採点アプリを作ってみた - choo さん
- React.jsで使える非同期処理と描画更新を最適化するフレームワークを作っている話 - Q_Q さん
- もっと見るボタンを実装してみた - ozawa0 さん
- フロントエンド初学者が仕事を通じて見た現実と感動した話 - uni__82 さん
- インフラ知識が無くても Next.js + vercel を使って簡単に cron 処理が実装できた話 - itizawa さん
- 実践React 第2版が猛烈に良い本だったので布教します - dairappa さん
- nuxt.jsとfirebaseでハマったこと - Logy さん
- Gatsby.jsでmd/adocが混在できるテンプレートを作ったときの苦しみ - moomooya さん
📣 ガンガンいきます！
## Reactで話題のRecoil使ってみた 登壇者：[Mikihiro Saito さん](https://twitter.com/bohol_engineer)
ステート管理ライブラリのRecoilについてのお話でした（なんとフィリピンからの参加！）
ステート管理は専らRedaxにお世話になっているのですが、コード冗長化するし余計なステート読み込みしたりでまあ仕方ないか〜って思ってたそのかゆいところに手が届くのがRecoilでした！
5-10分くらいで概要やRedaxとの違いなどをざっと説明してくれていたので、とてもわかりやすかったです
denoを使ってReactSSR
(イベントサイトにLTタイトル載っていなかった＆発表中私の方で控えていなかったので、発表内容の雰囲気でタイトル書いています🙇♀️)
登壇者：カーーズ さん
deno！！！超気になっていたのでタイトル発表されたときは「おお…！」と声出してましたw
しかも実際にSSRするまでのライブコーディングもしてくれました
実際のコード見られるのは本当嬉しい＆わかりやすい…
あと意外とnode_moduleがブラックホールよりでかいっていうアレ知られていなかった
参考：deno 公式
Nuxt.jsとFirebaseで配色サービスを作った話
登壇者：Sanadi さん
Nuxtで、オリジナルのカラーパレットをためておけるwebサービスを作った時のお話＆サービス紹介でした
個人的なあるあるなんですが、「よーし！デザインするぞ！」と躍起になっていたのに、一から色の選定＆配色どうするかで時間＆やる気がガリガリ消費されていくんですよね…これは助かるサービス(TT)
カラーパレット内でも様々な嬉しい機能が実装されていたりします
登録はGoogleアカウントがあればさくっとできますので、気になる方はぜひ！（唐突な宣伝）
サービスURL：https://mons-palettes.com/
Netlify + Vue で 画像ジェネレーターを作った話
登壇者：fushino_tetsuさん
リモートワーク推進期の今にフィットした背景ジェネレーターを作った時のお話でした
その際Netlifyを紹介されてて、私も最近使い始めた身だったのでキャッキャしてましたw
デプロイ履歴はあるの知っていたけど、そこからそのデプロイ時のサイトプレビュー見れるのは知らなかったからすごい感動した
この発表を機にもっと知れ渡ってほしいなあ
参考：Netlify 公式
Blazor WebAssembly 触ってみた
登壇者：naito さん
スライド：https://www.slideshare.net/nnt7/blazor-web-assembly-c-238269520
C#を使ってSPAが作れる(！)webフレームワークの紹介でした
私はC#わからない人間なので使うことはなさそうですが、普段C#書いてる方には、普段慣れ親しんだ言語でSPAが作れる良フレームワークなのかな？と思います
こういったフレームワークやライブラリなどのお話を聞いていると、（ちょっと語弊があるかもですが）webアプリ作るのに言語の垣根無くなってきてるな〜と感じます😂
参考：Blazor 公式
「SCSS紹介」デザイン通りにスタイルを抽象的に書けた！
登壇者：Misha Solitermanさん
私もヘビーユーザーのscssについてのお話でした
LT時間枠の5分弱で、記法からモジュール化、変数やforの使用など幅広くまとめられていて、scssの良さやメリットがぎゅっと詰まっていた発表でした！
短い時間だったのにまとめ力ほんとすごい
普段脳死で書いてるので、よいおさらいにもなりました
参考：sass 公式
Firebase + Bolt で もくもく会用のSlack botを作った話
登壇者：RyoKawamata さん
スライド：https://speakerdeck.com/kawamataryo/build-slack-bot-with-firebase-plus-bolt
Qiita：Cloud Functions for Firebase 🔥 + Bolt ⚡️で勉強会用のSlack Botを作ってみる
slack bot制作のお話でした
無料版では使うことのできないSlack workflowの代わりに、FirebaseのCloudfunctionとBoltでSlackbotを作ったとのこと
こんなにbotが簡単に作れるなんてステキ！…ですがBoltはSlackAPIのためのものでした(TT)（弊社はTeams）
スライドもすごく見やすくて、復習捗りました
javascriptでも条件式を使いたい話
登壇者：philomagi さん
スライド：https://speakerdeck.com/tooppoo/want-to-use-conditional-expression-in-javascript
恥ずかしながらこの発表を聞くまで、条件「文」と条件「式」の違いがわかっていなかった…
条件「文」= 値を返さない
条件「式」= 値を返す
条件式はjavascriptでは使えない…のでライブラリを作ったというお話しでした(すごい)
三項演算子つかえば条件式みたいなことできるよってコメントから、チャットで三項演算子宗教についてウンウン言い合ったの楽しかったなあ
ライブラリURL：https://www.npmjs.com/package/ceiocs
Preact で手書き文字採点アプリを作ってみた
登壇者：choo さん
スライド：https://docs.google.com/presentation/d/1C1DCc_44hOXJ6XkG8xhv7mLhjjYE14oD_FMKg7EHr1w/edit?usp=sharing
Qiita：DeepLearning を使った手書き文字採点の Web サービスをリリースした
まず「Preact…？？」ってところからでした😂
ざっくりいうと、Reactの軽い版のようです
手書き文字採点アプリも、採点可能文字数が3000超え(漢字もサポートしてるのがすごい)、動作もめちゃくちゃ早いときた
これ小学校の授業に導入したら先生の好みの字体などで忖度なくなるからいいと思うんだよなあ
参考：Preact 公式
サービスURL：https://letters.choo.works/
React.jsで使える非同期処理と描画更新を最適化するフレームワークを作っている話
登壇者：Q_Q さん
スライド：https://docs.google.com/presentation/d/1kAhKfSyuvlFoCxI5aRZyUE6RnACUCGmw0u8ckSI-Sr8/edit?usp=sharing
現在製作途中のReactフレームワーク「Trela」の紹介のお話でした
Githubは公開されています
READMEにもありますが、描画更新のコード量抑えられる＆リーダブル
あと地味に非同期処理のキャンセルが超楽(わずか数文字)なの便利だと思う
ライブラリURL：https://www.npmjs.com/package/trela
もっと見るボタンを実装してみた
登壇者：ozawa0 さん
おなじみの「もっと見るボタン」の、
もっと見るボタン押す → 記事ページに遷移 → 戻る → もっと見るボタン押す前に戻ってしまう
という不便な点を解決したもっと見るボタンの実装のお話でした
localstorageを利用して、もっと見るボタンをどれだけ押したか＋スクロール量を保持している点に、目から鱗でした👀！
localstorageもこんな使い方があるのね…と勉強になりました
フロントエンド初学者が仕事を通じて見た現実と感動した話
(イベントサイトにLTタイトル載っていなかった＆発表中私の方で控えていなかったので、発表内容の雰囲気でタイトル書いています🙇♀️)
登壇者：uni__82 さん
アルバイトでフロントエンドのお仕事をして思ったことと感動したことのお話でした
デザイナーから上がってくるカンプの質（XDのスクショが送られてくる…からプロのデザイナーさんからのカンプはなにからなにまで揃っていて美しい…など）に「あるある〜」がたくさんでした😂
初学者だからこその視点で発表されていて、なんだか初心を思い出してエモくなりました…
インフラ知識が無くても Next.js + vercel を使って簡単に cron 処理が実装できた話
登壇者：itizawa さん
スライド：https://itizawa-tech.growi.cloud/next-cron/%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89LT%E4%BC%9A%20vol.1%20-2020%E5%A4%8F%E7%A5%AD%E3%82%8A-/%E7%99%BA%E8%A1%A8%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%89
Growiの中の人！
毎日のYoutubeルーティーンを自動化する開発についてのお話でした
「これがしたい！」から、どうやって何を使うか、ここで詰まった…など一貫した内容で、個人開発のワクワクや苦悩がわかりやすくまとまっていました
個人開発のワクワクや苦悩が直に伝わってきて、なんだかこちらのモチベーションも上がっちゃいました😂
個人開発はやっぱり楽しい！
あとちゃんとドキュメントはしっかり読もうと思いました
実践React 第2版が猛烈に良い本だったので布教します
登壇者：dairappa さん
スライド：https://docs.google.com/presentation/d/1GHHBmcpsl2wFqt0wU17h-Y_HtsqKS76NejZYFkw0_Hw/edit?usp=sharing
超！待ってました！のLT だったのに……
洋書しかないなんて！騙された！😂
実際のところ、ほんとこれ↓
なので、LearningReactの邦訳版でたらソッコー買うことを誓った…
しかし最後のおまけのサンプルコードが動かないのは草、邦訳版ではちゃんと動くコードに直ってることを祈ろう
nuxt.jsとfirebaseでハマったこと
登壇者：Logy さん
スライド：https://speakerdeck.com/nologyance/nuxt-dot-js-plus-firebasedehamatutakoto
NuxtとFirebaseでToDoアプリを制作する際詰まったことのケーススタディ風な発表でした
普段Vueは触らないのですが、Vueならではの詰まり方がわかって知見が深まりました
Firebase Authenticationって認証システムあったの知らなかったなあ、いろんな認証方法あって嬉しい🥳
Gatsby.jsでmd/adocが混在できるテンプレートを作ったときの苦しみ
登壇者：moomooya さん
スライド：https://speakerdeck.com/moomooya/pain-to-create-gatsby-template-that-supports-markdown-and-asciidoc
私にとっては超タイムリーで嬉しいGatsby！
記事投稿方法にマークダウンとAsciiDocが使えるテーマを制作した際のお話でした
AsciiDoc…？？マークダウンと同じ軽量マークアップ言語のようです
記法を調べてみると、マークダウンとほぼ同じだけど個人的に脚注がめちゃくちゃ見やすいのに感動した
参考：AsciiDoc 公式、AsciiDoc リファレンス(非公式)
おつかれさまでした！
ざざーーーーっとひとことずつ書きましたが、どれも開発意欲をかき立てられるとってもいいLTでした！
当日参加したみなさん、主催者様、そしてこのレポートを読んでくださった皆さん、お疲れさまでした🎉
楽屋トークで主催者様がこぼしてましたが、vol.2の開催は年末？くらいとのことでした
次回も絶対参加したいと思っているので、今から待ち遠しいです！
※レポートの中で間違っている点や不適切な点などありましたら、編集リクエストまたはコメントで教えていただけますととてもありがたいです🙇♀️