TECH MEDIA

テックメディア


開発環境/ツール
ブログ

VisualStudioでカスタムスニペットを利用する方法

Visual Studio
目次
  1. 01|そもそも、コードスニペットって?
  2. 02|Visual Studioでのカスタムスニペット作成方法
  3. 03|おわりに
みなさんこんにちは、エンジニアの栁です。
早速ですが、エンジニアの皆さんはコードスニペット利用していますか?
使いこなせればタイピングが遅くても、爆速コーディング間違いなし!
コード規約違反も圧倒的に減らせて、コーディングの効率化を助けてくれる便利な機能です。
学生時代から他のIDEで、よくカスタムのスニペットを作成して活用していたのですが、
Visual Studioでの設定方法がちょっと複雑だったので、自分用の覚書も兼ねて紹介します。

1. そもそも、コードスニペットって?

そもそも、コードスニペットって何?

って人もいるかもしれないので簡単にどういうものか紹介です。

ウィキペディアから引用しますと、

スニペット(英語: snippet)とは、「断片」という意味で、再利用可能なソースコードマシンコード、またはテキストの小さな領域を表すプログラミング用語である。通常、これらはより大きなプログラミングモジュールに組み込むために正式に定義された操作ユニットである。スニペット管理は、一部のテキストエディタソースコードエディタ統合開発環境、および関連ソフトウェアの機能である。 これにより、ユーザーは日常の編集操作中に繰り返し入力する必要がなくなる[1]

文字で見てもわかりづらいですが、おそらくコーディングしている皆さんは、お世話になっていると思います。

例えば、”for”と入力して、タブキーを押すと・・・

スクリーンショットはVS CodeでC#の設定

for文が現れました!

あとは、それぞれのプレースホルダを入力していくだけで、整形されたfor文が簡単に書けます。ほかにもif文やwhile文など標準的な構文などはすべてコードスニペットが用意されていますから、無意識のうちに利用している人は多いでしょう。

このように、コーディングの手助けをしてくれる便利な機能ですが、実はカスタマイズが可能なのです。特に複数人で開発する場合などはコード規約などで、独自形式のコメントが指定されている場合などがあり、そういったコメントも上記のように、ショートカットがあれば便利だと思いませんか?

2. Visual Studioでのカスタムスニペット作成方法

さて、いよいよ本題のカスタムスニペットについてです。

カスタムスニペットは、上記で説明した標準のコードスニペットと同じように、プレースホルダー(可変部分)を含むテンプレートのようなものを、ユーザ独自に設定できるものです。

Apple社のIDEであるXcodeなどは、このカスタムスニペットの登録作業が非常に簡単でした。

Xcodeのカスタムスニペットを作成して環境間で同期する

業務で利用しているVisual Studioでも、簡単に設定できるだろう、っと思っていたらちょっとこれがややこしくて・・・

まずは、こんな感じでxml形式の設定ファイルを用意します。(拡張子は.snippet)


<?xml version="1.0" encoding="utf-8" ?>
<CodeSnippets  xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
  <CodeSnippet Format="1.0.0">
    <Header>
      <Title>Copyright</Title>
      <Shortcut>cprt</Shortcut>
      <Description>コピーライト追加</Description>
      <Author>Myself</Author>
    </Header>
    <Snippet>
      <Code Language="csharp">
      <![CDATA[/*
=======================================================================
File name    : $FileName$.cs
Description  : $Description$
Copyright    : Copyright 〇〇〇 Co.,Ltd. 2021 All Rights Reserved.
=======================================================================
*/]]>
    </Code>
    <Declarations>
      <Literal>
        <ID>FileName</ID>
        <ToolTip>ファイル名</ToolTip>
        <Default>Default</Default>
      </Literal>
      <Literal>
        <ID>Description</ID>
        <ToolTip>モジュール説明</ToolTip>
        <Default>処理内容</Default>
      </Literal>
    </Declarations>
    </Snippet>
  </CodeSnippet>
</CodeSnippets>

上記のようなファイルが出来たら、VisualStudioを開いて、

  • ツール>コードスニペットマネージャを選択(Ctrl + K, Ctrl + B)
  • 言語を選択(今回はC#)
  • インポートをクリック
  • 上記の.snippetファイルを選択
  • インポート先としてMy Code Snippetsを選択して完了をクリック

これで設定完了です。

ショートカット文字列を入力して、タブキーをポチッ

これでコード規約のファイル開かなくても、簡単にコピーライトのコメントブロック入れられますね!

詳しい内容はマイクロソフトのドキュメントにチュートリアルなどもあるので、ぜひ参考にしつつ設定してみてください。

チュートリアル: コード スニペットを作成する

3. おわりに

スニペットは導入に少々手間がかかりますが、一度設定してしまえば上記のように時短・コード規約違反を防止できる非常に優れた機能です。

チームで開発する場合は、コード規約に準拠したカスタムスニペットを共有することでチーム全体での効率化も図れると思います。

コーディングにかかる時間を減らせれば、その分仕様検討やロジックの見直し、テスト実施など、より上位の作業に時間をかけられ品質向上に寄与するでしょう。

(おまけ)

スニペットに似たような機能でEmmetというものがあり、こちらは学習コストこそ高いものの覚えてしまえば爆速でHTMLの静的ページを作成できる優れものです。有償ソフトですが、AdobeのDreamweaverなどは標準で高機能なEmmetが利用できます。

フロントエンジニアで興味のある方は、調べて活用してみてください!

RECRUIT 採用情報

「eビジネスに関わる全ての人を幸せにする」
私達とともに新たな時代をつくりませんか?