Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React+TypeScriptで拡張機能が開発できるRaycastのススメ / 202210...
Search
Yuji Yamaguchi
October 27, 2022
Programming
1
920
React+TypeScriptで拡張機能が開発できるRaycastのススメ / 20221027_Raycast
Yuji Yamaguchi
October 27, 2022
Tweet
Share
More Decks by Yuji Yamaguchi
See All by Yuji Yamaguchi
メンバーの成長速度にバフをかける1on1ミーティング / 2024-12-06
yug1224
22
12k
強みを伸ばすキャリアデザイン
yug1224
3
490
インターンと盛り上げる全社員参加型Advent Calendarの作り方 / 2024-02-22-QiitaNight
yug1224
1
120
2022ランキング圏外から2023ランキング入りを実現したテックブログ運営について / 2023-07-28-QiitaEngineerFesta
yug1224
1
140
Qiitaいいね数をGASで計測している話 / 2023-07-24-HRBrainFlyHigh
yug1224
1
960
HRBrainの生態系を支えるフロントエンドチームの取り組み / 2023-06-22-AwEngineerMeetup
yug1224
0
94
明日使えるかもしれないGitテクニック / Gunma.web#47
yug1224
0
300
DX向上委員会 / 20220922_dxhacklt
yug1224
1
220
n8nでワークフローを自動化した話 / 20220914_n8n
yug1224
1
2k
Other Decks in Programming
See All in Programming
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
760
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
77
25k
Is Xcode slowly dying out in 2025?
uetyo
1
260
VS Code Update for GitHub Copilot
74th
2
630
10 Costly Database Performance Mistakes (And How To Fix Them)
andyatkinson
0
240
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
130
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
740
Goで作る、開発・CI環境
sin392
0
230
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
510
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
180
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
12
3.1k
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
170
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
94
6.1k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
It's Worth the Effort
3n
185
28k
Embracing the Ebb and Flow
colly
86
4.7k
Automating Front-end Workflow
addyosmani
1370
200k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
A better future with KSS
kneath
239
17k
How GitHub (no longer) Works
holman
314
140k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
730
Adopting Sorbet at Scale
ufuk
77
9.4k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Transcript
React+TypeScriptで 拡張機能が開発できる Raycastのススメ Yuji Yamaguchi/@yug1224 Reactをもっと語りたい!
▸ ヤマグチ ユウジ(34) ▸ Tw: @yug1224 ▸ フロントエンドエンジニア ▸ 三児の⽗
▸ 11歳、9歳、1歳 ▸ 最近の趣味 ▸ ホームオートメーション ⾃⼰紹介 2 ▸ 2011年04⽉ 通信系企業 ▸ Webコンテンツサービスの開発運⽤ ▸ 2016年01⽉ ネット広告系企業 ▸ 広告配信管理システムの開発運⽤ ▸ 2016年10⽉ ITサービス企業 ▸ 飲⾷店向け予約台帳システムの開発 ▸ 2021年10⽉ SaaS企業 ▸ 勤怠管理システムの開発 ▸ 2022年08⽉ HRTech企業 ▸ エンジニアリングマネージャー
3 ランチャーアプリを 使っていますか?🙋
ランチャーって何? ▸ ショートカットキーのキーボード操作やボタンクリックなどの操作で、 ファイルやアプリケーションソフトウェアを簡単に起動できる機能やツール ▸ 例えば... ▸ PowerToys (win)
▸ Spotlight (mac) ▸ Alfred (mac) ▸ Ueli (win/mac) ▸ Raycast (mac) 4
5
Raycastって何? ▸ Raycast is a blazingly fast, totally extendable launcher.
▸ AlfredやSpotlightに似たランチャーツール ▸ 設定や拡張機能が豊富で、 コマンドやスニペットをチームで共有することができる ▸ API・パッケージが公開されており、 拡張機能をReact+TypeScriptで開発することができる ▸ npmパッケージやNode.js標準モジュールも利⽤できる 6
7 DEMO
作ってみたもの ▸ AVERAGEを求める拡張 ▸ IPアドレスを求める拡張 8
まとめ ランチャーとは、 ショートカットキーのキーボード操作やボタンクリックなどの操作で、 ファイルやアプリケーションソフトウェアを簡単に起動できる機能やツールのこと Raycastは⾼速⾼機能なランチャーアプリで、 React+TypeScriptで拡張機能を開発することができる スタイルなどを⾃由に当てられるわけではないので、
表現できるUIには限りがある 9
10 EOF