夏休みに何か書けという圧力を食らったので，個人的にFlutterを導入した際の躓きポイントを書いておきます。Flutterを使いそうな部員は今のところ見当たらないものの，参考になれば…
Flutterとは
別に悪口を書き連ねたいわけでもないものの，幣部にFlutterというものを理解していそうな人材はいない気がするので解説を。我が部員で分からなそうな単語には脚注つけてます。
Flutterとは，Googleが開発するクロスプラットフォーム1対応のフレームワーク2です。代表的な特徴を以下に挙げます。
クロスプラットフォーム
Flutterを利用しているコードは様々なプラットフォームへビルドすることができます。具体的に言うと，次のプラットフォーム向けにビルドすることが可能となっています。
- Windows
- macOS
- Linux
- Android
- iOS (Xcodeが利用できるmacOS上のみ，Windowsからもうまくやればできるのかもしれない)
- Web
とまあ，一つの言語で色々なOS向けに公開できるわけですね。普通にやるとSwiftやKotlinなどなど…多くの言語を習得する必要があるわけですから，この技術はとてもありがたいものです。
言語
Flutterは，Dart言語という言語を使用します。Dartはオブジェクト指向3を含む言語で，その開発の経緯もあり，文法はJavaScriptに似ています。また，静的型付けにも動的型付けにも対応しているという特徴があります。
// 動的に変数" hoge "を宣言した例
dynamic hoge = 0;
// 静的に，型推論を利用して宣言した例
var hoge = 0;また，定数(再代入不能な変数)の宣言はconstとfinalの二種があり，これらは値が決定するタイミングにより使い分けられます。
// const → コンパイル時に値が決定する
const hoge = 0;
// コンパイル時に値が決定しないような以下のコードはエラーとなる
const hogehoge = DateTime.now()
// final → 実行時に値が決定するので以下のコードはどちらもエラーとならない
final hoge = 0;
final hogehoge = DateTime.now()ホットリロード
難しいことを抜きに説明すると，変更したコードをいちいちビルドせずに確認できる機能です。ビルド待ちの無駄な時間が省けるため，開発の効率化にもつながります。イメージとしてはVSCodeの拡張機能「Live Server」のようなものだと思ってください。せっかちな私が大好きな機能の一つです。
デザインが楽
Googleが開発しているという点もあり，Materialデザインに標準で対応しています。あまり難しいことを考えずとも「使える」デザインになる安心感があります。
Flutterのよくないところ
クロスプラットフォーム対応というポイントは素晴らしいですが，各プラットフォームへの親和度はネイティブでの開発には劣ります。OS固有の機能が全て網羅されているわけではない点は注意が必要でしょう。
必要なソフトウェアのインストール
ここでは，Visual Studioを利用してWindows向けにビルドできる体制を整えるところまでやりたいと思います。Android向けは調べてやってみてください。
まずは，システムの要件を満たしているか確認しましょう。以下のページから確認できるはずです。(2023年8月時点)
一応，記事執筆時点での要件を以下に引用します。
https://docs.flutter.dev/get-started/install/windows
- Operating Systems: Windows 10 or later (64-bit), x86-64 based.
- Disk Space: 1.64 GB (does not include disk space for IDE/tools).
- Tools: Flutter depends on these tools being available in your environment.
- Windows PowerShell 5.0 or newer (this is pre-installed with Windows 10)
- Git for Windows 2.x, with the Use Git from the Windows Command Prompt option.If Git for Windows is already installed, make sure you can run
gitcommands from the command prompt or PowerShell.
現代のPCであればほとんど満たしているはずです。
Gitのインストール
ソフトウェア開発者にはお馴染みのアイツ，Git4を導入します。
もうめんどくさくなってきたので，URLだけ貼っておきます。これがインスコできないならggりましょう。
Flutterのインストール
ダウンロード && インストール
まずは以下のリンクからFlutter SDKをダウンロードします。
ダウンロードが済んだら，そのzipファイルを解凍5しましょう。
そうすると，解答したフォルダの中に”flutter”という名前のフォルダがあると思います。
それをお好みの場所に配置します。
管理者特権が必要なフォルダには配置しないでください。
今回はCドライブ直下に配置しました。
PATHを通す
PATH6を通す作業を行います。自分がflutterフォルダを配置した場所を覚えておきましょう。
確認が済んだら，検索バーに「env」と打ち込んで環境変数の設定を開きます。
Windows 11ではStartメニューの上部に検索バーがあります。
次に，環境変数の設定画面を開きましょう。
環境変数の設定画面を開けたら，変数の欄が「Path」となっているものを選択してから「編集」ボタンをクリックします。
編集画面を開けたら，「新規」をクリックしてflutterフォルダ配下の「bin」フォルダへのフルパスを入力します。
残りは，「OK」をクリックして画面を閉じるだけです。
PATHを設定できたら，その確認としてコマンドプロンプトかPower Shellから「flutter」コマンドを実行してみましょう。今回はインストールされたflutterのバージョンを表示するコマンドを実行します。
flutter --version
正しくPATHを通すことが出来ていた場合，次のような返答が帰ってくるはずです。もしも，エラーがあった場合はflutterのPATHが通しているかを確認してみましょう。
Flutter 3.13.1 • channel stable • https://github.com/flutter/flutter.git
Framework • revision e1e47221e8 (7 days ago) • 2023-08-22 21:43:18 -0700
Engine • revision b20183e040
Tools • Dart 3.1.0 • DevTools 2.25.0
╔════════════════════════════════════════════════════════════════════════════╗
║ Welcome to Flutter! - https://flutter.dev ║
║ ║
║ The Flutter tool uses Google Analytics to anonymously report feature usage ║
║ statistics and basic crash reports. This data is used to help improve ║
║ Flutter tools over time. ║
║ ║
║ Flutter tool analytics are not sent on the very first run. To disable ║
║ reporting, type 'flutter config --no-analytics'. To display the current ║
║ setting, type 'flutter config'. If you opt out of analytics, an opt-out ║
║ event will be sent, and then no further information will be sent by the ║
║ Flutter tool. ║
║ ║
║ By downloading the Flutter SDK, you agree to the Google Terms of Service. ║
║ Note: The Google Privacy Policy describes how data is handled in this ║
║ service. ║
║ ║
║ Moreover, Flutter includes the Dart SDK, which may send usage metrics and ║
║ crash reports to Google. ║
║ ║
║ Read about data we send with crash reports: ║
║ https://flutter.dev/docs/reference/crash-reporting ║
║ ║
║ See Google's privacy policy: ║
║ https://policies.google.com/privacy ║
╚════════════════════════════════════════════════════════════════════════════╝
The Flutter CLI developer tool uses Google Analytics to report usage and diagnostic data
along with package dependencies, and crash reporting to send basic crash reports.
This data is used to help improve the Dart platform, Flutter framework, and related tools.
Telemetry is not sent on the very first run.
To disable reporting of telemetry, run this terminal command:
flutter --disable-telemetry.
If you opt out of telemetry, an opt-out event will be sent,
and then no further information will be sent.
This data is collected in accordance with the
Google Privacy Policy (https://policies.google.com/privacy).
You have received two consent messages because the flutter tool is migrating to a new analytics system. Disabling
analytics collection will disable both the legacy and new analytics collection systems. You can disable analytics
reporting by running `flutter --disable-telemetry`ここまで出来たら，Flutter SDKの導入は成功です。
Visual Studioを導入
ここでは，Windows向けにビルドするためにVisual Studioを導入します。
以下のページからVisual Studio Community版をダウンロードしましょう。
ダウンロードしたexeファイルを実行します。すると，次のような画面が開かれるはずですので，規約などを入念に確認7し次へ進みます。
インストーラーがインストールされるのを待ちましょう。
インストールが完了すると下のような画面が開くと思います。
このまま「Install」をクリックしてはいけません。
Flutterからビルドするために，下の方にある「C++によるデスクトップ開発」みたいな項目にチェックを入れます。
「Install」をクリックするとVisual Studioのインストールが始まりますから，コーヒーでも飲んで暇を潰しましょう。そこそこ時間がかかるはずです。
Chromeの導入
Web向けに開発する場合，Google Chromeの導入が必要です。あって損はないですから，必要に応じてインストールしましょう。筆者はChrome信者(記事内のブラウザがEdgeなのはWindows Sandboxを使用したため)なので元々入っています。
Visual Studio Codeの導入
ここでは，開発に用いるエディタとしてVisual Studio Codeを使用します。
Visual Studio Code本体の導入
以下よりVisual Studio Codeのインストーラーをダウンロードしましょう。
ダウンロードが済んだらインストーラーを実行して，インストールしましょう。規約はしっかりと確認してくださいね。英文解釈です。
インストールも済んだら，Visual Studio Codeを実行します。初回起動時はセットアップのために色々と聞かれるはずですので，いい感じに設定してあげてください。今回はすべてそのままでいきます。
Flutter拡張の導入
ここまで来たらもう一踏ん張り。FlutterをVisual Studio Codeから利用するためにFlutterの公式が出している拡張機能をインストールします。
まずはサイドバーのExtensionをクリック。
検索窓に「Flutter」と入力して検索します。
検索すると「Flutter」という拡張機能が出てくるはずなのでInstallをクリック。
インストールされたら，一度Visual Studio Codeを閉じて次のステップへ行きます。
コードを書く準備
コマンドプロンプトを開き，以下のコマンドを実行します。
flutter doctor返答はコピーし忘れたので省略します。
Andorid関連でエラーが出ると思います。これはAndroid Studioを導入していないためなので問題ありません。他の項目にエラーが出ていないことを確認しましょう。エラーがなければコードを書いてビルドをする準備が整ったということです。
いざ，プロジェクト作成！
プロジェクトを作成するためにVisual Studio Codeを再度開き，Viewタブ内のCommand Paletteを開きます。Ctrl+Shift+Pでも可。
コマンドパレットを開いたら，flutterと入力して「flutter: New Project」をクリックしましょう。
プロジェクトを作成するフォルダを選択する画面が開くはずですので，適切なフォルダを選択します。
次に，プロジェクト名を聞かれるので適当に入力しましょう。大文字は使用出来ないので注意が必要です。
プロジェクトが作成出来た場合，次のような画面が開かれるはずです。基本的にはlibフォルダ内のファイルが全OSで使用する共通のコードとなります。
また，各プラットフォームの名がついたフォルダはそのプラットフォームでのみ利用する機能などを記述するコードが入ります。
とりあえず初期状態のまま(コードには何も加筆せずに)アプリをビルドしてみましょう。
Runタブ内の「Start Debugging」をクリックします。F5でもOK。
以下のようなアプリの画面が開かれれば成功です。右下のボタンを押すと中央部分の数が増えていくようなアプリケーションです。
おめでとう！
これでひとまずFlutterの導入は完了です。いっぱい遊んでいっぱい学びましょう！
人生は冒険だ！！！
- 単一の言語によって複数のOSなど(→プラットフォーム)で動作するアプリを作成できる。例えばある言語で書いたアプリがmacOS向けにもWindows向けにもビルドできる，みたいな ↩︎
- アプリの開発のために必要な機能を集めているもの。既に開発のための枠組みがあるので，開発の手間が減ったりオイシイことがある。e.g.)NextJS, Django ↩︎
- データとその処理を「オブジェクト」とし，それを組み立てることでプログラムを作る考え方。代表的な言語はJavaやPHPなど ↩︎
- バージョン管理ツールの一つ。これがないと多分現場では生きていけない。 ↩︎
- 最近の若い衆は展開とか言うらしい。私は断じて認めない。 ↩︎
- とても簡単 && テキトーにいうとどこからでもコマンドを使えるようにする作業。 ↩︎
- 規約とプライバシーポリシーすら見ずに個人情報保護語る馬鹿はいねぇよなぁ！？！？ ↩︎
コメント