スライドショー スライドショー スライドショー

Flutter入門!始め方とDartを使ったアプリ開発の勉強法まで解説

FlutterはGoogleが開発したアプリケーション開発ツールです。その便利さからFlutterを使って開発してみたいという方は多いでしょう。

しかしいざ開発を始めようと思うと、以下のような悩みにぶつかってしまうことが多いものです。

Flutterを始めてみたいけど何から学べばよいかわからない
Flutterの基礎知識について知りたい

今回はこのような悩みを抱えている方に向けて、FlutterやDartの基礎知識からインストール方法、おすすめの学習法まで解説します。

「Dartって何?Flutterと関係あるの?」と思った方も、この記事を読めばFlutterとDartの関係性からそれぞれの役割まで理解できます。Flutterを使ったアプリケーション開発を始めようと考えている方は、ぜひ本記事からスタートしてみてください。

Flutterとは

Flutterとは?
Flutterとは?

FlutterはGoogleによって開発された、モバイルアプリケーションを開発するためのツール。近年では「モバイルアプリケーションフレームワーク」という呼ばれ方もされます。

モバイルアプリケーションといえば「iOS」「Android」が主流ですが、実はそれぞれで同じアプリを作ろうとすると、プログラミング言語やツールは全く異なるものを使う必要があります。

つまりiOSにはiOS用の、AndroidにはAndroid用の開発環境が必要になるということ。これでは開発から運用、ソースコードの管理までそれぞれに手間が掛かってしまうため大変ですよね。

このような状況を改善するべく生まれたのがFlutterという技術です。

Flutterを使うことで「iOS」「Android」それぞれのアプリケーションを、同じ開発言語、同じ開発環境で作ることができます。それだけではなくWeb・Windows・Mac・Linuxといった複数のプラットフォームにも対応しています。

このように複数の環境で動作するプログラムのことを「クロスプラットフォーム」と呼び、この「クロスプラットフォーム」こそがFlutterの最大の魅力です。

Flutterについてさらに詳しく知りたい方は下記の記事もご覧ください。

Flutterとは?始める前にこれだけは押さえておきたい必須知識を解説
更新日 : 2021年3月1日

また別の記事ではWeb開発ができる「Flutter for Web」についても解説しています。合わせてご覧ください。

【Flutter for Web】メリットや導入方法をわかりやすく解説
更新日 : 2020年9月18日

Flutterに必須の開発言語「Dart」とは

Dartとは?
Dartとは?

Dart(ダート・ダーツ)は2011年にGoogleによって発表されたプログラミング言語で、Flutterで開発する際に用いられます。

DartはJavaScriptの欠点を補う目的で開発されたプログラミング言語ですが、2018年にFlutterが登場するまでは他のプログラミング言語と比較すると人気が低い状態が続いていました。しかしFlutterが登場してからはDartが使われる機会も増え、徐々に開発者から指示を集め始めました。

Dartの歴史やメリットデメリットについては他の記事でも紹介しています。気になる方はご覧ください。

Dartとは?メリットやデメリット、開発経緯まで丸わかり
更新日 : 2021年3月1日

ではここからはDartの主な特徴について詳しく見ていきましょう。

  • オブジェクト指向
  • 型付け

これら2点について解説します。

オブジェクト指向

画像:オブジェクト指向

Dartの特徴1つ目は、オブジェクト指向であるという点です。

「オブジェクト指向」とはざっくり言うと、「モノ」を組み立てるようにプログラムを表現してコンピュータに動作をさせることで、「効率よく開発するための考え方」の1つです。

大切なのは、オブジェクト指向自体は「技術」ではなく「考え方」であるという点です。

オブジェクト指向は慣れるまでは理解が難しく複雑ですが、JavaやPHPといったメジャーな開発言語でも用いられている概念です。そのためこれらの言語で本格的な開発経験がある方は、ある程度想像がつくのではないでしょうか。

オブジェクト指向が採用されているプログラミング言語には、「メンテナンスがしやすい」「分業化ができる」といった特徴があります。

オブジェクト指向についてさらに詳しく知りたい方は下記の記事もご覧ください。

オブジェクト指向とは?誰でもわかるようにやさしく解説
更新日 : 2021年8月13日

型付け

型付け
画像:型付け

型付けとは、開発者がプログラムコードの中で利用する変数(何かの値が入る入れ物)に対して、その変数に入る種類を決めることをいいます。

例えば、文字列をいれる為の変数や数字をいれる為の変数などを決めることで、以下の2種類があります。

  • 静的型付け
  • 動的型付け

「静的型付け」は変数に値をいれる前に事前に型を決めておくという特徴があります。

