Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
React+TypeScriptで拡張機能が開発できるRaycastのススメ / 20221027_Raycast
Yuji Yamaguchi
October 27, 2022
Programming
1
380
React+TypeScriptで拡張機能が開発できるRaycastのススメ / 20221027_Raycast
Yuji Yamaguchi
October 27, 2022
Tweet
Share
More Decks by Yuji Yamaguchi
See All by Yuji Yamaguchi
明日使えるかもしれないGitテクニック / Gunma.web#47
yug1224
0
130
Nameを/で区切るとそれ以降がURLに反映されるよ / 12345678
yug1224
0
36
DX向上委員会 / 20220922_dxhacklt
yug1224
1
100
n8nでワークフローを自動化した話 / 20220914_n8n
yug1224
1
910
インシデントゼロを支える技術 / 20220315_devtestlt
yug1224
0
1k
草を生やす技術 / kusa
yug1224
1
420
レガシーでウォーターフォールなVue.jsでの大規模開発に捧げるテスト駆動フロントエンド開発の話 / v-tokyo10
yug1224
13
5.9k
フロントエンドエンジニアのDXを改善しようとしたらボトムアップでチームビルドをしていた話 / Frontend Training Meetup #1
yug1224
6
970
Vue.js は裏切らない / UIT#5
yug1224
1
1.8k
Other Decks in Programming
See All in Programming
ちょうぜつ改め21世紀ふつうのソフトウェア設計
tanakahisateru
7
6.3k
Qiita Night PHP 2023
fuwasegu
0
10k
Ruby Pattern Matching
bkuhlmann
0
610
Form実装基本を学び直してみた
hyugatsukui
0
240
子育てとEMと転職と
_atsushisakai
1
340
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
2
42k
2023年にクル(かもしれない)通信ミドルウェア技術(仮)
s_hosoai
0
180
なぜRubyコミュニティにコミットするのか?
luccafort
0
300
レガシーフレームワークからの移行
ug
0
110
How to Fight Production Incidents?
asatarin
0
180
コンピュータビジョンセミナー2 / computer_vision_seminar_libSGM
fixstars
0
320
Cloudflare WorkersでGoを動かすライブラリを作っている話
syumai
1
310
Featured
See All Featured
Navigating Team Friction
lara
176
12k
A designer walks into a library…
pauljervisheath
199
16k
Bootstrapping a Software Product
garrettdimon
299
110k
Rails Girls Zürich Keynote
gr2m
87
12k
WebSockets: Embracing the real-time Web
robhawkes
58
6k
Music & Morning Musume
bryan
37
4.6k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
7
570
The Straight Up "How To Draw Better" Workshop
denniskardys
226
130k
Large-scale JavaScript Application Architecture
addyosmani
499
110k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
32
6.7k
Gamification - CAS2011
davidbonilla
75
4.1k
What's in a price? How to price your products and services
michaelherold
233
9.7k
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