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
React+TypeScriptで拡張機能が開発できるRaycastのススメ / 20221027_Raycast
Yuji Yamaguchi
October 27, 2022
More Decks by Yuji Yamaguchi
See All by Yuji Yamaguchi
Oxcを導入して開発体験が向上した話
yug1224
4
230
EMからICへのキャリアチェンジの壁とその越え方
yug1224
5
260
Cursor Subagentsはいいぞ
yug1224
2
180
EMからICへ、二周目人材としてAI全振りのプロダクト開発で見つけた武器
yug1224
5
1.3k
Oxlintはいいぞ
yug1224
5
3.2k
Figma + Storybook + PlaywrightのMCPを使ったフロントエンド開発
yug1224
13
6.3k
メンバーの成長速度にバフをかける1on1ミーティング / 2024-12-06
yug1224
25
13k
強みを伸ばすキャリアデザイン
yug1224
3
570
インターンと盛り上げる全社員参加型Advent Calendarの作り方 / 2024-02-22-QiitaNight
yug1224
1
170
Other Decks in Programming
See All in Programming
AIチームを指揮するOSS「TAKT」活用術 / How to Use “TAKT,” an OSS Tool for Orchestrating AI Teams
nrslib
6
720
ビジネスモデルから紐解く、AI+型駆動開発
hirokiomote
2
3.4k
CSC307 Lecture 17
javiergs
PRO
0
250
Signal Forms: Beyond the Basics @ngBaguette 2026 in Paris
manfredsteyer
PRO
0
150
TypeSpec で繋ぐ複数プロダクトの型安全
maroon8021
1
260
Moments When Things Go Wrong
aurimas
3
120
ReactとSvelteのその先、Ripple-TS / Beyond React and Svelte: Ripple-TS
ssssota
3
1.4k
Inside Stream API
skrb
1
240
AI時代だからこそ「Bloc」を採用する価値があるのかもしれない
takuroabe
0
250
サーバーレスで作る、動画データ管理基盤
oyasumipants
0
290
分析エージェント精度向上における データアナリストの役割
oura_shoya
0
130
[KCD Czech] eBPF Meets the GPU: Future of AI Infra Observability
doniacld
0
110
Featured
See All Featured
AI in Enterprises - Java and Open Source to the Rescue
ivargrimstad
0
1.3k
Google's AI Overviews - The New Search
badams
0
1k
How to build a perfect <img>
jonoalderson
1
5.5k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
55k
Faster Mobile Websites
deanohume
310
31k
Tell your own story through comics
letsgokoyo
1
930
Mobile First: as difficult as doing things right
swwweet
225
10k
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
uxyall
0
300
Building a Modern Day E-commerce SEO Strategy
aleyda
45
9.1k
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
auna
0
150
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
12
1.2k
The Art of Programming - Codeland 2020
erikaheidi
57
14k
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