例えばint型を入れるための変数を用意すると、int型以外の値が入ってきた際にエラーになります。対して「動的型付け」は変数に対して事前に型を決めておく必要がなく、プログラムを動かしたときに変数に入ってきた値によって型が決まります。

通常のプログラミング言語は静的型付け言語、動的型付け言語とあらかじめルールが決められていることが多いですが、Dartはどちら開発の型付けにも対応しています。

そのため静的型付けにしたり動的型付けにしたり、状況に応じて使い分けられるのが魅力です。

Flutterを使ったアプリ開発の入門ロードマップ

アプリ開発の入門ロードマップ
アプリ開発の入門ロードマップ

ここからはFlutterを使ったアプリ開発の始め方を解説します。

Flutterを始め方は、以下の3ステップです。

  • ① Flutterをインストールしよう
  • ② Flutterの開発環境を構築しよう
  • ③ Flutterで作成したアプリをリリースしよう

順番に解説します。

① Flutterをインストールしよう

Flutterをインストール

Flutterを始めるために、まずはインストールをしましょう。

WindowsとMacで少しインストールの手順が異なりますが、基本的には同じ。大まかなインストール手順は以下の通りです。

  • SDKをダウンロードする
  • ダウンロードファイルを解凍
  • 所定のディレクトリに配置する
  • pathを通す(Macのみ)

Flutterを使うためには、Flutterの公式サイトからSDK(ソフトウェア開発キット)をダウンロードしてPC内に配置する必要があります。

詳しいインストール手順は以下記事の「Flutterのインストール」にて解説していますのでご覧ください。

Flutterのインストールを分かりやすく解説 | Mac & Windows
更新日 : 2021年3月1日

② Flutterの開発環境を構築しよう

開発環境の構築
開発環境の構築

インストールが完了したら、実際にFlutterを用いた開発をしてみましょう。

FlutterではAndroid Studio(IntelliJ)または Visual Studio Codeを用いた開発が推奨されています。また、実装したものを自身のPC内で動きを確認したい場合は、XcodeのシミュレータやAndroid Studioのエミュレータを利用できます。

シミュレータやエミュレータについての詳しい解説は以下記事の「Flutterで最初のプログラムを動かす」を参考にしてください。

Flutterのインストールを分かりやすく解説 | Mac & Windows
更新日 : 2021年3月1日

③  Flutterで作成したアプリをリリースしよう

アプリをリリース

Flutterで開発したアプリケーションを公開するためには、申請が必要です。

iOS向けアプリケーションの場合、Appleデベロッパプログラムに登録が必要になります。公開に必要な情報(アプリケーションのタイトルや説明文・スクリーンショットなど)を用意し、Appleへ申請をしましょう。

Android向けアプリケーションの場合は、Google Playに申請をする必要があります。

iOS向けのアプリケーションは、Android向けのアプリケーションと比べると審査が厳しく、1週間~数週間かかると言われています。無事に承認が出れば、AppStoreに公開されます。

Flutter入門者が覚えておきたい主な機能

Flutter開発の主な機能

Flutterのセットアップは完了したでしょうか。

ここからはFlutterで開発をする上で覚えておきたい機能について解説します。

ウィジェット

スマホの画面に表示されるボタンやテキストなどのパーツのことを、Flutterではウィジェット(Widget)と呼びます。

テキストであれば、Text Widget、ナビゲーションバーであれば、Appbar Widgetなどが存在し、それぞれウィジェット単位で文字の内容や大きさ、色などを指定・管理します。

さまざまなウィジェットを配置して画面を構成していくため、どのようなウィジェットがあるのかを知り、どのように使うのかを必ず学んでおきましょう。

パッケージ

パッケージで効率的な開発を

Flutterではパッケージを利用した開発ができます。パッケージとは便利な機能のまとまりのこと

パッケージを読み込むことで、自分で一からプログラミングをせずとも、すでに用意されている機能をそのまま使って効率的に開発を進められます。

Flutterでは、通常のDartのパッケージと、iOSやAndroidなどのネイティブプラットフォーム固有の機能を利用するためのPluginパッケージの2種類が利用できます。それぞれのパッケージを組み合わせることで、実現したい機能を素早くプログラミングすることが可能。

Flutterのパッケージは、pub.devにて探せます。パッケージを追加するときは、Flutterの設定ファイルであるpubspec.yamlに追加したいパッケージを追記し、ターミナルでコマンドを実行することでパッケージの導入ができます。

pubspec.yamlの記載例は以下の通りです。

dependencies:
flutter:
sdk: flutter

cupertino_icons: ^0.1.3
firebase_auth: ^0.16.1
firebase_database: ^3.1.6
font_awesome_flutter: ^8.8.1
smooth_star_rating: ^1.0.3
intl: ^0.16.1

