はじめに

Flutterを網羅的に学習するにあたってRoadmapを使って学習を進めることにしました。

この記事では、Flutter初学者やこれからFlutterを学習し始める方に向けて、IDEについてまとめています。

RoadmapはFlutterだけでなく、他の言語やスキルのロードマップも提供されており、何から学習して良いか分からないと悩んでいる方にとって有用なサイトになっています。
ぜひRoadmapを利用して学習してみてください。

Roadmapとは

簡潔に言えば、Roadmap.shは学習者にとってのガイドブックであり、学習の方向性を提供する学習ロードマップサイトです。

初心者から上級者まで、ステップバイステップでスキルを習得するための情報が提供されています。

学習の進め方が分かりやすく示されているだけでなく、個々の項目に参考資料やリソースへのリンクも提供されているので、学習者は目標を設定し、自分自身のペースで学習を進めることができます。

Flutter IDE

FlutterロードマップFlutter IDEsでは以下の7つのサイトが紹介されています。興味のある方はぜひお読みください。

Setting up and Editor: https://docs.flutter.dev/get-started/editor
Android Studio and IntelliJ: https://docs.flutter.dev/tools/android-studio
IDEs and editors for Flutter: https://dart.dev/tools#ides-and-editors
Install VS Code from the official website: https://code.visualstudio.com/
Android Studio Setup for Flutter Development: https://www.geeksforgeeks.org/android-studio-setup-for-flutter-development/
Get started with Android Studio: https://dart.dev/tools/jetbrains-plugin
IntelliJ IDEA: https://www.jetbrains.com/idea/

IDEとは

IDE（Integrated Development Environment, 統合開発環境）とは、ソフトウェア開発を行う際に利用するツールのことを指します。コードの編集、デバッグ、ビルド、テストなど、ソフトウェア開発のさまざまな段階で利用することができます。

主な機能

1. コードエディタ

コードエディタが組み込まれており、シンタックスハイライト¹、自動補完、コードフォーマット²などの機能が提供されています。

2. デバッガ

統合されたデバッガ³を提供し、コードの実行中にバグやエラーを特定し解決するのを支援します。ステップ実行や変数の監視などのデバッグツールが利用できます。

3. ビルドツール

ソースコードから実行可能なバイナリファイル⁴を生成するためのビルドツールが提供されます。ビルドプロセスを自動化し、エラーチェックや依存関係管理を行います。

4. バージョン管理

多くのIDEは、バージョン管理システム（Git、SVNなど）と連携してコードのバージョン履歴を管理し、チームでの協力開発を容易にします。

5. プラグイン

さまざまなプラグインや拡張機能が用意されており、特定のプログラミング言語やフレームワークに特化した開発環境をカスタマイズできます。

開発プロジェクトに適したIDEを選び、効果的な開発作業を行うことが重要です。

Flutter IDE

Flutterで開発を行うとなると、使用するIDEはおおよそ3つに分けられます。
それぞれメリット、デメリットがあるため、プロジェクトや開発のニーズに応じて活用していくのが良いでしょう。

VSCode (Visual Studio Code)

メリット
デメリット
- 一部の高度な機能が欠けることがある。
- ウェブ開発などの大規模プロジェクトには、一部不足が感じられることがある。

Android Studio

メリット
- Android アプリケーションの開発に特化した統合開発環境 (IDE) であり、Android プラットフォームとの連携が強力。
- Android アプリのビルド、デバッグ、エミュレーションがスムーズに行える。
- Android プロジェクトのテンプレートやコード生成などの便利なツールが充実している。
- Android アプリ開発における豊富なツールやプラグインを提供。
デメリット
- Android アプリ開発以外のプラットフォームや言語には対応していない。
- 一部のプロジェクトでの起動やリソース消費が高いと感じられることがある。

IntelliJ IDEA:

メリット
- Java をはじめとするさまざまなプログラミング言語やフレームワークに対応した高機能な統合開発環境 (IDE)。
- リファクタリングやコード分析、自動生成などの高度な開発支援機能が充実している。
- プロジェクト全体の管理や依存関係の解決が効率的に行える。
デメリット
- 起動やリソース消費が重いと感じられることがある。
- Android アプリ開発に関しては、Android Studio の方が特化しているため、一部機能が制限されることがある。

VSCodeセットアップ

1. VSCodeをダウンロード

以下のリンクからVSCodeをダウンロードします。

ダウンロードの詳細はこちらをご確認ください。

2. 規約を確認

規約を確認し、問題がなければ「同意する」を選択して、次へ進みます。

3. プラグインをインストール

ダウンロードしたVSCodeを起動して、日本語化とFlutterのプラグインをインストールします。

Android Studioセットアップ

Android Studioの公式ページから、インストールをしましょう。

Windowsの場合

1. 「Download Android Studio ~~」を選択

2. 利用規約の同意にチェックマークを入れて、ダウンロードを選択

3. ダウンロード完了後、Android Studioを起動して初期設定を行う

Google が Android Studio とその関連ツールの使用状況データ(パッケージ名やクラス名、プラグイン設定などのソフトウェア識別子、機能やリソースの使用方法など)を収集できるようするか否かのダイアログです。
使用状況統計を Google に送信する場合は右の「Send usage statistics to Google」を、送信しない場合は左の「Don't send」をタップしてください。基本は「Don't send」でOKです。

4. 開発環境のカスタマイズに関する選択

StadardとCustom 2種類の設定方法がありますが、ここではStandardを選択します。後ほど変更もできるので、以下にそれぞれの内容を記載しておきます。

Standard（標準）設定:

簡単かつ迅速にAndroid Studioの設定を始めることができます。
Googleが推奨する一般的な設定が含まれており、新たにプロジェクトを作成したり、環境を切り替えたりする際に便利です。

Custom設定(カスタム)設定:
プロジェクトやチームの独自の要件に合わせて設定を調整できます。これにより、開発プロセスを最適化し、効率を向上させることができます。
プラグインやテーマ、キーマッピングなど、個人の好みに合わせて環境をカスタマイズできます。

5. UIのテーマを選択

好みのテーマを選択しましょう。

6. Android Studioを使用する際の利用規約に同意

Googleが提供するAndroid Studioを利用する際に、ユーザーが同意する必要がある条件や制約の集合です。ライセンス契約は、ソフトウェアの使用方法、制約、責任、ライセンスの範囲などに関する重要な情報を提供しています。

7. Android StudioにFlutterプラグインを導入

インストール後、Dartプラグインを導入するかのダイアログが表示されるため、「Install」をタップします。

8. ライセンスに同意

コマンドを実行していくつかのライセンスに同意します。それぞれ内容を確認してyを押下します。

flutter doctor --android-licenses

Macの場合

1. 「Download Android Studio ~~」を選択

2.Macのチップを確認

利用規約の同意にチェックマークを入れて、端末のチップに対応したものをダウンロードします。
Intel Macの場合

Appleシリコン Macの場合