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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

自己紹介

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Twitterやってます。 Twitter：@azunyan_eng フォローして頂いてOKです！自己紹介

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

ココ！

Slide 10

Slide 10 text

開発したきっかけ

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

VSCode拡張機能開発の始め方

Slide 13

Slide 13 text

VSCode拡張機能開発の始め方 ①YeomanとVS Code Extension Generator をインストール。 ②yo code 以下の2つを実行すると開発を始められる！！

Slide 14

Slide 14 text

Yeomanとは？

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

ランダム出力について

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Math.random()

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Math.random()×配列の長さ

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

やってみた感想

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

ご清聴ありがとうございました！