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
580
HRBrainの生態系を支えるフロントエンドチームの取り組み / 2023-06-22-AwEngineerMeetup
yug1224
0
21
明日使えるかもしれないGitテクニック / Gunma.web#47
yug1224
0
220
DX向上委員会 / 20220922_dxhacklt
yug1224
1
170
n8nでワークフローを自動化した話 / 20220914_n8n
yug1224
1
1.3k
インシデントゼロを支える技術 / 20220315_devtestlt
yug1224
0
1.6k
Other Decks in Programming
See All in Programming
MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit
nekowen
1
190
Fragment Composition of GraphQL
quramy
7
1.1k
Java 22 Overview
kishida
1
190
dbtのドメイン分割による データ基盤の改善とDigdagとの連携
sakama
0
370
Tailwind CSSを本気でカスタマイズする方法
fsubal
14
5.3k
PHPはいつから死んでいるかの調査
chiroruxx
1
400
Azure OpenAI Serviceのプロンプトエンジニアリング入門
tomokusaba
3
800
スキーマ駆動開発による品質とスピードの両立 - 私達は何故、スキーマを書くのか
kentaroutakeda
0
170
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
4
870
エンターテイメント業界で利用されるAWS
demuyan
0
210
Behind VS Code Extensions for JavaScript / TypeScript Linnting and Formatting
unvalley
5
1.1k
Zero Waste, Radical Magic, and Italian Graft – Quarkus Efficiency Secrets
hollycummins
0
230
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
514
39k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
187
16k
It's Worth the Effort
3n
180
27k
Reflections from 52 weeks, 52 projects
jeffersonlam
345
19k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
20
1.9k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
40
4.4k
Making Projects Easy
brettharned
108
5.5k
Building Your Own Lightsaber
phodgson
99
5.7k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
Fantastic passwords and where to find them - at NoRuKo
philnash
37
2.5k
The Invisible Customer
myddelton
114
12k
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