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
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
Yuji Yamaguchi
October 27, 2022
Programming
1
980
React+TypeScriptで拡張機能が開発できるRaycastのススメ / 20221027_Raycast
Yuji Yamaguchi
October 27, 2022
Tweet
Share
More Decks by Yuji Yamaguchi
See All by Yuji Yamaguchi
EMからICへ、二周目人材としてAI全振りのプロダクト開発で見つけた武器
yug1224
3
380
Oxlintはいいぞ
yug1224
5
2k
Figma + Storybook + PlaywrightのMCPを使ったフロントエンド開発
yug1224
13
5.9k
メンバーの成長速度にバフをかける1on1ミーティング / 2024-12-06
yug1224
25
12k
強みを伸ばすキャリアデザイン
yug1224
3
560
インターンと盛り上げる全社員参加型Advent Calendarの作り方 / 2024-02-22-QiitaNight
yug1224
1
160
2022ランキング圏外から2023ランキング入りを実現したテックブログ運営について / 2023-07-28-QiitaEngineerFesta
yug1224
1
190
Qiitaいいね数をGASで計測している話 / 2023-07-24-HRBrainFlyHigh
yug1224
1
1.1k
HRBrainの生態系を支えるフロントエンドチームの取り組み / 2023-06-22-AwEngineerMeetup
yug1224
0
140
Other Decks in Programming
See All in Programming
CSC307 Lecture 12
javiergs
PRO
0
460
AHC061解説
shun_pi
0
320
CDIの誤解しがちな仕様とその対処TIPS
futokiyo
0
170
AIコーディングの理想と現実 2026 | AI Coding: Expectations vs. Reality 2026
tomohisa
0
1k
Premier Disciplin for Micro Frontends Multi Version/ Framework Scenarios @OOP 2026, Munic
manfredsteyer
PRO
0
210
go directiveを最新にしすぎないで欲しい話──あるいは、Go 1.26からgo mod initで作られるgo directiveの値が変わる話 / Go 1.26 リリースパーティ
arthur1
2
470
Codexに役割を持たせる 他のAIエージェントと組み合わせる実務Tips
o8n
0
200
NOT A HOTEL - 建築や人と融合し、自由を創り出すソフトウェア
not_a_hokuts
2
560
PostgreSQL を使った快適な go test 環境を求めて
otakakot
0
400
Claude Code、ちょっとした工夫で開発体験が変わる
tigertora7571
0
200
CSC307 Lecture 14
javiergs
PRO
0
450
AI時代のソフトウェア開発でも「人が仕様を書く」から始めよう-医療IT現場での実践とこれから
koukimiura
0
130
Featured
See All Featured
The Cult of Friendly URLs
andyhume
79
6.8k
Keith and Marios Guide to Fast Websites
keithpitt
413
23k
Git: the NoSQL Database
bkeepers
PRO
432
66k
技術選定の審美眼(2025年版) / Understanding the Spiral of Technologies 2025 edition
twada
PRO
118
110k
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
greggifford
PRO
0
93
Why You Should Never Use an ORM
jnunemaker
PRO
61
9.8k
Into the Great Unknown - MozCon
thekraken
40
2.3k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
16k
The SEO identity crisis: Don't let AI make you average
varn
0
400
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
199
73k
The Director’s Chair: Orchestrating AI for Truly Effective Learning
tmiket
1
120
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
37
6.3k
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