Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React+TypeScriptで拡張機能が開発できるRaycastのススメ / 20221027_Raycast

React+TypeScriptで拡張機能が開発できるRaycastのススメ / 20221027_Raycast

Yuji Yamaguchi

October 27, 2022
Tweet

More Decks by Yuji Yamaguchi

Other Decks in Programming

Transcript

  1. React+TypeScriptで 拡張機能が開発できる Raycastのススメ Yuji Yamaguchi/@yug1224 Reactをもっと語りたい!

  2. ▸ ヤマグチ ユウジ(34) ▸ Tw: @yug1224 ▸ フロントエンドエンジニア ▸ 三児の⽗

    ▸ 11歳、9歳、1歳 ▸ 最近の趣味 ▸ ホームオートメーション ⾃⼰紹介 2 ▸ 2011年04⽉ 通信系企業 ▸ Webコンテンツサービスの開発運⽤ ▸ 2016年01⽉ ネット広告系企業 ▸ 広告配信管理システムの開発運⽤ ▸ 2016年10⽉ ITサービス企業 ▸ 飲⾷店向け予約台帳システムの開発 ▸ 2021年10⽉ SaaS企業 ▸ 勤怠管理システムの開発 ▸ 2022年08⽉ HRTech企業 ▸ エンジニアリングマネージャー
  3. 3 ランチャーアプリを  使っていますか?🙋

  4. ランチャーって何? ▸ ショートカットキーのキーボード操作やボタンクリックなどの操作で、 
 ファイルやアプリケーションソフトウェアを簡単に起動できる機能やツール ▸ 例えば... ▸ PowerToys (win)

    ▸ Spotlight (mac) ▸ Alfred (mac) ▸ Ueli (win/mac) ▸ Raycast (mac) 4
  5. 5

  6. Raycastって何? ▸ Raycast is a blazingly fast, totally extendable launcher.

    ▸ AlfredやSpotlightに似たランチャーツール ▸ 設定や拡張機能が豊富で、 
 コマンドやスニペットをチームで共有することができる ▸ API・パッケージが公開されており、 
 拡張機能をReact+TypeScriptで開発することができる ▸ npmパッケージやNode.js標準モジュールも利⽤できる 6
  7. 7 DEMO

  8. 作ってみたもの ▸ AVERAGEを求める拡張 ▸ IPアドレスを求める拡張 8

  9. まとめ ランチャーとは、 
 ショートカットキーのキーボード操作やボタンクリックなどの操作で、 
 ファイルやアプリケーションソフトウェアを簡単に起動できる機能やツールのこと Raycastは⾼速⾼機能なランチャーアプリで、 
 React+TypeScriptで拡張機能を開発することができる スタイルなどを⾃由に当てられるわけではないので、

    
 表現できるUIには限りがある 9
  10. 10 EOF