dev_dependencies:
flutter_test:
sdk: flutter

pubspec.yamlの追記が完了したら以下のコマンドを実行しましょう。

$ pub get

Flutter入門者におすすめの学習方法

おすすめの学習方法
おすすめの学習方法

ここまでFlutterの基礎について解説しましたが、より深く学ぶためには自分に合った学習方法を見つけることが大切です。

Flutter入門者におすすめの学習方法は、以下の通りです。

  • 学習サイトで学ぶ
  • 書籍で学ぶ
  • プログラミングスクールで学ぶ

それぞれおすすめの教材を解説します。

学習サイトで学ぶ

Flutter入門者におすすめの学習サイトは以下の2つです。

  • Flutter公式サイト
  • DartPad

Flutterの公式サイトには、学習を始めるためのサポートページが用意されています。英語ではありますが、コマンドや画面のキャプチャーを用いて丁寧に解説されているので参考になるでしょう。

引用元:Flutter

また、Dartそのものを試してみたい方はDartPadがおすすめです。

DartPadはブラウザ上でDartの言語を実行できるサイトです。開発環境を構築していなくてもDartの文法チェックや、Dartを用いたプログラミング学習ができます。

引用元:DartPad

学習本で学ぶ

Flutter入門者向けのおすすめ学習本は以下の3冊です。


「基礎から学ぶ Flutter」はFlutterの歴史からインストール方法、Dartの基本的な文法解説、そして実務レベルの知識としてFlutterのアーキテクチャーやライブラリの使い方など、初級者から実務レベルのFlutterエンジニアになるための知識が網羅的に解説されている良書です。


「Flutter モバイルアプリ開発バイブル」は豊富なサンプルとともに、Flutterの開発の始め方から応用編としてライブラリや状態管理、テストの仕方など実務レベルで有益な知識を解説している書籍です。

Flutterの基礎から開発後の運用までを解説しているため、開発の一連の流れを抑えられる良書です。


「Flutter×Firebaseで始めるモバイルアプリ開発」はAndoroidとiOSで動作するモバイルアプリ開発について書かれた入門書籍です。AndroidとiOS上で動作する「貸し借りをメモするアプリ」の開発を通して実践的な学習ができます。

Flutterの学習におすすめの本は、以下の記事により詳しくまとめていますので併せてお読みください。

Flutterを学ぶおすすめ入門書籍4選!本を選ぶポイントも解説
更新日 : 2021年3月1日

プログラミングスクールで学ぶ

プログラミング初学者であれば、プログラミングスクールでの学習もおすすめです。

独学は費用が比較的安く済む代わりに、一度つまずくと抜け出せなくなることや、何から学べばいいか分からないまま挫折してしまうことがあります。特にFlutterのように環境構築が必要な場合は環境構築の時点でつまずくことも少なくありません。

プログラミングスクールであれば独学に比べると費用は掛かりますが、困った時に講師に質問ができる環境があります。

弊社が運営する「侍エンジニア」では現役エンジニア講師があなた専用のカリキュラムをフルオーダーメイドで作成し、さらにマンツーマンで指導するため、挫折のリスクを最小限にすることが可能。事実、挫折しないプログラミングスクールNo.1にも選ばれています。

オンラインの無料カウンセリングを実施しており、専門のコンサルタントがFlutterに関する疑問はもちろん、学習・キャリアプランの相談にお答えいたしますので、お気軽にご利用ください。

詳細はこちら

まとめ

今回はFlutterの入門知識として、Flutte・Dartの基礎知識から開発の始め方、Flutterを学習するためのおすすめ学習法について解説しました。

Flutterでの開発を始める際に大切なのは、とりあえず簡単なコードを動かしてみることです。

文字を表示するだけの簡易的なアプリなどを作成して、エミュレーターでアプリを起動させることができれば、少しずつFlutter開発の楽しさが見えてくるでしょう。Flutterを使ってあなただけのオリジナルアプリを開発してみてはいかがでしょうか。

侍エンジニアは「人生を変えるプログラミング学習」をコンセンプトに、過去多くのフリーランスエンジニアを輩出したプログラミングスクールです。プログラミングに役立つ情報や有用な情報を発信していきます。
サービスページはこちら

あなたの目的に合わせた
SAMURAI ENGINEERの運営サービス

SAMURAI ENGINEER Pro

未経験でも挫折しないプログラミングスクール

詳細はこちら

SAMURAI ENGINEER Plus

日本最大級のサブスク型オンラインITスクール

詳細はこちら

SAMURAI ENGINEER Freelance

「一人で稼げる」スキルを身につける

詳細はこちら