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
1
960
React+TypeScriptで拡張機能が開発できるRaycastのススメ / 20221027_Raycast
Yuji Yamaguchi
October 27, 2022
Tweet
Share
More Decks by Yuji Yamaguchi
See All by Yuji Yamaguchi
Figma + Storybook + PlaywrightのMCPを使ったフロントエンド開発
yug1224
13
5.5k
メンバーの成長速度にバフをかける1on1ミーティング / 2024-12-06
yug1224
25
12k
強みを伸ばすキャリアデザイン
yug1224
3
540
インターンと盛り上げる全社員参加型Advent Calendarの作り方 / 2024-02-22-QiitaNight
yug1224
1
150
2022ランキング圏外から2023ランキング入りを実現したテックブログ運営について / 2023-07-28-QiitaEngineerFesta
yug1224
1
180
Qiitaいいね数をGASで計測している話 / 2023-07-24-HRBrainFlyHigh
yug1224
1
1.1k
HRBrainの生態系を支えるフロントエンドチームの取り組み / 2023-06-22-AwEngineerMeetup
yug1224
0
130
明日使えるかもしれないGitテクニック / Gunma.web#47
yug1224
0
330
DX向上委員会 / 20220922_dxhacklt
yug1224
1
250
Other Decks in Programming
See All in Programming
生成AI時代を勝ち抜くエンジニア組織マネジメント
coconala_engineer
0
39k
React 19でつくる「気持ちいいUI」- 楽観的UIのすすめ
himorishige
11
5.2k
Vibe codingでおすすめの言語と開発手法
uyuki234
0
170
Denoのセキュリティに関する仕組みの紹介 (toranoana.deno #23)
uki00a
0
230
LLM Çağında Backend Olmak: 10 Milyon Prompt'u Milisaniyede Sorgulamak
selcukusta
0
150
AIの誤りが許されない業務システムにおいて“信頼されるAI” を目指す / building-trusted-ai-systems
yuya4
7
4.3k
dchart: charts from deck markup
ajstarks
3
960
メルカリのリーダビリティチームが取り組む、AI時代のスケーラブルな品質文化
cloverrose
2
460
AIによるイベントストーミング図からのコード生成 / AI-powered code generation from Event Storming diagrams
nrslib
2
1.3k
【卒業研究】会話ログ分析によるユーザーごとの関心に応じた話題提案手法
momok47
0
170
AI 駆動開発ライフサイクル(AI-DLC):ソフトウェアエンジニアリングの再構築 / AI-DLC Introduction
kanamasa
11
5.3k
MDN Web Docs に日本語翻訳でコントリビュート
ohmori_yusuke
0
420
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
End of SEO as We Know It (SMX Advanced Version)
ipullrank
2
3.9k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.4k
Deep Space Network (abreviated)
tonyrice
0
34
Conquering PDFs: document understanding beyond plain text
inesmontani
PRO
4
2.2k
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
techseoconnect
PRO
0
81
How to Think Like a Performance Engineer
csswizardry
28
2.4k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
HDC tutorial
michielstock
1
320
Technical Leadership for Architectural Decision Making
baasie
0
200
The Hidden Cost of Media on the Web [PixelPalooza 2025]
tammyeverts
2
130
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