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
1k
1
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
React+TypeScriptで拡張機能が開発できるRaycastのススメ / 20221027_Raycast
Yuji Yamaguchi
October 27, 2022
More Decks by Yuji Yamaguchi
See All by Yuji Yamaguchi
2026-08-01.pdf
yug1224
1
55
ルールを書いて終わらせないハーネスエンジニアリング
yug1224
4
1.8k
バラバラだった staleTime を、データの性質で4プリセットに集約する
yug1224
1
68
Oxcを導入して開発体験が向上した話
yug1224
5
420
EMからICへのキャリアチェンジの壁とその越え方
yug1224
5
330
Cursor Subagentsはいいぞ
yug1224
2
210
EMからICへ、二周目人材としてAI全振りのプロダクト開発で見つけた武器
yug1224
5
2.1k
Oxlintはいいぞ
yug1224
5
3.6k
Figma + Storybook + PlaywrightのMCPを使ったフロントエンド開発
yug1224
14
6.5k
Other Decks in Programming
See All in Programming
為什麼你並不需要ViewModel / No, you don't need a ViewModel
lovee
1
460
AI時代、エンジニアはどう育つのか -未経験エンジニアの成長を間近で見て考えたこと-
thasu0123
0
210
属人化した知識を、 AIが辿れる地図にする
pkshadeck
PRO
1
130
型も通る、synthも通る、それでも危ない 〜AIのCDKの権限とコストを機械で検証する〜 / It Passes Type Checks, It Passes Synth Checks, but It’s Still Risky — Automatically Verifying Permissions and Costs in AI’s CDK —
seike460
PRO
1
510
言語を使う側から、作る側へ。 自作 Lisp で得た新たな気づき。
andpad
0
140
複数の Claude Code が"放置"されてしまう問題をCLI ダッシュボードを自作して解決した話
sumihiro3
1
610
AI Engineeringは、AIプロダクトだけのものか? 〜AIがソフトウェアを作る時代の新しい当たり前〜 / No AI in your product. AI Engineering in your development.
rkaga
4
320
AI時代のPHPer生存戦略 ~「言語、もうなんでもよくない?」に本気で向き合う~
vivion
0
210
JAWS-UG横浜 #102 AWSサ終供養LT会 成仏できない AWS サービスたち 〜本日、三体供養します〜
maroon1st
0
290
作るコストが小さくなった時代 幸せに働くために改めて考えたいこと 〜エンジニアとして価値を出し続けるために注視している二分野〜
yuppeeng
0
170
20260722_microCMSで考える、AI時代のコンテンツ運用設計
yosh1
0
190
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
480
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
49
10k
Visualization
eitanlees
152
17k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
133
19k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.7k
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
ryanjones
0
190
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
12
1.2k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
10
1.3k
How to make the Groovebox
asonas
2
2.3k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
16k
Product Roadmaps are Hard
iamctodd
55
12k
YesSQL, Process and Tooling at Scale
rocio
174
15k
Leveraging Curiosity to Care for An Aging Population
cassininazir
1
440
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