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
970
React+TypeScriptで拡張機能が開発できるRaycastのススメ / 20221027_Raycast
Yuji Yamaguchi
October 27, 2022
Tweet
Share
More Decks by Yuji Yamaguchi
See All by Yuji Yamaguchi
Oxlintはいいぞ
yug1224
5
1.3k
Figma + Storybook + PlaywrightのMCPを使ったフロントエンド開発
yug1224
13
5.7k
メンバーの成長速度にバフをかける1on1ミーティング / 2024-12-06
yug1224
25
12k
強みを伸ばすキャリアデザイン
yug1224
3
550
インターンと盛り上げる全社員参加型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
明日使えるかもしれないGitテクニック / Gunma.web#47
yug1224
0
340
Other Decks in Programming
See All in Programming
今こそ知るべき耐量子計算機暗号(PQC)入門 / PQC: What You Need to Know Now
mackey0225
3
380
AIによる開発の民主化を支える コンテキスト管理のこれまでとこれから
mulyu
3
300
CSC307 Lecture 03
javiergs
PRO
1
490
2026年 エンジニアリング自己学習法
yumechi
0
140
AIと一緒にレガシーに向き合ってみた
nyafunta9858
0
240
AI によるインシデント初動調査の自動化を行う AI インシデントコマンダーを作った話
azukiazusa1
1
730
OSSとなったswift-buildで Xcodeのビルドを差し替えられるため 自分でXcodeを直せる時代になっている ダイアモンド問題編
yimajo
3
620
Automatic Grammar Agreementと Markdown Extended Attributes について
kishikawakatsumi
0
190
CSC307 Lecture 04
javiergs
PRO
0
660
IFSによる形状設計/デモシーンの魅力 @ 慶應大学SFC
gam0022
1
300
並行開発のためのコードレビュー
miyukiw
0
180
生成AIを使ったコードレビューで定性的に品質カバー
chiilog
1
270
Featured
See All Featured
Designing Powerful Visuals for Engaging Learning
tmiket
0
230
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
It's Worth the Effort
3n
188
29k
Faster Mobile Websites
deanohume
310
31k
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
akademiya2063
PRO
1
54
Lessons Learnt from Crawling 1000+ Websites
charlesmeaden
PRO
1
1.1k
[RailsConf 2023] Rails as a piece of cake
palkan
59
6.3k
First, design no harm
axbom
PRO
2
1.1k
Navigating the moral maze — ethical principles for Al-driven product design
skipperchong
2
240
From Legacy to Launchpad: Building Startup-Ready Communities
dugsong
0
140
More Than Pixels: Becoming A User Experience Designer
marktimemedia
3
320
Impact Scores and Hybrid Strategies: The future of link building
tamaranovitovic
0
200
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