【Flutter】VSCodeでWindowsの開発を環境構築

FlutterをVScodeからデバックをする。

現在は、PCを持っていないけれど、スマホやタブレットを持っている人が多いです。

スマホが登場して早何十年と経過して、大学や大学院で学んだ人や業務で開発をする人ではなくとも、アプリ開発はだれでも簡単に作成することができるようになりその敷居は低くなりました。

一般的にアプリはOSによって使うプログラミング言語が異なります。
したがって、iOS版を作りたいならiOS向けの言語、
Android版を作りたいならAndroid向けの言語を使わなければなりません。

しかし、FlutterはiOSとAndroidどちらにも対応した言語です。
FlutterならばOSのことを一切考えず、
どちらにも最適なものとして開発を進めることができます。

さらに、FlutterはVisual Stadio Codeのプラグインがあるので、
アプリ開発をしたことがない初心者でも作成することができます。

本記事では使用しているPCにFlutterをインストールしてVSCodeで使えるようにします。

スマホアプリのプログラミング言語

スマホアプリを開発する言語は非常に多くあります。

例として８つの言語を列挙し、iOS、Androidで使えるか、
難易度は様々な意見を参考にして自分の目安でつけています。

一般的にアプリ開発はiOS、Androidどちらでも使えるマルチプラットフォームではなく、
SwiftやKotlinのようなネイティブ言語の方がよいと言われています。

例えば、Xamarinで開発する際にC#の他にもAndroidとiOSのSDK、.NET Framework、Xamarin.Forms（iOS）（Android）の知識が必要になります。

実際にXamarinを開発をしたことがあり、個人で使う分には良かったです。
しかし、App StoreやGoogle Play Storeに出品できるものが作れるかというと、
相当な経験と技術が必要になると感じました。

さらに、案件ではSwiftとKotlinがほとんどです。
仕事にしやすいことから、iOSならばSwift、AndroidならばKotlinを学ぶべきでしょう。

Flutter

前述の通りだとFlutterも学ぶべきではないと危機感があるかもしれません。
Flutterは最近注目を集めている言語で、今後需要が高まる可能性があります。

Flutterは、2018年にGoogleがリリースしたモバイルフレームワークで比較的新しく、
クロスプラットフォームでiOSとAndroidのアプリを開発できます。

歴史が浅いので、Flutterの情報が上記の言語よりも少ないです。
また、Dartという非常にマニアックな言語を使用します。

Dartは、JavaScriptの改善した言語で、
さらにJavaとC#の影響を受けた言語で、文法が酷似しています。

Unityでのゲーム開発（C#）や動的なウェブデザイン(JavaScript)をしている人は、
Dartの学習コストは低いことでしょう。

let sum = 0;
for (let i = 1; i <= 10; i++) {
  if (i % 2 === 0) {
    sum += i;
  }
}
console.log("1から10までの偶数和:" + sum);

using UnityEngine;

public class EvenSum : MonoBehaviour
{
    void Start()
    {
        int sum = 0;
        for (int i = 1; i <= 10; i++)
        {
            if (i % 2 == 0)
            {
                sum += i;
            }
        }
        Debug.Log("1から10までの偶数和: " + sum);
    }
}

void main() {
  int sum = 0;
  for (int i = 1; i <= 10; i++) {
    if (i % 2 == 0) {
      sum += i;
    }
  }
  print("1から10までの偶数和: $sum");
}

公式ページの「Build apps for any screen」を参照すると、
BMWのアプリがFlutterで作成されていると紹介されています。

また、リクルートが運営する日本の宿・ホテルの予約サイト「じゃらん」も
Flutterで作成されています。

関連：「【Flutter】iOSプロジェクトへのAdd-to-appにおける3つのOptionの比較」

その他にもトヨタやGoogle系のアプリで採用されています。

VScodeでFlutterを使用する

Flutterを開発する環境は、VScodeがおすすめです。

VScodeを開いて、Ctrl + Shift +X。
あるいはサイドの拡張機能を選択してください。

検索バーに「Flutter」 と入力し、インストールします。

今は、プラグインをインストールしただけで、
Flutterのパッケージをインストールしたわけではありません。

Flutterを稼働させるために、
上部の検索バーに「>Flutter:New Project」と入力して実行すると、次のような警告文が出ます。

要するに、プログラムやAPI(アプリケーションプログラミングインタフェース)、サンプルコードなどをパッケージにしたSDK（ソフトウェア開発キット）をダウンロードするように指示されます。

Cound not find a Flutter SDK. Please downloaded, or, if already downloaded, click ‘Locate SDK’.

Visual Studio Code

したがって、Flutter SDKをダウンロードします。

• Step1
  Flutter SDKのインストール

• Step2
  Pathを通す

• Step3
  開発環境を設定