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
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
110
Cursor Subagentsはいいぞ
yug1224
2
150
EMからICへ、二周目人材としてAI全振りのプロダクト開発で見つけた武器
yug1224
5
750
Oxlintはいいぞ
yug1224
5
2.8k
Figma + Storybook + PlaywrightのMCPを使ったフロントエンド開発
yug1224
13
6.1k
メンバーの成長速度にバフをかける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
「接続」—パフォーマンスチューニングの最後の一手 〜点と点を結ぶ、その一瞬のために〜
kentaroutakeda
5
2.5k
Nuxt Server Components
wattanx
0
250
仕様漏れ実装漏れをなくすトレーサビリティAI基盤のご紹介
orgachem
PRO
8
5k
実践CRDT
tamadeveloper
0
350
安いハードウェアでVulkan
fadis
1
920
10年分の技術的負債、完済へ ― Claude Code主導のAI駆動開発でスポーツブルを丸ごとリプレイスした話
takuya_houshima
0
1.8k
テレメトリーシグナルが導くパフォーマンス最適化 / Performance Optimization Driven by Telemetry Signals
seike460
PRO
2
220
The free-lunch guide to idea circularity
hollycummins
0
420
L’IA au service des devs : Anatomie d'un assistant de Code Review
toham
0
210
Linux Kernelの1文字のミスで 権限昇格ができた話
rqda
0
2.3k
AWS re:Invent 2025の少し振り返り + DevOps AgentとBacklogを連携させてみた
satoshi256kbyte
2
150
PHPで TLSのプロトコルを実装してみるをもう一度しゃべりたい
higaki_program
0
180
Featured
See All Featured
The Illustrated Guide to Node.js - THAT Conference 2024
reverentgeek
1
330
Documentation Writing (for coders)
carmenintech
77
5.3k
Visualization
eitanlees
150
17k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4.2k
Designing Experiences People Love
moore
143
24k
Code Reviewing Like a Champion
maltzj
528
40k
Kristin Tynski - Automating Marketing Tasks With AI
techseoconnect
PRO
0
220
Visual Storytelling: How to be a Superhuman Communicator
reverentgeek
2
500
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
aleyda
2
10k
The browser strikes back
jonoalderson
0
900
How to Grow Your eCommerce with AI & Automation
katarinadahlin
PRO
1
160
Leadership Guide Workshop - DevTernity 2021
reverentgeek
1
260
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