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
890
React+TypeScriptで拡張機能が開発できるRaycastのススメ / 20221027_Raycast
Yuji Yamaguchi
October 27, 2022
Tweet
Share
More Decks by Yuji Yamaguchi
See All by Yuji Yamaguchi
メンバーの成長速度にバフをかける1on1ミーティング / 2024-12-06
yug1224
20
12k
強みを伸ばすキャリアデザイン
yug1224
3
460
インターンと盛り上げる全社員参加型Advent Calendarの作り方 / 2024-02-22-QiitaNight
yug1224
1
110
2022ランキング圏外から2023ランキング入りを実現したテックブログ運営について / 2023-07-28-QiitaEngineerFesta
yug1224
0
120
Qiitaいいね数をGASで計測している話 / 2023-07-24-HRBrainFlyHigh
yug1224
1
900
HRBrainの生態系を支えるフロントエンドチームの取り組み / 2023-06-22-AwEngineerMeetup
yug1224
0
67
明日使えるかもしれないGitテクニック / Gunma.web#47
yug1224
0
280
DX向上委員会 / 20220922_dxhacklt
yug1224
1
200
n8nでワークフローを自動化した話 / 20220914_n8n
yug1224
1
1.8k
Other Decks in Programming
See All in Programming
AWS CDKにおけるL2 Constructの仕組み / aws-cdk-l2-construct
gotok365
4
910
PHPのガベージコレクションを深掘りしよう
rinchoku
0
230
Compose Navigation実装の見通しを良くする
hiroaki404
0
130
AHC 044 混合整数計画ソルバー解法
kiri8128
0
290
php-fpm がリクエスト処理する仕組みを追う / Tracing-How-php-fpm-Handles-Requests
shin1x1
4
720
バックエンドNode.js × フロントエンドDeno で開発して得られた知見
ayame113
4
1.2k
Devin入門と最近のアップデートから見るDevinの進化 / Introduction to Devin and the Evolution of Devin as Seen in Recent Update
rkaga
6
2.5k
複数ドメインに散らばってしまった画像…! 運用中のPHPアプリに後からCDNを導入する…!
suguruooki
0
380
英語文法から学ぶ、クリーンな設計の秘訣
newnomad
1
260
Kubernetesで実現できるPlatform Engineering の現在地
nwiizo
2
1.5k
RecSys2024 参加報告
unonao
1
180
PHPによる"非"構造化プログラミング入門 -本当に熱いスパゲティコードを求めて- #phperkaigi
o0h
PRO
0
770
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
172
14k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
101
18k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Faster Mobile Websites
deanohume
306
31k
Into the Great Unknown - MozCon
thekraken
35
1.7k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Product Roadmaps are Hard
iamctodd
PRO
52
11k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
450
Adopting Sorbet at Scale
ufuk
75
9.3k
Gamification - CAS2011
davidbonilla
80
5.2k
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