Flutterの勉強どうはじめればいいか、モバイル開発未経験のwebエンジニアが紹介してみた

表題の通り、ここ一週間くらいFlutterを触り始めました。 Webエンジニアということもあり、モバイルネイティブなアプリ開発をこれまでしたことがなく、環境構築、どうやってアプリ実行して動作確認するの？とかわからないことだらけでした。

Flutterはここ最近だと新しい方の技術なはずなので、これから始めてみたいなって方がいるはずです。せっかくなのでそんな方の役に立てればと思い、どうやってFlutterを始めたか紹介します。

この記事を読む前に

まずはじめに、ざっくりと自分の前提知識とこの記事で述べることを書いておきます。

私の前提知識

バックエンドエンジニアとして働いている
フロントエンドの技術（Javascript等）には疎い
これまで今までスマホ向けアプリの開発をしたことがない

この記事で述べること

この記事では一旦何で勉強したかまでにとどめておきます。次回からの記事にてFlutterの整理的なことをしていきますのでよろしくお願いします。

Flutterとは
Webエンジニアの自分がどのようにFlutterを勉強しはじめたか（手をつけだしたか）

Flutterとは

そもそもFlutterって何？と思っている人向けに書いておきます。

Flutterとは、googleが開発したクロスプラットフォーム向け（iOSもAndroidもWebもいけますよ）のモバイルアプリケーションフレームワークです。正確にはGoogleはFlutterのことをこう呼んでます。

Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.

なのでフレームワークという言葉が難しいかもしれませんが、簡単に言うとGoogleが美しいモバイルアプリを作るためにUI（ユーザインタフェース）をたくさん用意してくれてると解釈していただければいいかと思います。

公式のリンクを貼っておきますので詳細はそちらからご覧ください。

まだリリースされたのが2017年と比較的新しいオープンソースのフレームワークとなっております。開発で使用する言語はDart言語というもので、こちらもGoogleが開発したものとなってます。

Javaを触ったことある人は、Javaに似てるって感覚を抱く言語だと思いました。

flutter.dev

dart.dev

どのように勉強したか？

Webエンジニアということもあり、モバイルアプリの開発については一度もしたことなかったので環境構築からおこないました。

ここでは環境構築から実際にFlutter開発まで何を教材にして勉強したのかを紹介します。

環境構築について

環境構築については公式がおすすめです。
（英語だけどコマンド打ったりするだけなので是非チャレンジしてみるといいです）

flutter.dev

インストールの手順はWindows, macOS, Linuxでわかれており、それぞれの環境で下記モバイルアプリが対象となっております。

Windows: Android のみ
macOS: iOS, Android, webの全通り
Linux: AndroidとWeb

英語わからなくて何やったらいいかわからないよってなったら、とりあえずflutterをインストールしたあと

flutter doctor

を実行し、

~/m/cupertino_app ❯❯❯ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, v1.12.13+hotfix.6, on Mac OS X 10.14.5 18F132, locale ja-JP)

[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
[✓] Xcode - develop for iOS and macOS (Xcode 11.3)
[✓] Chrome - develop for the web
[✓] Android Studio (version 3.5)
[✓] VS Code (version 1.40.2)
[✓] Connected device (3 available)

• No issues found!
~/m/cupertino_app ❯❯❯

こんな感じに出力されるリストを順に対応していけば大丈夫です。これはもう全て対応済みの画面になってますが、例えばandroidの準備まだだよって場合は、

[-] Android toolchain - develop for Android devices
    • Android SDK at /Users/obiwan/Library/Android/sdk
    ✗ Android SDK is missing command line tools; download from https://goo.gl/XxQghQ
    • Try re-installing or updating your Android SDK,
      visit https://flutter.dev/setup/#android-setup for detailed instructions.

このように表示されるはずです。表示されるうち、Try re-installing ...を順番にやっていけば終わるはずです。この例だとhttps://flutter.dev/setup/#android-setup for detailed instructionsにvisitしろーーって言ってますね。

エディタの設定は、Android Studio, IntelliJそしてVisual Studio Codeの手順が載っております。私自身はIDEにあまりなれていないのでVS codeの環境設定をおこないました。

Flutter公式ドキュメントのGet Started (上のリンク)は5つの構成になってますが、1のInstall、2のSet up an editorをやれば環境構築はおわりです。あとは動作確認のようなものです。