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

本記事を読むと以下の実行ができます

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

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

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

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

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

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

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

ConoHa WING キャンペーン実施中！

ConoHaWing開設方法｜アリッシア
技術ブログを書くべき理由｜アリッシア

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

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

例として８つの言語を列挙し、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をダウンロードします。

Flutter SDKをインストール

警告文の青枠”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が認識しないことがあるので避けるべきです。

プログラミングで全角を使うと、文字化けしたりビルドエラーになることもあるので、
全て半角するようにしてください。

【Flutter】Androidアプリでのビルドエラーの対処法

AndroidエミュレータでBuild faild with an exceptionでビルドできなかった場合は、settings.jsonからパスを全角から半角に変更することで解決できます。同時にパッケージが破損することがあります。

alicia-ing.com

2024.11.05

Pathを通す

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

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

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

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

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

C:\flutter\bin

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

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

flutter --version

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

開発環境を設定

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

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

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

flutter doctor

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

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

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

【Flutter】VScodeでAndroidエミュレータ起動

AndroidアプリはAndroid Studioのインストール、Amdroid SDKが必要で、Android toolchaiの認識も同時に必須です。エミュレータの違法と聞いたことがあるかもしれませんが、エミュレータ自体は合法です。

alicia-ing.com

2024.11.05

WindowsでiOS開発するには？

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

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

クリエイティブなことには、macが必要か書いています。

【Mac離れ？】クリエイターや開発者はMacに満足しないのか？

クリエイターや開発者はMac離れがささやかれていますが、イラスト（クリスタ）、プログラミング、動画編集などWindows、Macユーザーは等しくいます。PCシェア率はWindowsが優勢ですが、iosアプリはmacでしか作れません。

alicia-ing.com

2024.09.17

ブログを運営するメリット

プログラマーがブログを運営するメリットは沢山あります。
エンジニアはブログを運営するべき理由｜アリッシア

ブログを始めるためには、「テーマ」・「ドメイン」・「サーバー」の3つが必要です。
３つはブログ運営の基盤となる要素ですが、これら全て自分で用意しなければいけません。

面倒で難しくブログ開設を断念してしまう人が多いです。

ConoHa Wingの「WordPressかんたんセットアップ」は
最短10分で契約可能！

【ブログ】WordPressの始め方｜ConoHa Wing契約手順

初心者でも簡単に始められるWordPressブログの立ち上げ手順を解説。学割があり大学生におすすめなConoHa WINGを使い、ガクチカとしての使い方や収益化方法も紹介します。

alicia-ing.com

2024.12.14

ConoHa WINGから契約をすれば、独自ドメイン、サーバーの用意、WordPressとの連携も簡単にできます。

さらに、２つの独自ドメインが永久無料の特典もあり、
月660円からの破格価格にもかかわらず、表示速度は国内最速です。

ConoHa WINGの詳細を見てみる

実演

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」と入力してください。

その後つなげるデバイス一覧が出てきてきます。
いずれか１つのコマンドを選択してください。

本記事では「2」を選択しています。

まとめ

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

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

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

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

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

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

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

ConoHa WING キャンペーン実施中！

ConoHaWing開設方法｜アリッシア
技術ブログを書くべき理由｜アリッシア