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のススメ / 20221027_Raycast
Search
Yuji Yamaguchi
October 27, 2022
Programming
1
750
React+TypeScriptで拡張機能が開発できるRaycastのススメ / 20221027_Raycast
Yuji Yamaguchi
October 27, 2022
Tweet
Share
More Decks by Yuji Yamaguchi
See All by Yuji Yamaguchi
強みを伸ばすキャリアデザイン
yug1224
0
210
インターンと盛り上げる全社員参加型Advent Calendarの作り方 / 2024-02-22-QiitaNight
yug1224
1
51
2022ランキング圏外から2023ランキング入りを実現したテックブログ運営について / 2023-07-28-QiitaEngineerFesta
yug1224
0
67
Qiitaいいね数をGASで計測している話 / 2023-07-24-HRBrainFlyHigh
yug1224
1
570
HRBrainの生態系を支えるフロントエンドチームの取り組み / 2023-06-22-AwEngineerMeetup
yug1224
0
21
明日使えるかもしれないGitテクニック / Gunma.web#47
yug1224
0
220
DX向上委員会 / 20220922_dxhacklt
yug1224
1
160
n8nでワークフローを自動化した話 / 20220914_n8n
yug1224
1
1.3k
インシデントゼロを支える技術 / 20220315_devtestlt
yug1224
0
1.6k
Other Decks in Programming
See All in Programming
PHPはいつから死んでいるかの調査
chiroruxx
1
400
AWS CDKコントリビュートTIPS / aws-cdk-contribution-tips
gotok365
2
150
デフォルトにして至高、RubyMineの大好きな所
ruzia
0
330
Hanami and htmx
bkuhlmann
0
210
単体テストを書かない技術 #phpcon_odawara
o0h
PRO
27
8.2k
冗長なエラーログを削減し、スタックトレースを手に入れる / Reducing Verbose Error Logs and Obtaining Stack Traces
upamune
0
530
MicrosoftのPlatform Engineeringガイドを読んで実際になにかやってみた
ymd65536
1
320
大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~
kj455
4
960
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
mizdra
7
920
Ruby Pattern Matching
bkuhlmann
0
930
大規模UIKitベースアプリへのTCAの段階的導入/gradual-adoption-of-tca-in-a-large-scale-uikit-based-app
takehilo
1
150
"config" ってなんだ? / What is "config"?
okashoi
0
240
Featured
See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
227
16k
KATA
mclloyd
15
12k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
Code Review Best Practice
trishagee
55
15k
Build The Right Thing And Hit Your Dates
maggiecrowley
24
2k
Side Projects
sachag
451
41k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
Building a Modern Day E-commerce SEO Strategy
aleyda
17
6.4k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
GraphQLの誤解/rethinking-graphql
sonatard
50
9.2k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
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