今日は、Bicep と VSCodeの話をします。 - そもそも、Bicep って何？ - VSCodeとBicepの関係 - Demo - おまけ（時間があれば）

1. Bicep +VSCode
楽々AzureDeploy
VSCodeConferenceJapan2021
byTakekazuOmi(@Baleen.Studio)
2021/11/20 v1.0.0
VSCode Conference Japan 2021
Takekazu Omi @Baleen.Studio 1

2. 自己紹介
近江武一@takekazuomi
所属JAZUG、baleen.studio（仲間を募集中）
GitHub
AzureContainerAppsのサンプルプロジェクト
bicepのオレオレdevconainer
Blog kyrt.inからzenn.devへ移動（したい）
ARM tempateDSL、Bicep を使おう(1)
ARM tempateDSL、Bicep を使おう(2)
VSCode Conference Japan 2021
Takekazu Omi @Baleen.Studio 2

3. 今日の話
今日は、Bicep とVSCodeの話をします。
そもそも、Bicep って何？
VSCodeとBicepの関係
Demo
おまけ（時間があれば）
VSCode Conference Japan 2021
Takekazu Omi @Baleen.Studio 3

4. Bicepの誕生
Azureでは、VM、Webサーバー、データ
ーベースなど全てはリソース
ARM Templateでは宣言的にリソース構成
を定義できる
ARMTemplate
そこで Bicep 誕生 @2020/9
VSCode Conference Japan 2021
Takekazu Omi @Baleen.Studio 4

5. Bicep の短い紹介
公式ドキュメント
https://docs.microsoft.com/.../bicep/overview
MS Learn、Bicep 概要
https://docs.microsoft.com/.../introduction-to-
infrastructure-as-code-using-bicep/
ソースコード、GitHub
https://github.com/Azure/bicep
VSCode Conference Japan 2021
Takekazu Omi @Baleen.Studio 5

6. もう少し詳しく
宣言型の構文のドメイン固有言語(DSL)
簡潔な構文
信頼性の高いタイプセーフ
コード再利用のサポート
ARM Templateに1:1で対応するトランスパイラ
VSCode Conference Japan 2021
Takekazu Omi @Baleen.Studio 6

7. Bicep の :-1
ARM Template直より100倍楽に書ける
薄いラッパーなので、トラブルシューティングが楽
ARM Templateの根本的制約は解決できない
↑このアタリは別途
VSCode Conference Japan 2021
Takekazu Omi @Baleen.Studio 7

8. Bicepへの道
ARM Templateの生産性が低い、どうすれば？
JSONの冗長性を避ける独自構文
DSLの導入
型を導入
IDE支援の強化、インテリセンス(=LanguageServerの実装）
※ARM TemplateとBicepの関係は、JS とTSに類似
VSCode Conference Japan 2021
Takekazu Omi @Baleen.Studio 8

9. 型の導入
元々AzureResourceの型情報は、azure-rest-api-specsで公開
swagger(OpenAPI)の形式から、Bicep用の型情報を生成
https://github.com/Azure/bicep-types-az
出来上がったものは、nuget:Azure.Bicep.Types.Az にある
Type情報の実体は、api specから抜き出したJSONをリソース
に埋込んだもの
VSCode Conference Japan 2021
Takekazu Omi @Baleen.Studio 9

10. BicepLanguageServer
https://github.com/Azure/bicep/tree/main/src/Bicep.LangS
erver
型情報があるので、エディターでの自動補完の範囲が増えた
https://microsoft.github.io/language-server-protocol/
VSCode Conference Japan 2021
Takekazu Omi @Baleen.Studio 10

11. Bicep+VSCode
Bicepの良さの半分はVCodeで出来ている
Azureリソースの型情報を使って、VSCode上でLangageServer
を動かしてインテリセンスを実装
api specsが間違っていることがあるが、積極的に直す方針らし
い
https://github.com/Azure/bicep/issues/4577
VSCode Conference Japan 2021
Takekazu Omi @Baleen.Studio 11

12. Demo-IntelliSense
https://github.com/Azure/bicep/tree/main/src/vscode-bicep
1. Dot-propertyaccess
2. Resourcepropertynames& propertyvalues
3. List allavailableresourcetypes
4. Snippets
5. Find allreferences,peekreferences
6. Outlineviewand breadcrumb view
7. Refactoring
VSCode Conference Japan 2021
Takekazu Omi @Baleen.Studio 12

13. Demo-devcontainerでの利用
現状futuresに対応していない
"AzureBicep (Community)"コンテナがあるが
azurecliか、azureposhがあれば足りる
手でdevcontainer.jsonに、bicep extensionsを入れる
"extensions": [
"ms-azuretools.vscode-bicep"
],
VSCode Conference Japan 2021
Takekazu Omi @Baleen.Studio 13

14. 新機能にも即時対応
AzureNativeAPIなので、新機能にも即時に
対応
しかし、ドキュメントがなかったり、肝心の型情報が無かったりで結
構辛い。
例:AzureContainerApps
VSCode Conference Japan 2021
Takekazu Omi @Baleen.Studio 14

15. 最後に
TokyoJazugNight
11/25 20時、Bicep 0.5 の新機能
ASKTheSpeeker
TwitterSpacesURL（TrackB）
https://twitter.com/i/spaces/1D
XxyDBqqLVJM
VSCode Conference Japan 2021
Takekazu Omi @Baleen.Studio 15

16. 今回のコンテンツ
GitHub 20211120-vscode-bicep
Slideshare20211120-vscode-bicep
Powerd byMarp。ありがとうございました::
VSCode Conference Japan 2021
Takekazu Omi @Baleen.Studio 16

17. 終
VSCode Conference Japan 2021
Takekazu Omi @Baleen.Studio 17