LEFログ

:smile

Reactなんでも発表会で登壇しました!

概要

2025-01-09開催された「Reactなんでも発表会」で登壇しました!

Reactなんでも発表会

Reactなんでも発表会 - connpass

スライド

発表で使ったスライドはこちら!

speakerdeck.com

shadcn/uiを使ってReactでの開発を加速させよう! - Speaker Deck

アプリ

発表で紹介したアプリのリンクも添付します!

その1;自分のホームページ

その2:お正月に開発した謎のアプリ

mindfuldo.vercel.app

感想

世の中のイベントを探しても、意外とウェブフロントエンドの発表会は見つかりません。

そのため、個人でコツコツ開発していても、発表する場がありませんでした。

特に自分はReactが好きで、ちょこちょこアプリを開発しています。*1

開発途中、これは他の方に共有したら役立つだろうな〜と思える知見が貯まっていくこともあります。

しかし、完成してリリースしても、TwitterやBlogに公開して終わり……テキストの共有で終わってしまうことがほとんどです。

そんな中、自分の好きなReactに関する発表会が年明けに開催されると知り、心躍りました。気付いたときにはLT登壇のボタンをポチッとクリックしていました。


今回久々に登壇したのですが、主催者のきつねさんをはじめ、他の登壇者の方々の発表も素晴らしく、参加できて本当に良かったです!✨️

Kento.Yamadaさんの発表では、LookerのUIコンポーネントについて知ることができました。Lockerというデータ可視化プラットフォームそのものを知らなかったので勉強になりました。

おおいしさんの発表では、React19のuseOptimisticについて学ぶことができました。楽観的更新については自分も以前調査したこと*2がありますが、React19からはそれに対応したフックが登場したことを知りました。

きつねさんの発表では中国語の単語帳アプリの開発を紹介して頂きました。コンポーネント分割の難しさは自分も日々悩んでいることなので共感できました。

Nofiさんの発表ではReactのテストについて色々な方法があることを学ぶことができました。特に個人開発をしているとついついテストをサボってしまうので、ちゃんと導入しようと思いました。

nk/えぬけーさんの発表では、MarpとNext.jsを組み合わせてインタラクティブなグラフを用いたスライドを作成できることが分かりました。Marpを本格的に使ってみようと心が動きました。

さいごに

暖かな雰囲気で発表することができて、とても楽しかったです!💖

今後もこのイベントが続いていくことを願っています!

主催者の皆様、他の登壇者の皆様、自分の発表を聞いてくださった皆様、スライドを読んでくださった皆様、ありがとうございました!🙌

MindfulDoという謎のアプリを作りました

MindfulDoのトップ画面

あけましておめでとうございます🎍

新年なので謎のアプリを作りました。

mindfuldo.vercel.app

MindfulDo

動画はこちら

youtu.be

https://youtu.be/dVrHUf09N7g

three.jsがブラウザ上で動いていると、往年のFlashアニメーションみがあって面白いです。

(動画よりも実際に触るのをオススメします!)

技術スタックはこんな感じです。

  • Next.js 15 (App Router)
  • three.js
  • shadcn/ui
  • Cloudflare Pages*1

今年もよろしくお願いします。🐘

*1:追記:Cloudflareのままでも問題なかったのですが、デプロイ先を統一したかったのでVercelに移動しました

最近使っているブラウザ Zen Browser

zen-browser.app

Zen Browser

個人的に良いところ

Arcは自分の環境だとVimiumとの噛み合わせが悪いため、こちらに乗り換えました。

テックブログ等で紹介されていたのをみて使い始めたのだけど、なかなか良い感じ。

「Zen Browser」レビュー--高いカスタマイズ性を備えた「Firefox」ベースのブラウザー - ZDNET Japan

このブラウザを使いこなして、禅/膳の心を持てるようになりたいです。

www.youtube.com

GhosttyをGUIで設定する方法

結論

このサイトを使うだけでOK!

ghostty.zerebos.com

Ghostty Config

GitHubのリンクはこちら

github.com

zerebos/ghostty-config: A beautiful config generator for Ghostty terminal.

感想

Twitterでも紹介しましたが、このツール、本当に便利です。

Ghosttyの設定をブラウザ上のGUIでおこなえて、なおかつそのカスタマイズした設定をファイルとしてエクスポートできます!

Ghostty Configのトップ画面

既存の設定ファイルをインポートして、更にそれをカスタマイズすることも可能! ヤバいぜ

(ghostty configの作者の方に感謝🙏)

Ghosttyを使ってみたい方にオススメです👻

口頭での情報共有で相手を迷子にさせないフォーマット

これはフィヨルドブートキャンプ Part 2 Advent Calendar 2024の3日目の記事です。

プログラミングをしていると、他の方とボイスチャットをして問題を解決することは多いです。

その際、口頭でも伝わりやすい説明をすることが重要になります。

今回はLEF(筆者)が使っている「口頭での情報共有で相手を迷子にさせないフォーマット」を紹介します。

まとめ

  • 「概要 → 結論 → 詳細」の順番に話す
  • 「概要」と「結論」については、それぞれ一文で短く説明する

具体例

例1:ペアプロを依頼するとき

自分「突然ボイスチャットをお願いしてすみません」

エイハブさん「ぜんぜん大丈夫ですよ。どんなことで困っていますか?」

自分「現状を説明しますと、環境構築でエラーが出て開発を進められない状態です(概要)。そのため、エイハブさんと一緒にペアプロをして、エラーを解決したいと考えています(結論)」

