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

VisualStudioCodeの拡張機能を作ってみた!

 VisualStudioCodeの拡張機能を作ってみた!

Azusa Okamoto

February 27, 2022
Tweet

More Decks by Azusa Okamoto

Other Decks in Programming

Transcript

  1. Visual Studio Codeの
    拡張機能を作ってみた!!
    2/27 とにかくほめる!マウントなしのLT会
    あずにゃん

    View full-size slide

  2. 自己紹介

    View full-size slide

  3. 2020.10
    フルタイムアルバイト
    (運用・保守)
    2021.10
    現在の会社に
    入社
    自己紹介

    View full-size slide

  4. 自己紹介
    お仕事では、フロントを主に担当。
    最近は、PHPに興味があって、勉強中!!
    趣味は、簡単な個人開発。

    View full-size slide

  5. Twitterやってます。
    Twitter:@azunyan_eng
    フォローして頂いてOKです!
    自己紹介

    View full-size slide

  6. 開発した拡張機能について

    View full-size slide

  7. 開発した拡張機能について
    「Greeting VSCode」

    View full-size slide

  8. 開発した拡張機能について
    VSCode起動時にメッセージが表示される!
    メッセージはランダム。

    View full-size slide

  9. 開発したきっかけ

    View full-size slide

  10. 開発したきっかけ
    積読の中にVSCodeの拡張機能開発について特集されている
    WEB+DB PRESSがあった。
    自分でVSCodeを使うときに、何かメッセージが出てきたら嬉しい
    と思ったから。

    View full-size slide

  11. VSCode拡張機能開発の始め方

    View full-size slide

  12. VSCode拡張機能開発の始め方
    ①YeomanとVS Code Extension Generator
    をインストール。


    ②yo code
    以下の2つを実行すると開発を始められる!!

    View full-size slide

  13. Yeomanとは?

    View full-size slide

  14. Yeomanとは?
    プロジェクトのひな型を作成するためのツール。
    色々なテンプレートが用意されていて、
    指定したテンプレートのひな型を作成してくれる。

    View full-size slide

  15. VS Code Extension Generatorは、
    VSCodeの拡張機能開発で使うテンプレート。
    Yeomanとは?

    View full-size slide

  16. ランダム出力について

    View full-size slide

  17. ランダム出力について
    出力予定のメッセージは、配列に格納しておく。
    Math.random()を利用して、配列のインデックス番号を
    ランダムで出力するようにしている。

    View full-size slide

  18. Math.random()

    View full-size slide

  19. Math.random()
    0以上1未満の浮動小数点数の疑似乱数が返ってくる。
    ※疑似乱数と乱数はちょっと違う...?
    疑似乱数 = 計算によって求められている乱数。
    乱数 = 規則性のない数字。

    View full-size slide

  20. Math.random()×配列の長さ

    View full-size slide

  21. Math.random()×配列の長さ
    最低:0
    最高:配列の最後のインデックス番号
    ...の範囲の疑似乱数を出力。

    View full-size slide

  22. Math.random()×配列の長さ
    あとは、Math.floor()を使って整数に直すと、
    インデックス番号として利用できるようになる。
    配列のインデックス番号がランダムになり、
    値もランダムに出現することになる!

    View full-size slide

  23. やってみた感想

    View full-size slide

  24. やってみた感想
    Visual Studio Marketplaceに、
    自分が開発した拡張機能が並ぶと感動✨
    公式ドキュメントで説明がしっかりされているので、
    始めやすい!
    Yeomanのおかげで、環境構築の心配は不要なので、
    機能開発・メソッドについての学習に集中できた!

    View full-size slide

  25. ご清聴ありがとうございました!

    View full-size slide