Flutter開発を加速！VSCodeで使える便利なスニペットまとめ

2023年5月13日

Flutter開発において、VSCodeのスニペットを活用することで効率的なコーディングが可能になります。

本記事では、便利なスニペットの紹介やカスタムスニペットの作成方法を解説していきます。

VSCodeスニペットの基本

スニペットとは？

スニペットとは、一般的にはプログラムの一部分であるコード片を指しますが、VSCodeのコンテキストでは、よく使うコードを短いキーワードで呼び出せる機能を指します。スニペットを利用することで、繰り返し利用するコードの入力が簡単になり、タイプミスを減らし、生産性が向上します。

VSCodeには、標準でいくつかのスニペットが用意されており、さらに拡張機能をインストールすることで、様々な言語やフレームワーク向けのスニペットが利用できるようになります。Flutter開発でも、専用のスニペットが提供されており、これを活用することで効率的なコーディングが可能です。

スニペットの活用方法

スニペットの活用方法は非常に簡単です。VSCodeでコードを記述している際に、スニペットに割り当てられたキーワードを入力すると、自動的に候補が表示されます。候補から適切なスニペットを選択し、Enterキーを押すと、そのスニペットが展開され、対応するコードが挿入されます。

また、スニペットにはプレースホルダが含まれていることがあります。プレースホルダは、展開されたコードの一部で、編集が必要な部分を示しています。展開後、Tabキーを押すことで、プレースホルダ間を簡単に移動しながら編集できます。

Flutter開発においても、スニペットを活用することで、ウィジェットの構造や状態管理のコードを素早く記述することができます。例えば、stfulと入力してスニペットを展開すれば、StatefulWidgetのベースコードが自動的に生成されます。このように、スニペットを活用することで、繰り返し記述するコードを短縮し、生産性を向上させることができます。

おすすめのFlutter開発用スニペット

必須！Flutter公式スニペット

Flutter公式スニペットは、VSCodeでFlutter開発を行う際に必須となるスニペットです。

公式スニペットには、基本的なウィジェットや状態管理のコードが含まれており、これらを利用することで、コーディングの効率が大幅に向上します。

公式スニペットを利用するには、まずVSCodeの拡張機能マーケットプレイスから「Flutter」拡張機能をインストールしてください。インストールが完了したら、自動的に公式スニペットが追加され、利用できるようになります。

いくつかの主要な公式スニペットを紹介します。

stful: StatefulWidgetを作成します。これは、状態を持つウィジェットを定義する際に使用されます。
stless: StatelessWidgetを作成します。これは、状態を持たないウィジェットを定義する際に使用されます。
stanim: StatefulWidgetと、それに対応するAnimationControllerを持つStateクラスを作成します。アニメーションを使用する際に便利です。
stream: StreamBuilderウィジェットを作成します。これは、ストリームからデータを受け取り、UIを更新する際に使用されます。

これらのスニペットを活用することで、Flutter開発の効率を向上させることができます。特に、ウィジェットの構造や状態管理のコードは繰り返し記述されることが多いため、スニペットの利用が大いに役立ちます。

コミュニティで人気のスニペット

Awesome Flutter Snippets

Awesome Flutter Snippetsは、VSCodeで使用できる非公式のFlutterスニペット拡張機能で、より多くのコードスニペットを提供し、開発の効率を向上させます。この拡張機能には、さまざまなウィジェットや機能に対応したスニペットが用意されており、公式のスニペットに加えて利用することで、手間を省いてコーディングができます。

いくつかの主要なAwesome Flutter Snippetsを紹介します。

fltr：Flutterアプリの基本構造を作成します。これには、MaterialAppウィジェットが含まれます。
fbtn：Material Designの基本的なFlatButtonを作成します。
flistv：ListViewウィジェットを作成します。これは、スクロール可能なリストを表示するために使用されます。
fhero：Heroウィジェットを作成します。これは、ページ遷移時に画像や要素をアニメーションさせるために使用されます。

Flutter Widget Snippets

Flutter Widget Snippetsは、VSCode用の非公式のFlutterスニペット拡張機能で、さまざまなFlutterウィジェットをすばやく簡単に追加できるコードスニペットを提供します。これにより、開発者は繰り返し使用されるウィジェットのコードを短縮し、開発プロセスを効率化できます。