エイハブさん「分かりました。どんなエラーが出ていますか?」

自分「はい、現在『メソッドが見つからないよ』というエラーが出ています(結論)。具体的なエラーメッセージを説明しますと…(詳細)」

例2:進捗状況を報告するとき

イシュメールさん「昨日の進捗を教えて下さい」

自分「はい。昨日はモーダル機能の実装に取り掛かり、途中まで進めました(概要)。現在、モーダルのサイズをどれくらいにするかで悩んでいます(結論)。」

イシュメールさん「具体的に、どのような点で悩んでいますか?」

自分「モーダルのサイズが大きくても小さくてもデザインが崩れてしまって悩んでいます(結論)。具体的には右上のボタンの位置が……(詳細)」

解説

「相手を迷子にさせる話し方」とは、一言でいうと「相手に全体像をイメージさせないまま喋り続けてしまうこと」だと思います。

自分が伝えたいことを時系列順に「起承転結」として話すと、「結論」に至るまで、相手は集中して聞き続ける必要があります。相手にコストを掛けてしまいます。

よく聞かれる防止策は「まずは結論から話す」というものです。しかし、それでも結論から話すのは難しい……。

ではどうするのかというと、「起承転」の部分をギュッとまとめた「概要」を、最初に短く伝えることです。

これによって、情報のコンテキストを簡潔に共有できます。そのうえで、「結論」を話して、それから「(起承転の)詳細」をじっくりと話します。*1

こうすると、相手を迷子にさせずに、自分が伝えたい情報を過不足なく伝えられます。

とても便利なフォーマットなのでオススメです。*2 *3

みなさんもぜひ活用してみてください!*4





良い例と混ざらないように、表示を折りたたんでいます(クリックすると開きます)。↓

おまけ:あまり良くない(?)会話例

相手を迷子にさせてしまう会話例(あまり良くない例)を考えてみました。

例3:アンチパターン

イシュメールさん「昨日の進捗を教えて下さい。」

自分「はい。昨日は朝Trelloを見たところ、スプリントバックログに誰もアサインされていないカードがあったので、それを取りました。『ユーザーのプロフィール画面にモーダル機能を実装する』というIssueであり、最初の見込みとしてはあまり問題なく実装できると考えていました。なぜなら似たような機能を以前に……(そのままずっと喋り続ける)……そして実装を終えてモーダルを表示したところ、デザインが崩れていることに気付いて……(更に喋り続ける)……それでもって、モーダルが大きくても小さくてもボタンの位置が崩れてしまうことに気付いて、今悩んでいる感じです」

イシュメールさん「あ、えっと、つまり進捗としては、モーダル機能の実装を途中まで進めた、ということであっていますか?」

自分「はい」


この例では時系列順に喋っていて、伝える側としては話しやすいです。

しかし、聞き手側としては相手が喋り終わるまで、「いったい何の話をしているんだろう……?」と考え続ける必要があり、コストが掛かってしまいます。

思い浮かんだことをそのまま話すことが、必ずしも悪いとは限りません。しかし、大切なポイントを相手に伝えるためには、最初は情報量を削ることが重要に思います。*5


*1:「結論」は「目的」と捉えても良いかも

*2:自分はこのフォーマットにたどり着くまで大変でした。「結論から話す」を実践するのは難しいからです。

*3:このフォーマットを考えるにあたって、DESC法も参考にしました。DESC法を教えてくださった AudioStakes さんにこの場で感謝致します!

*4:ちなみに、今回の記事はドキュメントを用意できない会話を想定したフォーマットです。ドキュメントを共有して話せるのであれば、ドキュメントを用意するのがオススメです。画面上に表示する際も、概要と結論を最初のほうに持っていって、詳細はその後にすると良いでしょう。画像も添付して視覚的な理解を助けるのも大切です。

*5:会話においても作文と同じように情報量をコントロールするとイイよ、ということは以前朝会で snoozer05 さんに教えて頂きました!

議論が袋小路に入ったときだけ決定権を持つロールを作る

こにふぁーさんのブログ記事が好きなので、自分も考えたことを雑に書いてみようと思いました。

一行まとめ

「議論が袋小路に入ったときだけ決定権を持つロール」を作ると良いかも。

概要

  • 全員で意見を交わすことで議論を深めつつ、意思決定していくのが基本的には良い
  • しかし、民主的に方針を決めると、意見がバラバラで議論が収束しない場面もある
    • また、時間的な制約が厳しい場面もある
  • 上の状態のときだけ決定権を持つロール(役割)を作ると、議論が袋小路に入らない
  • このロールの負担を減らすため、議論が迷子になっていないときには決定権を持たなくても良いとする
  • このロールを持つのはリーダーでなくても良い。メンバーに順番に回していくと風通しが良くなる。日直みたいなもの

補足

このロールでは「〇〇でよろしいでしょうか?」と全体の合意を求めるのではなく、「ひとまず〇〇でいきましょう!」と方針を定めることが必要になります。

ソフトウェアの開発は不確実性を伴うので「これでいきましょう!」という決定を下すのは難しいけれど、いったん決定をしないと先に進めないというジレンマがあります。

だからそのロールを引き受けた方には、感謝の念を伝えることが大切だと思います。

余談

すこし議論が直交しますが、piroさんの記事のトップダウンボトムアップについての考え方が勉強になるのでオススメです。

kk-web.link

ではボトムアップを円滑に回すために必要なことはなにか、それはトップダウンをしっかりと行うことだと思います。