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
940
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
12
4.7k
メンバーの成長速度にバフをかける1on1ミーティング / 2024-12-06
yug1224
25
12k
強みを伸ばすキャリアデザイン
yug1224
3
520
インターンと盛り上げる全社員参加型Advent Calendarの作り方 / 2024-02-22-QiitaNight
yug1224
1
130
2022ランキング圏外から2023ランキング入りを実現したテックブログ運営について / 2023-07-28-QiitaEngineerFesta
yug1224
1
160
Qiitaいいね数をGASで計測している話 / 2023-07-24-HRBrainFlyHigh
yug1224
1
1k
HRBrainの生態系を支えるフロントエンドチームの取り組み / 2023-06-22-AwEngineerMeetup
yug1224
0
110
明日使えるかもしれないGitテクニック / Gunma.web#47
yug1224
0
310
DX向上委員会 / 20220922_dxhacklt
yug1224
1
230
Other Decks in Programming
See All in Programming
なぜGoのジェネリクスはこの形なのか? Featherweight Goが明かす設計の核心
ryotaros
7
1.1k
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
250
Six and a half ridiculous things to do with Quarkus
hollycummins
0
180
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
860
20251016_Rails News ~Rails 8.1の足音を聴く~
morimorihoge
2
510
Devoxx BE - Local Development in the AI Era
kdubois
0
130
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
200
XP, Testing and ninja testing ZOZ5
m_seki
3
730
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
350
CSC509 Lecture 05
javiergs
PRO
0
300
ソフトウェア設計の実践的な考え方
masuda220
PRO
4
610
3年ぶりにコードを書いた元CTOが Claude Codeと30分でMVPを作った話
maikokojima
0
560
Featured
See All Featured
Building Adaptive Systems
keathley
44
2.8k
Java REST API Framework Comparison - PWX 2021
mraible
34
8.9k
How STYLIGHT went responsive
nonsquared
100
5.8k
Producing Creativity
orderedlist
PRO
347
40k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
The World Runs on Bad Software
bkeepers
PRO
72
11k
The Language of Interfaces
destraynor
162
25k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.8k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
620
Thoughts on Productivity
jonyablonski
70
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