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をもっと語りたい!

    View full-size slide

  2. ▸ ヤマグチ ユウジ(34)


    ▸ Tw: @yug1224


    ▸ フロントエンドエンジニア


    ▸ 三児の⽗


    ▸ 11歳、9歳、1歳


    ▸ 最近の趣味


    ▸ ホームオートメーション
    ⾃⼰紹介
    2
    ▸ 2011年04⽉ 通信系企業


    ▸ Webコンテンツサービスの開発運⽤


    ▸ 2016年01⽉ ネット広告系企業


    ▸ 広告配信管理システムの開発運⽤


    ▸ 2016年10⽉ ITサービス企業


    ▸ 飲⾷店向け予約台帳システムの開発


    ▸ 2021年10⽉ SaaS企業


    ▸ 勤怠管理システムの開発


    ▸ 2022年08⽉ HRTech企業


    ▸ エンジニアリングマネージャー

    View full-size slide

  3. 3
    ランチャーアプリを


     使っていますか?🙋

    View full-size slide

  4. ランチャーって何?
    ▸ ショートカットキーのキーボード操作やボタンクリックなどの操作で、

    ファイルやアプリケーションソフトウェアを簡単に起動できる機能やツール


    ▸ 例えば...


    ▸ PowerToys (win)


    ▸ Spotlight (mac)


    ▸ Alfred (mac)


    ▸ Ueli (win/mac)


    ▸ Raycast (mac)
    4

    View full-size slide

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


    ▸ AlfredやSpotlightに似たランチャーツール


    ▸ 設定や拡張機能が豊富で、

    コマンドやスニペットをチームで共有することができる


    ▸ API・パッケージが公開されており、

    拡張機能をReact+TypeScriptで開発することができる


    ▸ npmパッケージやNode.js標準モジュールも利⽤できる
    6

    View full-size slide

  6. 作ってみたもの
    ▸ AVERAGEを求める拡張


    ▸ IPアドレスを求める拡張
    8

    View full-size slide

  7. まとめ
    ランチャーとは、

    ショートカットキーのキーボード操作やボタンクリックなどの操作で、

    ファイルやアプリケーションソフトウェアを簡単に起動できる機能やツールのこと


    Raycastは⾼速⾼機能なランチャーアプリで、

    React+TypeScriptで拡張機能を開発することができる


    スタイルなどを⾃由に当てられるわけではないので、

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

    View full-size slide