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
900
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
130
Qiitaいいね数をGASで計測している話 / 2023-07-24-HRBrainFlyHigh
yug1224
1
910
HRBrainの生態系を支えるフロントエンドチームの取り組み / 2023-06-22-AwEngineerMeetup
yug1224
0
85
明日使えるかもしれないGitテクニック / Gunma.web#47
yug1224
0
290
DX向上委員会 / 20220922_dxhacklt
yug1224
1
210
n8nでワークフローを自動化した話 / 20220914_n8n
yug1224
1
1.9k
Other Decks in Programming
See All in Programming
「影響が少ない」を自分の目でみてみる
o0h
PRO
2
1.1k
Module Boundaries and Architecture with Forensic Analysis @NxSummit Amsterdam 2025
manfredsteyer
PRO
0
100
状態と共に暮らす:ステートフルへの挑戦
ypresto
1
650
プロダクト横断分析に役立つ、事前集計しないサマリーテーブル設計
hanon52_
2
450
AI Coding Agent Enablement - エージェントを自走させよう
yukukotani
14
6.1k
Bedrock×MCPで社内ブログ執筆文化を育てたい!
har1101
6
1k
Contribute to Comunities | React Tokyo Meetup #4 LT
sasagar
0
440
Being an ethical software engineer
xgouchet
PRO
0
210
プロフェッショナルとしての成長「問題の深掘り」が導く真のスキルアップ / issue-analysis-and-skill-up
minodriven
7
1.4k
KawaiiLT 登壇資料 キャリアとモチベーション
hiiragi
0
120
ウォンテッドリーの「ココロオドル」モバイル開発 / Wantedly's "kokoro odoru" mobile development
kubode
1
140
AIコードエディタの基盤となるLLMのFlutter性能評価
alquist4121
0
220
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
How to Ace a Technical Interview
jacobian
276
23k
A better future with KSS
kneath
239
17k
Designing for Performance
lara
608
69k
Building a Modern Day E-commerce SEO Strategy
aleyda
40
7.2k
Making Projects Easy
brettharned
116
6.1k
Rails Girls Zürich Keynote
gr2m
94
13k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.5k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
13
1.4k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.1k
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