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

当サイトで紹介する商品・サービス等の外部リンクは、アフィリエイト広告を含む場合があります。
スポンサーリンク
本記事を読むと以下の実行ができます

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

スマホは家、外出先で欠かせない必須アイテムで、その利便性はアプリによって成り立っています

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

特に話題のFlutterを使えば、iPhone向けAndroid向けのアプリ開発といった別々に作る必要がありません。

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

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

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

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

本記事は次の人におすすめ
  • アプリ開発をしたい。
  • Flutterをインストールしたい。
  • VScodeでFlutterを開発したい。
スポンサーリンク

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

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

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

言語iOSAndroid使用言語目安難易度(最大5)
Swift×Swift3
JavaJava4
Kotlin簡単なJava3
XamarinC#3.5~4
ReactNativeJavaScript
FlutterDart2.5
UnityC#3.5
Unereal EngineC++5

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

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

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

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

KotlinでiOSアプリ作成

表では、△にしていたところですが、2023年5月に、KotlinでiOSアプリ作成できるようになる「Compose Multiplatform for iOS」アルファ版をリリースを発表しました。

JetBrains released Compose Multiplatform for iOS as Alpha, meaning it’s ready to be used in experiments and toy projects. Try it out, and help shape the future of shared mobile user interfaces with Kotlin!

Compose Multiplatform for iOS Is in Alpha

Flutter

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

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

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

Dartとは?

Dartは、2011年にGoogle社がJavascriptの問題を改善するために開発されましたが、2012年にJavaScriptの拡張としてMicrosoft社が「TypeScript」を開発しました。

Google社もTypeScriptを採用したことで、Dartは学ぶ価値のないプログラミング言語という扱いでした。

Dartは、JavaScriptの改善した言語で、さらにJavaとC#の影響を受けた言語で、文法が酷似しています。
私のようにUnityでゲーム開発をしている人は、Dartの学習コストは低いことでしょう。

1から10までの偶数和
  • JavaScript
let sum = 0;
for (let i = 1; i <= 10; i++) {
  if (i % 2 === 0) {
    sum += i;
  }
}
console.log("1から10までの偶数和:" + sum);
  • Unity
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);
    }
}
  • Dart
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」と入力して実行すると、次のような警告文が出ます。

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

Visual Studio Code

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

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

Flutterが使えるようになるまで
  • Step1
    Flutter SDKのインストール

  • Step2
    Pathを通す

  • Step3
    開発環境を設定

Flutter SDKをインストール

Flutter SDKインストール
  • Step1
    Flutter SDKのインストールページに移動
  • Step2
    Get the Flutter SDKでzipファイルをダウンロード

  • Step3
    解答したファイルを所定のディレクトリに配置

