誰でもわかる!Flutter入門 その1「 Flutterとは?Flutterの特徴と開発の全体像」

こんにちは、ぽたぽたです。
最近、Flutterでモバイルアプリの開発を始めました。

Flutterはまだまだ日本語のドキュメントが少なく、勉強にかなり苦労したので、自分が学んだ内容を記事に残していきたいと思います!

というわけで、今回がそのパート1です。

誰でもわかる!Flutter入門と題して、主にプログラミング初心者の方向けにFlutterの開発の始め方や必要になる知識などを説明していきたいと思います!

対象読者

この記事はこんな方向けに書いていきます。

  • Flutterに興味があるけど、何から始めたらいいかわからない
  • Flutterを始めたはいいけど、英語のドキュメントが多くて辛い
  • プログラミングのスキルはそこまで高くない

Flutterとは?

FlutterとはGoogleが開発したモバイルアプリ開発のためのフレームワークです。(公式ページ

「フレームワーク」という言葉が聞き慣れない方のために言い換えると、

Flutterを使えば誰でも簡単にモバイルアプリをつくることができます。そんな便利なものをGoogleがつくってくれました!ぐらいに思っておけば問題ないでしょう。

Flutterの使い方を学べば、普段あなたが使っているようなiPhoneやAndroidのアプリを自分で手でつくれるようになるんです!

Flutterの特徴は?

モバイルアプリを作るためのフレームワーク(方法)には様々なものがあります。

どのフレームワークを使っても、自分が作りたいものを作れればどれを使っても問題ありません。

フレームワークごとにやりやすいこと、やりにくいことがあって、その特徴に合わせて選ぶのが良いでしょう。

ここでは、Flutterの主な特徴を3つ説明したいと思います。

iOS版とAndroid版のアプリを同時に開発できる

これがflutterの一番大きな特徴だと思います。

これまでモバイル開発はiOSはiOS、
AndroidはAndroidで別々にプログラムを書く必要がありました。

作りたいものは同じだとしても、
それぞれ異なる記述方法で別々に作らないといけません。

リリースしたあとも、機能を追加したり、不具合を直したりするたびに、
両方のプログラムを直さないといけません。

Flutterはその問題を解決してくれます。
Flutterでプログラムを書くと、
1つのプログラムからiOS用のアプリとAndroid用のアプリ、
それぞれをつくることができます。

開発者は作りたいものを1つのコードで書けば、
それをiOS、Android両方にリリースすることができるのです。

Dart言語を使う

FlutterはDartというプログラミング言語を使ってアプリを作ります。

どの言語でも作りたいものは作れます。
フランス語でも英語でも小説が書けるのと同じですね。

しかし、もしFlutterの仕組みを使ってアプリを作るのであれば、
Dart言語を覚える必要があります。

Dartはjavaライクな言語です。
そのため、javaでのプログラミング経験がある方は学習コストをほぼ払わずに使えるようになるでしょう。

個人的にDartはプログラミング初心者にもオススメのプログラミング言語です。
文法がわかりやすく、無駄な記述が不要でスッキリしたプログラムになるからです。

VSCodeで開発できる

次は開発環境についてです。
開発環境とは、開発を進める上で使うツールのことです。

例えば、あなたが小説を書くとしましょう。
その際、あなたはまず小説をどうやって書くか決めないといけません。
ノートで書くか、パソコンか、それともタブレットか。
あるいは、ボールペンを使って書くか、万年筆を使って書くか、などですね。

これと同様にアプリを開発する際も、どうやって開発を進めていくか、
つまりどんな開発環境で開発するかを決める必要があります。

ここでは2種類の開発環境(開発エディタ)を紹介します。
Android StadioとVSCodeです。

Android Stadio

FlutterはGoogleが作ったものということもあり、
Googleがつくった「Android Stadio」という開発エディタで開発を進めることができます。

■ ダウンロード(公式ページ)
https://developer.android.com/studio?hl=ja

■特徴(公式ページ)
https://developer.android.com/studio/features?hl=ja

同じGoogleが作っているということもあり、Flutterとの親和性も高く、
多くの開発者がAndroid Stadioを使って開発しているようです。

VSCode

私は「VSCode」という開発エディタで開発を進めています。
こちらもFlutter開発をサポートする機能が豊富に搭載されていて、私は気に入っています。

■ ダウンロード(公式ページ)
https://code.visualstudio.com/

■特徴(関連記事)

なぜ、VSCodeを使うのか? – Qiita

Visual Studio Codeに乗り換えて良かったこと – satoyan419.com

VSCodeはマイクロソフト社製で、Googleが作ったものではありませんが、
Flutterとの相性も良く、私個人としては快適に開発できています。

Flutter + VSCodeの記事も良く見かけるので、多くの開発者がVSCodeで開発しているものと思われます。 

自分に合った開発環境を整えることが重要

どの開発環境を選んでも開発は進められますし、
最終的にはどうやって開発したかよりも、何を作ったかが重要になります。

しかし、どの開発環境を使うかによって、
スムーズに快適に開発が進められるかどうかが大きく変わってくるので、
自分にあった開発環境を整えることはとても重要です。

開発環境に関しては、いろいろ調べてみてください。
難しければVSCodeでの開発をオススメします。

Flutterでの開発の流れ

さて、Flutterでの開発はざっくり次のような流れで進みます。
各ステップの詳細はパート2以降で説明します。

1.開発エディタを選ぶ

迷って決められないようであれば、VSCodeで始めましょう。
このブログではVSCodeを例に解説をしていきます。

2.ライブラリを公式ページから落としてくる

Flutterで開発を始めるために必ず必要なライブラリを取得する必要があります。
Flutterの公式ページ等から取得することができます。

3.Flutterのセットアップ(flutter doctor)

ライブラリの取得が終わったら次はセットアップです。

FlutterはFlutterのセットアップが完了しているか診断するチェックツールを用意しています。
それが、「flutter doctor」と呼ばれるものです。
flutter doctorというコマンドを実行するだけで、
Flutter自身がが開発に必要なツールが揃っているかチェックし、足りていないものがあれば、それをどう取得すればいいか教えてくれます。

flutter doctorの指示通りに進めるだけでセットアップは完了します。

4.アプリ開発

開発の準備ができたら実際の開発を始めます。
パート2以降でサンプルアプリを例に、実際のプログラミングのイメージを説明します。

5.テスト(動作確認)

自分の意図通りにアプリが動くか、動作確認をします。

6.リリース準備

動作確認が終わったら、アプリをリリースします。
リリースすることで、多くの人にアプリを使ってもらえます。

アプリをリリースするためには、いくつかのステップを踏む必要があります。

7.リリース・保守

リリースしたあとは、自分のアプリをユーザーに使い続けてもらえるように保守する必要があります。
接続不良等、障害が発生した場合はそれを解消しなければなりませんし、
動作に不具合が見つかった場合は、それを修正したものを再度リリースする必要があります。

また、ユーザーに使い続けてもらうためには、新しい機能をどんどん追加していく必要があります。

 

アプリの開発はこのような流れで進みます。

パート2以降でそれぞれのステップの詳細を説明していきます。

まとめ

パート1はここまでです。

今回はFlutterがどういうものなのか、Flutterのメリット、Flutterでの開発の流れをざっくり説明しました。

パート2では実際にFlutter開発を始めるための準備作業について説明したいと思います。

ここまで読んでくださってありがとうございました!

もしこの記事を読んで参考になったよ!という方は、
下のボタンからシェアしていただけると嬉しいです!

twitterでもFlutter関連の情報を発信しています(@potapota_kyoiku
こちらもフォローお待ちしています!!