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
900
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
20
12k
強みを伸ばすキャリアデザイン
yug1224
3
470
インターンと盛り上げる全社員参加型Advent Calendarの作り方 / 2024-02-22-QiitaNight
yug1224
1
110
2022ランキング圏外から2023ランキング入りを実現したテックブログ運営について / 2023-07-28-QiitaEngineerFesta
yug1224
0
130
Qiitaいいね数をGASで計測している話 / 2023-07-24-HRBrainFlyHigh
yug1224
1
920
HRBrainの生態系を支えるフロントエンドチームの取り組み / 2023-06-22-AwEngineerMeetup
yug1224
0
85
明日使えるかもしれないGitテクニック / Gunma.web#47
yug1224
0
290
DX向上委員会 / 20220922_dxhacklt
yug1224
1
210
n8nでワークフローを自動化した話 / 20220914_n8n
yug1224
1
1.9k
Other Decks in Programming
See All in Programming
VitestのIn-Source Testingが便利
taro28
8
2.4k
監視 やばい
syossan27
12
10k
On-the-fly Suggestions of Rewriting Method Deprecations
ohbarye
1
4.7k
[NG India] Event-Based State Management with NgRx SignalStore
markostanimirovic
1
190
Amazon CloudWatchの地味だけど強力な機能紹介!
itotsum
0
230
Jakarta EE Meets AI
ivargrimstad
0
750
RubyKaigi Dev Meeting 2025
tenderlove
1
1.2k
「理解」を重視したAI活用開発
fast_doctor
0
270
Golangci-lint v2爆誕: 君たちはどうすべきか
logica0419
1
230
2025-04-25 GitHub Copilot Agent ライブデモ(スクリプト)
goataka
0
100
By the way Google Cloud Next 2025に行ってみてどうだった
ymd65536
0
110
AIコーディングエージェントを 「使いこなす」ための実践知と現在地 in ログラス / How to Use AI Coding Agent in Loglass
rkaga
4
1.2k
Featured
See All Featured
Facilitating Awesome Meetings
lara
54
6.3k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
178
53k
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.3k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.2k
Git: the NoSQL Database
bkeepers
PRO
430
65k
The Invisible Side of Design
smashingmag
299
50k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
The Pragmatic Product Professional
lauravandoore
33
6.6k
[RailsConf 2023] Rails as a piece of cake
palkan
54
5.5k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.5k
How STYLIGHT went responsive
nonsquared
100
5.5k
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