警告文の青枠”Download SDK”を選択してください。(Flutter SDKインストールページ

Windows、MacOS、Linux、ChromeOSの内、自分が使用しているPCのOSに該当するものを選択してください。
※投稿者が使うPCのOSにより、Windowsで進行していきます。

下にスクロールを進めて、画像に示す「Get the Flutter SDK」のzipファイル「flutter_windows_3.13.7-stable.zip」をインストールしてください。
zipファイルのバージョンは変わっている場合がありますが、最新版をインストールしてください。

解凍後、ダウンロードファイルは、分かりやすいディレクトリに配置してください。
Cドライブ直下にすることで、間違いが無くなるのでおすすめです。
全角文字(ひらがな、カタカナなど)が含むフォルダー内だと正常にPathが認識しないことがあるので避けるべきです。

Pathを通す

Pathを通過
  • Step1
    設定>システム>バージョン情報>システムの詳細設定を開く
  • Step2
    ユーザーの環境変数のPathにbinフォルダーを追加

  • Step3
    コマンドプロンプトでインストールできたか確認

Flutterのコマンドが使える様にbinフォルダのPathを通します。

設定からシステム、パージョン情報に進んでください。
デバイスの仕様で、「システムの詳細設定」を開いてください。

システムのプロパティ内の詳細設定を選択した後、「環境変数」を選択してください。

Pathは、2つの環境変数ともにあります。
ユーザー(上部)の方の環境変数を選択し、「編集」を開いてください。

新規で、先ほど解凍したファイルのディレクトリーパスを追加してください。
例えば、Cドライブ直下にした場合は、以下のようになります。

C:\flutter\bin

OKを選択して、追加できたか確認します。

コマンドプロンプトを開いて、以下を入力してください。

flutter --version

画像のように、Flutterの詳細情報が表示されると正常にインストールできました。

開発環境を設定

開発環境を設定
  • Step1
    コマンドプロンプトで開発環境を調べる
  • Step2
    chromeやXcode、Android Studioをインストールする

インストールしたものの、アプリとして使用できることとは別の話です。

ここから、開発環境を構築していきます。

初めに、コマンドプロンプトに以下を入力してください。

flutter doctor

表示されるものは次の3つです。

画像の場合、Androidの開発が整ってなくて、Visual Studioも不十分だということです。

[√]OK
[×]NG
[!]NG

Androidでエミュレートや実機でデバックしたい場合は、Android Studioのインストールが必要です。

WindowsでiOS開発

iOSの開発に必要なXcodeはWindowsで使えず、AppStoreに出品できないです。
要するに、WindowsでiPhoneやiPadのアプリは開発、配布・販売は不可能です。

日本はスマホはiPhone、タブレットはiPad一強なので、アプリ開発はMacが必要になります。

Flutterの情報が少なすぎる

世界中で多くの企業や開発者がFlutterを採用しつつあります。
しかし、2018年に誕生し歴史の浅いので情報が少ないです。

日本のFlutterエンジニアが多くないので、
今から始めれば将来的に重宝される人材になります。

Udemyは動画を見ながら自分のペースで学習できます。

Udemyのメリット
  • プロのエンジニアから講習が受けられる
  • 自分のペースで学習を進められる
  • オンデマンド形式だから何度でも視聴可能
  • 不満足なコースは視聴していても返金可能返金ポリシー

数多くあるコースの中からおすすめを3つ挙げます。

実演

Flutterの開発環境を整えたので、初めに戻ります。

VScodeで「Ctrl + Shift + P」とコマンド選択してから、「>Flutter:New Project」と入力してください。

先ほどは警告文でしたが、テンプレートが選択できるようになっています。

アプリを作りたいので、「Application」を選択してプロジェクトを作成してください。

作成したプロジェクトの配置場所を選択した後、ファイル名を決めてください。

「main.dart」が既に構築されていて、デバックすると冒頭のようなUIボタンで数値が加算されるようになります。

画像のインフォメンションにあるように、F5を押すとデバックができます。

Your Flutter project is ready! Press F5 to start running

Visual Studio Code

F5を押してもデバックすることができない場合は、どの環境でデバックをするか決めていないからです。

ターミナルで「flutter run」と入力してください。


その後つなげるデバイス一覧が出てきてきます。いずれか1つのコマンドを選択してください。
本記事では「2」を選択しています。

1Windows
2Chrome
3Edge
qキャンセル

まとめ

スマホアプリは需要が高く、だれでも簡単に作成することができるようになりました。

アプリ開発においてiOSはSwift。AndroidはKotlinが一般的で、案件の多さから2つの言語を学ぶべきとされています。

しかし、Flutterを使えば、iPhone向けAndroid向けの両方のOSのアプリを同時に開発できます。

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

Flutter SDKをインストールして、binフォルダをpathに通して、開発環境を設定します。

chromeで動かすには、chromeのインストール。
Androidで動かすには、Android Studioのインストール。
iOSで動かすには、Xcodeのインストール。

これらが必要になります。

この記事を書いた人

プロフィール

アリッシア

                 

大学4年間で何か胸を張れるスキルを身に着けたくて当サイト運営を始めました。
現在、大学院に進学するか就職するか迷いながら勉強しています。
詳しいプロフィールはこちら

Contact icon

contact

X icon

X

Instagram icon

Instagram

Note icon

Note

スポンサーリンク
Flutter
フォローする
タイトルとURLをコピーしました