以下は、Flutter Widget Snippetsの一部の例です。

fstatelessw：StatelessWidgetを作成します。これは、状態を持たないウィジェットを実装するために使用されます。
fstatefulw：StatefulWidgetを作成します。これは、状態を持つウィジェットを実装するために使用されます。
fcard：Cardウィジェットを作成します。これは、マテリアルデザインカードを表示するために使用されます。
fcolumn：Columnウィジェットを作成します。これは、子ウィジェットを縦方向に並べるレイアウトを作成するために使用されます。

Dart Data Class Generator

Dart Data Class Generatorは、VSCode用の非公式のFlutterスニペット拡張機能で、Dartのデータクラス（エンティティクラスやモデルクラスなど）を簡単かつ迅速に生成するためのツールです。この拡張機能を使用することで、手動でコードを記述することなく、クラスのコンストラクタや copyWith メソッド、 toJson および fromJson メソッドなどの一般的なコードを生成できます。これにより、開発者はより高速で効率的にコードを記述できます。

Dart Data Class Generatorの使用方法です。

Dartファイル内で、生成したいデータクラスの定義を記述します（例：class User { final String name; final int age; }）。
データクラス定義の上にカーソルを置き、右クリックしてコンテキストメニューを表示します。
コンテキストメニューから「Generate Data Class」を選択して、自動生成されたコードが追加されるのを確認します。

Dart Data Class Generator拡張機能を使用することで、データクラスの作成が簡単になり、手間を省くことができます。

カスタムスニペットの作成方法

カスタムスニペットの定義

カスタムスニペットを定義することで、独自のコードフラグメントを素早く挿入できます。これにより、繰り返し使用するコードや特定のプロジェクトでのみ使用するコードの記述が効率化されます。VSCodeでは、カスタムスニペットを作成して独自のショートカットを追加することができます。以下にカスタムスニペットの定義方法を説明します。

VSCodeを開き、左上のファイルメニューをクリックし、「基本設定」のサブメニューから「ユーザースニペット」を選択してください。

スニペットを追加したい言語（この場合はDart）を選択するか、新しいスニペットファイルを作成してください。新しいスニペットファイルを作成する場合、「global.code-snippets」という名前を付けることができます。

開いたスニペットファイルに、以下のようなJSON形式でカスタムスニペットを定義してください。

{
  "My Custom Snippet": {
    "prefix": "mySnippet",
    "body": [
      "final myVar = 'Hello, World!';",
      "print(myVar);"
    ],
    "description": "A custom snippet that prints 'Hello, World!'"
  }
}

“My Custom Snippet”：スニペットの名前です。
“prefix”：スニペットを挿入するためのショートカットキーです。この例では、”mySnippet”と入力することでスニペットが呼び出されます。
“body”：スニペットのコード本体です。この例では、myVar変数に「Hello, World!」を代入し、それを出力するコードが挿入されます。
“description”：スニペットの説明です。オプションですが、スニペットの機能を理解しやすくするために記述しておくことが推奨されます。

スニペットファイルを保存して閉じます。

これで、カスタムスニペットがVSCodeに追加されました。Dartファイル内で「mySnippet」と入力し、候補が表示されたらEnterキーを押すと、カスタムスニペットが挿入されます。カスタムスニペットを使用することで、コーディングの効率を向上させることができます。

よく使うコードをスニペット化する例

スニペット化で効率を向上させるには、繰り返し使用するコードや特定のコーディングパターンをスニペット化することが効果的です。以下に、よく使うコードをスニペット化する例を紹介します。

テキストフィールドのスタイルを定義する際に役立つスニペットです。

{
  "TextFieldStyle": {
    "prefix": "txtstyle",
    "body": [
      "TextStyle(",
      "  color: $1,",
      "  fontSize: $2,",
      "  fontWeight: FontWeight.$3,",
      "  fontStyle: FontStyle.$4,",
      ")"
    ],
    "description": "Define a TextStyle for TextField."
  }
}

スニペットを活用することで、コーディングの効率を向上させることができます。また、自分がよく使うコードをカスタムスニペットとして定義することもおすすめです。