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
990
1
Share
React+TypeScriptで拡張機能が開発できるRaycastのススメ / 20221027_Raycast
Yuji Yamaguchi
October 27, 2022
More Decks by Yuji Yamaguchi
See All by Yuji Yamaguchi
EMからICへのキャリアチェンジの壁とその越え方
yug1224
5
230
Cursor Subagentsはいいぞ
yug1224
2
170
EMからICへ、二周目人材としてAI全振りのプロダクト開発で見つけた武器
yug1224
5
960
Oxlintはいいぞ
yug1224
5
3k
Figma + Storybook + PlaywrightのMCPを使ったフロントエンド開発
yug1224
13
6.2k
メンバーの成長速度にバフをかける1on1ミーティング / 2024-12-06
yug1224
25
13k
強みを伸ばすキャリアデザイン
yug1224
3
570
インターンと盛り上げる全社員参加型Advent Calendarの作り方 / 2024-02-22-QiitaNight
yug1224
1
170
2022ランキング圏外から2023ランキング入りを実現したテックブログ運営について / 2023-07-28-QiitaEngineerFesta
yug1224
1
200
Other Decks in Programming
See All in Programming
いつか誰かが、と思っていた フロントエンド刷新5年間の実践知
kiichisugihara
1
250
ハーネスエンジニアリングにどう向き合うか 〜ルールファイルを超えて開発プロセスを設計する〜 / How to approach harness engineering
rkaga
27
19k
【26新卒研修】OpenAPI/Swagger REST API研修
dip_tech
PRO
0
130
属人化しないコード品質の作り方_2026.04.07.pdf
muraaano
0
300
Agentic Elixir
whatyouhide
0
440
ソフトウェア設計の結合バランス #phperkaigi
kajitack
0
490
t *testing.T は どこからやってくるの?
otakakot
1
890
JAWS-UG横浜 #100 祝・第100回スペシャルAWS は VPC レスの時代へ
maroon1st
0
210
決定論 vs 確率論:Gemini 3 FlashとTF-IDFを組み合わせた「法規判定エンジン」の構築
shukob
0
150
「Linuxサーバー構築標準教科書」を読んでみた #ツナギメオフライン.7
akase244
0
1.4k
AWSコミュニティ活動は顧客のクラウド推進に効くのか / Do AWS community activities help customers adopt the cloud?
seike460
PRO
0
170
HTML-Aware ERB: The Path to Reactive Rendering @ RubyKaigi 2026, Hakodate, Japan
marcoroth
0
630
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3.3k
Avoiding the “Bad Training, Faster” Trap in the Age of AI
tmiket
0
140
Exploring anti-patterns in Rails
aemeredith
3
350
Accessibility Awareness
sabderemane
1
110
Paper Plane (Part 1)
katiecoart
PRO
0
7.1k
A designer walks into a library…
pauljervisheath
211
24k
Technical Leadership for Architectural Decision Making
baasie
3
350
Writing Fast Ruby
sferik
630
63k
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
reverentgeek
1
430
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
davidcarrasco
0
130
XXLCSS - How to scale CSS and keep your sanity
sugarenia
250
1.3M
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
31
3.2k
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