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
AIエージェントで 変わるAndroid開発環境
takahirom
2
760
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
480
作るコストが小さくなった時代 幸せに働くために改めて考えたいこと 〜エンジニアとして価値を出し続けるために注視している二分野〜
yuppeeng
0
170
型も通る、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
Prismを使った型安全な暗号化_関数型まつり2026
_fhhmm
0
160
使いながら育てる Claude Code — 開発フローの1コマンド化 × 繰り返し指摘の自動仕組み化
shiki_kakaku
0
1.5k
What's New in Android 2026
veronikapj
0
240
Japan Community Day at Kubecon + CloudNativeCon Japan 2026: Learning Container Privilege Control by Building My Own Low-Level Container Runtime
ternbusty
1
110
PHPだって関数型したい 〜できること、できないこと〜 / fp-in-php
jsoizo
1
260
PHP Application における Kubernetes 内 gRPC 通信
ganchiku
0
570
ドリフトを絶対に許さない(?)CDK運用 / CDK Ops with Zero Tolerance for Drifts (?)
akihisaikeda
1
140
GDG Korea Android: 2026 I/O Extended ~ What's new in Android development tools
pluu
0
200
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
25
2k
Agile Actions for Facilitating Distributed Teams - ADO2019
mkilby
0
230
Highjacked: Video Game Concept Design
rkendrick25
PRO
1
420
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
49
10k
4 Signs Your Business is Dying
shpigford
187
22k
Writing Fast Ruby
sferik
630
63k
How to Think Like a Performance Engineer
csswizardry
28
2.7k
For a Future-Friendly Web
brad_frost
183
10k
The SEO identity crisis: Don't let AI make you average
varn
0
520
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
akihiro_kokubo
PRO
72
41k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
12
1.2k
Game over? The fight for quality and originality in the time of robots
wayneb77
1
230
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